top of page
Thumbnail 1.png

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.

Group 1416.png

Come Up With the Questions

Research

Interviewers’s Quotes

People may wake-up for several reasons, for example, environment factors.

Interviewer 1

Group 1434.png

“ Environmental factors may affect sleep quality. For example, the heavy rain, temperature, and sunrise. ”

Interviewer 2

Group 1433.png

“ People may wake up for several reasons, such as a pet's sound, someone living together, outside noise, etc. “

Interviewer 3

Group 1432.png

“ Connect the app with other technology products to wake people up. For example, a light. ”

Persona

Rectangle 2213.png

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.

Group 1419.png

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

Group 1421.png

Home Page

Manage all categories.

Bluetooth Page

Permit Process.

Devices Page

Manage all devices.

Devices Setting

Conduct all device settings.

MI-FI Prototype

Rectangle 2314.png

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.

Group 1435.png

User Test

First Round

Group 1176.png

User Test

Second Round

Group 1177.png

Challenge

How do I combine those two tools well?

Group 1011.png

Clarify the Idea

Group 1180.png
Group 1069.png

Secondary Function

Primary Function

Special Feature

Alarm Modes

Help users customize their most comfortable wake-up method with their smart home devices.

Group 856.png

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

  1. Design Consistency: The pointer is the same as the tutorial guide on the onboarding page.

  2. 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

  1.  Efficiency: Dragging left to half of the alarm is not only faster but also in case of users accidentally delete the alarm.

  2. 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

Vector 184.png
Vector 183.png
Vector 182.png
Vector 181.png
Onboarding Page

To demonstrate tutorial guides to help first-time users how to use the app.

Group 807拷貝.png
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]

Group 806拷貝.png
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]

Vector 180.png
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.

Group 805拷貝.png
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.

468-td-15526-mockup 1.png
bottom of page