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.
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.
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.
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.
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:
-
Easily re-examining the content.
-
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.
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.
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.
⭐️
⭐️
⭐️
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.
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.
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.
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
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.
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
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.
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.
Primary
0D3D5C
EBF5FC
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.
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.
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
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.
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.
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.
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.
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.
