Scrub Squad

Role: UX Designer

Project: From Logo to Wireframes—Designing for a small business

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.”
— Charlie B.

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:

  1. What is your preferred way to schedule a service? 

  2. To schedule a service online, what device would you prefer to use to schedule?

  3. What information on an “About” page do you hope to see?

  4. Walk me through your ideal online cleaning service scheduling experience. You can include any personal preference or special requirements you would need or like.

  5. 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.”
— Kathrine D.

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.

“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.”

Goals

  • Easily find prices/estimates

  • Read about the company and the owners

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:

  1. Navigate to “About Us” section

  2. Find and read about the “Get Organized” service

  3. 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