Clock App Redesign

Vision

Uplabs is the leading community of creatives, offering the best digital inspiration and downloads, every day. Uplabs offers design challenges based on different areas and interests. I participated in one of its challenges.

Design Challenge

The challenge was to design or create the             superb Clock App!

Timeline & Participation

Team: Personal

Timeline: 2 days (Usually, the Uplabs challenges have the timeline of two weeks. But I got to know about it when there were two days left for the submission.)

Process

Research

• Research on existing clock apps

• Observations & Findings

​

Sketches

• Brainstorming for graphics and layout

• Sketches for possible solutions

​

Design

• Wireframing

• Color scheme

• Placements for features

​

Implementation

• Prototyping

​

Research

Research on existing clock apps: Timeline was tight for me to research the pain points for redesign the clock application. So, my first step was to look for the exiting clock app on different platforms such as Android and iOS.

Observations & Findings: After analysing the existing clock apps, I researched the common pain points of different features of the clock apps people face nowadays. In the Clock app, people put alarms, use stopwatch as well as timer and world clock shows different time for various regions. I focused on the most common pain points and suggestions while redesigning the application

​

Sketches

Brainstorming for graphics and layout & Sketches for possible solutions: For the layout of the application, I tried a few sketches to showcase the main four options like alarm, clock, timer and stopwatch. Then, I focused on the design according to the thumb zone for the latest bigger screens.

For graphics, my initial idea was to use 2D icons but then I switched to 3D icons as people can connect with the icons when they are in three dimensions. 

Design

Wireframing:  To create a fully functional prototype of the clock app I designed a wireframe to have an idea about the look of an app.​

Color Scheme:  I selected colors which can give an idea about the time. Such as morning alarm would have the lightest color, noon alarm will have a darker color than the morning alarm and evening alarm will have the darkest color among all the alarms. The text has the darkest color (Black)to convey the information.

Placement of features:  I decided the placement of text, icons like vibration or ringer and color coordination for the prototype and implemented it in the final output. 

Implementation

Prototyping:  I used 'Figma' to build the final prototype of a clock App.

This one is the page where the user can see all the alarms he has added at a single place. The color scheme describes the time of the alarm on the screen.

​

On the selection of any feature, the selected feature(out of a clock, a timer, a stopwatch or an alarm) will be visible quickly because it will be changed in to "Royal Health" (Pink)color instead of "Sapphire"(Blue) color.

To add an alarm the user will not miss selecting AM or PM as they will be in the first place to direct him.

For setting the alarm with hours and minutes, the user can select the digit directly from the circles and the time left to ring the alarm from the actual time will be displayed to the user. 

​

3D icons for Ringer and Vibration will convey the meaning without text.

The date difference for different regions compared to the actual location will help users not to get confused with dates and days. 

​

The time difference is always displayed in the clock app but the term "Ahead" or  "Behind" will help users to calculate the difference easily.  

​

​

In Timer, the "Hours", "Minutes", "Seconds" are clickable directly to put the duration so that the user can save time instead of scrolling.

​

The start button is going to be changed in to Stop once the timer starts. So that the user won't get confused with too many buttons.

In stopwatch, the user will be able to see Analog and Digital both the options together. So that the user can make an easy choice between them. 

​

​

Previous Project