Project overview
The product:
“Save the Planet” is a recycling services app to help communities to participate in the recycling process, informing the collection location and offering rewards and donations, and get motivated in community reward ranking.
Project duration:
May 2022 to July 2022
My role:
- User research
- User flow
- Sketch & wireframe
- Visual design
- low and high-fidelity prototyping
- Conducting usability studies
- Iterating on designs
The problem:
The users are not able to find the information about recycling location and forgetting their account info or losing their paper voucher. The user lose interest in recycling easily due to tedious recycling process.
The goal:
Design an app for recycling program that allows users to find the recycling centre location and have their digital voucher to use it easily. The app has the ranking for the community and make the user have fun while they involve in recycling.
User research: pain points
Accessibility
Users lose their paper voucher when they need to use.
Information
Users are not able to find the location information for recycling easily.
Motivation
Users easily lose their interest in recycling due to busy life.
Introducing the user - Persona
Understanding user behaviors - User flow
As I created a user flow that users go through the app while they physically do action to achieve their goal.
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability study: Findings
I conducted two rounds of usability studies. Findings from the first study helped the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refinings.
The user feel confused with what to do with the digital voucher (QR code).
The user had to press the back button when they are on the location page.
The user wants to keep themselves motivated and recommend their friends.
Design System
Refining the design
Finding 1
After the usability test, I add the clear quo for the digital voucher (QR code). Changed QR code to the button with strong colour and added the explanation for the user.
Finding 2
After the usability test, I added a side menu for the user to be able to access the menu on any page.
Finding 3
After the usability test, added the feature of sharing the user’s achievements so that the user influence their friends and added the feature of our heroes is that people compete for their achievements.
Mockups
High-fidelity prototype
Accessibility considerations
Having both bottom menu and side menu for easy navigation.
Added the labels under icons in main menu.
Takeaways
Impact
The app allows the user find location information easily. Includes digital vouchers the user can access to save and use the rewards all the time. The app has achievements so people are encouraged to participate in recycling through gamification.
What I learned
After the usability test, an unexpected issue came up. While I was trying to solve the issue, I needed to explore the various solutions. Even though the design stage was finished, I had to go back and add pages and change old ones. It was interesting and challenging to try new solutions and develop a better user experience.
