Meet Vismorn, a goal-oriented alarm clock
Final prototype: http://share.framerjs.com/jpp5t47u6tlj/
I have just finished working on a final prototype of an alarm app. I would like to share my experience with the capstone project for Interaction Design Specialization.
Are you satisfied with your alarm clock?
The problem I would like to tackle is about managing time, especially in the morning. I was wondering whether other people have a similar problem with me or not because I had a difficulty in managing to wake up at a planned time due to my laziness; thus I used to be late in the morning although I would like to be punctual. Thus, I have made a prototype of a mobile application to help people be punctual on time.
I found that people who usually fail to wake up at planned time have a similar problems. People who usually are successful to wake up at the proper time also have a problem with the existing basic alarm clocks they have used (e.g., built-in alarm clock app).
1. Time you “want” to wake up vs Time you “actually” wake up
People have the ideal wake-up time and set this time on the alarm clock. However, in the morning, they easily delay their wake-up until the last minute.
2. Habitual snooze
People tend to do snooze habitually, often because they think they have enough time or they cannot resist the temptation of wanting to sleep for a few additional minutes, resulting in frequent and continuous snoozing.
3. Cumbersome to check an alarm time every night
People are always unsure or forget whether they set a proper alarm time for the next morning. This often results in tedious and cumbersome alarm time checking every night.
Meet Vismorn, a new alarm clock
This is my prototype as a solution for the aforementioned main three problems.
Scenario video:
A goal-oriented alarm clock
The main page shows a time to go out (at the top of the left interface) and a wake-up time goal in the morning (at the bottom of the left interface). The app calculates how many hours I can sleep from the current time and how much time I have to prepare to go out since the wake-up. By making this information visible, we are more informed about time we have , potentially leading to better time management.
Showing the rewards and disadvantages for your action
Vismorn lets you know how much time left until going out in both cases: 1) when you wake up right now and 2) when you snooze and wake up 10 minutes later. That is, Vismorn directly visualizes the effect of your decision by showing the actual time left. Moreover, when a user keeps snoozing and the time that the user has to go out is approaching, it provides an additional function if the user snooze: sending a message in order to notice others that the user might be late. I assume that the user may choose to wake up rather than snooze and send a message.
Vismorn provides an advanced-options for days of the week and a snooze limit time. Users also can check their alarm patterns about when a user plan to wake up and go out, and when a user actually wake up in analysis page.
Design process
My design process included needfinding, ideation, wireframe sketch, heuristic evaluation, making an interactive prototype, user tests, and A/B test in order.
1. Finding user needs
I conducted interviews for three people and found their breakpoints and opportunities for using the alarm clock.
2. Ideation
Based on the user needs, I defined a Point of View: by providing an appropriate wake-up time depending on factors in relation to the wakeup, one can easily wake up and start his/her day at planned time. Also, providing not only a awaken sound but also any information to awake people that is optimized for individual person would help people spontaneously wake up. I brainstormed service ideas with inspirational keywords and design.
3. Storyboards
The first storyboard is about breakpoint in checking and changing an alarm clock every night. A service idea is that providing a push alert of an alarm clock information at night and alarm changing function depending on user’s condition.
The second one shows that a sleepyhead habitually snooze and cannot wake up and go out at the planned time. For this reason, he is often late to work. An idea is providing a snooze limit after the specific time when people have to go out to be punctual.
3. Wireframe sketches based on the storyboards
The first sketch is a conversational agent that is inspired by the Quartz news app. This app can personalize an alarm time by communicating with users through conversational messages.
The second one is the visualization of time information. The area and place of each card represents the duration and time respectively. Users can change the alarm time by dragging up and down to change the size of the area.
4. Heuristic Evaluation for two wireframe sketches
With the two wireframe sketches, I conducted heuristic evaluation with three people. Based on the results of the heuristic evaluation, I revised the sketches and designed my first prototype. I decided to develop the second sketch because of the importance of clearly showing the time information in the alarm clock.
5. Interactive prototype
With the low-fidelity prototype, I made a full working prototype. First of all, I made a information architecture and listed up all pages of my app. Then, I made prototype by using Framer.js. The Framer.js was the proper tool for me because I would like to implement the unique time control interaction. It took a lot of time than I expected but it was worth.
6. Informal user testing of the interactive prototype
Through user test for two people, I found some problems that are 1) people feel hard to find a way to adjust the time without any guide, 2) people want to make an alarm clock app more personalized as changing the default functions: the limit time of snooze and provided information when alarm is ringing; and 3) people feel uncomfortable the place of minus and plus button. (It would be better to provide the opposite direction)
6. A/B test
I conducted two A/B tests for the main design decisions. Based on the test results, I sketched redesign interface. And then, I applied it on my prototype.
Experiment 1. Which one is more effective and easy way to adjust the time between 1) only allowing to drag to adjust the time with 1 minute of time unit and 2) allowing to tap and drag to adjust the time with 5 minutes of time unit.
Experiment 2. Which one is more understandable and useful options page to control the app between 1) providing detailed information on each list for days and no other options and 2) simplifying the information on lists and providing options of the snooze limit time.
The result of A/B Test
- It is more time-effective and the easy way to allow users to both clicking and dragging to adjust the time than only providing dragging interaction.
- A tutorial is needed to let users know to use dragging.
- Not only the time unit but also the speed of change the value are important to improve the usability.
- Users are more satisfied with simple design of options page than the design providing repetitive information of each list.
- Users are more satisfied when they can personalize the snooze limit time than when the snooze limit time is provided as the default value, 30 minutes.
- The icon for options (setting metaphor) is not matched with the content well.
List of Potential Revisions
- Provide a tutorial for adjusting the alarm time.
- Provide a better icon for options.
Here is a link of my final prototype. Feel free to give me a feedback :)
What I learned from the project
In this course, I have iterated the design process: evaluating a design, redesigning and again. I learned that this iteration process is necessary to make a better product. Thanks to the interaction design course, Scott and Coursera!
