PROJECT

Designing a highly interactive and personalised audiobook app

Designing a highly interactive, personalised audiobook application that provides users with more utility than a book.

View the prototype >>
Year

Apr–Jul 2020

(12 Week Sprint)

CLIENT

Personal

Deliverables

Solution (Website)

Solution (App)

Research Artefacts

Concept & Mockup

ROLE

UX/UI Design

UX Design Lead

UX Research & Synthesis

Workshop Facilitator

User Flow

Information Architecture

Branding

UX Copywriting

Prototyping & Testing

Tools

Adobe XD

Figma

Photoshop

Miro

Zoom

CASE STUDY

Designing a highly interactive and personalised audiobook app experience

The challenge

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.

Understanding the problem

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:

  1. that audiobook users listen to audiobooks for the same reason(s) as reading a book;
  2. that users will utilise additional utility and features if provided; and
  3. that users are dissatisfied with the current level of personalisation and connectedness.

Researching the problem

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:

  1. understand user motivations for listening to audiobooks;
  2. uncover the unmet needs of the user;
  3. learn more about user performance and functionality needs; and
  4. determine user frustrations and pain points.

Survey Demographics

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.

Empathising with users

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.

Empathy Map Snapshot

Key findings

  • 95% of survey respondents said that they listened to audiobooks while doing something else, such as, driving, commuting, cleaning, cooking, exercising, gardening and crafting.
  • Motivations for listening (and reading) were largely one of two things — education/learning and entertainment.
  • When asked if they agreed or disagreed with the following statement — “I am able to easily discover new books to listen to” — 42.4% of survey respondents said that they disagreed or were indifferent.
  • Survey respondents said that sleep, skip back/fwd, and recommendations added most to their experience.
  • 76.7% of survey respondents said one of the ways they found new things to listen to, was through family and friends.
  • When asked “in your opinion, what are the advantages of a book over an audiobook?” survey respondents typically said that they enjoyed the connection, absorption and focus that a book provides. They also liked the ability to highlight, bookmark and take notes. This was backed up during the interviews. Interviewees noted being ‘absorbed’ by a book, which was contrasted with a lack of immersion and content retention while listening.
  • When asked “what could be improved to make your listening experience better?”  survey respondents predominately asked for better recommendations.

Personas

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.

James' Customer Journey

What I identified as James’ overarching pain points were:

  1. The app was not special, and he did not feel special.
  2. Loss of focus and reduced content retention.
  3. The experience is not tailored or personalised.

Everything begins with an idea

Once I had identified the overarching pain points affecting users, I used these as the basis for reframing the problem statement into opportunities.

The opportunities

  1. How might we engage users so that they feel connected.
  2. How might we improve the experience so that users are able to focus and retain more information.
  3. How might we provide personalisation so that users have more control over their experience.

Ideation

To address the HMW questions I, along with one participant, used crazy eights and brain writing techniques to ideate possible solutions.

Minimum Viable Product

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.

MVP Matrix

The ideas I moved forward with were a combination of ‘quick wins’ and some ‘consideration features’ to hit the original design brief challenge.

  1. For connectedness: a social feed that connects users, displays updates, notification and user activity.
  2. Focus and retention: to improve a user's experience, enabling better focus and information retention through gamification.
  3. For personalisation and control: a bookmarks collection feature that provides a user with a way to group bookmarks, not only by book — but by collection; allowing a user to group by specific topics they’re interested in.

Information Architecture

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.

Final Information Architecture

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.

Designing for personalisation and connectedness

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:

Low-Fi Deisgn Example

The design

Below is a snapshot of the first version of the high fidelity design.

Hi-Fi Design Version One

A visual style

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.

User testing

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.

User Testing Tasks, Observations & Recommendations

The design solution

View the final high fidelity prototype or watch the prototype video below.

Back to homepage >>