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
Anik Ahmed, Lauren Philips, Victoria Perez
Timeline
Miro, Figma
Tools
August 2020 - November 2020
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.
Sketching Out Design Ideas
With our information architecture laid out & our research being nearly complete, we started sketching out our ideas for what the interface of the application would look like.
Low Fidelity Wireframe
Below is a small sample of our low fidelity wireframe featuring our 'Home', 'Profile', & 'Categorical Search' pages. We also have our onboarding process on display.
Refinement
User Feedback & Iteration
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
.gif)
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.
