Water Fortune

Encourage people to drink enough water and keep themselves hydrated throughout the day.


UX Research, UX/UI Design

INTRODUCTION

Overview

This project targets at the pervasive problem of people’s dehydration. Our design solution is Water Fortune, a mobile application that encourages people to drink more water by customizing their daily water-intake goals, learning water-drinking tips and being motivated by unveiling a fortune cookie note when achieving the goal.

FIRST STEP

Onboarding Process

Get to know how Water Fortune works.

SECOND STEP

Customize Your Goal

Tell us about yourself, customize your bottle size and get recommendations of your water daily intake.

THIRD STEP

Log Water Intake

Log your water intake, learn about water-drinking tips and unveil a fortune cookie

FOURTH STEP

Review Your Intake

Keep track on your water-drinking performance

FIFTH STEP

Intelligent Notification

Know the best time to drink water

DESIGN PROCESS

How I proceeded

The project was a 12-week long course project. The timeline below demonstrated the full research and design process of the project.

RESEARCH

Gathering Information

After deciding the goal of this project, we applied different research methods to better understand the main pain point of water drinking and our competitors in the market.

01. Interviews

I conducted 2 interviews with people who considered themselves as dehydrated and uncovered three primary reasons for their dehydration.

Lacking Awareness

People lack the awareness of how much water they should drink to keep themselves hydrated, as well as their own dehydration level.

Lacking Knowledge

People lack the knowledge of dehydration, which results in them overlooking the habit of drinking water and the importance of keeping themselves hydrated.

Lacking Motivation

Changing behaviors and habits are usually difficult. People’s insistency and patience fade easily as the process moves forward.

02. Competitive Analysis

We then conducted the competitive analysis on 4 existing products in the market that aim for changing people’s water-drinking habits, and concluded three primary findings.

Gamification is helpful for behavior change and increasing motivations.

Users lack the concept of the daily water-intake volume recommended by the app.

All of our competitors use regular and frequent reminders, which could be bothering for users.

METHODOLOGY

Behavior Change Techniques

After synthesizing the research findings, we identified the behavior change techniques we learned from class that could be applied in our later design to encourage users to change their water-drinking behaviors.

Prompt Self-monitoring on Behaviors

The person is asked to keep a record of specific behaviors.

Provide Information about Behavior-health Link

General information about behavior risks, for example, susceptibility to poor health outcomes or mortality risk in relation to the behavior.

Provide Information on Consequences

Information about the costs and benefits of action or inaction, focusing on what will happen if the person does or does not perform the behavior.

Provide Feedback on Performance

Provide data about recorded behavior or evaluating performance in relation to a set standard or others’ performance.

Provide Contigent Rewards

Praise, encouragement, or material rewards are explicitly linked to the achievement of specified behaviors.

IDEATION

Map out Features and User Flow

We then brainstormed the primary features and mapped out the user flow of the app.

DESIGN

From Sketch to Design

The design process started from sketches of gamification ideas, and took several rounds of iterations from wireframes to hi-fi prototypes based on the feedback from in-class usability test.

01. Sketches

Gamification is something we want to add onto the app to encourage motivations. Thus, thinking about an innovative and useful way of involving gamification was our first step.

02. Wireframe

After deciding on borrowing the concept of fortune cookie notes, we created the initial wireframes of the key interface.

Usability Test

After designing the wireframes, we conducted a round of in-class usability test to get feedback on the usability and concept of the initial design.

03. Mid-fi Prototype

Taking the feedback from the usability test, we iterated on the wireframes into mid-fi prototype to further improve the usability of our app.

Key Iteration/1

Redesigned the interaction of adjusting the recommended goal for more flexibility.

Before

After

Key Iteration/2

Redesigned the interation of choosing bottle size by providing options users could directly select from.

Before

After

Key Iteration/3

Redesigned the information structure and layout of the water-logging interface for better readability.

Before

After

Key Iteration/4

Redesigned the profile page by removing the archived fortune notes.

Before

After

Usability Test

After the iteration on the initial wireframe, we conducted another round of in-class usability test.

DESIGN GUIDELINE

Component Library

Before creating hi-fi prototype, I created a brief design guideline of the app that defines the color palette, typography and the main components.

05. Hi-fi Prototype

After the usability test, we iterated the design again and applied the design system to create the hi-fi prototype.

Key Iteration/1

Redesigned the interaction of adjusting the recommended goal for more flexibility and visualize the recommended water volume.

Before

After

Key Iteration/2

Redesigned and simplified the way of inputing users' own bottle size.

Before

After

DESIGN

Design Details

01. Input Basics

Users are asked some basics such like gender, weight, activity level and weather, which are related to their daily water intake customization.

02. Choose Bottle Size

Water Fortune also asks users the bottle size to better quantify and measure the recommended water intake.

03. Customizable Goal

The app recommend users their daily water intake based on their basics, which is measured with users’ own bottle sizes.

04. Log Water Intake

Users log their water intake to reveal a fortune cookie note when reaching the goal.

05. Review Water-drinking Performance

Users can always review their daily water intake performance and adjust their basics as needed.

DEMO

Interact With the Tool

Below is a clickable prototype of the tool. Now you could click through to see how Water Fortune helps users mainting their hydration level.