Watertime Pro Mobile Homepage

Research – Personas – Interaction Design – Wireframes – Prototypes

The problem we were solving

Originally published in 2013 the existing homepage of this mobile app was outdated and in need of an overhaul.

With more than 4,500,000 downloads, this app certainly had a proven track record.

Design Team at work
Assembling the Team

This certainly was an interesting team, with several nationalities and challenges:

  • The product owner, who called in with Skype when needed,
  • A representative for the product owner, with no real authority,
  • A developer, who took care of the technical bits,
  • A UI Designer, who’s English was limited to “yes, yes” and “tapas”,
  • A UX Designer, which was me.
Understanding the Problem

When we compared this homepage to similar ones, what became obvious was that the others showed more information and stats. That made them more communicative and to a certain point, present more value to the user.

The interface made exclusively use of vector elements; no photographic images and such. We had to keep this for the new homepage, otherwise every page of the app had to be re-designed.

The Original Homepage
Competitive Research
Part of the competitive research

First we took a look at quite a few other “Water drinking monitoring apps”.

Most of these do not use photographic images, so that became a non-issue. Of course there is a lot of attention to the amount of water consumed; and there are several ways to chart this out.

Four Personas for the water app

We created four personas and looked at how they would use the app.

Even though we only were designing the homepage, we still had to know what additional pages our users wanted to navigate to.

Use Case 1 Add a drink to your daily volume
Actor User
Overview The app is opened and by tapping the glass, the set volume is added to the daily total.
Personas Ellen / Joel / Sandy / Andrew
Trigger Drinking a glass of water
Basic Flow 1. Unlock device
2. Open / activate app
3. Tab the image of the glass
4. Lock device
Alternative flow 3A / 3B / 3C Coffee / Tea / Juice instead of a glass of water
Actor User
Overview You want to add a glass of coffee / tea / juice to your daily volume, instead of the standard glass of water.
Personas Ellen / Joel / Sandy / Andrew
Trigger Drinking a cup of coffee / glass of tea / glass of juice
Basic Flow 3-A1. tab coffee / tea / juice
3-A2. specify amount
3-A3. tab ok
Use Cases

With a flat implementation model like this, it was obvious that usage among all four personas would be similar.

We found a total of five use cases:

  • Add a drink to the daily volume¬†(shown in detail here),
  • Change the standard volume of the glass,
  • Check the statistics on water drinking,
  • Switch to night mode,
  • Switch to “having an active day”.
Flowcharts of the Use Cases in preparation of the Prototype Build
Flowcharts of all Use Cases

When we put our use cases in flowcharts, operations became much clearer.

We needed seven buttons / active areas: the Glass (which had a double function), Coffee, Tea, Juice, Stats, Sleep and Active day.
When we add a Settings button to the mix, we are good to go.


A simple moodboard was all we needed.

  • We did look at the different requirements for the two major systems,
  • The colors were determined by the product owner,
  • The cartoonish waterdrop came over from the previous version,
  • Icons were drawn for all necessary buttons.

We created two wireframes, to emphasize the differences between the iPhone and the slightly smaller Android.

Wireframes for iPhone and Android
Prototypes for iPhone and Android systems
Hi-Fidelity Prototypes

Just as with the wireframes, we created two hi-fi prototypes. The differences are small, but have to be considered.