To layout content and functionality on the Sleep App which takes user needs and user journeys into account, I designed low & mid fidelity wireframes. The goal is to establish basic structure of the essential pages before more detailed visual design and content is added.
Bose Sleep App
App design for Bose Sleepbuds™ II to enjoy a better sleep experience.
Welcome to #1 app for your best sleep ever!
Project Overview
Problem
Everyday stress. Noisy neighbors. Snoring Partner. There’s plenty that keeps us awake and everyone knows that a day without proper sleep is definitely not a good day. The tiny, comfortable and noise-masking Sleepbuds deliver relaxing sound to help you fall asleep and get a better sleep quality overall. However, for such sensitive thing as sleep everyone has different preferences so Sleepbuds need to be highly customizable to build a nighttime routine.
Objective
Design a corresponding app that gives users 100% control over their Sleepbuds. The technical possibilities of the Sleepbuds have to be fully integrated. The digital experience should be easily usable before users go to bed. Moreover, the app needs to be in full alignment with the Bose branding.
Role
UX/UI-Designer
Duration
3 Months
Tools
Adobe XD
Adobe Photoshop
Adobe Illustrator
Figma
UserZoom
Table Of Content
1 Emphasize
1.1 Research Plan
1.2 Market Research
1.3 Competitor Research
1.4 User Interviews
1.5 Empathy Map (Synthesis I)
1.6 User Persona (Synthesis II)
2 Define
2.1 How Might We Method
2.2 Product Goals
2.3 Product Roadmap
2.4 Application Map
3 Design
3.1 User & Task Flow
3.2 Wireframes
4 Prototype & Test
4.1 Usability Testing
4.2 Branding
4.3 High-Fidelity & Prototype
01 // Emphasize
1.1 Research Plan
Research enabled me to dig deep into my understanding of users – their immediate frustrations, hopes, fears, abilities, limitations and goals. It lays essential foundations for design solutions in later stages.
Goals
As a designer it is always important to me to create clear goals before diving into the work.
- Understand the sleep gadget market
- Identify the target audience & their pain
- Learn about the sleep habits of potential users
- Learn about main competitors
- Identify features that would be most valuable
Assumptions
As a designer I always challenge assumptions and use my imagination to question the status quo.
- Users want to improve sleep quality to get a better life
- Sleep problems are mainly caused by noise & stress
- The only sleep gadgets most people have experience with are yellow earplugs
- The most important feature for auditive sleep technology would be white noise
- Most people would like to analyse their sleep quantity & quality
Methodologies
As a designer I always try to conduct both primary & secondary market research for quality infos.
- User Interview (Primary)
- Market Research (Secondary)
- Competitive Analysis (Secondary)
01 // Emphasize
1.2 Market Research
It is important to get a big picture of the market in order to get a sense of what we know and don’t know yet, who the audience are and more. The insights gathered from market research will help me frame provisional personas and ask meaningful questions in the user interviews.
Problem
1 in 3 Adults Doesn’t Get Enough Regular Sleep
Almost 35% of all Americans say they feel sleepy during the day.¹
Sleeping less than seven hours per day is associated with an increased risk of chronic conditions such as obesity, diabetes, high blood pressure, heart disease and frequent mental distress.
Beside from the many worries, American society seems to reward those who stay up working or socializing rather than sleeping.
¹ https://www.cdc.gov/media/releases/2016/p0215-enough-sleep.html
Brand
Inventing Technology That Truly Benefits
Bose develops innovative sound solutions for entertainment, home audio, aviation, and automotive industries.
Bose has a simple mission: Helping people enjoy the things they love through sound – in the case of Sleepbuds: Sleep.
In 2021, Bose made $3.2 billion in revenue. Their flagship products are noise cancelling headphones, especially the series QuietComfort. Recently, Bose added innovative hearing aids.
Product
Bose Sleepbuds Is Innovative Sleep Technology
The Sleepbuds are designed to help wearers fall asleep faster by combining passive noise cancelling in form of soundscapes, ambient music and white noise with silicone ear-tips.
Comfortable eartips passively block noise, while soothing sounds helping users sleep through the night.
The Sleepbuds are dependent on a proprietary smartphone app as they don’t have any other control.
Market
A Growing $137.16 Billion Sleep Market
The U.S. sleep gadget market was worth $30.6 billion in 2019 to reach $137.16 billion by 2026, growing at a CAGR of 6.11% during the forecast period.
Growth enablers such as lifestyle changes in the urban population, increasing awareness towards health benefits of sleep and increasing use of sleep trackers is boosting the global sleep market.
In the market of wearable devices there are only few players competing on 35% of Americans (and globally more).
01 // Emphasize
1.3 Competitor Research
It is equally important to research enterprises in the same market, as their solutions to similar problems will help me gather insights about their strengths and weaknesses. These insights also help me identify any gaps in features that the Bose Sleep App might address.
I analyzed 3 direct competitors who are trying to solve the same problem using sleep gadgets.
01 // Emphasize
1.4 User Interviews
Building on a general understanding of the audience and the market, I continued to dive deeper in order to build a real connection with users. User interviews gain quality insights through primary research so I created an interview guide with 15 open-ended questions about sleep habits, their pain and experience with sleep devices.
Assumptions simplify our understanding of the problem domain so I tried to validate them with 25 participants (14 males and 11 females).
Insight 1
Sleep problems are mainly caused by noise & stress
Validated
17/25 participants name environmental issues like noise, 13/25 psychiatric disorders like stress, 7/25 physical disturbances & 3/25 medical issues.
Insight 2
Sleep problems are mainly caused by noise & stress
Validated
17/25 participants name environmental issues like noise, 13/25 psychiatric disorders like stress, 7/25 physical disturbances & 3/25 medical issues.
Insight 3
The only sleep gadgets most people have experience with are yellow earplugs
Validated
20/25 participants said that they've used yellow earplugs before but felt unsatisfied after.
Insight 4
The most important feature for auditive sleep technology would be white noise
Not Validated
16/25 participants said that noise reduction would be the most important feature, followed by soundscapes, personal audio, battery life & alarm.
Insight 5
Most people would like to analyse their sleep quantity & quality
Not Validated
20/25 participants don't want to analyse their sleep habits. They just want to feel better next day and don't need statistics & more.
01 // Emphasize
1.5 Empathy Map (Synthesis I)
For an optimal experience to tackle sleep problems the product needs to be superior over common alternatives. The user interviews have showed that 23/25 participants want to improve their sleep quality.
I created an empathy map to identify patterns across users when going to bed. The best empathy maps are drawn from real data so I asked participants to conduct diary studies.
01 // Emphasize
1.6 User Persona (Synthesis II)
Since I have gathered quality knowledge of the audience as well as their goals and needs, I use the user persona to represent key audience segments. It helps me focus on tackling the most important problems – to address the major needs of the most important user groups. It is both fictional & realistic.
Let’s meet Michael, a technology-worker from Seattle, WA.
02 // Define
2.1 How Might We..
To define the problem I am going to solve, I create Point-of-View (POV) Statements that allow me to ideate in a goal-oriented manner, and How-Might-We (HMW) Questions to frame the ideation in the brainstorm session for solutions.
The statements and questions are generated based on the insights and needs I gathered in the research phase.
The statements and questions are generated based on the insights and needs I gathered in the research phase.
02 // Define
2.2 Product Goals
With HMW questions and brainstormed solutions, I decided to list business & user goals that will both serve as a guide for the future development of the product for determining what features to include in Sleepbud’s mobile application.
02 // Define
2.3 Product Roadmap
In step 2.3 I put the solutions into a list of product features to create a comprehensive product roadmap. These features were sorted into three categories: Must-Have (P1), Nice-To-Have (P2) and Surprising and Delightful (P3). They were sorted based on how well they can help achieve business goals and user goals.
The Product Roadmap not only infuses the project goals into the end product, but also ensures I prioritize the most important features in the development cycle.
02 // Define
2.4 Application Map
After setting up the product goals and deciding what features to include, I want to continue building up the structure of the Sleep App using the application map.
An application map helps me to visualize the relationship between the content and examine the hierarchy.
An application map helps me to visualize the relationship between the content and examine the hierarchy.
03 // Design
3.1 User & Task Flow
I mapped user flows whose scenarios correspond to the established tasks. This process helps me walk in an individual user’s shoes, and think through different scenarios that this user might encounter. Below is the user flow for Michael when he starts the Sleep App.
Additionally to assist the users to navigate through the application better and identify the main flow of users when they are completing a task, I created task flows.
03 // Design
3.2 Wireframes
Low Fidelity Wireframes
After identifying the task and user flow, I started sketching low-fidelity screens. I captured my ideas by pen and paper quickly by sketching. It also enables me to examine & change my ideas before putting everything in the more detailed process.
Mid Fidelity Wireframes
Once I had a visual direction of the Sleep App layout, I added more details and precisions to the sketches by turning them into mid fidelity wireframes. Creating mid-fidelity wireframes helps me focus on the visual consistency and hierarchy before applying styles.
In these wireframes, I incorporated common design patterns that have been tested and included elements that directly address users’ goals, needs, frustrations, and motivations. Because I am designing an app for iOS system, I referred to the Human Interface Guidelines of Apple in the design process.
04 // Prototype & Test
4.1 Usability Testing
After I finished designing screens that are necessary for users to finish tasks, I started usability testing using UserZoom.
Conducting usability testing using a mid fidelity prototype is useful for detecting issues in information architecture and flows before spending too much time designing details.
Prepare for Usability Testing
Before usability testing, I set up test objectives, subject, methodology, tasks, and rubrics for measuring the result of the testing before conducting a test. Therefore, I wrote a plan to define what and why I want to test and get prepared for the test.
Then I conducted both in-person and remote usability testing with 15 participants and created transcripts for each participant based on my observation of their interaction with the prototype. I put down mistakes, slips and confusions. This transcript is a perfect raw material for summarizing the patterns of user’s interaction with the prototype.
Test Subject
• Mid-Fidelity
• Mobile Prototype of Sleep App
Test Objectives
• Test if users are able to accomplish the given tasks
• Understand how long it takes for users to complete each task
• Identify the features that generate difficulties and confusion when users are navigating through
the website and completing a task
• Generate findings from testing results to shed lights on iterations for the next round
Methodology
1) Think-Aloud Method
1) Think-Aloud Method
– I will encourage each participant to adopt the think-aloud method, where they will talk about their thought process as they complete the task.
2) Usability Testing
– Moderated, in-person testing: I will open the prototype on my computer and invite the participant to complete tasks. In the meantime, I will be sitting aside, observing and taking notes of the process.
– Moderated, remote testing: A link to the prototype will be provided to the participants. I will set up zoom meetings with each of them, invite them to share their screen, and observe the task completion process.
Participants
15 Participants
Tasks
Task 1: Start Sleepbuds and change the sound.
Task 2: Use Sleepbuds and set the alarm, the sleep timer and check the battery status.
Task 3: Download a new sound on your Sleepbuds.
Results & Recommendations
Main Patterns
13/15 users had trouble finding the alarm clock function under “Settings”.
14/15 users tapped the “Next”-symbol and did not use the wipe function to change their sounds.
10/15 users were confused with the “Next-site”-symbol to change the page.
9/15 users were confused which sounds are loaded on their sleepbuds and which are not.
Main Insights
Users want to have one of their most important features available without looking for it in the menu.
Users naturally use the “Next”-symbol when changing their choice instead of wiping the cover.
Users naturally want to find what they like in a quick and intuitive way by swiping.
Users prefer “Downloaded” with an icon instead of text
Recommendations
Add a “Set Alarm”-button right at the “Connect-Page”.
Remove the wipe-option and enlarge the sound background picture.
Add a wipe option and remove the “Next-site”-button.
Remove the text and add a appropriate icon that represents “Downloaded”.
04 // Prototype & Test
4.2 Branding
Branding is key player in creating the product identity for the Sleep App. It includes a set of visual elements such as shape, dimensions, color or sound are all the contributing factors that make products memorable. The branding should reflect brand values and qualities through every illustration and interaction.
The Bose Branding
- Strong, sleek and angular: The Bose logo is made up of a wordmark. But it’s not a boring, outdated or static design. In fact, it’s quite the opposite. Bose is a technological brand with products that are known for their excellence and prominence. And the logo emulates that in its strong standing and powerful design elements.
- Modern: Bose tries to be an innovator of new technology. Therefore Bose owns a modern approach within all their product lines and marketing: Black and grey as dominating colors.
- Luxurious: Bose is a technological brand with products that are known for their excellence and prominence. That comes with a hefty price, of course. Their branding is luxurious in every aspect of its visual identity.
- Minimalistic: All Bose products are minimized to their actual purpose.
UI Kit
04 // Prototype & Test
4.3 High-Fidelity Wireframes & Prototype
Branding is key player in creating the product identity for the Sleep App. It includes a set of visual elements such as shape, dimensions, color or sound are all the contributing factors that make products memorable. The branding should reflect brand values and qualities through every illustration and interaction.
High-Fidelity Wireframes
Interactive Prototype
