Case study: Redesigning the platform of Send Your Waste Program by Waste4Change
⚠️ Disclaimer: This case study is not a part of an affiliation with Waste4Change, but is a part of the educational program held by Skilvul and supported by the Ministry of Communication and Information Technology of Indonesia through Digital Talent Scholarship. Waste4Change is one of the challenge partners in the program.
👁️🗨️ Background
Waste4Change —commonly abbreviated as W4C— is the first waste management company established in Indonesia in 2014. It is currently a challenge partner in UI/UX Design Mastery, a course held by Skilvul with the support of the Ministry of Communication and Information Technology of Indonesia through Digital Talent Scholarship. As a challenge partner, it challenged the program’s participants to redesign its platform, specifically the platform of one of its programs known as Send Your Waste — a program targeted for individuals to send their inorganic waste to be responsibly managed by W4C itself.
🎯 Objective
To ease the individual customers of Waste4Change to use its platform to send their waste through the Send Your Waste service.
👤 Role in the Team
As a UX/UI designer who collaborated with two UX designers — Annisa Tahira and Berliana Fadlilatur Rahmah— in a team, my responsibilities were as follows.
- Conducting secondary research prior to design to discover what W4C and its users needed for its platform to work.
- Brainstorming in team to generate solution ideas for the constraints W4C encountered.
- Conducting a Crazy 8’s session to deliver UI design ideas quickly.
- Creating a user flow and wireframes based on the delivered UI design ideas.
- Building a prototype based on the resulted user flow and high-fidelity wireframes.
- Conducting usability testing to ensure the solution design had met the targeted users’ needs.
✍️ Design Process
In this project, my teammates and I used design thinking as the approach to create the design because it is practical, systematic, and relatively straightforward yet can produce user-centered designs.
In the entire design process, we utilized the following tools.
- FigJam — to discuss and brainstorm; to document the discussions and brainstorming processes.
- Figma — to input the data of the user persona we created; to create wireframes, prototypes, and the UI design.
- Zoom —to perform and record post-design user research by conducting in-depth interviews and usability testing.
- Google Docs — to write a user research stimulus.
- Google Sheets — to write research findings; to record the post-design user research data.
Phase I — Empathize
We implemented the first phase of design thinking by conducting secondary research. We documented the research findings in a Google Sheets file that can be accessed here.
The secondary research was carried out by the following steps.
1. Design Brief and Ask-Me-Anything Session Analysis
As we selected to take the challenge given by W4C as Skilvul’s challenge partner, we needed to analyze the points it conveyed through the design brief. W4C basically challenged the participants to focus on the pages of Send Your Waste —commonly known as SYW.
In the design brief, it mentioned that it wanted to reduce the number of users confused about how to use its web app and send packages of waste. It also assumed it was due to the miscommunication in the flow and copywriting.
Next, we listened to a recorded ask-me-anything session with one of the insiders from W4C as the informant. Through this session, we learned more about the problems it faced and what the regular and potential users might need.
2. Self-Observation
After obtaining the basic information about the challenge, we began to directly observe the platform of W4C. By doing so, we could understand how new users may feel while experiencing the platform.
3. Competitor Analysis
Last but not least important step is browsing some other waste management service providers in Indonesia and other countries to take them as references.
Phase II — Define
1. User Persona
To create a user-centered design, we need to define specifically by whom the platform is targeted to use. In the design brief, W4C listed the criteria of their targeted users from which we referred to create a user persona.
2. Opportunities and Pain Points
With the user persona that we had created earlier, we listed some opportunities that we could consider to fulfill the ideal targeted users’ needs, behaviors, and pain points they might feel when experiencing the platform.
3. How-Might-We
Based on the compilation of the opportunities and pain points, we listed how-might-we points that indicate the actions we designers need to do next. Afterward, each team member had to vote nine points among all the listed ones.
Next, we compiled the most voted points and grouped the correlated ones; therefore, we could result in a how-might-we question.
4. Solution Ideas
Based on the resulted how-might-we question, we generated as many solution ideas as possible.
5. Affinity Map
Subsequently, we arranged the resulting solution ideas into three clusters based on the pages of the SYW platform —general, landing page, and the pages of the SYW program.
6. Prioritization Matrix
After that, we arranged all the resulting solution ideas into a four-quadrant prioritization matrix to determine which ideas should be applied now, next, last, and later.
Phase III — Ideate
1. User Flow
As we already knew what steps were we supposed to do next, we created a new user flow for the SYW program’s website. We arranged the flow based on the data resulting in the previous steps in the Define Phase. User flow includes the data of several important pages that were later used to arrange an Information Architecture — usually abbreviated as IA.
2. Information Architecture
Based on the resulting user flow, we arranged an IA that lists all the pages and menus that should be available on the platform that we were designing.
3. Sketches
After finding out what pages should be available on the website, we performed a Crazy 8’s session together in real-time to generate UI design ideas quickly.
4. Low-Fidelity Wireframes
Next, we created low-fidelity wireframes based on the sketches. In this stage, we tried optimizing each page by reorganizing the contents so that users would not miss any essential information.
We only used a grayscale palette and Comic Sans typeface in creating the wireframes because they are fundamentally meant to communicate the order, structure, layout, navigation, and organization of the contents, rather than the visual design aspects.[1]
5. Design System
Thereafter, we created a design system with the atomic design methodology. In this step, we only created the atoms and latterly we started enhancing the system by adding the molecules and organisms even when building the high-fidelity UI design. To check the original source of the design system we created, please click here.
6. High-Fidelity Wireframes
One of the perks of owning a design system is that we can create high-fidelity UI designs more effortlessly. While building page by page, I created some required molecules and organisms that I added to our design system next.
In this stage, I began writing a more concise and straightforward yet easy-to-understand copywriting than that in the existing platform so that users would tend not to skip every piece of information. Here are the comparisons between the existing platform’s UI design and the redesigned one.
In the Define Phase, we planned to add a gamification feature. The feature was applied as one of the main menus named Kontribusi (Contribution) which consists of a list of the regular SYW program ranking, the sponsored SYW program ranking, and a feed.
The ranking system was aimed to motivate the users themselves to constantly send their waste to W4C, while the feed was aimed to allow users to share their achievements on their social media to inspire their friends and family. Here is the UI design of the particular feature.
Phase IV — Prototype
After creating the high-fidelity wireframes, I made a prototype which was later tested on some respondents in the Test Phase. To experience the tested prototype, please click here.
Phase V — Test
In this phase, I conducted post-design user research with two methodologies — 1-on-1 in-depth interviews and usability testings. Nielsen, J (2000, March 18) in his article titled “Why You Only Need to Test with 5 Users” stated that the best testing results come from no more than five users; the more the users, the less the results that we could obtain because we will merely keep on observing the same findings repeatedly. Therefore, I decided to involve five people only as the respondents of the user research.
Research Background
Before the research, I created a user research stimulus to guide myself on what to do in the research. Here are the objectives and respondent criteria for the user research.
A — Research Objectives
- Understanding the users’ lifestyle that positively impacts the environment.
- Discovering the users’ impressions of experiencing the entire flow of ordering an SYW service.
- Finding out the success rate of the redesigned W4C platform based on the Single Ease Question (SEQ).
B — Respondent Criteria
- 18–40 years old.
- Lives in an urban or suburban area in Indonesia.
- Understands Bahasa Indonesia and/or English.
- Able to operate the computer well.
- Pays attention to environmental issues.
- Has a habit of sorting out his/her waste which then is being recycled or reused, or has an intention to include such habit in his/her lifestyle.
Research Process
The research was conducted from 18 May 2022 until 20 May 2022 by having 1-on-1 Zoom meetings with each respondent. In the middle of conducting each Zoom session, I recorded the research data using Google Sheets and documented each session in a video format.
Research Results
- Four of five respondents have started devoting themselves to the 3R movement, which consists of reducing, reusing, and recycling.
- Only one of the respondents who have proclaimed awareness of the environment has acknowledged and used a platform to send waste to be managed by a waste management company.
- Two of five respondents have ever campaigned about the importance of environmental concern and awareness through their social media.
- All the five respondents undoubtfully chose the regular SYW program without knowing the difference between that and the sponsored one. It was caused by the absence of the explanation about the difference of both in any page.
- Most respondents did not understand what to do with the payment receipt that needed to download. It was caused by the absence of the explanation in the Transaction Succeeded Page; and the misplacement of the CTA in the landing page that led some users to directly tap it without reading the information below it.
- All the five respondents stated that the entire flow was easy to follow.
- All the five respondents rated the overall design 6 out of 7 on the SEQ. The rating is equivalent to 85.7%.
Revision
Based on the research results, I took into account some critical points from the respondents’ experiences, behaviors, and inputs; and revised several important ones as follows.
In the project finalization, I added some more pages for the points redeeming pages. Here is the comparison between the existing platform’s UI design and the redesigned one.
Apart of that, I also added the English version of the interfaces.
To experience the interactions of our finalized deliverable, please use the embedded prototype below or click here to go directly to the Figma prototype link.
📝 Conclusions
Based on the entire design process, I could conclude and learn the following points.
- Shorter user flow of a specific task may have a higher usability rate.
- Concise and straightforward copywriting on a web page helps the users absorb the conveyed information. We should cut redundant information and the less important ones that may lead to confusing users.
- When designing a UI, we should be cautious of the fonts we choose since their legibility may be low due to the font sizes and contrast with the background.
- The placement of a CTA on a web page is so critical that it could distract users from any essential information on the page.
👍 Recommendation
Based on the design and user research results, I would recommend that W4C promotes itself and the importance of environmental concern and awareness to institutions such as schools and offices, both online and offline. Therefore, more people would be aware of environmental issues and notice W4C as one of the solutions to the issues.
