Waste4Change — UI UX Case Study
⚠️ Disclaimer: This case study is an assignment from Skilvul DTS PROA UI/UX Design Batch 3–2022. Skilvul DTS PROA UI/UX Design Batch 3–2022 is a program organized by The Indonesian Ministry of Communication and Informatics in collaboration with Skilvul and several Challenge Partners, one of which is Waste4Change. This is just our team concept. Everything in this case study includes contents, fonts, and colors are used purely for learning purposes.
Background
Waste4Change is a company that provides solutions for responsible waste treatment. It was presented in 2014 and began with a discussion between two companies in the waste sector. With Waste4Change, you can take advantage of various services such as consult, campaign, collect and create.
During this program, Waste4Change found that many users were asking about how to use the application and the difficulties in the package delivery process caused by miscommunications in the flow and copywriting of the page.
Goal
Based on the background of the problems above, the goal of this project is to make it easier for users to use the W4C application, especially in the process of sending packages.
The features to achieve this goal is to create or increase the effectiveness of several features, there are:
- Recycle Landing Page
- Delivery Page
- Rewards Point Page
- Payment Transition Page/ Logistics Partner API
Role
We did this case study in groups. My team consists of 4 people, they are Amir Ibnu Alfian, Fitriana Rachmawati, Nurhalimah, and me. From the beginning of the process of working on the case study until it was completed, we were mentored by Debora Paskarina.
In this project, each of us has the same role as UX Researcher, UX Writer, UX Designer, UX Copywriter, and UI Designer.
Tool
In completing this project, we used:
Design Process
We used a five-stage Design Thinking proposed by the Hasso-Plattner Institute of Design at Stanford (d.school). The five stages of Design Thinking according to d.school, are as follows:
1. Empathize
“To create meaningful innovations, you need to know your users and care about their lives.” — Stanford d.school
⚠️ note: to open the Empathize Process file, please click here
The first thing we do to complete this project is the empathize. The process where we try to understand the user experience. By using this secondary research, we can collect and empathize user experience from existing data by competitor research. This technique is very effective because it only takes a short time and does not require costs in the implementation of its process.
This is the table of Empathize process:
2. Define
“Framing the right problem is the only way to create the right solution.” — Stanford d.school
- User Pain Point
After doing the secondary research, we got some user pain points as follows:
- How Might We
From some user pain points that we have collected, then we categorize the user pain point to get how might we as follows:
3. Ideate
“It’s not about coming up with the ‘right’ idea, it’s about generating the broadest range of possibilities.”
- Solution Idea
- Affinity Diagram
- Prioritization Idea
Prioritization Ideas are grouped into 4 groups, namely:
1. Yes, do it now
2. Do next
3. Do later
4. Do last
In this stage, we focus on the “yes, do it now” priority:
- User Flow
In the process of creating a user flow, each of us created a user flow then we combined our ideas into one user flow. Here is our User Flow:
- Wireframe
Remember the goal of this project is to make it easier for users to use the W4C application, especially in the process of sending packages. And the features to achieve this goal is to create or increase the effectiveness of Recycle Landing Page, Delivery Page, Rewards Point Page, and Payment Transition Page/ Logistics Partner API.
However, after we have done the Empathize, Define, and Ideate process above, we decide to create the other wireframe that expected to be more helpful in achieving the goals of this project.
- Recycle Landing Page
- Delivery Page
- Rewards Point Page
- Payment Transition Page/ Logistics Partner API
4. Prototype
“Build to think and test to learn.” — Stanford d.school
UI Design
Before we create a high fidelity wireframe (UI Design), we designed the design systems that were reused throughout the site such as color style, typography, button, card, and the other various component.
- Color style
We generate color style from the existing Waste4Change logo.
- Typography
- Button
- Card
🛠 Iteration
When we entered the UI Design (high fidelity) stage, we did several page redesigns as follows:
- Reward Point Page — Redesign
Steven Hoober researched and wrote about the thumb zone in Designing Mobile Interfaces. Hoober’s research shows that 49% of people hold their smartphones with one hand, relying on thumbs to do the heavy lifting. And from the research, the thumb zone at most of smartphone can be defined as follows:
We apply the above theory in the design below:
2. Delivery Page — Redesign
Prototyping
5. Testing
“Testing is an opportunity to learn about your solution and your user.” — Stanford d.school
In this stage we conduct survey and Single Ease Question technique. To collecting result of the Usability testing we use maze.co as the tool. We provide 4 tasks with the Single Ease Question. So here the result:
Respondent
Task
- Do the sign up and log in
2. Activate the location access
3. Make delivery and payment
4. Do the redeem point
Result of SEQ
Key Takeaways
From the figure above, we can see that the SEQ Benchmark is 5.5. And we got 6.2 pts on our Usability Testing. So we can conclude that our project has passed The SEQ Benchmark.
Last but not least
🔗 Let’s connect through LinkedIn
📝Comment if you have something to say
👉 Click follow Syifa Yarhara to get updates of my recent articles
📭 Email me here
🌏 Visit my website to see my portfolio
I want to thank to all members of UIX3 A-22 Team 3 who are very solid in the process of finishing this project. And a big thanks to our mentor, for helping us in the whole process of this project. Without the effort, cooperation, support, and direction of our mentor, this project would not be complete.
