Storytracks is a mobile "radio" app that plays music according to the book you're reading. Get cozy and let Storytracks be the soundtrack to your next reading session!

High-Fidelity Prototype (Expand to Click Through)

High-Fidelity Prototype Video

Project Details
I designed this iOS Application as part of my final project for Udacity's User Experience Nanodegree Program. The app is still in the process of being refined, as I'm continuously testing and learning how to improve on its current features.
Roles
User Experience Researcher, User Interface Designer
Software Used
Figma, Miro, Zeplin, Mobbin, Lookback
Background
There is a large amount of people who still prefer to read physical books over electronic books or listening to audiobooks. I've noticed that a lot of people, myself included, tend to read during their commute. I've also noticed that people tend to wear headphones while reading too. It makes me wonder what they're listening to, if anything.
Goal
Create an app that plays music according to the book that you’re reading. The app should create a more focused and immersive environment for readers to enjoy without disrupting their reading experience.

Affinity Diagram

Discovery: Research & Analysis
I recruited millennials who actively read physical books on a daily basis. This group was made up of students, working professionals, and frequent commuters. I had them answer screener questions regarding why they preferred physical books and if they listened to music while reading. I then interviewed and gathered quotes from those who preferred music over silence when reading.  
Affinity Diagram
This diagram breaks down and compares the users behaviors versus their needs. Whether it be on a noisy train, or in the silence of their homes, having background music keeps them company and can transform their space to better suit their needs.
Key Findings
• Most readers prefer to have background music playing while they read.
• Music is necessary depending on their location.
• Readers want to spend less time on their digital devices in general.
Paper Sketches
Design: Concepts & Sketching
According to the affinity diagram, the app must be efficient and serve as a secondary source to the user's reading experience. The app should be direct and shouldn't overwhelm users with multiple options.
Paper Sketch
I wanted the process to be very linear for the user. There was no main page, forcing the user to go through the entire process each time they'd open the app. At this stage I wanted to make a playlist builder, allowing users to curate exactly what they wanted, regardless of the book they were reading. This defeated the purpose of having them scan the book since the title didn't actually determine the outcome of the playlist.
Low Fidelity Mockup
This is where I transitioned my idea from playlist generating app to mobile radio app. Instead of having the user choose each category themselves, AI will create a "radio" based off of keywords that are already associated with the book.

Features

 - Home Page has search options and library.
 - Users can find Storytracks by either type in the title or take a photo of the cover by clicking on the camera icon.
Home
Home
Library
Library
Camera
Camera
Journey Map
This journey map is a visualization of the process that a user should be going through. I was able to refer back to this map while testing the usability of my the Low Fidelity Mockup.

Usability Test Insights
Gained feedback by having users verbally communicate their thought process while navigating through the app.
(Lookback.io)

The black sticky notes point out highlights and actions that need to be improved upon based off of their interaction.

Journey Map

Improved Low Fidelity Mockup

Feature Improvements
 - Removed the arrow from My Library and made it into a button
 - Moved the search bar and camera icon to the lower half of the screen
 - Made the page titles more consistent and relevant.
 - Camera Page now says "Scan Your Book". 
Home
Home
Library
Library
Camera
Camera
Develop: High Fidelity Prototype

Design Elements
 - Dark UI
 - Soft Blue to evoke feelings of calmness
 - Clean and Thin Serif Font
Feature Improvements
 - Added a bottom navigation that included a search, camera, and library icon
 - My Library displays the most recent saved Storytracks on Home Page
 - My Library expands when you click on it, revealing a scrolling list of saved Storytracks
 - Directions appear when you click on camera
 -  Now Playing Page appears once the cover is scanned or searched and includes options to save or share. 
Home
Home
Library
Library
Camera
Camera
Now Playing
Now Playing
Usability Tests & Improving Design
Gained feedback by having users verbally communicate their thought process while completing moderated task flows on Lookback.io
Task Flow: Navigate back to Home Page from Now Playing Page by clicking the search icon
Pass/Fail: Fail
 - 10% of users were able to navigate back to the Home Page by clicking on the search icon in the bottom navigation bar.
 - 90% of users clicked the library icon or swiped left and right to try and exit the page
Goal: Increase Task Success Rate

Solution: Change the search icon into a home icon

Overall Design Changes:
 -  Improved colors and visual accessibility by using Web AIM’s Contrast Checker
 - Changed "Now Playing" to "Playing Storytrack"
BEFORE
BEFORE
AFTER
AFTER
Usability Tests & Improving Design Cont.

Task Flow: Navigate to Now Playing Page
Problem: No direct way to access the Now Playing Page from the Home Page

 -
60% of users suggested adding a feature that showed what was currently playing somewhere on the Home Page
Goal: Implement the user suggested feature into existing design

Solution: Replace the library icon with a disk that shows a picture of the last Storytrack that was played.

When disk icon is clicked, users will be directed to the Now Playing Page.

BEFORE
BEFORE
AFTER
AFTER
AFTER
AFTER
Impact Overview
Users are able to play their Storytrack in 1 to 2 steps,
with the whole process taking less than 1 min.

Back to Top