Sleep Tacker Personal App
My introduction into Prime Digital Academy was to create a wellness application, which I centered around sleep for the user. My goals were to be user-centered through researching, planning, prototyping, and testing my application with UX Design Methodologies and tools.
Synopsis
Client: Self-defined
My Role: UX Designer and Researcher
Goals:
Research user-centered features and pain-points of the app.
Deliver and test a prototype for further navigational and functional improvement.
Add recommended features from user suggestions.
Methodologies:
User Research - Direct Storytelling
Wireframing
IA Diagram
Prototyping & Usability Testing
Evaluation interviews - Speak Aloud
Tools: Sketch, Axure, Google Docs, Google Slides, Zoom
Overview
Adults with demanding schedules need to maintain a steady and comfortable rest time to energize them for the oncoming day. My task was to create a mobile app enhancing personal sleep wellness. The Good Night’s Sleep mobile app will allow the user to schedule and track their sleep cycles, create customizable music tracks, and write in dream journals.
What the users are looking for
Manage a sleep schedule/routine
Find strategies to reduce stress
Getting adequate rest time
Track how much sleep they get
User Research and Direct Storytelling
My first task was to research the app’s features; therefore, I interviewed 3 participants about their thoughts on how they sleep. Each participant matched the young-adult target audience. They answered 13 questions through the Direct Storytelling technique; sharing real-life experiences and struggles with how they sleep. Two interviews were conducted over a 30 min recorded Zoom call, and one was in-person.
Their stories revealed several repeating themes:
Quality of Life
School or Work
Pets and Family.
A common pain-point found between each participant was balancing sleep while maintaining a routine and managing personal life. The pain contributors can vary from a bad resting environment, disorganized schedule, excess energy, and so on.
Therefore, this app is designed with a user-focused goal to get enough rest, reduce stress, and track sleep progress.
Wireframing
Once the initial research was finished, I began drawing wireframes based on each user’s response. Using the Sketch app on my computer, I created 6 screens visualizing the surface-level functionalities of the app. The user will have access to the profile, music, sleep, journal, and analytics pages after they log-in.
Profile Page
Music Page
Journal Page
Sleep Page - Inactive
Sleep Page - Active
Analytics Page
Architecture Diagram
After my wireframes were completed, I started plotting the Informational Architecture Diagram. This diagram identifies user flow pathways from one screen to another, and it visualizes which screens have a backtracking capability and other conditions to access. The diagram includes additional sub-landing-pages (colored yellow) for the user to open from the main tabs, Profile, Music, Sleep, Journal, and Tracker.
Prototyping
Finally, I constructed an online prototype of the app using Axure. In addition to the 6 wireframes, I added more screens according to the IA Diagram. This includes parent-child screens for each of the 6 wireframes such as a list of alarms, expansion menus, and toggle-able screens. This will give the users a clickable, testable prototype to explore.
Usability Testing
I tested the finished prototype with 3 users that met the target audience (young adults), each through a 30 min Zoom call. Throughout the interview, I encouraged the users to “speak aloud” their thoughts as they navigate the app, asking them to fulfill 3 flow tasks to complete.
The biggest takeaway shared from each participant were the inconsistencies in some navigational flows and misinterpreted screens. While the users were able to identify buttons on the screen, some had different perspectives on what the oncoming screen would show. There were also times the user was unable to identify what screen they were seeing along with some interactive widgets such as the volume scroller.
Despite these hurdles, the usability tests shed some light on further improvements. Overall, the users were able to adapt to flow of the app and understand how the app accommodates their needs.
What I Learned
Throughout this UX design process, the major insights I have gained from these deliverables were the following:
Research/Interviewing participants by utilizing both Direct Storytelling and Speak Aloud methods
Creating Wireframes using Sketch
Building an Information Architecture Diagram
Coding a Prototype using Axure
Discovering and implementing feature rectifications and additions
What’s Next?
In addition to rectifying pre-existing functions in the app, other features such as a log-in screen, a tutorial section, interaction between other devices such as an Apple Watch, and a social link where users can share their own strategies and ideas can be implemented for future design process and testing.
