Overview

Process

Research

Iteration

Refinement

Prototypes

Conclusion

Overview

Problem

Audiobook users have been on rise since the pandemic started. People want to learn more, listen to engaging stories and enrich their lives since they're staying home more.

Audible - Amazons' audiobook application has a lot of issues from it's information architecture, to it's lack explanation for features & difficulty to search for specific audiobooks.

Solution

Reimaging Audible as a new app called 'Bookshelf' fixing all of its previous issues as part of our redesign.

Role & Team Members

Team Lead
Anik Ahmed, Lauren Philips, Victoria Perez

Miro, Figma

August 2020 - November 2020

Timeline

Tools

The Process

1. Research

  • Competitor Analysis
  • Affinity Mapping
  • Jobs To Be Done
  • Personas
  • User Interviews

2. Design Iteration

  • Information Architecture
  • User Flows
  • Sketching
  • Low Fidelity Wireframing

3. Refinement

  • User Feedback
  • Mid Fidelity Wireframing
  • High Fidelity Wireframing
  • Prototyping
  • Lessons Learned

My Responsibilities

My role as our team lead was to supervise the entire project in its entirety.

During the research phase I was in charge of conducting user interviews & analyzing patterns with our user interviews through affinity mapping.

Once we had conducted enough research, we began the design iteration phase. I analyzed Audibles information architecture, then created a information architecture that is more in line with our vision & began to sketch out ideas for the overall design to proceed with low-fidelity wireframing.

The refinement stage was when I started take in user feedback for the high-fidelity wireframe and began prototyping with some of our users.

Research

We had a general idea of what we should change but it wasn't until we conducted research that we had a clear direction. In the end we had decided that we wanted to focus on 3 aspects: Onboarding, Searching, Buying.

Competitive Analysis

We conducted a competitor analysis to see what were competitors were doing differently than Audible & how that can help us in our redesign.

Learnings

  • Scribd has the widest variety of content featuring educational pdfs & books.
  • Audibles' UI is actually the least user friendly & least intuitive
  • Scibd & Kobo both have free trial options while Audible does not.
  • Kobo features their ebook readers as a tie-in product to go along their service
  • Scribd prioritizes a community of readers/listeners with reviews being easily accessible
  • Scribd also has tiers of subscriptions while Audible has a fixed price

User Interviews

Our primary goals for the interviews were to understand what painpoints people had with Audible & how they used the app in their day to day lives.

I was in charge of conducting our User Interviews. Throughout our interviews we had learned that people listened to audiobooks for different reasons, why they liked audiobooks & how their experiences were like when it came to using the apps in general.

Once interviews were done, we proceeded to see what kinds of patterns we could amongst our users to see what users had issues with or what they enjoyed about these audiobook services, through affinity mapping

Personas

Once the interviews were conducted we created 3 different personas based on our interviews, showing the different kind of users & their use cases when they would use audiobooks.

For example, 'Bookworm Becca' is a studious type who uses audiobooks more often than the average user because she would use audiobooks to educate herself & listen to longer books. Her usage & behavior is much different compared to a new user.

Design Iteration

Creating & Comparing Information Architecture

We needed to map out the current architecture of Audible to uncover problems beneath the surface.

From what my team found was that much of Audibles' architecture revolved around outside webpage links & redundant information that can make searching a hassle. Below are some of our findings;

  • Multiple ways of searching for audiobooks
  • 'News' isn't actually a list of publications but a links to social media
  • No real onboarding for new users
  • 'Discover' page is outside webpage links to other services

We took inspiration from 2 major streaming applications in Spotify & Netflix for our designs & sought to understand how their architecture worked within their applications as a way guide us on our own designs

The new architecture we came up took away unnecessary bloat to make navigating the app simpler/more familiar. so we tried to focus on 2 different pathways; Existing users & New users

User Flows

Our user flows were based upon our personas & new information architecture. Each of our personas had a unique reason why they're using Audiobooks which allowed for different paths on using the app.

Refinement

User Feedback & Iteration

Once we were done creating our lower fidelity wireframe, we asked a few of our interviewees what they had thought about the wireframe. We also asked our instructors for feedback as well, in order to improve our design.

  • For our onboarding, we should add a free trial option to go alongside each subscription type
  • We added pagination dots instead of using a loading screen for onboarding.
  • For our home screen, we redesigned some artifacts in order to have less confusion going on to what our users were looking at.
  • Adding a country select screen to be aware that not everyone is from the U.S
  • We also learned that when buying a book, our users would've liked a confirmation screen, telling them they bought it.
  • Change the 'profile select' screen to match something more familiar
  • Get rid of the tool tip because some things are self explanatory

Mid Fidelity

Our Mid-Fidelity came back stronger than our lower Fidelity but it lacked the polish of a higher fidelity wireframe.

Overall this design was praised for being easy to follow as well as being more 'friendly' in terms of its onboarding & searching features. However once we consulted with our instructors for a expert opinion, we realized that having a unified design system would be beneficial to us in terms of designing the interface.

High Fidelity

With our mid-fidelity being done, we didn't have enough time expand our vision for our high-fidelity concept. That being said, we decided to fully design a conceptual model as if it was a real app. I have to say, I'm proud of how this all turned out.

Prototyping

Onboarding for a New User in order to give a better understanding of features. It is smooth and friendlier to new users

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

Buying a book in the kids section with a credit to show off the buying system

Lessons Learned

Strategy

​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
  • Accessibility options for dyslexia​
  • Narration selection

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.

Personal Notes

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.

​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.

The styling parameters can be twe