UI Design - The Design System

Desktop - 2.jpg

The Design Concept

How many times did you forget to drink all 8 glasses of water per day or forgot to take your multivitamins?

In my case it has been an infinite number of times when I planned to drink at least 8 glasses of water but ended up falling short because I was too busy to remember this small task that has a major impact on my health.
COVID 19 has taught us that keeping a healthy life style is not a luxury but a necessity.
We use alarms to keep a track of important events, meetings, classes, naps etc etc. But what are we using to keep a track on our healthy life habits?

The Alarm Cards

Imagine a world where you don’t have to take the BURDEN of remembering to drink water or take your daily dose of medicine or even to put your notifications on silent mode when you’re about to sleep.
The concept here is to add a new feature of alarm cards in the alarm section of your devices where the device takes the responsibility of keeping you on track with “ALL THE DAILYS’ in the form of cards.

 Wireframes

Frame 1.png

 Hi Fi Mockups

Frame 2.png

Prototype Demo

ezgif.com-gif-maker (1).gif
 
 
ezgif.com-gif-maker (2).gif

The Design System

Color Palette

Desktop - 4 (1).png

Typography

Desktop - 4.png

Icons and Illustrations

Desktop - 4 (2).png

Motions

ezgif.com-gif-maker (5).gif

Focused Motions

Attention on what is important without any distraction

ezgif.com-gif-maker (8).gif

Expressive Motions

Add character to common user interactions

Gestures

ezgif.com-gif-maker (1).gif

Navigational Gesture

Users move through the product easily

Type of gesture
Tap - Users touch the elements to navigate through the product

ezgif.com-gif-maker (2).gif

Action Gesture

Users complete a certain action

Type of gesture
Tap - Users touch the elements to complete the action

Spacing

Desktop - 8 (2).png

Components

Desktop - 4 (3).png