24-Hours Laundromat in Balikpapan UX/UI Design Case Study
Disclaimer: this is a personal project.
Introduction
Hi, my name is Fadjri. Now I want to try new things as of UX UI where previously I was Full Stack Dev Web. But lately, I’ve been curious about the creation process from scratch (such as research, wireframe, prototyping, usability test).
At that time, I attended a webinar hosted by The Design Thinker team. I am very excited to join the webinar because I want to learn a lot and gain new experience in problem-solving. In a product, you definitely need a framework method to produce the right product. This time I use the Design Thinking framework method. Empathy, Define, Ideation, Prototype, and Test.
The Challange
Design a trusted application for beginners aged 15–50 years who are using online laundry services for the first time
The Design Brief
Getting your laundry done is a long process that involves steps like sorting your clothes, soaking them, washing (by hand or washing machines), hanging them to dry, ironing them, and at last folding them. There are certain factors that have to be kept in mind, when users want to wash clothes, they often find a laundry shop place far from where they live. And wasted time looking for that place.
So, I decided to collect the user to the laundry service through an app that solves problems manual washing and traditional laundry services. No more wasting time, low quality, mismatched washes.
The goal is to make it easier for users to find a laundry place to wash and make it easier for owners to manage the business so that it continues to grow and is known to everyone. and also users don’t have to drop off or pick up their laundry.
User Research
At this stage, I create a user persona to meet the empathy requirements.
- Who wants to find a laundry place? — Worker, Student, housewife
- Where do you live? — Live in Indonesia
- How old are you? — 18–50 years old
- What is the goal? — Looking for a nearby laundry place, need drop-off & pickup, need ease-of-use.
Empathize
I started by researching IDI (In-Depth Interview) user interviews with several people as participants to find out their experiences when searching for laundry places etc. From this interview, I capture every insight or information and then process it into a document/data for analysis. This data is formed into a list of insights (triggers, Actions, Rewards & Investment Variables) from each stage, as well as data in the interview notes.
- Trigger (user trigger)
- Action (user action)
- Variable Reward (user feel)
- Investment (user effort)
I made some questions to get information from the user
- What triggers users to not want to wash their own clothes?
- What actions are taken to achieve user goals?
- What does the user expect and want after performing some action accomplished?
- What effort does the user spend when reaching the goal?
And after that, I made a user problem validation question.
- What are the problems that users face when users take some actions to achieve user goals?
I get the information list about user trigger, action, variable reward & investment and I conclude the problems that often occur in sticky notes like below:
Define Phase
HMW (How Might We)
At this stage, I try to see some of the opportunities and challenges of the problems that the user feels by using the HMW (How Might We) method. after that, I made a question starting with “How Might We…. “ and wrote it on a sticky note like below.
Ideas Phase
Generate Idea
After creating opportunities and challenges with the HMW (How Might We) method. At this stage, I do a brainstorm referring to the HMW (How Might We) that has been made in the sticky note and turn these opportunities and challenges into ideas that the user wants as much as possible.
When the ideas are implemented, I think it is quite helpful for users in finding an easy laundry place. And now how these ideas can become products that are easy to use for users.
In my opinion, the right product and easy to carry everywhere is the Mobile App.
Storyboard of Main Feature
Main Flow & UX Sitemap
From the research I did before, I created the main flow that starts from the initial moment on the page where the user is first located and interacts with our product until the user reaches his goal.
At this stage, I create a user experience sitemap of application pages that are connected and accessible to users.
User Flow
User flow design provides a user experience in using a product.
WIREFRAME Low-Fidelity
The wireframe is Low-fidelity or the basic concept of interaction design which consists of a basic framework, layout, and other design supporting elements/components before entering into hi-fidelity design.
Usability Test of Lo-Fi
I conduct the first testing of my prototype which is still shaped in low-fidelity (wireframes) via remote by sending prototype links to only some friends. For the first, I just take focus on some key features which being user goal in this project, that is to know:
- Can they be able to create an account or sign in and then take some tasks until achieved their goals?
- Would they be comfortable with workflow and interaction on every screen?
- What do they like or dislike in the prototype and what things need to improve?
- The basis of the whole in this test, will this prototype be a solution in an effort to make it easier to find the desired laundry shop?
When conducting testing every feedback from the participant will note and gathered as a notes bank to make it possible to improve on the prototype if needed.
In this case, I have feedback notes from the participants who focus on laundry service detail when customers can’t communicate to admin laundry. I want to improve the laundry service detail page because there is no interaction between the customer and the laundry admin. I will add a message button to make it easier between orderers & admins.
Design System
I made a simple design system for saving time iterations and changes by utilizing premade UI components and elements. By doing this, we can use the same elements over and over. Also, keep the consistency whole of the product.
User Interface
High Fidelity really needs a lot more effort because I make it carefully. From wireframe Lo-Fi to Hi-Fi there are some page changes. That feedback notes really helpful for detailing the Home page, Detail page, Inbox page, Empty State page, Profile page, Manage Address page and others. and I don’t miss also part of the pain point for user needs.
Conclusion
Finally the study case is finished, I can conclude how important it is that a clear application flow and the wireframe can simplify the design and development process. But to make a product be Useful, Usable, Desirable, Findable, Accessible, Credible & Valuable actually never finished.