Goal: to create a more focused and immersive environment for readers to enjoy without taking away from their physical reading experience. It aims to minimize the struggle of picking the perfect background noise for reading regardless of your environment. 

Timeline: 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. I used Figma, Miro, Lookback.io and Zeplin.   

Affinity Diagram

Research: A large number of people still prefer to read physical books over listening to audiobooks. However, an issue when reading physical books in public or even at home is that you have no control over surrounding noise levels. To counter this, people will wear headphones to tune out the outside world. This made me wonder what most people listen to when this happens or if they're listening to anything. Is there a way to enhance or assist a physical book reader's experience regarding issues like this? 

Analysis: I surveyed 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 user's behaviors to their needs.

Key Findings: 

- Depending on their location, some type of background noise or music is necessary for book readers
- Readers want to spend less time on their digital devices when reading

Sketches

At first, I wanted to give users a bunch of options to curate their playlists carefully. You would scroll through literary and musical genres, adding as many choices as possible. This quickly started to complicate the idea of wanting to create something users could put little to no effort into. Any other streaming service would work if they wanted to make a playlist. What made mine different? How was mine any more efficient?
Low fidelity sketches
A breakthrough with simplifications! Instead of building a playlist based on genres, users can search for the title of the book they're reading or scan the book's barcode. In theory, based on 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

Tests & Insights Using Miro: I created a Journey Map to demonstrate the intended user flow. I used Lookback.io 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 on their reactions. The black text boxes show the average reaction to each function.
low vs high fidelity mockup
high fidelity prototype 
Usability Testing: I discovered that the bottom navigation bar caused issues when users tried accessing different features. I replaced the search icon with a home button, 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 using Web AIM's Contrast Checker and ensured all text and graphic objects passed the test. 

High-Fidelity Prototype (Interactive)

​​​​​​​Impact: Through multiple design iterations, feature changes, and usability tests, users can now enjoy a "Storytrack" while reading their book, all in under a minute! There are four different ways to navigate to the end goal, each only 1-2 steps long. Users can search the book title, scan the cover or barcode, access a saved track from their library, or pick up the last played Storytrack.
Back to Top