Team: Myself and two other designers
Duration: One Month
My Role: Research, Design, Testing, Prototyping
Tools: Figma, Miro, Google Forms
CREATING AN AUDIOBOOK APP FOR PERSONAL DEVELOPMENT
Retain is an audiobook companion app designed to make learning through audiobooks easier. The app makes it efficient to collect information by allowing the user to bookmark helpful information, create written and spoken notes, and transcribe pertinent sections for later reference.
PROJECT OVERVIEW
This project was a team project during my time in the UX design course at Dev Mountain. We were given the initial prompt:
“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
I was on a team of three people for this project. We all conducted user research, sketched and wireframed each step of the user journey, and conducted user tests. Additionally, we each did UI design and prototyped particular sections of the high-fidelity prototype. I was specifically in charge of designing the bookmarks and notes sections of the app, the bookshelf, and the slide-out menus.
THE PROCESS
IT STARTED WITH RESEARCH
As an avid audiobook listener, I came into this project with solid ideas of where I thought this app would go based on my personal preferences. However, once we started with our user research, I quickly learned that there was an essential function missing from the current audiobook options on the market.
We started our research in two ways - First with a survey using Google Forms and then through user interviews conducted by myself and another team member. Through this process, two key factors became apparent:
• Most people multitask when listening to audiobooks - the top activities include:
Driving (86% of responses)
Household Chores (62% of responses)
Exercising (47% of responses)
Household Chores (62% of responses)
Exercising (47% of responses)
• The most recurring pain point we found was the inability to make notes or highlight certain sections of the book to refer back to later
THIS LED US TO OUR PROBLEM STATEMENT
Many people listen to audiobooks to expand their knowledge on a particular topic, but it isn’t easy to retain information in an audio format. Without a physical book to mark pages and jot notes, information is hard to find later. However, people lead busy lives, and it is hard to find time to sit down and read.
NEXT STEPS
We then created a persona since we now understood our user and had a problem to solve. This allowed us to keep focused on our end goal.
With our problem statement and persona in mind, we created a user journey map that acted as a guide for designing the app’s features. We wanted to make sure the focus stayed on capturing information in a straightforward and meaningful way.
ALMOST IMMEDIATELY, WE DECIDED TO PIVOT
Initially, we discussed creating an all-in-one app where a person could peruse and download books to use with our tools. After some discussion with instructors, it became apparent that competing with the apps people already use doesn’t make sense. Instead, we wanted to help people absorb knowledge from their current audiobooks. So we decided to pivot and instead create a companion app that allows users to import books from outside sources, such as audible, into Re•tain so they could utilize our key features.
SO WHAT ARE OUR KEY FEATURES?
You can boil down the most important uses of our app to three main activities:
• Listen to audiobooks
• Record or bookmark specific pieces of data relevant to what you are learning
• Review the data later to best retain the information
• Record or bookmark specific pieces of data relevant to what you are learning
• Review the data later to best retain the information
LET'S BREAK THIS DOWN INTO USER FLOWS
First, you have to be able to listen to your audiobooks.
Since we are a companion app, we do not offer the ability to purchase books. The idea is that the user would need to import a book from an existing library, such as Audible or Apple Books, into their Re•tain library. Once that is complete, it will play like any other audiobook app.
Next, you need a way to bookmark, annotate and reference important information.
This is where we shine. Since the point of the app is to be used while doing other activities like driving or exercising, it needs to be easy and intuitive to make notes.
This is where we shine. Since the point of the app is to be used while doing other activities like driving or exercising, it needs to be easy and intuitive to make notes.
The app offers three ways to bookmark a section of the audiobook:
Finally, you need a way to reference the information later.
You can access your book’s notes from the bookshelf and the play screen. Once you are in the notes section, you can edit your note, go to the spot in the audio where you saved the note, transcribe text from that spot, or export your note.
The export feature is critical here. It is limiting only to reference your notes through the app. There needed to be an easier way to gather the information. Re•tain allows you to export your notes into a text, email, social media post, or print them. You can select individual notes to share or send all of them at once.
TIME FOR WIREFRAMES AND A FIRST-ROUND PROTOTYPE
Focusing on the user flows, we sketched wireframes separately and came back together to compare and discuss our ideas. Finally, we decided which parts of each concept we wanted to implement and then divided the different elements of the app between ourselves to start low-fidelity wireframes and a simple prototype in Figma.
USER TESTING
With our first-round prototype ready, we did user testing to gather feedback for future iterations. I was happily surprised by some of the feedback I received. People were genuinely excited about the app and wished it was available now. The transcribe feature seemed to be the favorite. They loved the idea of capturing a specific quote or passage into a text format that they could then export for later recall.
These are the biggest takeaways from my research:
1. When importing books from an outside app, users wanted to be able to select specific books instead of importing their entire library
2. They wanted to be able to edit their voice notes before saving
3. On the play screen, they wanted larger buttons for notes for easier viewing and access while driving
CREATING A HIGH-FIDELITY PROTOTYPE
We then divided the different areas of the design amongst ourselves and started designing and prototyping our sections. I was in charge of the bookshelves, collections, and all of the notes sections, including viewing, editing, and exporting.
I added a share feature to access your notes outside of the app. Notes can be selected individually or all at once and then exported. This makes it easy to share important information with others or to quickly refer back to later.
Although I did not do the UI of the play and note-taking aspects of the app, I was part of the design process. Here is a visual of how our key features work.
TIME FOR MORE USER TESTING AND ITERATION
With our realistic prototype ready, we performed more user tests to see what tweaks to make for the final reveal. The most relevant feedback we received was that people didn’t automatically know what was unique about our app. Therefore, we created an onboarding tutorial for new users to highlight our special features.
NEXT STEPS
If this product was to go to market, there are several iterations I would like on the next release. During my user tests, a few comments stood out that we didn’t include in the MVP but would appear in a later release.
Voice Commands
To make it even easier to navigate our app while multitasking, the ability to speak commands could eliminate distractions.
To make it even easier to navigate our app while multitasking, the ability to speak commands could eliminate distractions.
Improved Drive Mode
A simplified screen with larger buttons and fewer features would make the play screen easier to navigate. The book image is unnecessary, and I would remove “type note” and “view notes” as those would not be safe while driving.
A simplified screen with larger buttons and fewer features would make the play screen easier to navigate. The book image is unnecessary, and I would remove “type note” and “view notes” as those would not be safe while driving.
FINAL THOUGHTS
I love where we took this app. The initial prompt for the assignment was open-ended and vague and could have resulted in a bland imitation of Audible with a few key improvements. Instead, through proper user research at the beginning, the final prototype is a unique and practical solution to the process of learning through audiobooks. I wish our product were a real app because it would be an invaluable asset to many people.
This project taught me how important it is to ignore my built-in ideas and focus on the user. At the beginning of the process, I thought I had a picture of this app’s direction by relying on my own experience and pain points using Audible. Instead, I learned that there was a more practical problem to solve.
Improving an existing product has its place, but creating something new to improve people’s lives is far more exciting.