top of page
Smart Alarm | Mobile App Design
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.
4 months (Spring 2023)
Figma, After Effect
Discovery, Research Summary, Interview, Pain Points, Persona
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?
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.
I concluded the pain points based on the interview and research outcomes.
I want to create different ways to wake people up instead of using sound alarms.
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.
Brainstorming The Functionality Of The App
alarm setting / add alarm / delete alarm / manage alarm
Smart Home Device
device setting / manage devices / add devices / delete devices / connect devices / feature setting
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.
Wireframe - User Flow 2 - Smart Home Device Page
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?
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.
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.
Reduce the number of steps.
Unify the alarm setting process in the same places.
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.
Keep Revise Design Based On Tester's Feedbacks (Version 3 ~ Version 5)
How do I combine the Alarm and Devices page well?
Clarify My Problems & Fresh Back My Project Goal
Solution and ✨Special Feature✨
Secondary Function or Supporting Function
User Flow 1 - Hi - Fi Prototype
Increase CTA of the add new alarm button, Delete an alarm
Increase Call-To-Action of the Add New Alarm Button
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.
Click (Final Decision)
Delete the Alarm
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
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
Main Features of Our App
To demonstrate tutorial guides to help first-time users how to use the app.
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]
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]
✨Special features✨ of the add alarm page:
Help users customize their most comfortable wake-up method with their smart home devices.
Turn on the Bluetooth and do the permission precess after users select the alarm mode.
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.
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