WakeApp Design Process

Esteban Angulo
4 min readNov 14, 2016

--

People need a reliable way to help them to wake up and to start the day with valuable information and energized. People need that their alarms are error-proof (not stopping it by mistake) and also customizable as much as possible as everybody has different needs and preferences.

WakeApp is created to solve this needs having in mind that is has to be practical, useful, simple and easy to learn for our new users. The idea is to transform the way people start their days and change their point of view to realize that “Waking up must not be a terrible experience”.

The core concept not only to wake up people, the idea is to provide them with important information form them via widgets. So after turning off the alarm, the main screen provides valuable information.

The design process started understanding the needs of potential users. After understanding the need, it was time to solve them. Based on the information received, the goal was to provide access to information without complexity. The first iteration resulted on clear functionalities but also having different ways to do it. There were some questions like the menu? Which options? Priorities? To solve those questions, storyboards were made showing real use-case scenarios and a 1st prototype was generated.

The 1st prototype had different approaches for some controls, the interaction flow, the information shown, etc. The idea was to follow the guidelines of mobile platforms but also include a special touch, something different that is useful at the same time. Another important decision was to include a challenge to turn off the alarm; the challenge is a small game that help people to be fully awake when they stop the alarm reducing the chances of stopping the alarm by accident.

Therefore, it was time to test it against some usability heuristics to see which of the options work better and would provide a great user experience. As some screen were missing and some flows had death ends, a redesign had to be done.

Wireframe

After the wireframes were ready, an internal test was performed to fix some design issues on the main screens of the app and then an interactive prototype was created. During the process, as the interaction was available, some other death ends where found, some re-design of components and options was also performed in order to follow the mobile platform guidelines or to have an interaction that was “logical” for the users.

New functionality was included. The “stats” menu, at the beginning was only an informative widget. Then its potential was detected and it was included as a new functionality providing the users more data. Later on (during the user testing phase), it was clear that the bet was correct; the functionality was appreciated by the users and it was a difference point from other similar apps in the market.

The prototypes were tested with final users. During the in-person tests, final users performed specific tasks (the main ones) and some possible improvements were detected. Changes on the layout of the elements and in the design of the prototype were done.

The new version was tested with other users online; the results were very good, the main purpose of the app and its functionality was well received and had good comments. Some suggestions were made about how the information is displayed or about the UI that tester will expect for the final version of the app.

Most of the testers mentioned they will use this app in the future and having games and meaningful information is nice way to start your day.

--

--