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.

  • design-icon

    Design - Mobile app UI/UX design.

  • development-icon

    Development - iOS and Android app built using React Native.

  • design-icon

    Design - Mobile app UI/UX design.

  • development-icon

    Development - iOS and Android app built using React Native.

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.

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.

Check out some of our
other projects

Let's talk about working together!

Tell us a little about your business and what you'd like to achieve. We'll be in touch to follow up as soon as we can!