Alarm Clock HD reimagined
Context: Ironhack UX/UI Bootcamp
Timeline: Two Weeks
Team: Ayla Kekhia, Mahmoud Galal and Myself Célia Boureau
Tools: Figma, Fig-jam, Canvas, pen and paper
- The Brief
For this last project of the class as a part of Ironhack UX/UI Bootcamp was to collaborate with an External client to solve a design problem they have.
We collaborated with Impala Studios to help evolve their Alarm Clock HD app from just an alarm clock to being in the sector of sleep wellness apps to enable users to track their overall sleep quality and have better health.
Impala Studio
Impala Studio create Alarm clock HD app where users can set up and customize different alarms.
This IOS app is used worldwide, especially in the USA, as an alternative to the native alarm from iPhone. Alarm Clock HD provides multiple customizations like hanging colors and also a creative way to display the clock, actually, the user has the possibility to turn the smartphone into landscape mode to have a physical digital clock mode.
Impala Studio is a company of designers developing apps, mainly Alarm clock HD. As a team, we meet the loving impala studio crew, having conversations about the company, their projects, and their previous research about another sector.
- Our Goal
After many meeting we had with the designers of Impala Studio it became clear that our objective for this project will be: Moving Alarm Clock HD into the wellness app sector.
- Competitive Analysis
We proceed to a few competitive analyses of competitors from the wellness sector like better sleep, pillow, sleep cycle, and Mindful meditation. Those apps are mainly focusing on sleeping and waking up manner. We find that almost all of the sleep-tracking apps contain apple watch integration & compulsory account creation. The majority of them provide alarm features but none of them propose a digital clock the way alarm clock does. And finally, all of the sleep-tracking apps also provide sleep aids.
RESEARCH
We did quantitative data research by conducting a survey that’s consisting of 12 questions. From those insights, we discover that 80% of users said that stress and/ or anxiety prevented them from falling asleep. After the survey, we conducted interviews with five users from the age 25 to 44 years old
80%
of users said that stress and/or anxiety prevented them from falling asleep.
53%
of them said that staring at a screen before bed also kept them up way longer.
50%
of users resort to breathwork to help with restlessness.
Most
Are Users felt neutral about having to create an account
Quantitative research
- User Interview
We had a lot of assumptions and insights from the surveys but to validate everything and think as the user we then conducted our interviews with 5 users from the age of 25 to 44.
We collected all of the pieces of information we previously had from the survey and the interviews and start the affinity diagram to classify information and create categories
We thought it was more relevant to focus on two main patterns: THE PRE - SLEEP. According to our research, the biggest cause of insomnia is poor pre-sleep habits and/or anxiety.
For the POST-SLEEP (waking up) part, the most challenging is over-snooze, users over-snooze because they can’t tell the difference between consecutive alarms when they are half-asleep.
- Research Finding
THE PERSONA
Here’s our user persona sleepy Sebastian a financial consultant who’s struggling a lot with insomnia and over snooze
Sebastian
After drawing down his journey, we had a clearer vision of the problem :
In the insomnia part
Provide sleeping aids & guidance techniques for users to improve their pre-sleep behavior & fall asleep faster
Accumulate user data and propose curated solutions based on that
Providing free trials and demo states for premium features to incentivize users
In the waking up part
Provide the ability to understand the information easily and quickly upon wake-up.
Distinguish between snooze stages.
Present the users with an upcoming activity that pushes them to get out of bed.
- Problem Statement
So now that we have got the full picture it was time to define our problem.
Adults with sleeping difficulties need to find a way to sleep faster and better, and wake up rested and on time because they have poor night time habits.
- So How Might We
Provide a solution for people with sleeping difficulties that would improve the quality of their sleep and wake up on time and rested?
IDEATION
- Moscow Method
When it came to deciding which features to apply to our current product, we choose to form a strategy that will take into consideration the app’s current users so as not to overwhelm them, as well as the app’s objective in the long term.
We used the MOSCOW Prioritization Method to categorize our solutions in relation to their priority and to start having a strategy for the launch time for the features to ensure the smooth transition to the new sector.
The re-imagined Alarm Clock HD will propose features pertaining to two stages: sleeping and waking up.
It will help the user develop healthier pre-sleep habits and provide him with the aiding and tracking tools for a faster and better sleep. For the alarm, it will provide gradual snooze levels as well as an incentive to wake up on time.
The Minimum Viable Product
- Sitemap
From the MVP, we create the site map and userflow to guide us for the next steps
- User Flow
WIREFRAMING
- Low - Fi
It was time to jump into the low-fidelity wireframes
To improve our work, we asked five people to test our prototype, and after all feedback they gave us, we jumped into the mid-fidelity prototype.
- Mid-Fi
Here are feedbacks we received from the mid-fi usability testing :
“ Keeping the weather feature Users rather see it on the screen than leave the app to check it somewhere else “
“ Being more specific about how many times we can snooze Mention that it’s maximum 3 alarms “
“ Gradual snooze settings page For pitch and vibrations, “different” is confusing. Using another word like 'ascending' “
- Competitive Analysis
We conducted a visual competitive analysis to have a clear vision of the visual aspect. Among all the wellness apps on the market, we chose 3 main app
Alarmy, Better Sleep & Pillow
- Strategy for first update
The challenge for this project was to reimagine Alarm Clock HD and we respond to this by creating new features. In order not to overwhelm the 520000 current users already using this app, we decided to proceed with a slow transition and don’t change the name and the branding of Alarm Clock HD.
- Moodboard
We jump into the visual identity of the App and reimagine it by collecting different ambiances and ideas through pictures to create our moodboard and brand attributes.
We went more in detail about the aesthetic by designing style tile
- Style Tile
With the design team of Impala Studio, we had a design critique meeting to help us to improve the work we’ve done so far. Their feedback helps us to do some changes and also to go deeper into some good ideas we had.
- Design Critique
- Interactive High- Fi Prototype
We start our journey with the Pre Sleep nudges.
Sebastian receives a notification about his sleep time approaching. He clicks on it and arrives directly on the homepage where he can be informed about tips about the new features we add.
Sebastian goes to the alarm for adding an alarm for the next day and set up his gradual snooze.
Sebastian chooses his story for helping him to fall asleep. He also has some indications to change the orientation of his phone to landscape mode to access his digital clock full screen.
We end our journey with the Waking up Nudges.
The alarm ring but Sebastian decide to snooze. To distinguish each snooze from the other they have different colors.
We also decide to add the possibility for the user to follow his sleep progress on his setting and fill up his mood upon waking up.
We also decide to add the possibility for the user to follow his sleep progress on his setting and fill up his mood upon waking up.
- Apple Watch UI
We finally started working on the Apple Watch UI we had our basic screens at this stage
