Smart Alarm - Solo UX Project
Smart Alarm is an alarm app that combines with a smart home device app. Its main goal is to solve user's bad wake-up experience by offering various alarm modes that allow them to personalize their wake-up experience.
My Role
UX/UI Designer
Timeline
Spring 2023 (4 months)
Type
User Experience Design,
User Interface Design,
Mobile App Design,
User Research,
User Test
Tools Used
Figma, After Effect
Overview
Overview
Prompt
Through research and personal experience, I have found that 80% of respondents experience dread and anxiety when their alarm rings. They struggle to find better ways to wake up comfortably in the morning. To solve this, I have developed an alarm app that offers various wake-up methods, such as combining the alarm with their smart home devices to wake them up according to their personal preference, not just the alarm ring.
Discovery
Personal Wake-Up Experience
Although the alarm can wake me up, I always feel like it ruins my good mood in the morning. I wish I could find another method to wake up.
Come Up With the Questions
-
How can I wake up in the morning without using a sound alarm?
-
How many people have the same wake-up situation as me?
-
80% of respondents claims to feel dread or anxiety when their alarm goes off. (https://www.brit.co/relationship-with-alarm-clocks/)
-
95% of Americans hate getting up in the morning.
(https://www.brproud.com/news/turns-out-95-of-americans-hate-mornings/)
Research
Interviewers’s Quotes
People may wake-up for several reasons, for example, environment factors.
Interviewer 1
“ Environmental factors may affect sleep quality. For example, the heavy rain, temperature, and sunrise. ”
Interviewer 2
“ People may wake up for several reasons, such as a pet's sound, someone living together, outside noise, etc. “
Interviewer 3
“ Connect the app with other technology products to wake people up. For example, a light. ”
Persona
Katherine
Product Designer / 26
“Even if the alarm can wake me up successfully, the alarm sound always breaks my good mood in the morning. I hope I can find other wake-up methods that not only wake me up on time but also in a good mood.”
Goal
-
I want to wake up on time.
-
I want to find a method that wakes me up easily and in a good mood in the morning.
Furstration
I cannot find other wake-up methods that make me feel comfortable.
Pain Points
People feel anxiety and stressful when their alarm goes off.
People cannot find a good method to wake up easily and in a good mood.
Goals
Audience Goals
-
I want to wake up on time.
-
I want to find a method that wakes me up easily and in a good mood in the morning.
Our Goal
-
I want to create different ways to wake people up instead of using sound of alarms.
Design Inspiration
I try to brainstorm ideas about factors that can wake people up. I also look around to see which devices are in my room and house. There is a smart light bulb, curtain, and speaker in my room. These devices can not only set the time but also change the environment. And I think they have the potential to combine with the alarm app, so that is why I extend my design ideas through smart home devices.
User Flow
Initially, I planned two separate flows for my alarm app: one for the alarm page and one for the smart home device page. However, my final design changed significantly from my initial plan. Combining the flows did not work out despite many design iterations and user testing. In this document, I will showcase how I solved this challenge using User Flow 2.
Alarm Page
01
-
Add a new alarm at 8:30am
-
Delete an alarm at 7:30am
Smart Home Device Page
02
-
Turn on the Bluetooth
-
Set up the light on the smart home page.
Wireframe
Home Page
Manage all categories.
Bluetooth Page
Permit Process.
Devices Page
Manage all devices.
Devices Setting
Conduct all device settings.
MI-FI Prototype
User Test
-
Conducted 7 rounds of user testing.
-
Interviewed 10 testers.
-
Tested 3 testers in person and 7 testers online.
-
6 testers have tested my user flow at least twice.
User Test
First Round
User Test
Second Round
Challenge
How do I combine those two tools well?
Clarify the Idea
Secondary Function
Primary Function
Special Feature
Alarm Modes
Help users customize their most comfortable wake-up method with their smart home devices.
Design Details
Increase Call-To-Action of the Add New Alarm Button
Help users customize their most comfortable wake-up method with their smart home devices.
Decision Making
-
Design Consistency: The pointer is the same as the tutorial guide on the onboarding page.
-
Clearly instruction:Users may clearly know they can tap the button as the animation shows compared to other versions.
Arrow
Focus
Click (Final Decision)
Flash
Design Details
Delete the Alarm
Decision Making
-
Efficiency: Dragging left to half of the alarm is not only faster but also in case of users accidentally delete the alarm.
-
Increasing multiple ways to delete the alarm may help users make a decision anytime without going to the other page:
According to my interview, some users told me they didn't know dragging left can delete the alarm.
Drag left to half of the alarm
(Final Decision)
Tap empty space to delete on the next page (Final Decision)
Drag right a little bit
Drag right a little bit and
tap the trash
Final Design
Main Features of Our App
Onboarding Page
To demonstrate tutorial guides to help first-time users how to use the app.
Home Page
1. Displays two primary functions to help users manage their settings clearly.
2. Increase add new alarm button to help users add new alarm efficiently.
[Click to learn more design details]
Alarm Page
Main features of the alarm page:
1. Add and edit a new alarm by tapping the plus button.
2. Delete the alarm by swiping left or tapping the space of an alarm.
[Click to learn more design details]
Alarm Modes
✨Special features✨ of the add alarm page:
Help users customize their most comfortable wake-up method with their smart home devices.
Bluetooth
Turn on the Bluetooth and do the permission precess after users select the alarm mode.
Devices Page
Main features of this app:
1. Add new devices by tapping new devices button.
2. Set the device by tapping the space of the button.
3. Turn on the devices by swiping the switch button.
