UI UX Case study : AQUA — A water intake calculator app

Last month, I took part in #DailyUi challenge where for the prompt no.8 is ‘calculator’ and I was thinking of creating something different, unique and useful — and here you go, I picked water intake calculator app.

The reason behind this idea is because most of the people nowadays forget to tracks their daily water intake. With designing this app helps reminding them to drink water regularly.

Understanding the challenge

People tend to forget drinking fluid because of their busy work-life and more prefer sugary drinks like soft drinks, sweet flavoured drinks etc — they’re not enjoying the bland taste of plain water.

However…

By not drinking enough water can lead to dehydration, which can result in poor skin health, such as wrinkles, dry skin and in some cases, acne.

Tools

Adobe XD, Principle for Mac

The Process

User Experience (UX)

This case study is in conjunction of DailyUI challenge prompt, Therefore to be upfront my finding won’t be in-depth and only focused on the Home Page (more to come soon…)

Starting with short interviewed few of my peers to gain understanding of the needs. Hence also, gather the requirements for the product. From all above insights, I scribbled wireframe on the paper to get a rough idea.

On the basis of the finding, the following requirements plan are:

• To have a water intake reminder
• To have current water intake indicator in (percentage)
• To have a quick add amount button (set by volumes of bottles/glasses etc 300ml, 700ml, 1.5l)

UI Experience (UI)

As above mentioned, this article I’m only focused on Home Page screen (will continue and expand more screens soon for sure).

Selection of colour

I picked a variation of blue which represents of water and the accent colour of orange to indicate Call To Action (CTA).

Home Page Screen

Home Page screen contained features: water intake reminder, current water intake indicator, quick add selection set of bottles/glasses, profile, performance and setting links.

I emphasised the current water intake and quick add amount selection link because these are the most crucial and useful in creating successful experience. Moreover, by displaying running water effect as a background will let users aware their current water intakes visually.

Conclusion

Work on this case study gave me valuable experience. It shows the importance of drinking water. Therefore, this app helps established healthy habit of drinking water.

Side Note : More shots on my dribble

Originally published at strokeszebra.com on March 11, 2019.