top of page
Group 1059.png
Smart Alarm | Mobile App Design

Overview:
Based on my research and personal experience, I discovered that 80% of respondents feel dread and anxiety when their alarm goes off. However, they struggle to find alternative methods to help them wake up successfully and comfortably in the morning. To address this issue, I created a smart alarm app that provides users with different wake-up methods to help them start the day in a better mood.

About The App:
Smart Alarm is an alarm app that provides different alarm modes to your wake-up experience and helps users be successful and comfortable waking up in the morning.

My Role

UX/UI Designer

Timeline

4 months (Spring 2023)

Type

UX Designer,
UX Research,
User Test

Tool Used

Figma, After Effect

Research

Discovery, Research Summary, Interview, Pain Points, Persona

Discovery
Group 1041.png

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?

Summary
How Many People Have The Same Wake-Up Situation As Me?

I realize that many people have the same wake-up situation as me, and it could help me better understand the real problems that people face and try to satisfy their needs.

Group 1060.png
Group 1061.png
3 interviewees
Interview Summary

People may wake up for several reasons, for example, environmental factors.

Pain Points

I concluded the pain points based on the interview and research outcomes.

Group 1046.png
Group 1045.png
Persona
Group 1048.png
Project Goal
Group 1041_edited.png

I want to create different ways to wake people up instead of using sound alarms.

Design Inspiration

Narrow down the design thinking process and come up with several functions/features for the app.

Where Did The Idea Come From?

After brainstorming, I thought of smart home devices that can schedule wake-up times and create personalized wake-up experiences. For instance, a light bulb could turn on to wake someone up.

截圖 2023-06-20 下午3.47.58.png
Brainstorming The Functionality Of The App
  • Alarm
    alarm setting / add alarm / delete alarm / manage alarm

  • Smart Home Device
    device setting / manage devices / add devices / delete devices / connect devices / feature setting

    • Bluetooth
      connect devices / system permit / bluetooth setting process​

User Flow & Wireframe

How do I go about the design process?

User Flow - Overview

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.

Group 1173.png
Wireframe - User Flow 2 - Smart Home Device Page
Group 1174.png
Slide 16_9 - 463.png
Mid Fi Prototype
User Test & Iteration

Start implementing the design based on the tester's feedback.

User Flow - Overview
Why Did I Conduct Seven Rounds Of User Testing In The Same Flow?
Group 1175.png
  • 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 1175.png
User Test
First Round

In user testing, testers felt that this app seemed more like a smart home device app than an alarm app. This is because the smart home appliance page allows users to complete all settings, including alarms and features. They don't need to use the other pages and features of the alarm app. Testers also felt that the device setting process had too many steps.

Iteration
Schedule Setting
  • Reduce the number of steps.

  • Unify the alarm setting process in the same places.

Version 1

Version 2

User Test
Second Round

The overall feedback I gained is that although combining schedule features together may help reduce 5 steps, jumping to different pages to do the schedule settings makes the users confused.

Group 1177.png
Iteration
Keep Revise Design Based On Tester's Feedbacks (Version 3 ~ Version 5)
Group 1179.png
Challenge

How do I combine the Alarm and Devices page well?

Clarify My Problems & Fresh Back My Project Goal
Group 1011.png
Group 1180.png
Solution and  ✨Special Feature✨
Group 1069.png

Primary Function

Secondary Function or Supporting Function

img2.jpg
 User Flow 1 - Hi - Fi Prototype
468-td-15526-mockup 1.png
Design Details

Increase CTA of the add new alarm button, Delete an alarm

Increase Call-To-Action of the Add New Alarm Button

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

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.

Rectangle 331 (1).png
Rectangle 2183.png
Takeaways & Next Steps

With this project, I learned about the different ways users digest information and what challenges they frequently encounter. To make my app better, I revised my project based on my research, design critique, and user feedback. I enjoyed the whole design process, especially, when I look back to my before and after design, I can see my app growing and truly becoming better.

When it comes to further improve this experience, some next steps would be:

  • explore more detail on the devices page.

  • create an online survey to get more feedback.

  • think more possibility of the wake-up method.

  • connect with watch and design the user interface of the watch.

bottom of page