Project Details and Roles
For Udacity's User Experience Nanodegree Program, I designed this iOS App called "Storytracks". Completing this project took about 3-4 weeks. I conceptualized the idea, conducted user research, designed the user interface, and ran the app through multiple usability tests.
Tools: Figma, Miro, Lookback, Mobbin
App Overview
Storytrack's goal is to create a more focused and immersive environment for readers to enjoy without taking away from their physical reading experience. Storytracks aims to minimize the struggle of picking the perfect background noise for reading regardless of the environment you're in.

Affinity Diagram

A large amount of people still prefer to read physical books over listening to audiobooks. However, an issue that occurs when reading physical books in public or even at home is that you have no control of surrounding noise levels. To counter this, people will put on headphones to tune out the outside world. This drove me to wonder what most people listen to when this happens, or if they're listening to anything at all. Is there a way to enhance or assist a physical book readers experience when it comes to issues like this? 
I surveyed a group of 20-50 y/o readers on why they prefer physical books over digital. I asked what they do to ease the surrounding noise levels, or if that's even an issue to them at all. I conducted interviews and took note of similar insights. The Affinity Diagram (shown above) compares the users behaviors to their needs.
Key Findings: 
1. Depending on their location, some type of background noise or music is necessary for book readers
2. Readers want to spend less time on their digital devices when reading
Concept Sketches
At first, I wanted to give users a bunch of options to carefully curate their playlist. You would scroll through literary genres and then musical genres, adding as many choices from each as you want. This quickly started to complicate the idea of wanting to create something users could put little to no effort into. If they wanted to make a playlist, any other streaming service would work. What made mine different? How was mine any more efficient?
Low Fidelity Sketches — A Breakthrough!
I simplified the process and functions significantly. Instead of building a playlist based off of genres, users can either search the title of the book they're reading or scan the book's barcode. In theory, based off of keywords associated with the book, the app would generate a radio with music relating to the book. Users can save these "Storytracks" to their library.  

Journey Map

Usability Tests and Insights
Using Miro, I created a Journey Map (shown above) to demonstrate the intended user flow. I used to observe users actions while they clicked through the Low Fidelity Sketches. I had them verbally communicate their thought process and was able to improve features based off of their reactions. The black text boxes show the average reaction to each function.
Low Fidelity vs High Fidelity Mockup
I improved functions based off of the previous Usability Tests. Conducting more testing lead me to add a navigation bar and changing the button placements made the app more ergonomic. 
Low Fidelity Prototype - Figma
High Fidelity Mockup - Figma

High Fidelity Prototype — Improved Design and Usability
After more usability testing, I discovered that the bottom navigation bar caused issues when users tried access different features. I replaced the search icon with a home button instead, bringing users back to the Home Page where they can access the search and library options. I also added a "Now Playing" icon to the navigation so users can play their track once they open the app. I improved accessibility by using Web AIM's Contrast Checker and made sure all text and graphic objects passed the test. 
High Fidelity Prototype - Figma

High-Fidelity Prototype (Interactive)

Prototype Map

Overall — Goal Reached! 
Through multiple design iterations, feature changes, and usability tests, users can now enjoy a "Storytrack" while reading their book, all under a minute! There are 4 different ways to navigate to the end goal, each being only 1-2 steps long. Users can search the book title, scan the cover or barcode, or access a saved track from their library, or pickup at the last played Storytrack.
Back to Top