Building Hong Kong's First Water Dispenser Map

User-centered revamp to be more helpful and engaged

Mockup of Water For Free App

Water for Free is a mobile app that shows the locations of public water dispensers in Hong Kong & Macau.

I led the redesign to make the app more helpful with meaningful engagement.

Role

The role I have taken in the project include Project Manager as well as an UI/UX designer, I followed through the lead from beginning, outlining pain points and suggest possible features in clients meetings as well as UI design work.

Project Management Wireframing Interface Design Wordpress Development

Design Process & Deliverables

Design Process & Deliverables

Pain Points

Users cannot provide feedback on water dispenser data

In v1, there was zero feedback mechanism, users cannot suggest new dispensers or suggest change within the app. They were required to report via email.

Users see the same set of information whenever and wherever they go.

The app was not aware of any context of the user, and the existing data was infsufficent to do so. The data source was maintained by shared excel spreadsheets imported from time to time.

Goals for Revamp

1. Facilitate users looking for water dispensers — Making the process as easy and intuitive as possible, and provide more helpful information of the dispensers.

2. Encourage user engagement — Encouraging users to submit their edits and photos, can keep them engaged and maintain a updated database.

3. Reduce workload of the volunteers — Streamlining the workflow will fasten the approval process with more accurate data.

User Flow

With the revamp goals in mind, I have drafted the new user flow diagram, that outlined major pages for design as well as the initial draft of feedback process.

Comparison of v1 & v2 UI after redesign

Key design changes & rationales

Provide The Right Details To Create Awareness

Provide The Right Details To Create Awareness

Working with Water For Free team, we have identified 3 factors that encourage users to use water dispensers. By providing the right details at the right page, users can create awareness so that can make a better choice not to buy bottled water.

Rearrange screen layout to encourage user input

Rearrange screen layout to encourage user input

We have identified two types of users who are willing to contribute to the dispensers database. First type are power users who are volunteers of the project, the app serves as a convenient tool updating dispenser map regularly. Second type are active users who love the app and use the app to find water dispensers regularly. They usually contribute to the map when there’s incorrect data.

By placing suggest button prominently near the data, users are encouraged to suggest edit when the data is incorrect. UI also highlight the incompleteness of the dispener map so users can help verify when they pass by.

Approval-based Management System for Admin

In v1, volunteer team relied on manual process to import dispenser data through a shared excel file. Dispenser information was submitted by users through multiple channels like e-mail and social media.

Users can now also suggest edits, updates, upload photos of any water dispensers easily by themselves. By delivering a Wordpress-based content management sSystem in sync for website and app, reported dispensers can be easily approved by volunteer in one click.

Approval-based Management System for Admin

Also, we have also integrated the dispensers map in the website, so each individual dispensers could be shared easily.

Achievements

Monthly Active Users: +229% App Installs: +1335% Reported Dispensers: +66%

Initial app revamp launched in 2017 June was very successful, we have accumulated around 25,000 downloads within 6 months, nearly doubled the past accumulated download, across iOS and Android with zero budget in marketing.

Reviews have been overwhelmingly positive, with 4.9 / 5 on App Store and 4.1 / 5 on Google Play Store.

The momentum of the app is suprisingly great in the given operation scale. Monthly active users have gone up 229% in 6 months, our reported dispensers were also increased by 66%, fulfilling our goals to encourage user engagement. Due to the success, Water For Free has received sponsorships from government and commercial sector in its environmental effort.

Screenshot of App Store featuring Water For Free

Apple’s App Store also highlighted the app in multiple recognitions, including “New Apps We Like” during launch, later in “World Water Day”, “Pedal-powered fun” and “Make Your Life Greener” collections.

I am also honored to be interviewed by "The Pearl Report" together with Rachel Pang, the co-founder of Water For Free in 2018.

Interview by The Pearl Report with co-founder Rachel Pang in 2018

role

UI/UX, Project Management

Industry

Non-profits

Timeframe

2017

Platforms

Mobile app, Website, Content Management System

Last update on Jul 01, 2017