Software: Figma
Problem
Too many people struggle with inadequate sleep, which can be rooted in many possible issues. Obstacles to sleep could include insomnia, intensive work schedules, constant traveling, health issues, or anything else that may be disruptive to rest.
This lack of sleep has severe health repercussions, regardless of an individual’s age. Many students, often as early as grade school, are losing sleep over assignments and hectic extracurricular activities, which interferes with the body’s growth. Older adults often lose sleep due to work commitments or eventually due to health issues, which often results in visibly reduced productivity and energy.
With this in mind, there is a significant need for an app to help promote healthy sleep habits and motivate users to stick to their sleep goals. In an increasingly digital society, the merging of sleep monitoring and technology use offers one of the most promising methods to successfully tackle this issue.
Ideation + sitemap
App idea:
SleepSmart is an app that monitors users’ sleep schedules to promote healthy amounts of sleep and encourages users to reach their sleep goals. This will be done by allowing users to track their sleep, set sleep goals, add friends for friendly competitions, and complete relaxation exercises to help them fall asleep.
Who is the app for?
Anyone who wants to practice better sleep habits and/or receive more sleep; this could be for students, busy adults, parents with young children, or those who struggle to fall asleep due to anxiety, depression, etc.
Goal:
Every user who uses SleepSmart should see an improvement in their sleep, both in quantity and quality.
SleepSmart will include five main pages:
Tracker
Exercises
Goals
Account
Friends
Wireframes
After creating my sitemap, I began the design process by designing four initial screens for SleepSmart - the home page, the Tracker page, the Exercises page, and the Account page.
I started with these pages as they were the main branches on my sitemap tree, serving as starting points for future screens.
These lo-fi wireframes are shown below.
Style guide
The next step in the design process was to create a style guide to refine the look and feel of SleepSmart.
I ultimately decided to go with a purple palette, using a light yellow as an accent color and a soft red as the error color. This color scheme was built on my personal connotations with sleep and wanting the app to feel comforting, relaxed, and similar to a night sky.
Once my color palette was finished, I needed to compile some icons and create a typography guide for my app.
All icons were found within the Figma “Plugins” resource (the colors were modified to fit the app color scheme).
I decided to use the “Comfortaa” typeface for my typography as I felt that the rounded letters and smooth design reflected sleep and tranquility. I modified the weights and size to create headings, body, and caption typefaces.
Hi-fi mockups
Using my color scheme, typography, and complete icon set, I created my initial hi-fis off of my four lo-fi wireframes.
Components
I created components for the major reusable elements of my design, including buttons, input boxes, and nav bar icons.
These components were extremely useful in designing my final hi-fi wireframes for consistency and speed.
Designing all user flows
The next step in the design process was to expand my hi-fi mockups to include screens for all user flows in SleepSmart. This included screens for the home page, the “Tracker” page, the “Exercises” page, the “Goals” page, the “Account” page, and the “Friends” page.
These wireframes include onboarding and login flows, as well as versions for error and inactive states. I also chose to add screens specifically for loading specific processes that could be integrated when I began prototyping the interactions between screens.
Prototyping
The last piece of my initial design development was to prototype my screens with basic clickable interactions. I chose to model SleepSmart on an iPhone 13 mini.
User testing + feedback
With my initial designs completed, it was time to gather feedback from my peers.
User #1:
“Your app's concept is exciting, and while reviewing the different pages, I found them very well-organized, detailed, and easy to comprehend. If I could add any new addition to your platform, it would be a reward system similar to the reward you reserved if you achieve an exciting goal on the Apple "Activity" app. I believe that adding this feature can increase the satisfaction aspect of your app. Overall great job!”
User #2:
“I am impressed by how much you have worked on the app. I really love your overall design system with the color palette and other design choices! I also like how you include error scenarios like invalid username/password, etc. However, I’m unsure about the page titled “How can we help you today?” It took me a while to figure out that the options are also what’s listed on the tab bar. I feel like the page interrupts the user flow after signing in, which may have confused users about the app structure before they reach a subpage and see the tab bar. What if this page is made into a homepage with the tab bar visible? I was also unsure if the ring chart design on the “Goals” page is the same thing as the “Sleep Rings” on the “Friends” page.”
Iteration
Based on the feedback from my peers, I iterated on my hi-fi mockups to improve the flow of SleepSmart.
The first change I made was to redesign the “Home” screen to give previews of the “Tracker”, “Exercises”, “Goals”, “Account”, and “Friends” pages as opposed to asking “How can we help you today?”.
I believe this serves as a better landing page for users after they have logged in and shows a clear tie to the pages on the nav bar after users have entered the app.
The second change I made was to move the “Me” card to the top of the “Sleep rings” section on the “Friends” page. I also added the third ring layer for each competitor (dark purple color).
I believe these changes make the connection between the activity in the “Sleep rings” section of the “Friends” page and the goals set on the “Goals” page even clearer as both have three different goal categories. Users can also compare the “Me” card to their ring chart within “Goals” to see that they’re the same.
Original
Original
Revised
Revised
Final product
Next steps
If I had more time to work on this project, I would have loved to do another round of user testing to further iterate on my hi-fi wireframes. I believe this could have been especially helpful now that the screens have clickable interactions as the user can get a better feel for the app’s functionalities.
As someone new to Figma, I also struggled with learning how to design effectively in this project. If given more time, I would’ve liked to explore creating more components and implementing auto-layout. I feel that creating reliable components and integrating auto-layout into my designs would allow me to design much faster without compromising quality, making it a Figma skill I would like to work on further.
I also think my app could have benefited from micro-interactions, however because I fell short on time, I was unable to implement these for the sake of finesse. If I were to further work on this app, I would like to add to this my designs.