bookshelf-header.jpg

Overview

Problem

The original problem was to redesign the audible app. which had a lot of issues with its layout, user interface & general usability being too complex. Users would be confused about how the search feature worked, lack of individual profile support, or how some features were not explained to new users

Solution

So with these problems, I & my team decided to fix Audible's problem while doing it better than audible itself & thus we created 'Bookshelf'. 

Main Painpoints:

  • Onboarding for New Users

  • Make Information Architecture Easy

  • Profile Support

Timeframe

10 weeks

My Role

  • Team Lead

  • UX Researcher

  • UI Designer

Tools

  • Figma

  • Miro

The Process

Research​

Design Iteration

Design Development

Refinement

  • Contextualization

  • Competitor Analysis

  • Interviews

  • Affinity Mapping

  • Key Takeaways

  • Personas

  • Journey Mapping

  • Brainstorming solutions

  • MVP

  • Conceptualization

  • Information Architecture

  • User Flow

  • Wireframing

  • Visual Design Decisions

  • Low Fidelity Prototype

  • Iteration/changes

  • Mid Fidelity Prototype

  • Iteration/changes

  • High Fidelity Prototype

  • Interactive Prototype

  • Final Conclusions

Prototyping

Objective

Outcome

Creating a simple & more holistic experience for audiobook users communicating specific features in a digestible manner.

A re-designed product that is more communicative about its features whilst having a more self-explanatory user interface for it's users.

Research

  • Too much white space

  • Adverts for another service 

  • Visual design is very muted

  • The hamburger menu is confusing

  • The menu has a drop-down menu as well with even more links.

  • The search function & browse function are essentially the same.

  • The search icon is in 4 different places while providing no consistency

  • 'My library' search itself is confusing with its different ways of filtering books.

  • One of the webpages which do not conform to the dark theme

  • Need an Amazon account to sign up

  • Lack of onboarding experience describing the menus or credit features  

  • 6/8 of these pages are actually web page links that do not conform to the dark theme in use

Contextualization

Research

Competitor Analysis

Research

Interviews

  • 12 Interviewees

    • Casual Listeners

    • Bookworms

    • Newbies

Hypothesis

People who listen to Audiobooks want to have the convenience of picking up where they left off anytime be able to multi-task and use audio as a way to immerse themselves in the book they are listening to.​

Points of Emphasis

  1. Were they audiobook users already or are they, new users. 

  2. How do using audiobooks make them feel emotional?

  3. What specific occasions were they using audiobooks or even physical books & why?

What They Had To Say!

"I want to feel like I'm a smart person"

"I have difficulty browsing kindle unlimited audible supported books. I have kindle unlimited right now and not an audible subscription and it's difficult to find which books is supported. The two services don't seem to mesh well"​

"I like to listen to audiobooks before bed. It's soothing"

"My father was a professor for a uni in Canada so he encouraged all of us to read. Guess it stuck!"

"I know if i'm going to like the book within 3 minutes"

"I like to spend my time like this"

Affinity Mapping

I and my team color-coded each of our participants and began to put our notes in sticky note form & began to find out if they were any patterns amongst them to aid us in our project.

Once we had finished that, we went onto the pattern-seeking phase. The challenge of this part is thinking up different kinds of themes for the patterns we found & seeing if there was a specific link to each of them. 

Design Iteration

Personas

With all of the research we've done, we decided it was time to go into the design iteration phase. We decided to create a few different personas to help us map out whatever different user flows that we should focus upon. 

We had a few different challenges that we had encountered:

 

  1. Two of our created personas were too 'similar' so we had to decide what to do with them.

  2. We realized that we did not account for a few different use cases and so we had to reiterate our proto personas.

Below are the fruits of our labor & thus we have created 3 different personas representing different use cases & essentially - users.

Design Iteration

Journey Mapping

Below is an example of one of our persona's journey of her usual day and when she would use the audiobook application. This gave us insight into how these fictionalized people would act in a real setting.

Design Iteration

So me and my team have mapped out our personas journey but now we had to take a look at what are some of the problems that our interviewees had mentioned or any problems we think may be relevant and how can we solve those problems? 

Essentially we took a page out of the 'Jobs To Be Done' model & thus we mapped out in tiers of problems we may face and potential solutions we have thought of.

Brainstorming Solutions

Design Iteration

Conceptualization

When conceptualization began we listed the pain-points that we found with all of our research and decided to map out our goals with all of these pain-points. This also gave us insight as to how our MVP would focus upon.

Design Development

Information Architecture

I and my team analyzed Audible's current information architecture and looked at what was wrong then create a simpler information architecture for our own application, whilst using all of the research that we had acquired to aid us in this exercise. 

Audible's Original IA

Audible IA- Before.jpg

Newly Designed IA

Audible - App IA (1).jpg

Design Development

User Flows

Prototyping

Search + Home for Kids (Farrod)

onboarding-low-fidelity.jpg

Buying & Switching between Audiobooks (Becca)

New User Onboarding (Zion)

low-fidelity-kids.jpg

Low-Fidelity

These are the 1st real iterations of our low fidelity wireframes. It's not perfect at all but we did keep on iterating on what we had designed. 

We had some design challenges that we had faced such as 

  • Not having a unified design system

  • Rethinking some of our user flows 

    • Onboarding needs to be simpler​

  • Understanding basic design principles like margin/padding

low-fidelity- new-user.jpg

Prototyping

Mid-Fidelity

Search + Home Kids(Farrod)

becca-mid-fidelity.jpg

Switching Between Audiobooks (Becca)

mid-fidelity-buying-audiobook.jpg

New User Onboarding (Zion)

mid-fidelity-onboarding.jpg

These are the 2nd iterations of our app. We essentially tried to streamline our app by decreasing the number of screens we've had for each flow. After this iteration, we did ask some of our participants to give us feedback about the overall design.

We had some design challenges that we had faced such as 

  • Not having a unified design system still.

  • Rethinking some of our user flows. 

    • Taking out the tooltips on the New User flow

    • Adding a free trial & changing payment screen

    • The book payment screen for the Becca flow

    • Have some differentiation with the Kids profile flow

 

Overall we are nearing our final iteration and a lot of our design language is solidified now.

Prototyping

High-Fidelity

Kids Profile (Farrod)

Switching Between Audiobooks (Becca)

Onboarding Experience for New Users(Zion)

These are the Final iterations of our app. We believe that the addition of colors and animations have helped our application's usability & has made some things easier.

We had some design challenges that we had fixed such as 

  • Having a unified design system.

  • Fixing some of the problems by having animations and colors.

    • The onboarding progress bar can be clickable ​

    • Less copy

    • The payment for a book is easier & quicker

    • More depth in the app in terms of features 

Overall the app has been finished but now it's time to see how it looks in motion.

high-fidelity-kids.jpg
high-fidelity-onboarding.jpg
high-fidelity-switching.jpg

Buying a book in the kids section with a credit

An Onboarding Experience exists! It is smooth and friendlier to new users

Searching and sampling a book then going back to a book you recently played.

What Have I Learned?

For myself personally, it was the first time that I had to lead people throughout the UX process using my previous knowledge as a way to make concepts clearer for my teammates. It was an honor to help them learn and encourage them to push the limits of their capabilities. 

I had previous knowledge and experience, so this opportunity allowed me to increase my own foundational knowledge by reiterating what I've learned beforehand while also finding new resources that were not known to me. 

Leading two people that were completely new to UX gave me more confidence in my own abilities.

Personal Notes

For myself, I had wanted to stick with the core pain points and keep them as the primary focus for me and my team. 

  • Fixing the information architecture

  • Making a better onboarding experience

  • Making the app more modern for less confusion

It is easier said than done and keeping my cohorts in check wasn't too difficult but everyone had great ideas, we all did. However, we just didn't have the bandwidth to implement them or to create a plausible/realistic product. 

Ideas are great, creativity is fantastic but the strategy itself is where everything begins to take shape. As creative director Stephen Gates puts it "strategy gives us answers, it gives us the walls to the problem that let us figure out what's the opportunity and the insight".  

 

He's right, having a clearly defined strategy let us not lose sight of our overall goals but made us ask ourselves "how do we solve the problems that we want to solve?"

Managing Time Constraints 

There were a lot of great ideas but not enough time to implement them unfortunately and thus we had to scrap a lot of our ideas such as;

  • Community Feed/Discussion

  • Reviews/Feedback

  • Subtitles for audiobooks

  • A more diverse filtering system

  • Accessibility options for dyslexia

I do think that I and my team were able to create a product that streamlined the entire process that audible had failed to do for people and make it less confusing for people to navigate through.

Strategy

Thank You For Reading! 

©2020 by Anik Ahmed. 

  • LinkedIn
  • Instagram