UI/UX DesignFigma | Illustrator | Photoshop
mamoru is a web application, and mobile application that was made to connect students to exclusive offers and discounts from sustainable brands and shops. The mission was to "accelerate access to sustainable living" by making it easier for students to take action for sustainability and hepling sustainable businesses grow. Product Design Team UI Lead Designer | Aili Campbell UX Lead Designer | Katy Chung UI/UX Designer | Timothy Lui |
|
The Problem |
The mamoru site has been active for a couple of months now and has seen steady growth and usage. Currently, users can only access offers in-store through the web application so even though users were happy with the way the app worked, many felt that it was still a bit limited due to being in the early stages.
|
In order to continue growing and reaching a wider audience, mamoru decided to expand into add online only offers as well as creating a native app that will allow users an easily accessible option to view mamoru. Some additional benefits would include notifications for new offers, more accurate GPS, in-app camera, and a more native experience.
|
Creating the Online Marketplace
Working along with the UX team, we created wireframe mockups and discussed how the online marketplace and the in-store offers will be divided. We also did competitive audits to see how other sites laid out their sites and what they did right and wrong with them.
|
Hi-Fidelity Mockups |
Using the wireframes as a base, we created additional mockups that helped out developers bring our vision to life. Steps were made to ensure that designs and elements were consistent with previous designs as well as any designs in the future. In addition, careful attention was paid to keep the layouts uncluttered with enough white space to help users navigate the website more easily.
|
Online MarketplaceWith the introduction of the online marketplace, users from all over Japan are now able to access deals and discounts from the convenience of their phone or desktop. A big focus was on keeping a similar user flow to offline offers so that users can start using the new features right away without having to do much work.
|
Account Settings
Now that additional information is needed from the user, we decided to also expand our account settings pages` and offer ways to save credit cards, as well as shipping information such as their place of residence. We kept the page designs sparse and used lots of white space so that users were unintimidated by the options. Additionally, CTAs that were most important were highlighted by our use of colour.
|
Native Application
The next step in our project is to create a native app version of mamoru. When transferring the designs from the mobile version to the native application, we had to make sure that they followed the Human Interface Guidelines set out by Apple due to that being our main platform. Navigation systems also had to be reworked to flow more like other applications allowing users to be familiar with the application before they've even used it.
|
Key Takeaways |
|