LUMOS SLEEP MASK APPlication Redesign

User Research  |  User Experience Design  |  Mobile Interface Design  |  Visual Design

PROJECT OVERVIEW

About Lumos
The Lumos Smart Sleep Mask helps people sleep better using proprietary light technology developed at Stanford University. Lumos stimulates the neurological pathways that regulate your body clock and allows you to program your own sleep schedule.

Challenge
Users spend a ton of time trying to understand the Lumos platform and how to use it. Also, the company is taking the Lumos app to the next level from its static scheduling screen to a dashboard that is both intuitive and dynamic.

Goals
Refine the user flow to make it simple and intuitive for users, provide better support within the app. Add sleep report feature. Design an intuitive onboarding for the app.

Our Group

Na An
Na An
Stella Ju
Stella Ju

My Role
UX Researcher and Designer

Timeline
2 months

The design process

The design process

Discovery

1 Week  |  Project Time Management Planning  |  Business Research  |  Use Cases  |  User Interviews  |  Competitive Analysis

Project Time Management Planning

We set up a project timetable to arrange our individual work time before getting started, according to what we need to do and the company's budget.

Business Research

We met with Biquan Luo, who is the co-founder and CEO of LumosTech, In. We learned about how the sleep mask works, who they targeted in the market, and the core values of the app, which are useful, intuitive, interactive, snowballing complexity. These guidelines helped us further understand the business and get more inspirations for user research.

Use cases
use cases
User Interviews

In total, we interviewed 11 people, including 5 existing users, and 6 potential users. We were able to uncover people's needs and pain points for sleep problems, their major concerns while interacting with the app.

Affinity Map lumos

Affinity Map from Interviews with Existing Users

am
affinity

Affinity Map from Interviews with Potential Users

Major takeaways
Solutions
Competitive Analysis
Competitors

We researched more than twenty competitors, including direct, indirect, and inspirational ones. Base on users’ preferences and recommendations, we chose the competitors above of others to dig deeper into their mobile app design. In doing so, we uncovered common patterns and special features in the applications of these companies, which helped to guide our next step design decisions.

Pros
Cons

Define

1 Day  |  Feature Prioritization  |  User Flow

Feature Prioritization

Prioritize features to include in the mobile app based on the users' needs and the business direction.

These features we intended to include in the new app were arranged based on takeaways from the user surveys, user interviews and what we believe fulfills business goals. Features at the bottom left corner (the box in red) are the ones that should be included in the new version of the app, which is MVP (minimum viable product).

Feature Prioritization
User Flow

After analyzing the previous user flow of the app, we found that users don't have multiple choices that they could stuck in the middle of certain pages. Another major problem is the functions of the main navigations are not very clear to new users. So we redesigned the user flow as showing below.

Previous Lumos App User Flow
Previous Lumos App User Flow
New Lumos App User Flow
New Lumos App User Flow

Design

1 Month  |  Major Problems & Solutions  |  New features

Major Problems & Solutions

We met lots of challenges along the design process.

The biggest problem for users is that they don’t know how to use the app. Because the main functions of the old version hide within three small icons, with no indicating text showing what they mean. Some people even set up all three schedules at the same time, which led to chaos in the backend.

So we came up with the solution of turning the three icons into a separate page because this is the core functionality of the app.

Problem: ambiguous icons for main functionality.
Solution: having a page for main functionality.

Another one of the most common problems for the users is that they want to see their full sleep schedule as well as their flight information more easily. From the previous app, they have to click between homepage and programs page to see their full schedule, many users find it troublesome to go back and forth. Besides, even if they go to the programs page, they still need an extra click to open up a new window to see the full schedule.

In the end, users are able to see the full schedule and flight info within the same page by having this dropdown menu we came up with.

Problem: Too many extra clicks to view one schedule.
Solution: use dropdown menu to show and hide schedules.

Another interesting problem we found is an issue about the eye mask itself, not about the app. Many users said that the strap is too loose, and it moves around during their sleep, which led to worse sleep quality instead. But actually the strap is adjustable, many users just don’t know. So we designed the help center into two sections, mask help and app help, and put some images into the mask help section, to indicate that the strap is adjustable.

Solution: add help center with app help and mask help.
New features

We added a few new features to the app, according to the user research, competitive analysis, and business requirement, for example, sleep diary. With three subpages of Daily Sleep Diary, Weekly Sleep Diary, and Monthly Sleep Diary, users are able to track their own sleep quality and tag for reasons. This also helps the business to analyze users' sleep patterns and refine their product to better fulfill users’ needs in the future.

Sleep Diary page
Daily Diary
Weekly Diary
Monthly Diary

Testing

2 Weeks  |  Usability Testing  |  Iterations

Usability Testing

We broke our usability testing into two sections. Testing the functionality of the app, and testing the onboarding of the app.

Main Iterations
We had many rounds of iterations base on usability testing. Here are the comparisons of some major iterations.

During the usability testing, some people mentioned that it’s quite possible for them to have repeat business trips and same work shift schedules constantly, thus, we reached out to our end users to confirm about this. In the end, we decided to add a repeat feature to previous schedules page for users' convenience.

BEFORE

AFTER

People also found the profile page is confusing, it was not organized in a logical way, they found it overwhelming to look at. So we simplified the profile page according to the functionality of those features.

BEFORE

AFTER

Some users didn't trust the sleep score and wanted to know why they had that score. After a meeting with the stakeholder, we decided to provide them with the score reasons.

BEFORE

AFTER

Onboarding Testing
We conducted two rounds of onboarding testing. The first round is to help us decide which version we should choose because we had two ideations and different opinions. The test led us to go with option 2 because people didn't feel the first version is helpful, they just swiped away fast anyway.

The second round we did an AB Testing, to find out the best position for the button. We went with option A because people's eyes follow their fingers. The users who were testing for option A understood the app better than the others.

FIrst Round of Onboarding Testing
Second Round of AB Testing

Delivery + Reflection

2 Days  |  Hi-Fi Prototype  |  Reflection

Hi-Fi Prototype
Reflection

This was the first contract job I had — which helped me bring my design standard to the next level. My partner and I both learned and contributed a lot during the discussion and design process. It was also a quite pleasant experience because we were able to collaborate as designers throughout every step of the project as we held a common goal and vision. In the end, we were able to deliver a user-friendly design proposal that also meets business goals.