A responsive website for a house painting and wallpaper installation business in Philadelphia, PA.
A responsive website for a house painting and wallpaper installation business in Philadelphia, PA.
Role
Role
UX Designer
UX Designer
UX Researcher
UX Researcher
Branding Designer
Branding Designer
Timeline
Timeline
65 hours
65 hours
Project Type
Project Type
Responsive web design
Responsive web design
Tools Used
Tools Used
Project Background
Project Background
Wall Witches is a queer- women-owned house painting and wallpaper installation business based in Philadelphia. They get clients through word-of-mouth and social media, but don’t currently have a website or booking system. All appointments are made directly with the business owner.
Wall Witches is a queer- women-owned house painting and wallpaper installation business based in Philadelphia. They get clients through word-of-mouth and social media, but don’t currently have a website or booking system. All appointments are made directly with the business owner.
Wall Witches is a queer- women-owned house painting and wallpaper installation business based in Philadelphia. They get clients through word-of-mouth and social media, but don’t currently have a website or booking system. All appointments are made directly with the business owner.
What are we trying to solve?
What are we trying to solve?
Wall Witches is a small business which gets clients through word-of-mouth and social media. Currently, the business owner has to go to each individual house to make free pricing estimates which can be time consuming after the work day.
On top of that, potential customers have no idea how much a job might cost until they get an in-person estimate. If the job ends up being outside of their budget, both the client and business have lost time and energy.
Wall Witches is a small business which gets clients through word-of-mouth and social media. Currently, the business owner has to go to each individual house to make free pricing estimates which can be time consuming after the work day.
On top of that, potential customers have no idea how much a job might cost until they get an in-person estimate. If the job ends up being outside of their budget, both the client and business have lost time and energy.
How can we fix this problem?
How can we fix this problem?
How might we provide users with a rough estimate of the price without the need for them to make any calls?
How might we provide users with a rough estimate of the price without the need for them to make any calls?
How might we give users the means to book appointments without having to fill out a form or contact Wall Witches directly?
How might we give users the means to book appointments without having to fill out a form or contact Wall Witches directly?
Understanding the homeowner
Understanding the homeowner
Understanding the homeowner
To better understand how people first get in touch with contractors, I conducted 5 user interviews with home owners.
During this research phase, I also tried to understand:
To better understand how people first get in touch with contractors, I conducted 5 user interviews with home owners.
During this research phase, I also tried to understand:
To better understand how people first get in touch with contractors, I conducted 5 user interviews with home owners.
During this research phase, I also tried to understand:
What information homeowners would expect to see on a contractor’s website.
What information homeowners would expect to see on a contractor’s website.
Previous experience working with contractors
Previous experience working with contractors
How people make a decision on which contractor to hire
How people make a decision on which contractor to hire
Any frustrations when working with contractors in the past
Any frustrations when working with contractors in the past
Meet Katrina, the cautious homeowner
Meet Katrina, the cautious homeowner
Pain Points
Contractor websites that don’t have any price points
A lot of back and forth when trying to make appointments
Being unsure of the exact steps that it takes to get a job done
Being unable to find a time that works for both her and the contractor
goals
To book appointments for estimates without having to rearrange her schedule too much
To have open, transparent communication with contractors so that there aren’t any surprises later on
To feel comfortable in her own home while contractors are working
To be confident in hiring the right person
To have a high quality of work done
To have the process go as smoothly as possible
behavioural patterns
Is more likely to hire a contractor if she already has an idea of the cost
Reads reviews and looks at examples of previous work when choosing potential contractors to hire
Is more likely to hire a contractor if she knows exactly who will be in her house
frustrations
Poor communication
Unexpected extra costs that appear once the job has started
Getting to know Wall Witches
Getting to know Wall Witches
Getting to know Wall Witches
To better understand how to approach this job from a business perspective, I sat down with Amie, the owner of Wall Witches, to learn her needs and frustrations which I’ve summarised below.
To better understand how to approach this job from a business perspective, I sat down with Amie, the owner of Wall Witches, to learn her needs and frustrations which I’ve summarised below.
To better understand how to approach this job from a business perspective, I sat down with Amie, the owner of Wall Witches, to learn her needs and frustrations which I’ve summarised below.
"I spend so much energy on people who aren't clients. It's a lot of time spent on people who aren't paying and might not have any intention of paying”
"I spend so much energy on people who aren't clients. It's a lot of time spent on people who aren't paying and might not have any intention of paying”
"I spend so much energy on people who aren't clients. It's a lot of time spent on people who aren't paying and might not have any intention of paying”
Needs
“I need for potential clients to have certain expectations before I go through the trouble of writing up a detailed and lengthy estimate.”
“I need for potential clients to have certain expectations before I go through the trouble of writing up a detailed and lengthy estimate.”
“I need something that's going to speed up and automate booking for estimates that's going to cut out all the back and forth.”
“I need something that's going to speed up and automate booking for estimates that's going to cut out all the back and forth.”
Frustrations
“You can get 10 quotes from painting and wallpaper businesses and they would all be radically different, so potential clients have no idea what to expect."
“You can get 10 quotes from painting and wallpaper businesses and they would all be radically different, so potential clients have no idea what to expect."
Spending time going to and writing up estimates for people who don't have the budget for their services.
Spending time going to and writing up estimates for people who don't have the budget for their services.
Working toward a goal
Working toward a goal
Broaden Wall Witches’ reach to include people who don’t actively use social media
Broaden Wall Witches’ reach to include people who don’t actively use social media
Broaden Wall Witches’ reach to include people who don’t actively use social media
Provide potential customers with all of the information they need in order to confidently choose Wall Witches to paint or install wallpaper in their house
Provide potential customers with all of the information they need in order to confidently choose Wall Witches to paint or install wallpaper in their house
Provide potential customers with all of the information they need in order to confidently choose Wall Witches to paint or install wallpaper in their house
Provide customers with a quick and efficient way to book appointments for estimates
Provide customers with a quick and efficient way to book appointments for estimates
Business Goals
User Goals
Maintain consistent, transparent communication with the customer throughout the process
Provide the customer with as much accurate and detailed information as they need
Provide an excellent service so that the customer will recommend them to other homeowners
Continue to build a strong name amongst the homeowner community in Philadelphia
Make sure every customer is 100% happy with the work
Book appointments for estimates without having to interfere with their normal schedule
Have open, transparent communication
Feel comfortable in their home while the work is being done
Be confident that they have chosen the right person to do the job
Get a rough idea of the cost of the work before scheduling an initial appointment
Schedule estimate appointments and work without having to talk to several people or make a lot of calls
Provide/receive a high quality of work
Ensure a smooth, simple process
Business Goals
User Goals
Maintain consistent, transparent communication with the customer throughout the process
Provide the customer with as much accurate and detailed information as they need
Provide an excellent service so that the customer will recommend them to other homeowners
Continue to build a strong name amongst the homeowner community in Philadelphia
Make sure every customer is 100% happy with the work
Book appointments for estimates without having to interfere with their normal schedule
Have open, transparent communication
Feel comfortable in their home while the work is being done
Be confident that they have chosen the right person to do the job
Get a rough idea of the cost of the work before scheduling an initial appointment
Schedule estimate appointments and work without having to talk to several people or make a lot of calls
Provide/receive a high quality of work
Ensure a smooth, simple process
Business Goals
User Goals
Maintain consistent, transparent communication with the customer throughout the process
Provide the customer with as much accurate and detailed information as they need
Provide an excellent service so that the customer will recommend them to other homeowners
Continue to build a strong name amongst the homeowner community in Philadelphia
Make sure every customer is 100% happy with the work
Book appointments for estimates without having to interfere with their normal schedule
Have open, transparent communication
Feel comfortable in their home while the work is being done
Be confident that they have chosen the right person to do the job
Get a rough idea of the cost of the work before scheduling an initial appointment
Schedule estimate appointments and work without having to talk to several people or make a lot of calls
Provide/receive a high quality of work
Ensure a smooth, simple process
Mapping out the user’s journey through the website
Mapping out the user’s journey through the website
Key
Key
Key
Add a service to the cost calculator
Add a service to the cost calculator
Add a service to the cost calculator
Challenge-Driven Design
Challenge-Driven Design
Breaking it down
Breaking it down
Problem 1
Katrina has to book an in-person estimate before she has any idea of how much the work will cost.
Katrina has to book an in-person estimate before she has any idea of how much the work will cost.
Solution 1
She can enter the details of the work she wants so she has an idea of what she will pay.
She can enter the details of the work she wants so she has an idea of what she will pay.
Problem 2
Katrina doesn’t like having to make a lot of calls when booking appointments.
Katrina doesn’t like having to make a lot of calls when booking appointments.
Solution 2
She can book an appointment for an estimate through Wall Witches’ website.
She can book an appointment for an estimate through Wall Witches’ website.
Usability Test Findings
Usability Test Findings
After conducting a usability test with 5 participants, the results were incredibly insightful.
After conducting a usability test with 5 participants, the results were incredibly insightful.
Task 1
Task 1
Imagine that you would like to have all of the walls, trim, and ceiling painted in a large room. Demonstrate how you would add these services to the calculator.
Imagine that you would like to have all of the walls, trim, and ceiling painted in a large room. Demonstrate how you would add these services to the calculator.
Imagine that you would like to have all of the walls, trim, and ceiling painted in a large room. Demonstrate how you would add these services to the calculator.
20%
Direct success
Direct success
80%
Mission unfinished
Mission unfinished
Misclick rate
Misclick rate
Average duration
Average duration
Uh oh!
Uh oh!
What happened here?
What happened here?
“The bit that took me a few clicks to get right was with the cost calculator. I initially just clicked the wall parts I wanted painted a few times before realizing I had to click another button to apply them to the cost calculator.”
“The bit that took me a few clicks to get right was with the cost calculator. I initially just clicked the wall parts I wanted painted a few times before realizing I had to click another button to apply them to the cost calculator.”
“The bit that took me a few clicks to get right was with the cost calculator. I initially just clicked the wall parts I wanted painted a few times before realizing I had to click another button to apply them to the cost calculator.”
After the usability test, I realised that so much of my first design needed to be reworked. As visual hierarchy seemed to be a problem here, I decided to completely change the way in which users add a service to the calculator.
After the usability test, I realised that so much of my first design needed to be reworked. As visual hierarchy seemed to be a problem here, I decided to completely change the way in which users add a service to the calculator.
Version 1
Both of the buttons on this page confused my testers. I realised that they were unnecessary and should not have been there at all because they were not the relevant CTAs for the task.
Initially, the Add Service button was there to add a brand new service, while the left panel was where I intended the user to input the details of the work.
Both of the buttons on this page confused my testers. I realised that they were unnecessary and should not have been there at all because they were not the relevant CTAs for the task.
Initially, the Add Service button was there to add a brand new service, while the left panel was where I intended the user to input the details of the work.
Version 2
In Version 2, I removed the Add Service button completely and added a Save button so the steps are more logical. Once the service has been saved, the user then has the option to add another service if they would like several rooms painted or wallpapered.
In Version 2, I removed the Add Service button completely and added a Save button so the steps are more logical. Once the service has been saved, the user then has the option to add another service if they would like several rooms painted or wallpapered.
Task 2
Task 2
Now demonstrate how you would book an appointment or an estimate for 5-6pm on the 29th of February.
Now demonstrate how you would book an appointment or an estimate for 5-6pm on the 29th of February.
100%
Direct success
Direct success
0%
Mission unfinished
Mission unfinished
Misclick rate
Misclick rate
Average duration
Average duration
That’s more like it!
That’s more like it!
Fortunately the results here were exactly as I had hoped. Success!
Fortunately the results here were exactly as I had hoped. Success!
Key Learnings
Key Learnings
Working with a real client can have some unexpected constraints, but they ultimately make the project more interesting and push you to grow as a designer.
Working with a real client can have some unexpected constraints, but they ultimately make the project more interesting and push you to grow as a designer.
Working with a real client can have some unexpected constraints, but they ultimately make the project more interesting and push you to grow as a designer.
Projects are never a linear process: there are always many ups and downs.
Projects are never a linear process: there are always many ups and downs.
Projects are never a linear process: there are always many ups and downs.
Test, test, test!
Test, test, test!
Test, test, test!
What’s next?
What’s next?
Build the rest of the website, including a contact page, an about page, examples of previous work, and reviews
Build the rest of the website, including a contact page, an about page, examples of previous work, and reviews
Play around with the visual design - mainly the background colour.
Play around with the visual design - mainly the background colour.
Hand off to a developer
Hand off to a developer
Like what you see?
Like what you see?
Let’s chat
Let’s chat
chelchadesign@gmail.com
chelchadesign@gmail.com