Waterful app: water tracker & drinking reminder tracks daily water consumption and reminds the user when to drink to maintain a proper level of hydration of the body. It helps its users to develop healthy habits by making them take care of a brand hero, using intelligent alerts, and many more useful functionalities.
1. Competitive benchmarking
The first step was to analyze the competition and research standard functionalities vital for users around the world. It was an important part, because the premise of the project was to create an app available in over 40 languages and in different countries. Apart from testing almost every single app available on the market, the benchmarking process included the business and ASO strategy analysis. We used Sensortower and other resources.
2. UX sketching and initial user testing
Designing a paper wireframe of the most important interactions is one of the vital stages for the project – it’s the first moment in which users can finally “touch” a product.
First user testing of the low-fidelity paper prototype showed we had to find an emotional anchor point. It would help with developing a habit of hydration. The method let us save both time and money on validating our assumptions.
3.Exploring the UI version and the Brand Hero
After drawing conclusions from the first user testing, we went on to creating several apps’ main screen prototypes (with a slightly different approach to the testing).
The previous research clearly showed the path we should follow. We decided to use an Octopus 🐙 as a key character and our brand hero. It helped with creating a part of the interface dedicated to showing the level of hydration of the body. The brand hero evokes positive feelings and inspires the user to take care of it, and – at the same time – to pick up a habit of drinking water regularly.
Apart from showing four main levels of hydration (0-25%, 25-50%, 50-99% and 100%) we decided on making the Octopus show a current feedback on the most important actions taken by the app’s user. For that purpose, we designed:
- four versions of the brand hero informing about the excessive pace of hydration and the excessive fluid intake (potentially harmful),
- seven versions appearing after drinking a new drink and taking another step into proper hydration of the body
- three versions of the brand hero showed to the user after reaching a daily goal.
Onboarding was designed to be fast, positive, and engaging. At the same time it introduces the user to the interface pattern of the app. It organically teaches how to use the whole product.
Shows the most important information about a current day: hydration level, quick settings such as an extra water demand (because of training or hot weather), time left until the next drink is needed and its minimal volume, fast adding of a new drink (with three recently used types included), and an option to show the whole history of drinks of a current day.
Adding a drink
The user can choose from a variety of the most popular types of drink, and from several sizes of the cup, by choosing a proper icon in a proper colour; the extra annotation informs about the scale of the hydration brought by a certain type of drink. Additionally, the user can create their own type of a drink: choose an icon, colour, a name, and the level of hydration brought by it. There are over 40 icons to choose from.
The statistics show information divided into weekly, monthly, and yearly summaries. The user is being rewarded and encouraged by it to develop the habit even further.
The app can automatically choose the time to inform the user about the next drink to optimize the level of hydration during the daytime. However, the user can manually change these settings.
At any time the user can silence, turn off or pause the notifications from the level of the app’s main menu.
Communication inside the app
To support both the product and the user, we applied a system of internal communication based on a system of tabs at the bottom of the main screen just below the user’s interface. The tabs can support the user if they struggle reaching the goals. It allows better conversions into higher Google Play ratings by filtering dissatisfied users out and by redirecting the satisfied ones to the rating option.
After testing, the system turned out to be highly effective when it comes to improving the ratings and reviews of the app. It resulted in improving the ASO (App Store Optimization).
Menu & empty states