Offers reliable cleaning services by connecting busy users with professional cleaners.
Background
My Roles
UX Designer, UI Designer (2 design team members)
Duration
2023 Apr ~ 2023 Sep (6 months)
Project Type
Work Project at JustStar Information
Tool
Figma, Figjam
Product intro
The cleaning service platform is made for busy customers and professional cleaners.
In today's fast-paced world, people juggling a demanding job and parenthood can experience a lack of time to handle basic household chores, leading to burnout and increased stress. Finding trustworthy cleaning and organizing services becomes an essential and challenging need. This project addresses these challenges by providing reliable cleaning services for busy individuals and parents. For customers seeking cleaning services, the platform can connect them with background-checked cleaners. For cleaners, they have the flexibility to set their schedules and choose preferred jobs.
Challenge
How to design a user-friendly platform, balancing simplicity and functionality for cleaners and customers?
We encountered many challenges with this cleaning service website platform. One of the main challenges was creating interfaces that could seamlessly balance simplicity with full functionality. Users of such platforms are usually looking for a simple and intuitive experience, but the cleaning industry is characterized by a wide variety of services and features that require careful consideration. Ensuring that a website is friendly to both cleaners and customers, while offering a range of services requires thoughtful navigation and clear communication.
Goal
Crafted a user-centered, efficient, and trustworthy platform.
As a product designer, my primary goal in designing this platform is to create a user-centered, efficient, and trustworthy solution to busy individuals' challenges when dealing with work and home life. On the other hand, I wanted to build a platform that would provide opportunities for cleaners to contribute their skills.
Impact
Created a user-friendly platform and established a requirement form to improve product processes.
By defining, designing, testing, and iterating on this project, we successfully created a user-friendly platform that connects customers needing cleaning services with trusted cleaners. My impact was in the intuitive interface, efficient booking process, and responsive web design. We also built a robust back-end platform that laid the foundation for the front-end system—helping our clients to modify and manage their systems efficiently. Furthermore, in light of previous lessons, I have developed a requirements form for business developers to complete. This approach allows for more precise specifications and requirements, saving us significant time that would otherwise be spent on guesswork.
Design Process
Define
Client requirements, Competitive analysis, User story
Design
Site map, User flow, Wireframe, Moodboard, Design system, Mockup
Test
Usability test
Final design
Iterate
Define
Client requirements
The client came to us because he felt that many families were too busy with work or taking care of children, so they needed more time to do household chores such as cleaning or laundry. This caused a significant burden for these working parents. In light of this, the client hopes we can help him create a household helper matchmaking platform to match professional cleaners to provide cleaning services to busy working customers. At this stage, we have also created a product requirement template for our business developers to ask the client for more precise specifications and requirements.
Competitive analysis
After understanding the general specifications and requirements, we started conducting competitive analysis to understand the common necessary features of similar products in the market and to identify user needs that still need to be met in the market.
User story
We then created story mapping to adopt a user-centered design approach. User stories help us capture and communicate the perspective of end-users, providing a narrative that outlines their needs and expectations. Here are some of the user stories that we created:
Customers
As a parent, I want a platform that offers a variety of cleaning packages, allowing me to choose a service that aligns with my specific needs and budget.
Cleaners
As a cleaner, I want a simple and easy platform where I could quickly find a job that suited my expertise.
Design
Site map
Next, we created sitemaps. It helped we communicate with our client to ensure the details of pages. With the sitemap, we figured out what features to display and what data to collect. The sitemap includes both the front-end and back-end systems of the platform. The front-end system is geared towards customers looking to find cleaners and cleaners looking to make money from cleaning. On the other hand, the back-end system is for the client who need to maintain the entire cleaning service system. Below are the front-end and back-end sitemaps.
User flow
Then, we created a user flow based on user stories and sitemaps to delve into how users navigate within the structure. After establishing user flow, We had a more complete spec to follow. We also used this flow to communicate with our client, project manager, and developers to ensure every detail. Down below are two of the main user flows.
Wireframe
Finally, after all the previous preparation, we stepped into the design world and started making the wireframe of this platform using Figma. We developed a responsive web design to make sure the platform is available across desktop devices and mobile devices.
After the wireframes were done, we met with the client to showcase design concepts and gain approval before moving to the next step.
Moodboard
Next, we needed to decide the style of this platform. We first asked our client what image he wanted to deliver to the end users. He said he wanted this platform to be “trustworthy,” “cute,” and “professional.” After receiving his requirements, we created a mood board.
We also designed three landing page versions to let our client pick one of them. The client finally chose version 1.
Design system
After knowing the style of this platform, we started to create our design system based on MUI front-end framework. Hence, the front-end engineer didn’t need to begin their code from scratch. Also, with the design system, we set up a guideline and components to ensure consistency, scalability, efficiency, and a cohesive user experience across the platform.
Mockup
With thorough preparation and effective communication, we successfully created a mockup for both the front-end and back-end. This mockup served as a valuable tool for communicating with the client, developers, and managers. In the end, we designed a total of 152 desktop interface pages for the front-end website.
Test
Usability testing
Research goal
Before hand-off into development, we conducted a usability test to evaluate whether the platform can help users achieve tasks efficiently and meet their expectations. We wanted to know what problems users would meet when using this platform. We can increase the user's satisfaction by solving these problems and providing better user experiences.
Methods
5 participants, 25-30 years old on average
Each interview was about 55~60 minutes
Task scenarios
As a customer...
Register an account
You've recently heard about a new cleaning platform. You want to sign up and explore what the platform offers.
Find a cleaner
Now, you want to hire a cleaner to come to your home to do your laundry, try to find a cleaner on the platform to go to your home and sort your laundry.
Rate a cleaner
The cleaner has done the laundry. You want to know how well the cleaner did and rate the cleaner on the platform.
As a cleaner...
Take orders
You have free time now and would like to use the platform to find a job, try receiving orders on the platform.
Report the work
You've just completed your first order, try to complete and report this order on the platform.
Problems & Solutions
After finishing the interviews, we synthesized participants’ feedback and categorized them on an affinity diagram to help us clear out the problems users encountered. Then, we came up with the solutions to these problems and made a usability test report to discuss with the manager and developers.
Final Design
Iteration
Next, we iterated on the design based on the results of our usability testing and discussions. Here are some examples of how we iterated through this process.
Because the client for this project didn't know how to build a system from scratch. The requirements for this project were vague and abstract. Fortunately, we conducted usability testing before handing over development. This prevented us from making a lot of bad design decisions and risky assumptions in the face of uncertainty.
Front-end and back-end system product
In this project, we designed and implemented the front-end and back-end. I learned how to design the information displayed and collected on the interface. I found that data communication is complex and often unfeasible. Although the complexity of the design increased within the constraints of development, I still enjoyed the process because I learned how to build a complete front-end and back-end system from the ground up with rigor and integrity.
Align with company goals
Although the case scope was enormous, there was little time to design and develop the case. To meet the deadline, I adjusted many features in the design to speed up the development. I sacrificed some features that could increase the user experience. Nevertheless, in the collaboration process, I learned that we should prioritize how to accomplish the company's goals and look for opportunities to iterate on the product after the product has been successfully launched.
