MORNING TUNES
Begin your morning with your favourite tunes.
It starts and ends automatically based on time or location.
by Junjie Piao
Project Description
The project brief challenged me with the task to design a mobile application to allows your smartphone to automatically starts and stops playing music based on time or location changes.
Over the span of 5 weeks I explored multiple facets of product development including potential competitor research, story boarding, persona development, customer journey maps, wireframing, user testing, as well as visual design. Below, I have documented the entire process that I used to develop the main user interface.
Competitor Analysis
Research began by searching for sleep-related applications currently available on the market. After downloading multiple apps and thoroughly exploring their features, trends began to emerge. All feedback was recorded from user reviews which helped to point out all of the pros and cons of each application.
The chart below show the analysis results of apps that were tested. The data was taken from each application’s user reviews found on the Apple App Store and Google Play.
App Analysis based on Time
Click on image to view full scale
App Function Analysis
Click on image to view full scale
App Function vs. Complexity
Survey
In order to better understand people’s morning life, I sent out an online survey to both Americans and Chinese.
Here is the result:
-Most people own a smartphone and use the alarm app that comes with OS.
-Over 70% of these people have the habbit of listening to music, news or some other audio programs in the morning.
-Instead of listening before leaving their house in the morning, quite a few people listen to music on their way to work.
Persona Development
Peter Carter (Primary)
Peter is a 35 years old IT guy who lives in New York city. He is a very positive person and is always interested in learning something new.
Recently, he fell in love with learning Japanese. In order to fast improve his new language skill, he listens to the language as long as he has time. Because his work takes a lot of time, he rarely has any moment to concentrate on Japanese. Therefore, he listens to Japanese Radio Stations every morning since he wake up and all the way till he arrives at his company. And same process happens when he is off at night.
Goals:
-learn Japanese
-find Japanese radio station/save audio files into his iphone
Emily Downing (Secondary)
Emily is a 21 years old college student who lives Los Angeles, CA. Her major is painting.
She is so fond of listening to music that she keeps music on as long as she has time because music can give her a lot of inspirations.
On the other hand, she is a super Apple product fan and she owns every single Apple product as well as accessories. As for devices listening to music, she uses her iphone with iHome stereo. Weirdly, she can’t listen to music while driving since she can’t concentrate will music on. This really annoy her since it takes her almost 40 minutes to drive from her house to school. Her typical daily life would be taking classes, doing homework and of course listening to music.
Goals:
-start listening to music when she wake up
-turn off music when start driving
-continue to play music when she stops driving
Journey Map
Storyboarding and Initial Brainstorming
Following the development of my personas, I began to create a story to help visualize how my new app would effect their lives. My goal was to generate a scenario that considered both personas as well as the individual that would simplify their process of playing tunes on their smartphone. The story I created contains two parts: Peter (primary persona) listening to recorded Japanese talk shows on his way to work, Emily (secondary persona) listening to music when she wakes up.
Wireframing Phase 1
While designing my first phase of wireframes I took into consideration all of the nice features and drawbacks of the potential competitor applications. I aimed to design a simple app rather than create numerous features. During this phase I also considered the flow of the journey map and tried to touch on every aspect of the process from start to finish. In addition to paper wireframes, I created a working prototype in Blueprint on ipad for user testing.
First Page
Add a New Alarm
Choose a Ring Tone
Finish Setting up an Alarm
Add a Morning Tune
Finished without a Morning Tune
Alarm with a Morning Tune
Edit
Edit
User Testing
After completion of the first phase of wireframing, it was time to test the working prototypes in order to gain feedback on how to adjust the apps functionality to meet the user’s needs. Each participant was given multiple tasks to complete within the application. In this case the tasks included: adding a new alarm, creating a morning tune based on alarm, adding a morning tune to an existing alarm.
Wireframing Refinement
After user testing, I began my second phase of wireframing in order to design the app more realistically to meet the user’s needs. After receiving feedback from each of my participants, I began to reevaluate the features the app would have as well as streamline the flow in order to eliminate any unnecessary clutter. Specifically, I focused on designing the flow for setting up morning tunes as well as the experience a new user would have when opening the app for the first time.
Welcome and Instruction Sections for First Launch
Brand New UI and Structure for better User Experience
Final Wireframe
After repeating this refine and user test process several times, I came up with this final wireframe version.
First Launch
Set Start by Time
Set up a Morning Tune
Set up an Alarm
Set End by Location
Use Current Location
Gestures
First Launch
Setting up the Start of A Morning Tune by TIme
Setting up the End of A Morning Tune by Location
Gestures
Visual Design
When I approached the visual design phase I aimed to highlight the unique features that I had developed in my wireframes and mesh them seamlessly with a simple design aesthetic. My goal was to create a clean design by applying simple iconography and fonts that were calming to the eyes. I focused on creating visuals that were intuitive and allowed the user to quickly understand how to navigate the app.
A subtle stitching pattern on the gradient background creates a gentle feel.
The transluscent strip helps guide a user's eye towards the most important part of the screen.
I'm a paragraph. Click here to add your own text and edit me. I’m a great place for you to tell a story and let your users know a little more about you.
Morning Tunes in Action
This is a demo video of how MORNING TUNES works in real life.
MORNING TUNES
Thanks for watching!
Begin your morning with your favourite tunes.
It starts and ends automatically based on time or location.
You might also be interested:
