Sleeppal
SleepPal, formerly known as XSleep, was redesigned to enhance functionality and user experience. The app helps users develop healthier sleep habits through customizable routines and soothing audio options like light music and guided meditation. This case study outlines the challenges faced, the redesign process, and the positive outcomes of transforming XSleep into SleepPal.
Visit Link
Client
Sleepal
Team
3 Developers, 1 Stakeholder
1 Product Designer (Myself)
Tools
Figma, Figjam. Maze
Time
8 months ( In Beta version right now)
Here's how we achieved a 44.4% increase in task success rate on SleepPal following the redesign.
Problem
XSleep faced issues with declining downloads, high user churn, and negative user feedback. Additionally, the app's interface looked outdated, which contributed to a decrease in active users and a damaged brand reputation, making user retention and acquisition challenging.
Goal
The goal was to redesign the XSleep app to enhance user experience and modernize the interface. This involved improving usability and engagement to reduce churn, attract new users, and boost positive reviews and ratings, thereby restoring brand reputation and increasing the user base.
PHASE 1
Deciding the Features for Minimum Viable Product
The project began with the decision to determine the features for the Minimum Viable Product (MVP), prioritizing the redesign of essential features initially. Before I joined, the team had done some primary and secondary research to understand user needs and preferences. In our initial discussions, we utilized insights from this research and competitive analysis to identify key MVP features. Among these, we opted to incorporate a Sleep Quiz and enhance existing 'Must-Have' features.
PHASE 2
Evaluating the existing app through two methods
With limited resources, our goal was efficient prioritization, avoiding simultaneous testing of all features. To gain insights into product problem areas, we employed two research methods:
1- Heuristic Evaluation
2- Usability testing
01
Heuristic Analysis
Using Jakob Nielsen’s 10 general principles for interaction design, a heuristic evaluation was conducted to find usability problems in the existing app. We all sat down together and talked about the problems that the current features had. We used Jakob Nielsen’s 10 interaction design principles to assess the app's usability. As the sole designer within the team, I took the lead in consolidating our findings and identifying areas for improvement.
02
Usability Testing
Usability tests were conducted with existing users from the client, along with feedback received through app reviews. These tests aimed to gain qualitative insights into the challenges users were facing, which then informed decisions on design improvements. The studies were conducted remotely via video calls and screen sharing software. Examples of task scenarios are provided below.
TASK GOAL
Choose a music track to play during sleep
Task Scenario
Explore the app's collection of calming tunes and choose the perfect melody to accompany you into a restful night's sleep.
Task Goal
Clock in to sleep
Task Scenario
Ensure you wake up on time by configuring the app's alarm to match your schedule. Simply input your preferred wake-up time.
Task Goal
Stop the Alarm
Task Scenario
You are woken up by the alarm in the morning. Demonstrate how you would stop the alarm using the app.
Task Goal
Check your stats
Task Scenario
After a week of using the app, you want to see your sleep patterns and progress. Demonstrate how you would access and review your sleep stats within the app.
Qualitative insights
Home Screen: The Home screen was not intuituove enough for users to quickly find out the alarm or the music. They were taking much longer than anticipated.
Alarm Screen: Users encountered difficulty setting their preferred alarm on the Alarm screen, as it was unexpectedly nested within user settings, leading to confusion and longer-than-anticipated setup times.
Music Screen: Although users could play music, they expressed frustration at the absence of options to add tracks to favorites or indicate preference, highlighting a need for additional features to enhance user experience and customization.
Results from the usability test done for the existing app
The bar graph below demonstrates that during testing with five users, tasks took longer than expected to complete. Many tasks were left incomplete, suggesting a need for guidance and improvement. There was a 45% task success rate.
Task Success Rate
PHASE 2
The redesign of sitemap
Due to time constraints, we couldn't do card sorting. Instead, we looked at how our competitors organized their features to get ideas for our sitemap
Low Fi Wireframes
Home Screen: The Home screen was not intuituove enough for users to quickly find out the alarm or the music. They were taking much longer than anticipated.
Branding and Style Guide
For the branding and style guide, we explored several concepts incorporating elements like sleepy eyes, night clouds, sleep hats, soothing sounds, and stars, aiming to capture the essence of relaxation and tranquility.
FINAL LOGO
Design System
I created the design system to ensure our product maintains a consistent look and feel across platforms. It streamlines our design process, making it faster and more efficient to create new features. Additionally, it promotes collaboration among team members and ensures our product is accessible to all users. Ultimately, the design system serves as a foundation for creating user-friendly digital experiences.
Modernizing the Home Screen
We focused on making the home page more modern by replacing illustrations with text and icons. For the MVP, we streamlined the main features to include Home, Music, and Alarm, each with their respective sub-features. We utilized a card-based layout to organize these elements, ensuring a clean and intuitive user experience
Streamlining the Alarm Screen
For the alarm screen, we prioritized ease of use by allowing users to select the time through a simple scrolling mechanism, eliminating the need to navigate through settings to change the time. Additionally, we incorporated a prominent "Start" button, enabling users to easily activate the alarm when they are ready to sleep.
Adding a tab of favorites to Music Screen
For the music screen, we introduced a "Favorites" page where users can save their preferred tracks. Additionally, we added sections for recommended music and trending tracks, providing personalized and popular options for users to explore.
Usability Testing
We tested the new app design using Maze and observed that users could easily complete tasks. This testing demonstrated significant improvements in user efficiency and overall experience. However there were some parts that we still needed to fix.
Results from Usability test done for the redesigned version
We checked the new design with the same set of new users. We saw that users were easily able to complete the tasks this time. Almost all the users were able to quickly finish the tasks without any errors. We saw higher task success rate as it was 65% this time compared to 45% last time.
Task Success Rate
44.4
more tasks completed following the redesign
Key Learnings
Collaboration with Developers:
Working closely with developers revealed gaps in our initial planning, such as missing screens and new requirements emerging during development, like the empty state for the favorites screen. This taught me the importance of continuous communication and adaptability.
Testing
We faced challenges with automated testing tools like Maze, which gave inconsistent results. As a result, we relied heavily on in-person testing to ensure accuracy and reliability. This experience emphasized the need for robust testing methods.
Design System Development
Creating the design system from scratch was a significant learning experience. A highlight was successfully prototyping an interactive alarm feature that matched the stakeholder's vision after several iterations. This process showed me the value of iterative design and aligning with stakeholder expectations.
Next steps
Test MVP with users
The product is currently in its beta version. Once it is ready, we plan to test it with a select group of users to gather feedback and identify areas for improvement. To facilitate this process, we might incorporate a survey within the app to collect user feedback directly. This will help us understand user needs better and make necessary adjustments before the full launch.
Add more features
The previous version of the app included features that could have significantly boosted business revenue, such as selling products like sleep masks directly through the app. We plan to reintroduce and enhance these features once the app gains traction in the market and demonstrates positive performance. This strategic addition will not only improve user experience but also open new revenue streams for the business.