Sleep App Dashboard Re-Design
SleepCharge is the patient experience for my company’s sleep patients to track their sleep. I was tasked with the re-design of the home page of the app.
Roles & Responsibilities
Stakeholder Inteviews
User Research & Competitive Analysis
Wireframing & Design
The Challenge
The old Home page design of the web and mobile app was simple and uninviting. The design included a list of tasks for the user to see and take action upon logging into the app. The company wanted to customize the users’ home page to be more like a dashboard that offers a more dynamic and personalized experience. We wanted the experience to feel customized to the user’s sleep programs and needs, so the users have a sense that we care about their sleep and want to help. In order to do that, I needed to research and design many various potential states of a user’s dashboard and ensure we designed the Home page with intention, while personalizing sleep content for the user to consume. The other challenge I had to keep in mind while designing was that more programs and content would continue to be added, and enhancements could be added in phase 2.
Stakeholder Interviews
In order to design a personalized home page dashboard, I needed to know our users and the types of content that would be most important for them to see on a home page. I interviewed our Product Owner and Product Manager to understand our users’ needs and motivations. I also had to study and understand our existing user flows to ensure I included designs for each stage of the user’s journey.
Competitive Analysis
There are many sleep apps out there, and I downloaded many mobile sleep apps to use as inspiration. Some apps I analyzed for inspiration included Insight Timer, Sleep Watch, Fabulous, Phillips, Apple Watch, and Fitbit. I was looking for apps that highlighted important personalized data and prompted the user to navigate further to view more detail.
Wireframes
I used Miro for wireframes. The most important part of this design was including dynamic sections that would change with the user’s status. I also ideated some future wireframes and to show where we could enhance and further personalize the experience with challenges, badges, categorized content, and a collective sleep score based on the user’s progress with their sleep program.
Mobile
Desktop - Future Ideation
Desktop - No Tasks State
Desktop - Onboarding State
Designs
Desktop App Design
One of the ways I wanted to personalize the experience was by using dynamic content. The biggest change we made on the Desktop design was removing the side navigation from the old design and empowering the user to navigate the app without distractions. The other pages could still be found within the user menu, but I included other ways to navigate with Sleep Program cards, task calls to action, and content that would be personalized to the user’s needs.
The dynamic panels below show the various states for a user’s experience, based on where the user might be in their sleep journey. The user may be onboarding, needing to complete or all caught up on tasks, on a sleep program, or logging in for an appointment.
Mobile App Design
You will see similar cards on mobile, keeping the experience consistent with the web app. The difference with the mobile app is that it is designed with dark theme, so I designed each element carefully paying close attention to accessibility and contrast ratios.
One of the parts of the design that I enjoyed designing most are the loading screen animations. Here you will see a progression of a sunrise animation that greets the user with a personalized message.