UX Case Study — Waste4Change UI Design
As time goes by, the human population on this earth is always increasing every day, what used to be a lot of green trees in many areas is now getting smaller area, which used to be a lot of wide-open spaces now filled with houses and tall buildings, with the increasing population in this world more and more also humans who don’t care about waste, a lot of garbage is piling up in various remote areas, this is where Waste4Change’s role is in helping the government to manage waste.
As part of the Skilvul Virtual Internship, you are challenged to create a design for Waste4Change.
What is Waste4Change?
Waste4Change is a company that provides solutions for responsible waste management. Present for the first time in 2014 which started from a discussion between two companies in the solid waste sector. With Waste4Change, you can take advantage of various services such as consult, campaign, collect and create.
Objective
- Resource persons can perform the stages of signing up and logging into the Waste4Change application
- There is a Page Landing feature that can be accessed by users when entering the application.
- Resource persons can do the Send Your Waste (SYW) program (Delivery page and Payment)
- Resource persons can see Loyalty reward and leaderboard features in the application.
Waste4Change wants to reduce the number of users asking how to use web apps and difficulties in sending packages due to trouble with API integration which we sometimes see can also be caused by miscommunication inflow and copywriting on the page. For this reason, Waste4Change provides RWU (Recycle With Us) services with several programs such as SYW (Send Your Waste) either Regular or Sponsored Programs.
SYW (Send Your Waste) is a voluntary program for the people of Indonesia that targets housewives to be able to manage inorganic waste in their homes. This program helps its users to ensure that the sorted waste can be processed responsibly. This program is also integrated with logistics partner APIs such as Gojek and Paxel. Briefly, here is the user flow regarding the issues mentioned:
- Send Your Waste Regular: Recycle Landing Page → SYW regular → payment → send → received
- Send Your Waste Point Reward: Recycle Landing Page → SYW sponsored → send → received → point → redeem
The Team
In the process I work with my fellow team members are Odi Gautama and Sri Wahyuni. As a team, we collaborated in the Define, Ideate stage, Prototyping stage, and Testing stage.
Design Process: Design Thinking
The design process is a work scheme to summarize the steps taken by a designer in his work. Design iteration process to improve usability and optimize interface design.
Design thinking is a method or approach used for practical and creative problem solving with the main focus on users.
We approached this challenge by implementing the Design Thinking approach. Design Thinking is human-centered and solution-based. The human-centered aspect of Design Thinking helps us get a better understanding of the users and their needs, while the solution-based aspect helps us create innovative solutions. This type of approach corresponds with the requirements of the challenge presented.
1 — Empathize
Empathize is used to help designers find out the views & needs of their target users with research before defining problem statements and doing ideation, in empathizing we look for some user pain points when using the platform from Waste4Change. Many methods can be used to explore user experiences and pain points.
From the research provided by the challenge brief, we know the targeted demographic is as the following.
- Age: 21–40 Yeard Old
- Domicile: Java
- Native Language: Bahasa Indonesia
Care for the environment
2 — Define
All research results are then combined. So that the pattern of problems experienced by users can be seen. From there, the UI/UX team can determine what problems need solutions and which areas can be given a touch of innovation.
At this stage, there are two processes, namely Pain Points and How-Might We
From the pain points we got from various sources such as user feedback, comparisons with similar websites or applications, and others, we found that information on how to use send your wastes is still lacking to understand, many of the features are incomplete, such as the feedback menu that doesn’t exist yet. From the data we have collected, we get an idea of what we will do from the achievements we want to achieve and the objectives we want to bring in the form of design. We did this using How-Might We, we then decided that we wanted our design to help users stay motivated. We also wanted users to navigate their way through the application easily.
We take how-might we, provide a comfortable experience of using the website.
3 — Ideate
From the pain points and also how might we have been discussed, we brainstormed to get ideas for solutions to existing problems.
From the data we have collected, we get an idea of what we will do from the achievements we want to achieve and the objectives we want to bring in the form of design. We did this using How-Might We, we then decided that we wanted our design to help users stay motivated. We also wanted users to navigate their way through the application easily, and the most important thing is to provide videos of the steps in making transactions (junk delivery demo). After that, we grouped the ideas that shared the same concept in an Affinity Diagram.
After that, we sorted the ideas in the Idea Prioritization diagram. The ideas were sorted based on effort and user value.
The last step in the Ideate stage was Crazy 8. In this activity, we spent 8 minutes drawing up 8 rough sketches that could potentially be used in our design.
4 — Prototyping
The results of the brainstorming will then be converted into Wireframe and User Flow. First of all, we create a user flow of several main parts which we will design from registration and login, sending SYW Regular method, sending SYW sponsored method.
The next step is to create the wireframes for the main features based on the created user flow. We tried to create a Wireframe to implement the previous solution. In making the wireframe, we also saw references from the rough sketches made by each member in Design Thinking. In this case, we create a wireframe based on the user flows that we created, where when the user performs a task from the initial entry to the web app until it successfully performs all tasks such as sending garbage and getting reward points.
After that, we made the components contained in the design system first, starting from the atomic component (color palette, typography, icon style, input field, and button style guide), and molecular components (header bar, bottom navigation, status bar, header bar).
After completing the entire design on the wireframe, then we start the prototyping process of the product display that will be developed but not yet real. The prototype is used to try & simulate the design solution that has been made, in this process we use the Digital prototyping method.
5 — Testing
Our testing process is done to one of the respondents via zoom, in the testing stage, we ask respondents to try a prototype that we have made, we ask the user with the Single Ease Question (SEQ) method, using a scale of 1–7 to measure the level of user satisfaction. Based on interviews conducted that the appearance of colors, buttons, fonts, and others greatly affects user interest in using the website. Waste4Change is a very helpful platform in waste management, so easy and informative use can increase user interest in using Waste4Change. With Waste4Change, there are many benefits, especially for the environment, thereby reducing pollution and the greenhouse effect, reducing the company’s new plastic and glass production, and even creating jobs.
I also utilized the Single Ease Question (SEQ) to measure the usability of the prototype. The prototype received a final score 7.
Conclusion
After iterations of the design thought process, a design prototype for Waste4Change has been created. The design is also to solve the problems that exist in Waste4Change. The main focus here is to provide users of the system with an easy-to-understand flow and attractive user interface. This approach proved successful based on the results of the testing phase.
Before making a UX Design, it is necessary to conduct a field analysis of users who have previously used similar applications with Waste4Change.
Closing
From all the processes that I went through while at the Skilvul Virtual Internship, I learned many things in terms of design and how to work together as a team in creating a work. This experience has pushed me to continue and improve my design and research skills.
