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.
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.
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.
Personas
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
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.
Moodboard
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.
Wireframes
We created two wireframes, to emphasize the differences between the iPhone and the slightly smaller Android.
Hi-Fidelity Prototypes
Just as with the wireframes, we created two hi-fi prototypes. The differences are small, but have to be considered.
