Auxiliary

(UX/UI Design)

Auxiliary is a mobile audiobook app designed to allow listeners to learn more from the content they consume through highly personalized interactions.

Case Study DUO screens.png

Role

UX Researcher, Design Strategy, UX/UI Designer

Project Type

Academic

Timeline

10 Weeks

Tools

Figma, InVision, Illustrator, Marvel

PROJECT OVERVIEW

What is Auxiliary?

Auxiliary by definition means, "providing supplementary or additional help and support".

 

Auxiliary is an audiobook platform designed for listeners looking to interact with their content more than ever before.

Users can now directly quote the audio content, take notes, and share their learnings all with a single tap. 

IDENTIFYING THE PROBLEM SPACE

Why audiobooks?

Many individuals today simply don’t have the time or patience to sit and read. Audiobooks provide a format that can keep up with the speed of today’s society, giving listeners the ability to digest content akin to listening to music - hands free and passively. 

 

Despite their convenience, users still find the medium extremely limited when compared to a traditional print book, especially when considering actual knowledge retention.

OBJECTIVE

What's the goal?

Design a digital solution that helps audiobook listeners interact with their books on a deeper level in order to learn more from the content they consume.

DESIGN PROCESS

The Double Diamond

In order to organize my process, I implemented both the Double Diamond and Design Thinking frameworks.

This methodology promoted convergent and divergent thinking, allowing ideas to be widely explored before taking any focused action. These four stages established and guided my creative process.

Auxliary Double Diamond Approach_edited.jpg

Discover

EXPLORING THE PROBLEM SPACE

The untapped potential of audiobooks

The fastest growing digital media category in 2020 was digital audio subscription services- which rocketed 40% to 
$30.98 billion worldwide. 🚀

Key Statistics

  • In 2020, audiobook sales increased by 16%.  📊
     

  • In 2019 for the first time, audiobook sales eclipsed ebook sales by over $200 million.  💰
     

  • The US National Library of Medicine estimates nearly 30% of the population are predominantly auditory learners. 👂🏼

Despite their recent popularity, users currently can’t interact with audiobooks the same way they can with traditional print books. There is a severe lack of utility with audiobooks, which to me suggested an opportunity for design intervention. 

SECONDARY RESEARCH

Empathizing with auditory learners

Auditory learning is a learning style in which an individual best retains information through the act of listening.

Benefits 👍🏼

 

  • Auditory learning aids in comprehension and imagery.
     

  • As human beings, oral storytelling has been the basis of our communication far before the creation of the written word.


 

  • Our brains are wired to comprehend deeper imagery when listening, as we derive a lot more information from intonation and inflections of a speaker’s voice.

Setbacks 👎🏼

  • Solely relying on auditory learning can lead to the detriment of reading and written comprehension.

 

  • Users are denied the visual orientation clues they would utilize when reading from print.
    The sequence of text is important in helping a user build sense of the narrative arc.

     

  • 10 - 15% of eye movements are regressive (they double-back in order to bolster comprehension).

FOCUSING THE AREA OF RESEARCH

Current constraints of audiobooks

Investigating the potential constraints of audiobooks, and how that may hinder knowledge retention.

1. Multitasking 🚶🏽

  • Listeners proclaim the convenience to passively digest content while on the move is a major influence as to why they enjoy this medium.

 

  • However, this exact benefit may perhaps also be a barrier in unlocking more learning outcomes.

 

  • Listeners currently don’t have any interactive incentive that require them to critically listen to the content.

2. Annotating ✍🏼

  • Listeners aren’t able to highlight or underline audio content the way they would written text, thereby perhaps impeding their ability to retain information.

 

  • Additionally, printed texts may include visual cues of crucial content such as bolded words or 

boxed info-bites. These annotations aren’t easily emphasized in audiobooks.

3. Re-examining Content 👀

  • If a listener zones out, the ability to backtrack efficiently
    isn’t as intuitive as the way you would when you’re reading. There is no clear visual feedback for users to track.

 

  • Similarly, unlike printed books, there is a lack of ability to dog-ear audio content to refer back to.

USER INTERVIEWS & INSIGHTS

Understanding users motivations and frustrations

I next interviewed 5 active audiobook listeners. It was my goal to better understand the behaviours and challenges they faced and validate if my assumptions about the constraints of audiobooks were true.

Were individuals happy with their current listening experience? Was knowledge retention even an issue?

Data points were extracted from the interviews, then categorized as either
motivations, behaviours or pain points.

When grouping the insights,
3 key themes emerged:

1. Personalization 🧐

  • Participants corroborated  that a lack of personalization in audiobook consumption was a barrier in knowledge retention.
     

  • An inability to interact with the content to easily re-examine and annotate, proved to be a unanimous pain point.

2. Convenience 😏

  • Individuals all confirmed the significance of convenience and multitasking when learning from this medium.

 

  • As a behavioural trait, users all chose audiobooks due to reasons such as portability, and being too busy to sit and read.

3. Struggle To Retain Information 🤔

  • All participants acknowledged the challenge of retaining information when listening to audiobooks.

 

  • While the benefits of convenience outweighed the cons of limited interaction, users all shared frustrations and a desire of wanting to learn more through this medium.

Define

PRIMARY PERSONA

Who am I designing for?

With a better understanding of an audiobook listener’s current experience, I created a persona directly inspired by the insights I gained from my user research in order to build deeper empathy for my users and guide my design decisions. 

Alex Kane Persona.png

EXPERIENCE MAP

Identifying opportunity

In order to further build empathy for my users, I created a visualization of an entire end-to-end experience that our user typically goes through in order to accomplish their goal. This then allowed me to identify opportunities in which to focus my design solution.

Alex Kane Experience Map.png

I decided to focus on the opportunity of Recovering and Annotating content, as user interviews indicated this to be the most recurring pain point listeners griped out. This was also the tipping point in the listening process, where most users felt a decline in their overall user experience.

HOW MIGHT WE STATEMENT

Iterating the design challenge

Influenced by my research insights, I iterated my design challenge in order to better meet the needs of my target user.

HMW help audiobook listeners better personalize their listening experiences so they can learn more through this medium?

Develop

TASK SELECTION

What must this app do?

Having identified opportunities from my persona's current experience, I created my products core value proposition to help determine the key functionalities of what should be included within my mobile application.

Core Value Proposition

Through personalization, enhance an audiobook listener’s ability to interact and learn from this medium.

User Stories & Core Epic

Based on the refined HMW statement and goals of my persona Alex, I then created a set of 30 user stories under 3 distinct epics in order to help guide the functionality of my product.


Ultimately, I chose to focus my efforts on the Personalization epic, as it directly addressed my HMW statement

Primary Task

I made my primary task "Adding a Note", as this was the single most recurring pain point all interview participants griped about. 


Subtasks

I also incorporated other subtasks such as:

  1. Easily re-examining the content.

  2. Quickly sharing quotes & associated notes.


These were also pain points my persona Alex faced, and would have the most impact on the overall listening experience.

UserStories512.png

TASK FLOW

How will the app do it?

Based on these selected tasks, I created a task flow diagram situated in the same scenario we found my persona originally in.

This time, we will see the specific actions Alex would take as he moves through my digital solution in order to re-examine his content, add a note to what he is currently listening to, and then share it with a friend.

Task Flow Diagram.png

IDEATION

Exploratory sketches - Crazy 8's

With the chosen task in mind, I began ideating by utilizing the Crazy 8's method in order to generate a wide variety of potential solutions.

 

Starred ideas were selected to further develop as a solution sketch as they showcased the greatest potential to solve my design challenge.

IMG_1806_edited.jpg

⭐️

⭐️

⭐️

CONCEPT SELECTION

Solution sketching

From my interviews, I learned audiobook listeners want to have the books they are listening to be the focus. By keeping the UI minimal, more attention can be placed on the key functions and the audiobooks themselves.

 

Taking inspiration from various audio-based apps such as Spotify, Audible, Apple Music, and Apple Podcasts, I began sketching my solution ideas and testing them internally using the Marvel prototyping tool until user feedback helped me settle on a final concept. 

Solution Sketch.png

MID FIDELITY WIREFRAME

Translating sketches into prototype

I next transformed my sketches into a digital prototype on Figma. Using appropriate interactions and animations, I prepared my prototype for formal user testing.

Prototype 1 Wireframe.png

Deliver

USER TESTING

Identifying and solving usability issues

As part of the design process, I conducted 2 rounds of usability tests with 10 different participants in order to gain real-time feedback that would guide me in designing an optimal user experience. Based on my primary persona Alex's experience: 

 

Participants were to imagine they are out on a walk listening to an audiobook.

Inspired by what they just heard, they must perform a series of tasks in order to make a quick note on the content they were listening to and share it with a friend.

Tasks

1. Start playing their audiobook.

2. Re-examine the content they just heard.

3. Add a note about what they are listening to.

4. Share the note with a friend.

USER TESTING ROUND 1

After synthesizing the results of the testing session and collecting all my observations, I mapped out all usability issues and areas of improvement on a Prioritization Matrix in order to identify the severity of the issues, and how I intended to further improve the design based on these findings.

Usability Testing Round 1.png
User Testing Results 1.png

Results proved to be mostly positive, with users completing most tasks. However, barring a few cosmetic concerns, there was noticeable confusion around the tasks of adding and sharing the notes.

Revised Key Screens

37. Revised Key Screens on Prototype #2.png
38. Revised Key Screens on Prototype #2.png

USER TESTING ROUND 2

After making the improvements to all the screens, I created a second prototype and once again tested it with 5 new users. This process allowed me to gauge if the changes made were beneficial to the user experience, as well as identify if there were any issues overlooked from the first round.

Usability Test Round 2.png
42. User Test Results Round2.png

For the second round of testing, results were significantly more positive with the final tasks of adding and sharing a note, with nearly all users able to complete the tasks. However, the observations I made during this round of testing indicated that the note screen in particular would require iteration once again in order to truly optimize the user experience.

Revised Key Screens

44. Revised Key Screens on Prototype #2.png

FINAL WIREFLOW

After prioritizing the usability issues from 2 rounds of user testing, and making overall refinements to the required screens, this was my final wireflow which I would next design in high-fidelity.

Prototype 3 Wireframe.png

Visual Identity

BRAND VALUES

Setting the mood

I began the process of creating my brand’s visual identity by tying it back to my user interviews and identifying recurring keywords that met the needs of my users.

 

Inspired by these keywords, I created a visual identity mood board and extracted my brand colours while making sure to adhering to accessibility guidelines.

200825819.png
photo-1600294037761-f9ef414e1036.jpeg
200826746.png
Screen Shot 2021-07-29 at 3.25.56 PM.png

Primary

0D3D5C

EBF5FC

200824045.png

More calm than chaotic.

More clear than convoluted.

More focused than distracting.

More minimalist than dense.

More simple than elaborate. 

More modern than old fashioned.

More intuitive than complicated.



More welcoming than exclusive.
 

200823885.png
200826747.png
photo-1510172951991-856a654063f9.jpeg
200824590.png
200824044.png
photo-1506180823-4046e8fa6e08.jpeg
photo-1585605109191-03cc36051fcb.jpeg

Secondary

FCFEFF

B7462B

F3937C

BRAND IDENTITY

Shaping the brand

Keeping my users in mind, I then began finalizing my typography, wordmark, and brand icon, while still making sure to adhere to accessibility guidelines. 

Primary Typeface

Montserrat

Aa

Aa

Regular        Bold

Montserrat was the primary typeface used for Auxiliary, utilized in the wordmark as well as all headers within the app. 

 

I decided to go with the sans serif typeface as it had an elegant, clean look to it which complimented the overall mood board. I wanted clean typography that wouldn't distract my users when performing tasks. 

Typography.png

Wordmark

After exploring various typefaces and selecting Montserrat,

I then began adjusting the wordmark to give it some character.

I experimented with kerning, tracking, as well as converting the wordmark to a vector in order to adjust elements further.

I ultimately selected my final iteration as I felt like less was more when it came to the design.

By keeping things simple, and one colour it felt both timeless and modern at the same time. 

Secondary Typeface

SF Compact Text

SF Compact Text was the secondary typeface used for Auxiliary, utilized in the body copy and all mini CTA's. 

 

Since Auxiliary was designed native to iOS, I wanted to ensure users recognized a familiar typeface and thereby built trust with the brand. Since my app doesn't utilize much body text unless when taking notes- I wanted the copy to be as clear as possible with no distracting typography.

Aa

Aa

Regular        Bold

Brand Icon

Brand Logo.png

Since my wordmark was relatively minimal, I wanted a recognizable symbol. Users may not immediately think “Auxiliary” is an audiobook app so the icon had to convey that message clearly. 

After a series of exploratory sketches, I liked the ideas that resembled a book with a play button in it. This gives the user an immediate idea of what to expect from the app.

 

I translated these ideas to digital mock ups and tweaked them further. ultimately selecting my final iteration as I felt it matched my overall brand the best. 

HIGH - FIDELITY DESIGN

Brand and colour injection

With the visual identity of my brand sufficiently developed, I began applying colour, imagery, and branding elements into my wareframes and refined my prototype. After multiple colour injection tests and iterations, I arrived at my final design.


With Auxiliary, users can now directly quote their audio content, take notes, and share their learnings all with a single tap.

ALLCLAYALLDAYfinal.png

RESPONSIVE MARKETING SITE

Communicating the key value proposition

In order to connect with my target audience, I created a responsive marketing website for desktop and mobile viewing. The site included product features, video tutorials, subscription sign ups, and user reviews. In order to meet both business and user needs, the website also incorporated strategic call to action prompts that offered visitors to the site value for their engagement - these included a free trial, a free audiobook for subscribers who immediately join, and a newsletter sign up for Android users so they become the first to know when Auxiliary is available on Android.

FINALDESKTOPLAYOUT.png
Screen Shot 2021-08-18 at 2.11.00 PM.png

MULTI PLATFORM DESIGN

Providing my users additional utility

As a behavioural trait, my users are often multitasking when listening to audiobooks. As seen in the experience map, this means any interaction with the audiobook is often a disruptive process that requires taking their mobile device out of their pocket or bag.

 

Given the context of when they listen to audiobooks, I designed Auxiliary on WatchOS as well. Users can now control the playback and perform voice commands via the Apple Watch, thereby never needing to remove their phone from their pocket. 

AppleWatch5.png

Conclusion

DESIGN IMPACT & FUTURE THINKING

What's next for Auxiliary?

Auxiliary is a step in the right direction towards unlocking the full potential of audiobooks as a real resource for learning. For immediate development, working on ways to customize the recall features for my users would be highly beneficial. This however would once again need to be validated first through research and testing. 
 

Long term however, as the digital audio subscription market continues to rise, so does Natural Language Processing  and Automatic Speech Recognition technology. Audio and Voice UX go hand-in-hand. 

 

After sufficient research and development, I would hope to eventually make Auxiliary transition to a voice-first interaction interface, as this would be more inclusive accessibility-wise, more efficient, and even more interactive for my users. 

FURTHER CONTEMPLATION

The Tarot Cards of Tech

Inspired by the Tarot Cards of Tech by Artefact, I cerebrated the different ways Auxiliary could impact society as whole. 
I chose the following card.

The Service Dog.png

One potential could be if Auxiliary were to dive deeper into the education/EduTech space, as the app could prove particularly useful for language learning. By including additional interactive exercises and incorporating "Auxiliary Original" language programs, users would be able to bolster both written and verbal comprehension through a unique, storytelling curriculum. 

Additionally, this could be particularly helpful for communities in third-world countries where limited technology is used to boost literacy. For example, in India where impoverished communities are now getting access to basic smartphones with tailored course material installed directly on the phone.

FINAL THOUGHTS

Key learnings

These 10 weeks reinforced all the core fundamentals of UX Design. I was able to experience the entire end-to-end process of delivering a digital product while utilizing agile design methods. By incorporating the product thinking mindset, I was able to approach problem solving in a much more user-centric way. Being a highly observant and empathic individual, I noticed many key takeaways. 

​1. Embrace The Problem, Not The Solution. 🙇🏽
More than just aesthetics, this project really made me expand on my ability to problem solve when trying to design the right features for the right people. By focusing more attention on the obstacles my users faced, I found the most room for innovation.



2. Users Inform The Design.  👩🏻
After weeks of intensive research, it is easy to assume you have all the answers. Yet, the design elements I'm most proud of were inspired directly from my users. By asking the right questions, and constantly iterating and testing my designs, I was able to reach a solution I would have never otherwise conceived. User feedback was the basis of my design rationale. 


3. The Value of Observation.  👁
During user testing, I learned that sometimes users are simply not able to articulate their concerns. By building empathy, and observing individuals without bias, I gained a lot of insights that would have otherwise gone unnoticed. Aspects like body language, facial reactions, eye movements, all provided invaluable feedback. 


4. Don't Get Attached To Ideas  🧲
After so much iterating and redesigning, I really learned how to not get attached to any one idea. At first this was challenging, because I just wanted my designs to “work”. But after getting feedback from user testing, I got vital insights from my users perspective which resulted in a much more user-centred design solution.