Designing a highly interactive, personalised audiobook application that provides users with more utility than a book.
Apr–Jul 2020
(12 Week Sprint)
Personal
Solution (Website)
Solution (App)
Research Artefacts
Concept & Mockup
UX/UI Design
UX Design Lead
UX Research & Synthesis
Workshop Facilitator
User Flow
Information Architecture
Branding
UX Copywriting
Prototyping & Testing
Adobe XD
Figma
Photoshop
Miro
Zoom
The brief was to design an audiobook mobile app that is highly personal, highly interactive, and with the ability to bring even more utility to the user than a book ever could. My role as Lead Designer was to research, analyse, ideate and design the audiobook app from start to finish.
I began by reworking the brief into a problem statement that would become the foundation for my entire design process.
Audible listeners are frustrated by the limitations of the audiobook app and are lacking a sense of personalisation and connection — as they get when reading a book.
This statement made several assumptions that, until research was conducted, I would not be able to validate or invalidate.
The assumptions were:
At the outset of the project, I had no understanding of who the audiobook user was or what they needed — so I conducted research to find out.
Surveying 33 people using Google Forms, conducting two lengthy interviews and a competitive analysis, my goals were to:
73.3% Of survey respondents are between the ages of 25-44 years old, 63.3% have a Bachelors Degree, 20% have a Masters Degree, 70% have no kids and 46.7% are in full-time employment. Both interviewees are within the 25-44 year old age bracket, have a Masters Degree, and are working in full-time employment.
To synthesize the research, I created an affinity map, using it to develop an empathy map that would help me understand the user’s needs and wants, pain points and frustrations.
From the research, I identified three key archetypes — the career-focused, the creative and the busy self-employed; and based on these, I developed three personas.
I then created James’ Journey Map through a typical audiobook app to identify the points along his journey where, through better design, I could improve his experience.
What I identified as James’ overarching pain points were:
Once I had identified the overarching pain points affecting users, I used these as the basis for reframing the problem statement into opportunities.
To address the HMW questions I, along with one participant, used crazy eights and brain writing techniques to ideate possible solutions.
To assess and prioritise the ideated solutions, I added each to an MVP matrix to identify which ideas to move forward with based on my user's needs and goals.
The ideas I moved forward with were a combination of ‘quick wins’ and some ‘consideration features’ to hit the original design brief challenge.
After finishing the ideation process, I moved onto the information architecture (“IA”) to understand how all the ideas would integrate together.
The IA was reworked several times during the design process. As wireframing and prototyping took place there became a need for additional sections. Additionally, I conducted a closed card sort of the original IA (using Optimal Workshop), which validated most of the structure created, with some minor changes.
The flows that I will focus on within this case study and that will address the HMW questions are, the Purchase flow, My Feed flow (originally named ‘Activity’), AudiQuiz flow (originally named ‘AudiCOINS’) and the Bookmark Collections flow.
During the discover and define phases of the design process, I was able to understand and empathise with the audiobook app user, enabling a real understanding of the pain points and frustrations experienced, which needed to be addressed.
I began with pen-to-paper sketches and after several iterations, I was able to design flows that would improve the user's overall experience and help to provide for better learning, more personalisation and connectedness.
The pen-to-paper sketches were transformed into low fidelity designs using Adobe XD.
Below is an example of the low fidelity design I developed:
Below is a snapshot of the first version of the high fidelity design.
Orange has been used minimally throughout the design to highlight clickable areas and other things of note on the screen. Light and dark colour, as well as font size, are used to display visual hierarchy and help guide the user’s eye. I selected the sans-serif typeface Roboto, as it’s friendly and very readable — which is important for my user.
To test the functionality of the high fidelity prototype, I wrote a series of tasks and questions for users to answer and complete while I observed their actions.
An example of the question, tasks, observations and recommendations can be seen below. I also received additional feedback from my design mentor. Each recommendation was then actioned to produce the final version of the design solution.
View the final high fidelity prototype or watch the prototype video below.