UX Case Study: Re-Design ‘Recycle With Us’ Website
Hello, We’re from group 6 [SVI-27] have been working on a website re-design project for the Recycle With Us program which is one of Waste4Change’s services. This project is part of the UI/UX training program implemented by Skilvul, for the Merdeka Campus program held by the Ministry of Education, Culture, Research, and Technology of the Republic of Indonesia. We are working on this project guided by our mentor.
#1 — About Waste4Change
Waste4Change (W4C) is a social enterprise that provides responsible waste management services with a vision to reduce waste generated in landfills. This company was founded in 2014 and already has a lot of experience in providing responsible waste management services from upstream to downstream, which until now has managed to manage 5,404,0041 waste.
W4C provides RWU (Recycle With Us) services with several programs such as SYW (Send Your Waste) and Drop Box. Send Your Waste program has two types of programs, namely Regular and Sponsored. Regular SYW is a voluntary program where users can send their waste for recycling without making a profit, while Sponsored SYW is a form of waste4change collaboration with partners who will give gifts to users when sending certain types of packaging. Prizes can be in the form of anything, including product vouchers or coins to be exchanged for vouchers such as PLN, GoPay, credit, and so on.
#2 — Problem Statement
Case study for this project is about Send Your Waste program which is a voluntary program for Indonesian people, especially in Java island that targets housewives to be able to manage inorganic waste in their homes. This program will helps its users to ensure that the sorted waste can be processed responsibly. So in this case the user will be facilitated in recycling his waste through the waste4change website.
Previously we have researched the user flow of the waste4change website regarding the latest send your waste program. There are 4 user flows that we research, including the process of sending waste, Login / sign up. waste deposit history, points and redeem points
Real User flow
The first user flow is in the process of sending waste, which starts from the waste4change landing page which has an invitation to recycle individually called Recycle With Us. From the Recycle With Us page, there are two types of programs from waste4change, namely sponsored and regular programs. Both programs are included in the Send Your Waste program (regular program), with sponsored programs consisting of Avoskin and RECYCLE ME. Each selected program will have a button to send waste now or deposit now. Next, go to the Send Waste Page, with the first process, selecting the delivery destination location (partner location), which is followed by the sender’s address. Previously on the sender’s address there were 3 conditions where if the user is logged in then the user will continue to fill in the address, if the user is not logged in then he must fill in his cell phone number and password, and if the user does not have an account, he is directed to register first. The next process is sending your package by selecting the available courier and the waste data to be sent. This process ends with a waste deposit page with information that has been filled in will be recorded on this page.
This user flow can be started from the Send Your Waste, Recycle With Us and Send Waste Page. The availability of the login/sign up button on the page, the user can access it in the page header or more precisely above the navigation bar. The login or sign up process is required to use the user’s mobile number. There are two conditions for filling in the cell phone number, the first if the cell phone number has not been registered, the user is required to fill in personal data followed by verifying the account using the cell phone number, and the second if the cell phone number is registered then the user only continues by filling in the password. This process ends with the user returning to the original page.
This user flow starts from the profile page or the profile button and is available in the drop down options. The waste deposit history page has 3 options, namely process, done, and cancelled. With information, process is a package that will be sent to the destination, done is a package that has arrived at its destination, and canceled is a package that has been canceled from the sender’s and recipient’s side.
This user flow can be started from the profile page and the profile button is available on all pages. In this process the user can access the points page which contains the number of points available and redeem points that can be exchanged for other vouchers separately. On the redeem point page, there are vouchers that can be exchanged for user points, including GoPay, mobile credit, PLN tokens and lucky draw. All vouchers can be exchanged for points provided that there are sufficient points to make the next transaction.
#3 — Objective
Based on the problems above, the company wants to improve the appearance of the website. This is so that users no longer feel confused when they want to operate the website and can immediately make a garbage deposit easily.
Therefore, the purpose of this redesign is to:
1. Determine user habits in disposing of inorganic waste.
2. Determine the user’s pain points when they want to make a garbage deposit on the website, but are constrained by a complicated web flow.
3. Make a user-friendly website redesign.
4. Determine the usability value of the web design created.
#4— Role
As a UI/UX Designer team consisting of Prianindio, Ocky Princella and Riswanti Febriani. In this team, we have responsibilities and roles as UI/UX designers who carry out the empathize, define, ideate, prototype, user testing stages and also act as UX writer and UX research.
#5 — Design Process
In redesigning the website user interface, we use the design thinking method. According to the Interaction Design Foundation, design thinking can be defined as:
Design thinking is a non-linear iterative process that teams use to understand users, challenge assumptions, redefine problems, and create innovative solutions for prototyping and testing.
There are five phases of design thinking, namely Empathize, Define, Ideate, Prototype, and Testing.
— Emphatize
this is photos when we did the initial interview with the target user.
At this phase, we empathize with users of the waste4change website in the send your waste program. Previously we conducted research on 1–5 users regarding their recycling habits and their obstacles in using the waste4change website. From the results of our research, it shows that the inorganic waste they dispose of still combined with other waste (organic waste). This depends on the provision of existing waste bins, for example, in a house where the garbage is still combined. According to users, sorting waste for recycling can have a good impact on the environment, but is not directly experienced by users. Users have an interest in the program to recycle their inorganic waste, but provided that they do not want complicated procedures, and have flexible time in sorting it out. Their expectation in sending waste to be recycled is to reduce waste or inorganic waste in the surrounding environment, especially waste that is thrown into the open ocean.
Some users are interested in the two programs provided by waste4change, namely the sponsored and regular programs. In sponsored programs, users are interested in the output they get because they will get points after they recycle their waste. For the regular program, users are interested in the waste they recycle, it doesn’t have to be from certain brands, it can be of any brand. The shipping method they want in sending waste to be recycled is the availability of couriers or expeditions who can pick up their packages from the sender’s personal address, or have their own application to recycle waste from waste4change.
Problems faced by users in using the waste4change website include users not being able to clearly distinguish sponsored and regular programs. Lack of clear explanation or description of the two programs. Users will still be confused if it is not explained the background, purpose or related information of each program to be selected. Only a few users can tell the difference between the two programs, but only through the images provided by the waste4change website. In this case, the user is not sure that he will recycle the waste with a difficult procedure or flow.
Our research method in knowing how much success a website is that requires a measurement to measure usability on a website, including the SUS (System Usability Scale) method. SUS consists of 10 questions that have a scale of 1 -5 on each question with information on a scale of 1 (strongly disagree), scale 2 (disagree), scale 3 (undecided), scale 4 (agree), and scale 5 (strongly agree). From the research we have done on the waste4change website, the results have an average of 41.5. This shows that the value obtained is in the form of grade F or worst imaginable, with acceptable ranges that are not acceptable. According to Ependi et al. (2019), with grade F with a score of < 51, the SUS assessment for the adjective rating gets the worst imaginable result and the Acceptability ranges are not acceptable.
— Define
In this phase, we define the problems experienced by users in using the waste4change website by collecting pain points from users. The pain points experienced by users are as follows:
- Can’t distinguish sponsored and regular programs.
- Points that can be exchanged for prizes are only available from certain brands.
- No visible profile button available above navigation bar.
- Hard-to-find transaction features.
- There is no back button on the garbage submission page so it is difficult for users to see the data that has been filled with previously.
- When after selecting the delivery destination option, immediately go to the next stage.
- Can’t cancel the deposit from the sender.
- Should log in / register an account first before entering the trash sending page.
- instructions for sending recycling waste are still unclear.
Based on the existing problems, we sort these problems into “how might we” (HMW), namely:
- How Might We — Get users interested in submitting trash?
- How Might We — make it easy for users to understand the flow of sending their waste?
- How Might We — motivate users to keep sending waste?
- How Might We — enable users to efficiently send their waste?
— Ideate
In the ideate stage, our team brainstormed Solution ideas based on the results of How-Might We and we group again based on the similarity of solutions into an affinity diagram. Based on the results obtained, our team grouped a problem experienced by users and made a solution of the collected ideas consisting of:
- Landing page (recycle with us).
- Waste delivery.
- Points feature and redeem points.
- Login/sign up.
- Deposit History.
- Features to motivate users.
Next, we enter the idea solution into the prioritization idea matrix, with the provision of user value and required effort. The use of a prioritization idea matrix is one of the methods used to determine what should be made first in the next phase. The prioritization idea matrix consists of 4 parts, namely:
- Do it now (high value and low effort)
- Do Next (high value and high effort)
- Do Last (low value and high effort)
- later (low value and low effort)
Based on the results of the prioritization idea matrix that have been carried out, that of the four parts that must be done first (Do It Now) are Landing page (recycle with us), waste delivery, feature points and redeem points. Followed by the next section (Do Next) which is the motivation and transaction features. And the last one (Later) is the login/sign up feature.
After all, the next stage is the creation of Crazy-8’s. In this session, my team and I made 8 design sketches in 8 minutes, which were done using a sheet of paper and doing the voting for the result.
— Prototype
According to Triska Pangaribuan, the definition of prototype is
Prototype is a stage aimed at transforming the abstract properties of an idea into a more tangible one. This stage is not only in the form of an idea visualization process but also an idea development process
In the first step, we created a UI Style Guide which will be our guide in designing. According to Moch. Zamroni UI Style guide is…
A style guide is a collection of elements, graphic visual designs and rules that are created prior to the creation of a product design to ensure a consistent, and unified product design from the design process to the end.
The UI styleguide which we created includes color styles, buttons, text styles, and input fields.
To try the prototype, click here.
— Testing
We tested 5 respondents who matched the target user. There are 3 stages of testing:
1. In-depth Interview, at this stage we ask questions about the habits of respondents in disposing of inorganic waste.
2. Usability Testing, at this stage we send a prototype link to respondents and we give several tasks to work on the prototype.
3. Assessment, at this stage we conduct an assessment using SEQ and SUS.
The testing stage is carried out so that we can evaluate the results of the designs that we have made and also to get suggestions (input) regarding design development.
One of the answers to the list of questions above can be seen in this table.
A list of tasks and questions in the usability testing process as shown in the image below.
After the respondents completed the task, we asked about the obstacles they faced and how much was the rating for the task (SEQ) on a scale of 1–7. The higher the number, the better. After all the tasks have been completed and assessed, we also proceed to the SUS assessment stage.
We asked 10 questions of System Usability Scale (SUS) to calculate how well the design has been. SUS is a questionnaire that can be used to measure the usability of a computer system according to the user’s subjective point of view, this assessment method uses a Likert scale of 1–5, where 1 means strongly disagree and 5 strongly agrees. SUS question can be seen below.
The results of the assessment using the SUS and SEQ methods can be seen in the following table.
Based on the above assessment, the average value of 5 respondents using the SUS method in our design resulted in a value of 84 which means “Excellent” and the SEQ method yields a value of 6.4 which indicates that the design made is good (>5.5). This result also exceeds the sus rating on the old web design.
Respondents admitted that the flow that we designed was easy to understand and they did not experience any problems when using it. However, some respondents gave suggestions regarding the design that we made to make it more comfortable to use. These suggestions can be seen in the image below.
Even though the design that we made can be said to be good, we are still making improvements to the prototype. We made these improvements in order to produce designs that make users more comfortable. Based on some suggestions that we got from user research at the testing stage, we chose some suggestions that we will apply to the prototype (as in the picture above). The new prototype can be seen in the next section.
— New Prototype
To try the new prototype, click here.
Based on the results of previous testing, we made changes to several views such as:
1. On the landing page, the type of program does not appear from the bottom, but a pop up so that users can easily ‘realize’ the existence of the program.
2. There is only 1 button in the program (previously there were ‘send trash’ and ‘program details’ buttons). However, because users rarely click on program details, we removed it. Instead, we provide options on the deposit start page such as ‘are you familiar with the submission process?’ if the user doesn’t understand, then we direct them to the ‘program details’ page, both sponsored and regular. However, if the user already understands, then they can immediately continue the garbage deposit process.
3. On the ‘junk data’ (Data sampah) page, we changed the text button to see the type of trash into a clearly visible button.
4. At the time of redeeming points, we changed the position of the input number that was below to a pop up in the middle, because the user admitted that the feature was not clear to see.
#6 — Conclusion
To get the maximum result, our team carried out User research and Usability testing 2 times, which is Waste4Change real website and the redesigned website that we did.
Then, with the redesign of the website that our group has done and run user research and usability testing, we got a score of 84 which means that the redesign that we have done is quite satisfying for users in using the waste for change website. However, our design is also still fixing some of the shortcomings recommended by the user during user testing.
References
Ependi, U., Kurniawan, T. B., & Panjaitan, F. (2019). System Usability Scale Vs Heuristic Evaluation: A Review. Simetris, 10(1).