Scrub Squad
Role: UX Designer
Project: Responsive website
Duration: 65 hours
Tools used: Figma, FigJam, FaceTime, Zoom, Optimal Works
Background
Scrub Squad is a family-owned cleaning company that offers a variety of services across Saint Charles County and the surrounding area. The company was in need of a website that allows clients to view the services offered, their prices, a little about the company and the owners, and a way to inquire about getting services. Founded by Brianna and her sister Danielle, their journey began with a passion for cleanliness and a commitment to excellence. With trust and transparency at the forefront of their values, Scrub Squad has earned a reputation for reliability and integrity in their community, so I created a design that aligned with their company values.
“I feel like I’m wasting my time if I can’t find the pricing and have to wait for a response to see if I can afford it.”
As of 2024, nearly 10% of all U.S. households pay a professional service to clean their homes.
-
1. Empathize
Competitive Analysis
User Interview
Survey
-
2. Define
Affinity Map
Personas
How Might We
-
3. Ideate
Information Architect
Low-fi sketches
-
4. Prototype
UI Elements
High-Fi mockups
Final prototype
-
5. Test
Usability Test
Iterate
User Interviews & Takeaways
I know life can be hectic and there doesn’t always seem to be enough time in the day to do all the things you want/need. Between work, school, family, and personal hobbies, chores can pile up and get out of hand. With Scrub Squad, I wanted to get a feel from a wide age range to ensure a thoughtful and efficient design. I interviewed 4 participants who have, at one time or another, hired a cleaning company to come to their home. Each participant was between the ages of 28 and 63.
-
- 3/4 people’s biggest pain was related to price transparency
- 4/4 people said they wanted to be able to read about the employees before continuing with the process.
- 2/4 mentioned wanting the option to speak with someone before booking online, perhaps by being able to leave their information for a call back
- 3/4 people preferred to use their mobile device
Interview Questions:
What is your preferred way to schedule a service?
To schedule a service online, what device would you prefer to use to schedule?
What information on an “About” page do you hope to see?
Walk me through your ideal online cleaning service scheduling experience. You can include any personal preference or special requirements you would need or like.
When using online scheduling services in the past, what were the most common challenges you encountered?
“I like to shop around for the best deals, so if a site doesn’t give me the prices up front, I won’t even consider them as an option.”
Point of view
I would like to explore ways to inform potential new users of the services and prices offered, or at least estimates, because people value transparency in a company.
Personas
After collecting all the data and conducting research, I created personas to help empathize with and understand the target users' experiences and tailor the features to meet their specific needs.
Goals
Easily find prices/estimates
Read about the company and the owners
“The price is one of the first things I look for when I am booking a service. Being able to read about the business and the owners also helps me feel more at ease letting strangers come into my home.”
Pains
Feeling “tricked” with hidden fees
Trusting people in her home
Debbie is a 60-year-old grandmother of 11. Her grandchildren's ages range from 6 months to 17 years. She loves having all of her grandchildren over once a month for a sleepover. However, even after her oldest grandchildren help clean up, she still feels a deeper clean after much chaos and fun is necessary. Debbie would like to be able to easily navigate to a cleaning services website that shows her price estimates, services offered, and a little bit about the company.
How Might We?
How might we allow clients to get to know the owners of the business and the employees?
User Flow
To ensure the user has a full understanding, I created a flow to show where the app will take the user as they approach each screen. By doing this, it allowed me to see where the user starts and ends, giving me insight on how to create efficient wireframes.
Key
Low-fidelity Mockups
To make my design tangible, I created some low-fidelity wireframes. I designed them based on the flows and the screens needed to complete each task. I also added onboarding screens to help familiarize new users with the design. Since we are creating a responsive website, I included both mobile and desktop wireframes to show the look on multiple devices. Below you will see 5 mobile screens and 3 desktop versions.
Mobile
Desktop
Usability Testing
Using the mid-fidelity wireframes I created, I conducted a usability test with 5 users. Overall, the feedback received was positive. Participants were able to successfully navigate the screens and complete all required tasks. They were asked to complete the following:
Navigate to “About Us” section
Find and read about the “Get Organized” service
Navigate to appointment request
What went well
Participants said the design was straightforward and easy to follow
Participants liked being able to see the prices right away
4/5 participants mentioned enjoying the colors used throughout the design
User questions and concerns
Participants said some buttons needed size adjustment
Participants mentioned legibility concerns with some of the letter spacing
Some buttons needed more cushion around the edges
Iterations
The results from the usability test were used to create high-fidelity versions. I revisited my original design and made adjustments to finalize the high-fidelity prototype. After receiving the feedback, I made the following iterations to address some of the concerns and weak points with the original design
Button size & padding
I made the button smaller and added some padding to make it less crowded
Before & After
Adjusting letter spacing
To help with legibility, I added some spacing between the letters
Before & After
UI Kit
Finding the right color, typography, and logo
After exploring different color options, I settled on aving a calming and soothing palette. Many times, people looking for mental health help are stressed or feeling uneasy. I wanted to offer a design that was welcoming and not chaotic.
Color Palette
Logo
Typography
Hi Fidelity Mockups
Final Prototype
To view the click-through prototype, click the phone
Figma for Prototype Testing
Below is a short video of the prototype designed in Figma. Click to watch.
Lessons Learned
Designing a family-owned cleaning company business app taught me the importance of simplicity in user interface design to accommodate users of varying technological literacy. Additionally, I learned the significance of integrating features that provide communication between clients and cleaners to ensure seamless service delivery and customer satisfaction.
This project also taught me the importance of incorporating intuitive navigation and visually appealing elements to enhance the user experience, while also emphasizing the importance of maintaining consistency in design elements across different screens to ensure coherence and usability throughout the application.
View other projects