Background

I came across Babe’s N’ Brushes, a local painting company in my area. However, I noticed that the website could be more user-friendly and would benefit from a refresh.

The pages seemed cluttered and disorganized, but I was determined to overhaul them and enhance client interaction, ultimately driving more business for the company.

As the founders of Babes 'N Brushes, Matthew and Pamela, are dedicated to embodying the strength and determination of women in their company.

Their mission is to address the underrepresentation of women in our industry and use our success to advocate for the fight against breast cancer. The goal is to provide exceptional, high-quality service to their clients, and make a positive impact on the community.

Role

UX Researcher

UX/UI Designer

Design process

User Research

Affinity Mapping

User Personas

Define the Problem

Research Methods

Defining the problem

Most experts recommend repainting every five years, based on factors like location, climate, and the previous paint job.

  • Fair prices.

  • Ability to view work.

  • Attention to detail.

  • Customer reviews.

  • Easy and fast estimate.

  • Assistance with color selection.

Project

Responsive Website

Competitive Research

I conducted research across local companies to compare website layouts, sales tactics, and client interaction.

ZT Cabinet Painting

There is a great deal of attention paid to the layout of their work. The gallery section is very well organized. In addition, they offer a section describing their services.

ZT Cabinet Painting

Every website I visited offered an estimate both on the main page and throughout the website.

User Interviews

Key Interview Findings

“I think estimates are very valulable to know cost and timeline

Duration

5 weeks

Synthesizing the research

Responsive Website

Affinity Map

After collecting all the research data, I created an affinity map to identify the major themes regarding the difficulties faced by users and their top priorities. I was able to refine my website ideas based on the findings of my research.

“If a company is filled with bad reviews, that can be very telling.

Babes N’ Brushes

User Flows

Branding

Wireframes/Prototyping

Develop and Design

Usability Testing

Analysis of Results

Iterate Product

How can we make this process easier for clients?

Test and Iterate

4 total participants were interviewed

  • Male and female participants. 

  • Ages 25-37 years old 

    My goal during the interview process was to gain a better understanding of individuals' pain points and needs throughout the process of finding/using a painting contractor.

Persona’s

With data from my interviews and affinity mapping, I created persona’s whom represent the clients for this company.

How might we….

How might we assist customers with a quick and easy form to schedule a quote/estimate?

How might we organize and redesign the webiste to fit users needs.

Goals

Business Goals

  • Create a way to interact with customers.

  • Generate more accounts.

  • Generate more positive customer reviews.

User Goals

  • Easy and fast form to get an estimate.

  • Accress to customer reviews.

  • Help to ensue trust and reliable work.

Common Goals

  • Increasing accounts and improving customer experience.

  • Easy to navigate website.

  • Helpful feedback to help user navigate website.

Feature set

Must have

  • Estimate: User will have a form to fill out to request a quote.

  • Portfolio: Access to company work.

  • Our Team section: ‘About us’ section to get to know the team and company mission.

  • Area’s served: Map area’s serviced.

Nice to have

  • Clickable links in top nav: Home, portfolio, about me.

  • Clear and readable information and photo’s: User interface

Surprising and Delightful

  • Color selection: Feature to help with color selection.

  • Customer reviews: Reviews of work done by customers.

  • Trends with colors: List of colors that are currently trending or in season.

Can come later

  • Ai assist with color selection: AI generated colors based on trends of most used colors.

  • More work with breast cancer research: Local group fund raisers, meetings.

Designing a solution

After conducting user research and reviewing user and business goals, I created a user flow to visualize a seamless flow considering happy paths and decisions paths.

Wireframes

These wireframes were then transformed into a high fidelity prototype, which displays the full functionality of the user flow and the visual brand identity of Boxy Niche.

Before testing, some changes were made, such as adjusting the layout and size of certain elements.

Branding and UI Kit

High-fidelity Wireframes

Top Navigation bar for quick viewing.

Call to action button at top of homepage for estimate vs at the bottom of the page on orginal page.

The user has expressed a preference for positioning the "work section" closer to the top of the page in consideration of the higher interest it garners from viewers.

Usability Testing

Task flows

  • Navigate through estimate form.

  • Ability to interact with all buttons at top navigation, about, our team, our work, and reviews.

  • Ability to navigate links on the homepage. 

Task Detail Report:

Metrics:

  1. Small to no errors. 

  2. Ability to complete tasks. 

  3. Ease of use of the website.

  4. Quick completion of estimate form. 

Feedback:

  • Ease with no errors completing the estimate form task.

  • Felt the work section on the homepage should be moved to the top of the page. 

  • Use of a layover for more contrast for the background of the estimate form and review bios.

  • Ability to navigate and click throughout the homepage and pages without error or issues

 

Feedback from original site

  • Estimate form is easier to complete with fewer questions. 

  • Like the colors better vs the hot pink with the original site. 

  • Felt that the colors behind the photos made them pop

The Results

The new and improved….

Original Homepage

Hi-fi wireframes

I was able to transform this site into a user-friendly platform for customers to navigate while considering their pain points and needs.

Users have expressed a strong preference for a shorter, step-by-step form instead of a lengthy vertical form. They have emphasized the importance of minimizing the information required on the form, and have indicated a strong preference for discussing details in person or over the phone.

I infused the "about me" section with personality, allowing users to connect with our founders and team on a personal level. By incorporating fun facts, we aim to bring our team to life and establish trust with future clients.

In order to provide a seamless user experience, I made the decision to keep the review section on the same site and easily accessible at the top navigation bar. By doing so, users won't be redirected to another page when they want to leave a review.

Additionally, I spruced up the reviews by infusing them with a personal touch - including a meaningful quote, before and after pictures, and vibrant color examples.

I made the strategic decision to relocate the "about" section to a separate page rather than leaving it on the original homepage, where users had to scroll down to find it.

The cluttered nature of this section made it challenging for users to focus on the most crucial information.

Key learnings

  • Value of tesing:

    Understanding how users navigate websites and contracting sites is crucial. I highly value user feedback as it consistently provides new and unexpected insights during my usability testing. I am confident that retesting my final wireframes will lead to further improvements in my designs.

  • Visual hierarchy:

    The original website was extremely disorganized, failing to deliver on the user's goals, whether it was finding reviews or viewing painters' work – both incredibly important to my users. I repeatedly put myself in the user's shoes to discern their needs, carefully selecting which information to highlight and which to support

If I had more time I would..

  • Create a personalized color picker:

    I've received a lot of interest from users who want assistance with choosing colors for their rooms. I've identified companies that provide the option to upload a room, select a color, and visualize it in the room. Implementing this feature for company can significantly boost business and enhance customer satisfaction.

  • Bring more breast cancer awareness:

    One of the reasons that drew me to this company was the experience of losing a family member to breast cancer myself. I am passionate about contributing to the development of projects and initiatives aimed at raising awareness and generating funds to combat this devastating cancer.