ArticleManagerLook at the daily tool applications, whether it is note-taking tools, alarm clocks, to-do lists, calculators or calendars, they are designed around users and application scenarios, and occasionally products will add some unique designs on this basis. Tubik Studio also designed and eventually developed an alarm clock app called Toonie Alarm, which was released on Product Hunt and rose to the top five in the product category list in just 4 hours. In today’s article, we will share the design process of this product.
task
Design an engaging alarm clock app for iPhone with complete UI and UX design.
Design ideas
Toonie Alarm’s design process is naturally different from other Tubik Studio design projects, many of the previous projects were mostly put forward by the party or even the initial concept design, and then we propose the design plan according to the needs. Toonie Alarm is taking a completely different path, it is a product that is completely self-demanded, designed and developed, and our ideas are carried out throughout, without the influence and interference of third parties. Therefore, what Party A was responsible for in the past, this time we need to do it completely ourselves. We conceived its entire functionality and product strategy, thought about selling points and marketing plans, built the brand, and so on.
Initially, the idea was to create a simple alarm clock with attractive design and consistent elements, and we wanted it to do something less pleasant: like a reminder to wake up. In terms of brand temperament, we position ourselves as fun, cute, positive and clear, and we consciously integrate these characteristics and concepts into marketing planning.
After user research and analysis, our design team determined that the entire product design and function have the following characteristics, or selling points:
All the features in the app should be free for all users
Use simple, clear, intuitive navigation
Bright and beautiful interface
Atmospheric beautiful sticker elements
Combine alarm wake-up functionality with an achievement system
Delightful interactive animations
Animated time selector
Ability to instantly share achievements with friends
Next, let’s take a look at how the designers of Tubik Studio implemented these features.
Cute mascot
In previous articles, we discussed the important role of mascots in brand design and UI design, and for the Toonie Alarm app, mascots are equally important. In our opinion, the mascot is a channel for emotional communication between the user and the interface, and it is also a representative of the brand image, which can strengthen the identity of the product. In addition, it allows designers to better create the atmosphere, create personality, and is a bridge between users and products.
So, we created a cute and happy bird as Toonie’s mascot, and its mission is to make users’ lives more transparent and help users manage their time and lives. It pushes information to users, provides rewards, reminds mistakes, adds fun to life, and adds color to life.
APP usage tutorial
Tutorials are an important part of the interface that helps users understand basic interactions and featured features. In Toonie Alarm, the tutorial contains three screens of content to carry the introduction of functions and interactions. Short and clear intro copy, coupled with smooth and natural transition animations, combined with mascots, create a happy atmosphere.
Main interface
As an alarm clock app, the home screen is naturally used to carry various alarm clocks and set alarm time. Once you’re awakened by your alarm, you can collect all kinds of fun stickers on your home screen. Why is it appropriate for the specific scene of getting up, the switch button of the alarm clock is designed to look like a little sun. Swipe left and users can turn on more features for a specific alarm.
Sticker interface
Stickers exist as a reward mechanism for the app, and if the user gets up at a certain time, they will be used as a reward to enrich your collection, and the user can also gain a sense of achievement and gradually develop good habits during the collection process. These stickers can be shared through social networks, marking achievements.
Time selector
Another outstanding feature of this app is the time selector with animations. Toonie Alarm’s entire navigation design remains simple and intuitive, and the animation effect makes the process enjoyable when the user starts setting the time.
Dynamic stickers
The sticker itself is used to strengthen the pleasure of the APP itself, and the animation can make the already cute image itself more vivid and lively, which is obvious for the improvement of user experience.
Logo style
Toonie Alarm is very entertaining, and this feature should also be highlighted from the LOGO design, and the cute comic style font makes the product full of cute atmosphere.