mymizu

mymizu is the poster child of the social innovation movement in Japan. Their mission is to help Japanese and international users stay hydrated without using eco-damaging PET bottles, therefore minimizing their use and raising awareness of the problems surrounding single-use plastic consumption.

A major part of the strategy for achieving this mission is the mymizu app. After releasing a prototype version on iOS in summer 2019 mymizu gathered a lot of attention from consumers and the media, confirming they were onto something special.

Thanks to newfound support from a corporate partner, they were able to commit to a long-term plan for the app, including adding Android support, incorporating new features, and improving the general user experience. When they approached Tacchi for help with this we naturally jumped on board!

Designing the User Experience

We worked in collaboration with the mymizu team to create a UI design that was usable, modern, and worked effectively on smartphones of all screen sizes and types in both Japanese and English.

Location Map

The app centers around a map that allows users to discover places they can refill their water bottles at. In addition to public spots such as water fountains, the places include a growing number of businesses, who have signed up to offer free water refills with no strings attached.

We created a design that took the basics presented in the original app release and added a new level of interaction and visual refinement when navigating the refill locations and viewing their details.

Refill Tracking

This new version of the app also focused on tracking and displaying data about personal and global refills and their impact on the environment. This included enabling users to log a refill at a location on the map or at a private spot such as their home or office.

I've saved...

plastic bottles!

Together, we've saved...

101.3k

plastic bottles and counting!

I've saved...

plastic bottles!

Together, we've saved...

101.3k

plastic bottles and counting!

Building the Mobile App with React Native

Because the mymizu team wanted to release on iOS and Android, had a tight target release date, and were conscious of long-term development efficiency, we knew immediately that React Native was the way to go for this app. Using React Native allowed us to write a single codebase to support both iOS and Android; something not possible with historically traditional methods such as using Swift or Objective-C for iOS and Kotlin or Java for Android.

Ensuring a platform-native experience

Using our deep experience of designing and building cross-platform apps with React Native, which in turn was based on years of traditional iOS and Android development experience, we were able to ensure that the app felt like a true native iOS app for iOS users and likewise for those with Android devices.

To ensure this continues to be the case into the future as these mobile platforms evolve, we made use of our favourite library for building out the inter-screen navigation in the app: React Native Navigation. Please check our Navigation in React Native article if you’d like to learn more.

Integrating with mymizu’s web service

As is common with many mobile apps, it was necessary to retrieve from and send data to a centralized web service that hosted a database of refill locations, user data, and other content.

As the pre-existing web server developed by mymizu’s internal team had a RESTful API, we used Redux alongside Redux Axios Middleware for handling the network request and local data storage parts of the app.

This industry-standard combination allows for decoupling of network, data store, and view logic, ensuring a clear separation of concerns so that development speed does not degrade unnecessarily as the product grows in complexity, especially as the development team increases in size.

Displaying hundreds of locations on the map at once

React Native Maps is the de-facto solution when working with maps in React Native. As the map portion of the app required clustering of the pins to show an area with many locations in a clean way we had to consider the best option to handle this, as React Native Maps did not include clustering support.

While there are some Javascript-based addons for clustering pins, we were not convinced it would be performant enough for our needs. So we decided to drop down into React Native Maps’s native code to achieve this. Integrating code from Google’s SDKs for iOS and Android into our app at the native level enabled us to have full control over the display and performance of the map pin clustering.

Ensuring app stability with automated testing

Finally, we made use of the fantastic Detox interface testing library to ensure that the app continues to function correctly as the codebase is worked on to add new features or make changes. This reduces the time to manually test the app for regressions (bugs that appear in previously working features), allowing for a more rapid development and release process.

What people are saying about the mymizu app

True love
This app is what I wanted for so long, since I have quit using single-use plastic bottle in 2016.

If you wondered “hey does this work only in japan?” because the name is MyMizu which means my water in Japanese, please try flying over US or basically anywhere in the world and see what happens. Amazing.

Looking forward to using this to find my MyMizu spot.

こんなアプリ探してた！
給水できる場所がすぐわかるから、マイボトルさえ持っていれば、ペットボトル飲料を買わずに済む！少しずつできるエコ活動！

healthy, fun, educational!
The mymizu app has allowed me to be more conscious on my water intake! With its educational and fun twist, it’s been exciting to track my refills and see the impact I personally have been making as well as the collective impact of the mymizu community - environmentally, health wise and economically!

すっごくすごく楽しみにしていた、水を補給できる場所を探せるアプリ。一目でみてわかるのが使いやすく、出先で持っていたのみものが無くなったときに、ペットボトルを買わなくてすむ！

What an awesome way to create a valuable app. No more buying water bottles from convenience stores! I wish everyone had this app and we could save billions of plastic bottles every year!!!

Awesome app! Who'd have thought there are so many refilling stations in my neighborhood! I just wish the pop-up that shows up after logging a refill doesn't have to show up every time. Maybe every 10 or 100 refills? Or better yet just show it once and give us an option to view it anytime via a menu item thereafter.

Design and development of an iOS and Android app for the social innovation startup, with a focus on native experience, development speed, and long-term cost efficiency.