A Very Beginner Mind: Exploring Waste4Change
This project is part of the UI/UX Training Program held by the Ministry of Communication and Information (Kominfo) with Skilvul and Waste4Change as Challenge Partners. I am not employed or bound by a professional contract by Waste4Change.
To be honest, I’m not sure about how to write this since this is my very first time making a UX study case. Even though I write on my blog and did the same outputs regularly for the whole 4 years during my architecture life, writing this still makes me anxious. (Recently, I just thought about moving my blog into Medium, but nah, it’s such a hassle. If you find it, please say hello! 😉) But since I need to do this, let’s give it a try.
An Encounter with Waste4Change
A couple of months ago, I found myself that I wanted to learn something new asides from my architectural design. Anything but architecture. Thus, when I randomly saw the opportunity to join a UI/UX course (and it’s free!) from the Digital Talent Scholarship by Kominfo and Skilvul, without a doubt, I gave it a try, and after a long journey, I got accepted.
The very first step before taking the class was choosing a real challenge, which will be our study case for the rest of the program. After some considerations, I chose Waste4Change to be my very first UI/UX portfolio. And to make it more fun (and challenging), I got a partner to solve the problems together along with a mentor to guide us during the class (please say hi to partner, Wury, and my mentor, Jufry Heryanta😉)
So, How Was the Experience?
Before we dig it deeper, let me explain Waste4Change briefly.
Waste4Change is a company that provides solutions for responsible waste management. Built in 2014, today they already have many programs for various users, not only for companies but also individuals, to help them recycle their waste through their web app. Although they have numerous programs, for this case we will focus on their individual programs, which are aimed at people who want to recycle their daily inorganic waste.
To use their program, people will go through this simple scenario:
After some exploration on the web app along with the brief that the partner has provided beforehand, we see some challenges in the current web app:
- Flow
When we used the web app for the first time, the first thing that we noticed was the flow itself. It was hard for us to find and complete the program that we needed to accomplish, and there were some incomplete parts along the way that confused us. The flow actually is pretty simple but the missing parts make it harder for us to process the task. - Information
Another challenge that we notice was the information. The current web app lacks information in the places that they need it the most and vice versa. The copywriting is also confusing in some places. - Design
The most troubling in the current design is the inconsistency. In this case, they use too many components, lack navigation in some areas, and the design system is not clearly defined.
What Can We Do? Can We Even Do This?
Since there are only 2 of us with limited time to work on this project(2 months period+we have our full-time work on a daily basis+both of us are total beginners in this field), we decided to narrow down our focus.
We believe that the most important goal from this challenge is to make the whole experience clearer than before. It means that we need to redefine the flows while trying our best to redesign the UI itself. As simple as that. The whole journey is not going to be easy, that’s why we try to focus on the important one so that we can keep our pace steadily. It would be meaningless if we can’t enjoy the whole design process until the end.
And since we can’t redesign the whole programs that they have in their web app, we limit ourselves to focus on 2 of their individual programs: Send Your Waste (SYW) Regular and Send Your Waste Point Reward
Our Proposal #1: User Flow
As we have mentioned before, the biggest issue in the current web app is the flow itself. Let me explain it one by one.
- Send Your Waste Regular
The current flow isn’t that bad. We don’t make major improvements in this program. Aside from rearranging the original steps to be more informative and efficient, we add a page about the detail of our transaction directly after we finish the process. You can track the process afterwards and how many points that you get on this page. This seems obvious, but in the current flow, you need to go into your profile first to reach this page. - Send Your Waste Point Reward
Can you find this program? I bet you can’t.
The most crucial issue with this flow is that we can’t find the program directly from the homepage. From the homepage, you need to go into the menu bar, select the individual program, and you will find it there. This flow is ineffective and doesn’t encourage people to use the program unless they know this beforehand or explore it by themselves. Because of that, we put this program directly on the homepage among the regular ones. And like the previous program, after the process is complete, we add a page that guides the user straight into the point reward page.
Our Proposal #2: It’s All About Details
The root of the problem in the current design is that the details themselves. As a user, I find myself constantly confused about the whole process because of those missing small features. Thus, while we try our creativity to explore new UI designs, we make sure to pay attention to those missing details.
But in general, there are some design decisions that we make:
- Design system: The current UI seems inconsistent (they use various font styles and sizes), so we try to solve this by redesigning the design system from the scratch.
- Accessibility: We use darker colours than the actual colour scheme because the current colours don’t pass the WCAG. We aim to use colours that at least pass WCAG AA standards.
- Simplify: Like the infamous architect Mies van der Rohe always said, I believe less is more. So in this opportunity, we try to simplify the interface by eliminating the pop-up and making the contents more efficient but at the same time have a neat look. Aside from that, we also put some original photos from the current web app in our design, but after we used them, we think that the interface became too hard to find the balance. Thus we decide to turn every photo into a grayscale tone to make it easier to combine with other components.
A. Homepage
- SYW Point Reward: We put the SYW Point Reward program on the homepage so that users can find it directly.
- Rearranging all the programs: Instead of using a carousel and there are only 3 programs on it, we just stack them all vertically. With this approach, users can understand what they offer thoroughly and compare each program easily.
- Individuals program: We switch the individual programs to be featured first before the company one to make users more aware of their individual programs.
B. Landing Page
Efficient but informative layout: We want users to have a grasp of this program without giving them too much information visually, so instead of putting them all vertically like the old ones, we use the accordion tab. In this way, users can navigate to their desired information easily.
C. Login
- Login: After choosing the program, the first thing that users encounter in the original design is selecting the destination first (the waste treatment plants) before login. We think that it is a little bit unusual, so we switch this part by putting the login first before starting the whole flow.
- Additional page, “Pilih Jenis Sampah”: We add a new page into our design, “Pilih Jenis Sampah”, as the first step after login. On this page, users need to submit how much waste that they will send based on the waste category so that it will help them count how many points that they will get at the end of the flow.
- We add the “Tips Menyiapkan Sampah” button right below the title to help them prepare the waste before sending them.
- The number of sequences: Last, we give the number of steps at the very top of the page. This will help them to have a grasp of how many steps that they need to go through in this flow.
D. Sending the Waste
- Combining the same process: The next sequence is the delivery page. Instead of putting the waste treatment plant destination and the delivery courier page separately, we put them together into a single page.
- Adding a dropdown menu to filter: In the current design, there are 17 waste treatment plant destinations that they offer on the SYW Point Reward program and they stack all of them vertically. To make it efficient, we add a dropdown menu to filter those destinations based on the city.
- Additional copy to emphasize: We add a text right below the title to indicate that users need to pay the delivery fee. It is important because when we test it, users don’t realize this delivery fee. They think that Waste4Change has a partnership with those delivery couriers so that they offer free delivery on their programs.
- Adding button: We put the next and previous buttons below every page because, in the current design, the page automatically moves into the next one once the users finish the task. This left the users unprepared and confused while at the same time they couldn’t go back into the previous page. (Actually, they can do it by pressing the “Pengirim Sampah” button above the page, but once again, we thought it would redirect us to the landing page instead of the previous page)
E. Confirmation
- Additional information: We give an additional page to explain to the users how to pack the waste properly. In the current design, users can only find this information on the landing page.
- Confirmation: Another page that we add is the confirmation page before users complete the process.
- Emphasizing the point reward: Another crucial part that we notice beforehand is that there is limited information about the point itself. The only program that provides point rewards is the SYW Point Reward program, so unless users use this, they won’t get any point in their transaction. In addition, only selected items can generate the points. To emphasize this scheme, we add information below the total point.
F. Transition
After the users finish the last step, a transition page will appear to indicate that the server has already recorded the data. From this page, users can choose to track their transactions or go back to the landing page.
Our Proposal #3: the Design Is Here!
Finally, the wait is over! To make a better understanding of our design, (yeah reading the whole explanation is exhausting), here I attach our final design of the Waste4Change web app.
Testing: Another Trial and Error
As a team, we got only a chance to test our design due to our unmatching schedule. We decided to use the in-depth interviews method to test our design. We want to make sure that users can both use the SYW programs easily and understand them, even though they never use them beforehand.
We tested this with a fellow friend of mine, who matched our requirements, and during the process, she didn’t have any major problems when completing the tasks. While we did the testing together as a team, I also did it individually with 2 other friends of mine: one to test our hypothesis regarding the current web app design and one to test our design. Here are some notes from our interviews:
- Nervous: Although I know all of the interviewees personally in the real-life, they were still feeling nervous when they knew the nature of this research. Even though we tried to make it as casual as our daily conversation, they felt responsible to carry out the task properly thus, they paid attention to every single detail and were afraid to make mistakes.
- Personalization: One of them suggested making the web app more personal to the user. It also will be nice if they can track how much waste that they produce in a certain period and the result of their waste treatment.
- More rewards and free delivery: Other suggestions from them are to make more options for the waste treatment plant’s locations, get rewards from the SYW Regular program, and free delivery. They feel reluctant to use this app when they know that they will get nothing and need to pay to deliver the waste since they know local waste management, which offers money whenever people recycle their waste.
Epilogue: A Very Beginner Mind
Finally, the whole journey nearly comes to the end.
When I signed up for this class months ago, I never knew that I would learn this much during a short period. Looking back at those results, our design is still far from being perfect. A lot of things need to be reviewed, researched, or even changed. Personally, I still want to explore the UI itself (yeah, I play safe by using fewer colours) and seek other scenarios and what-ifs. It will be fun to keep exploring when I have more time.
But for now, I just want to take a rest. 🙃
To be honest, this journey isn’t easy at all. It reminds me of my first year in college: the pressure to design something new, the exhilaration to learn the unknown, and the frustration for not doing it good enough since you still lacks in so many ways to improve it. Indeed, a roller-coaster of emotions.
It also takes a whole new level of commitment to keep on track while you’re being pushed this hard to learn so many things in a short time. Not to mention that we are already dead tired of our daily routine and only have limited free time in the night to work on our progress. And to make it more challenging, this journey needs to be done as teamwork.
The whole situation is a brand new experience for me: working with someone you don’t know, who is as busy as yourself on daily basis, and as clueless as you are. It was chaos in the beginning and most importantly, we have to work together to make sure our communication remained intact. Because of that, I want to shout out to my partner, Wury, for being here up until now. Both of us have our shortcomings to work on but I’m glad we manage to work together. Once again, thank you for being a reliable partner for me up until now. 😀
Aliyya is an architectural designer based in Indonesia. When she’s bored, you can find her exploring with her gouache, reading pretty-covered books (or mostly comics), writing her review, or simply wondering about her life. If you have any feedback to improve her design (or simply want to say hello 😀), you can reach her through email: hello.talida@gmail.com
