UI/UX Case Study : LOAK YUK ! Mobile App Design for Reduce Plastic Waste

UI/UX Case Study : LOAK YUK ! Mobile App Design for Reduce Plastic Waste

UI/UX Case Study : LOAK YUK ! Mobile App Design for Reduce Plastic Waste

Jul 12, 2023

Jul 12, 2023

Jul 12, 2023

Introduction

This project was a challenge when I took part in the UI/UX Design & Research bootcamp in Digitalent Kominfo (Fresh Graduate Academy) by Binar Academy with the theme I took, namely Help the user to recycle and reduce plastic pollution

  • Role: UI/UX Designer & Researcher

  • Scope: Research, Design Low Fi & High Fi, Prototyping, Testing

  • Timeline: March – April 2023

  • Tools: Google Docs, Spreadsheets, Figma

Project Brief

Loak Yuk is an E-Commerce service provider focused on helping UMKM businesses, especially secondhand collector (Tukang Loak) and it is hoped that this digital business solution can reduce plastic waste and awareness in the community not to throw plastic waste carelessly.

Why Tukang Loak ?

Based on the results of an environmental science journal study entitled “Tinjauan Nilai Manfaat pada Pengelolaan Sampah Plastik Oleh Sektor Informal (Studi Kasus: Kecamatan Purwodadi, Kabupaten Grobogan)”

Rumanti (2019) Reported that the management of plastic waste recycling in the informal sector in Semarang city has economic potential with each recycling market player from scavengers, flea dealers, to grinders having different levels of buying and selling, this plastic waste recycling activity can reduce the amount generated Semarang city waste is 11.46% and from these results there is a decrease in the operational costs of waste management in the city of Semarang

Based on the results of this study, it shows that recycling has economic potential and multiple benefits, so studying the economic potential and analyzing the benefits of recycling waste is very important. In addition, several other aspects related to the informal sector (tukang loak) recycling of plastic waste are also analyzed which are considered profitable both economically and environmentally.

Product illustration

Ringkasan User Research

I have conducted a survey of the surrounding community to find out their habits, needs, and problems when facing problems with plastic waste. Based on the survey results, most of them sometimes use the services of secondhand collector (Tukang Loak) but to sell some unused items such as cardboard, electronic, used plastic bottles, plastic spoons etc. It takes a few days because the flexing profession is still done door to door from (home to house). From these problems it is concluded that by adopting digital solutions, it can facilitate the business sector of the UMKM of the Flexible secondhand collector (Tukang Loak) and also the community is much easier to sell the unused items so that they can be recycled

Pain Point

How Might We

After doing research and identifying the problems faced by users, I ask questions that spark creativity (How might we), as a basis for conducting brainstorming sessions.

User Persona

This user persona is a fictitious representation of an ideal user based on data and interviews with real users. This persona includes information such as a user's demographics, background, goals, challenges, habits, and preferences. This helps in describing the user holistically and understanding their needs better.

Idea Solution

After analyzing user needs, I propose several features. These features will be implemented into the design, for more effective and efficient product development for users

  1. Pick Up Order

    Through the "Request Pickup" feature, sellers can easily submit requests for pickup of used goods they want to sell to collectors. Thus, the buying and selling process becomes easier and more efficient.

  2. Drop of Order

    As for the "Drop-off" feature, an option is provided for the seller to directly deliver used goods to the intended collector or collectors of used goods.

  3. Redeem Point

    Every transaction that occurs will provide the use of points that can be exchanged for various attractive prizes such as pulses / electricity tokens. These points are earned as a form of appreciation for every transaction made, encouraging users to continue using the service and participate actively.

  4. Top Up E-wallet

    In the brainstorming process, I focused on strategies for creating sustainable business profits. Therefore, I plan to develop top-up and e-wallet features as important steps. The top-up feature will allow users to top up balances or funds into their accounts, while e-wallets will provide a virtual place to store and manage their electronic money. The designed e-wallet not only provides convenience in transactions in the application, but can also be used to purchase credit or electricity tokens.

  5. Status / Tracking

    a feature that allows sellers and collectors to view status and track directly and in real-time. when the seller makes a Pick Up Request the seller can monitor the journey of their used goods and collectors can update the order / tracking status, and vice versa when the seller does the drop off feature the seller can update the order status and collectors can see the order status

  6. History List Transaction

    the "Transaction History" feature which allows both of them to jointly view and analyze the results of each sale made. With this feature, sellers can easily track and evaluate their sales performance, while collectors can monitor the success and progress of the transactions they have made. With equal access to this transaction history, we ensure transparency, trust, and opportunities to enhance collaboration that is mutually beneficial for both parties.

  7. Chatting with seller dan collector

    The chat feature is implemented to facilitate direct and efficient communication between sellers and collectors.

  8. Notification

    The notification feature is used to provide important notifications to users regarding activities or events that occur in the application

  9. Search Product

    The "Search Product" feature is used to make it easier for users to find the product they want in the application.

  10. Nearby Location Filter

    The "Filter By Nearest Location" feature allows users to narrow their search for products based on their geographic location.

  11. Reward User

    The "User Reward" feature is used to reward users who are active and participate in the application. Through this feature, users will receive rewards in the form of points, discount coupons, gifts or other benefits as recognition for their involvement and contribution.

  12. Detect the type of waste through photos

    The "Detect Type of Waste Through Photo" feature is a technology that allows users to identify the type of waste simply by taking a photo and uploading it to the application.

  13. Waste management education

    The "Plastic Waste Management Education" feature is designed to provide users with useful information and resources regarding better plastic waste management practices. This feature provides educational content, such as articles, tips, guides, or videos, that discuss reducing plastic use, recycling, substituting with environmentally friendly materials, and other ways to manage plastic waste responsibly.

Afinity Diagram

Based on the results of the analysis that has been done, I managed to produce an Affinity Diagram. Affinity Diagram is a visualization method used to organize and connect various ideas or findings resulting from brainstorming or research sessions. By using an Affinity Diagram, we can group these findings into relevant categories or themes, making it easier to understand and further analyze.

There are 5 categories namely :

  1. App traction business

  2. Social

  3. Learning

  4. Product orders

  5. gamification

Prioritization Idea

After going through the Affinity Diagram process, the next step is to prioritize the ideas that have been generated. Prioritization of ideas is done to determine the order of importance of these ideas based on certain criteria, such as potential impact, feasibility of implementation, user needs, or business strategy.

  1. Yes Do It Now: Product Order, Business App Transaction, Learning, Gamification, Social

  2. Do Next:

  3. Do Last:

  4. Later: Artificial Intelligence

User Flow

This User Flow represents a visual of a series of steps or interactions made by the user when using an application or website. User Flow provides clear guidance on how users will interact with the interface, from start to finish.

Wireframe

Through Wireframe I can communicate design ideas and concepts more easily and clearly. Wireframes help in visualizing the structure and arrangement of design elements, and provide a solid foundation for subsequent development and implementation stages.

Defining Color

I use green as the primary color for a compelling and relevant reason. The color green is generally associated with the concepts of nature, freshness, growth and sustainability. This color is often used in the context of environment, health, and products that focus on sustainability.

Design System

I use this Design System to achieve several important goals in developing UX designs. Design Systems can assist in creating visual consistency and user experience across products or platforms. By having clear guidelines regarding layout, colors, typography, icons, and other design elements, the Design System ensures that every part of the interface has a uniform appearance and is easily recognized by users.

High Fidelity

In this mockup design, I present two different login buttons, namely "Login as Collector" and "Login as Seller", allowing users to log in to their account according to the role they have on the platform.

On the main page, sellers are presented with main information which includes redeem/top-up, pickup and drop-off options for plastic waste. In the bottom navigation menu, sellers can easily access the history, learn, and profile features. The learn feature provides educational videos that help sellers gain knowledge about the process of recycling plastic waste.

Meanwhile, on the collector's page, a filter feature is available to find the nearest location, take it to a location/pickup, and see the status of the item that the seller wants to drop off. In the navigation menu at the bottom, collectors do not have access to learning videos, this is done to focus collectors on finding the used items they want and saving their quota and internet access.

On the seller's page, the "Drop-off" feature is used when the seller wants to hand over used goods to collectors. After the drop-off item is received by the collector, the seller is required to make the delivery, and they also do live tracking.

Meanwhile, on the collector page, the "Drop-off Collector" feature allows them to accept or reject the handover of used goods. After the collector receives the drop-off, the seller immediately makes the delivery, and the collector can continue the transaction after the goods arrive at their destination.

On the seller's page, the "Pick-up" feature is used when the seller wants to pick up used goods. Users can upload information about items to be collected and wait for pickup by collectors.

 Meanwhile, on the collector page, the "Pick-up Collector" feature allows them to accept or reject pick-up requests. After collectors receive pick-up requests, they immediately pick up and update live tracking. Collectors can continue the transaction after they arrive at the pick-up location.

On this page, users have the opportunity to exchange the points they have collected for various available prizes, . In addition, users can also top up their e-money, allowing them to shop easily and conveniently using electronic balances.

Prototyping

After going through the previous stages, the next step is to make a prototype. Prototype is an interactive visual representation of a design that has been previously developed. This allows users to experience and interact with the planned interface before the actual implementation phase.

Click Here to Try Protoype

Usability Testing with SUS (System Usability Scale)

By using the SUS (System Usability Scale) method, I can evaluate the usability or usefulness of the User Interface & User Experience from the designs that have been designed. The SUS method is a standard method used to measure user perceptions of the usability of a system. There are 10 questions used in this method, namely:

  1. I think I will use this system again

  2. I find the system cumbersome to use

  3. I find the system easy to use

  4. I need help from other people or technicians in using this system

  5. I feel the system features work as they should

  6. I feel there are a lot of things that are inconsistent (incompatible with this system)

  7. I feel that other people will understand how to use the system quickly

  8. I find the system confusing

  9. I feel there are no obstacles in using this system

  10. I need to get used to it before using this system

How to calculate SUS

After collecting data from the respondents, the next step is to calculate the data. In using the System Usability Scale (SUS), there are several rules that must be considered when calculating the SUS score. Here are some of the guidelines we followed in calculating the score from the questionnaire:

# Explanation in Indonesian

S = Skor Pengguna

N = Jumlah Total Responden

J = Jumlah skor pertanyaan

JS = Jumlah Skor SUS

  1. Pada pertanyaan dengan nomor ganjil, setiap skor pertanyaan yang didapat dari skor pengguna akan dikurangi 1.

    Ganjil = (S - 1) 

  2. Pada pertanyaan dengan nomor genap, skor akhir didapat dari nilai 5 dikurangi skor pertanyaan yang didapat dari pengguna

    Genap = (5 - S)

  3. Jumlahkan seluruh skor dari hasil setiap pertanyaan (yang di dapat di step 1 & 2) kemudian di kalikan 2,5 (J * 2,5)

    Jumlah Skor SUS = (J * 2,5)

  4. Menentukan Skor akhir nilai rata-rata jumlahkan seluruh nilai yang di dapatkan di step 3 di bagi dengan total responden

    Skor Akhir Rata" = ((SUM:JS) / N)

Result

In the System Usability Scale (SUS) method, there are parameters that are used to measure system usability. Here are some parameters that become a reference

Source: www.edisusilo.com/cara-menggunakan-system-usability-scale/

Based on the calculation results with the role as a collector, a score of 85 is obtained, which indicates that the user experience in this role is included in the Excellent category. This score is in line with grade B which indicates a high level of satisfaction and well received suitability.

Based on the calculation results with the role as a seller, a score of 87 is obtained, which indicates that the user experience in this role is included in the Excellent category. This score is in line with grade B which indicates a high level of satisfaction and well received suitability.

Click Here For See The Result

Conclusion

With digital solutions, it is hoped that this innovation can make a significant contribution in reducing plastic waste in the future. Through this innovation, the process of collecting, processing and recycling plastic waste can be carried out more efficiently and effectively.

This digital solution is also expected to have a positive impact on the economy, especially for MSMEs that act as collectors of used goods (Tukang Loak) . By using this platform, used goods collectors can expand their market reach, establish partnerships with sellers, and increase accessibility to used goods that can be processed and recycled. This will provide opportunities for better business growth and boost the local economy.

Next Recommendation

Despite a positive user experience, it is still important to continue gathering feedback from users and iterating on designs. By involving users in product development on an ongoing basis, we can continuously improve the user experience and ensure continuous satisfaction.

© 2023 Richard Wiryadinata

© 2023 Richard Wiryadinata

© 2023 Richard Wiryadinata