Early Game Alarm

This is an interactive iOS alarm-clock app that we’ve designed for users having trouble waking up.

Project type

iOS Application

Our role

UX design, UI design, Branding

Year

2017

Link to the website

earlyapp.io

50.000+

Downloads

4.8

App Store Rating

‘New App We Love’

Featured on the App Store

The task

As the app is aimed at the users who need to stop using the snooze button, we needed to create an interface that would be simple to use and easy on the eye for our sleepy user.

The solution

We decided on a dark background so the user wouldn’t get blinded by the glaring screen, and strong accent colors to achieve the fun competitive vibe.

Branding

Logo design

The main inspiration for the app logo was the image of a traditional analog alarm clock.

Sketches

Style guide

Early is both fun and functional app which people use right upon waking up. Because of this, we chose a color scheme and typography that would be bright in feeling but not too hard on users’ eyes. Linear shapes and a light font, all in fun colors on the dark background, achieved the effect we wanted.

Typography

Colors

Icons and Illustrations

UX Design

UX for the iOS app

Early was supposed to be a simple app with only a few screens. Due to Apple’s restrictions for third-party apps, we had to create a lot of notification messages and explanations. We felt this was degrading the user experience, so we started with the user flow predicting all possible issues a user might face.

UI Design

UI for the iOS app

We wanted a nice-looking, cheerful, but easy-to-use alarm clock, even simpler than the default one. So, we made several custom UI controls and appropriate animations.

Product Features

We created simple UI controls so users can quickly access and change the time on the alarm, melody, or the game. We used the circle as a basic element of the design as it is the perfect shape and reminiscent of the traditional alarm-clock.

Alarm clock – It is very easy to adjust the time just by swiping over the two circles to choose the number for hours and minutes.
Melody – This button leads users to the page where they can easily change the melody of their alarm.
Game – Clicking on this button leads user to the page where they can choose one of the games that will wake them up.

Other Features

Our aim was to create screens that have a clear structure and where users can efficiently perform all the actions they needed. This is a screen where users can preview or edit their alarms.

Alarm – This is an alarm that the user set, it shows the time, days, the chosen game. It can be edited or removed with one click.
Menu – The user can easily access other screens, set a new alarm, or preview and play the games that can be added to the alarm.

All-time favorites

As we wanted an app that’s not only beautiful but also functional and would wake up users, we created 9 different games, all written in simple and lightweight SpriteKit.

Localization

At WWDC16, we got invaluable feedback that helped us improve the user experience. We realized how important localization would be, and now with 7 languages, we cover almost half of the world.

Reviews

After 3 years on the App Store, Early Game Alarm has more than 50 000 downloads. Together with the positive reviews from our users, this makes our work worthwhile.

Early Game Alarm has been featured by the App Store as The New App We Love in more than 20 countries all over the world.

It can be tough getting up in the morning. Just one more minute. Roll over one more time. With Early Game Alarm, it can be fun to wake up, since it’ll have you start the day with a short fun game. Get your win in before you leave your bed!