ABSHERS PROFESSIONAL PAINTING WEBSITE

New website for a painting company entering the residential market

UX Research I UX Strategy I UX Design I UI Design

MY ROLE

UX Researcher

UX Designer

KEY ACTIVITIES

Research & Insights
Wireframes
Prototyping

Content

Usability Testing

COMPANY

Abshers Professional Painting

INDUSTRY

B2B

B2C

DATE

2016

Summary

Abshers Professional Painting is a full-service painting company in the St. Louis Metro area. They have a strong share of the commercial and property management market already, but they are ready to break into the residential market.

Problem - Create a high quality, polished website for Abshers Professional Painting.

Showcases their various projects and services: interior painting, exterior painting, drywall repair, and resurfacing.
Target residential clients and interior design firms St. Louis area.
Build concrete presence online to build trust and get users comfortable with painters entering their homes.

Solution

A user-friendly website with a visual emphasis and image-heavy design.
Allow costumers to view before and after stages completed by the company.
Include a gallery based website that included images, descriptions, and contact information.
Create integrity through the site but listing several testimonials past clients and links to reputable sites.

Research

Identify project goals

KEY FINDINGS: I identified key project goals

Define users’ motivations, needs, and frustrations while browsing the website.
Understand what makes a customer’s search to hire a painting company, specifically in the residential market.
Understand the industry standards and what features, services, and offerings give the local painting companies a competitive edge in St. Louis, MO.

A Venn diagram illustrating the alignment of business and user goals, highlighting the intersection for a new website

Analyzing a very crowded market

First I had to discover the strengths and weaknesses in a competitive market. With more than 20 painting companies operating within a 10-mile radius, I have to identify successful strategies and areas for improvement to stand out in this saturated market.

A competitive analysis showcasing the strengths and weaknesses of three of Abshers' closest competitors

KEY FINDINGS: I have identified 3 opportunities to define the UX strategy

The St. Louis market is saturated with commercial, industrial, and residential painters. Abshers Professional Painting will need a responsive website with transparency to create trust via high-quality photos and customer testimonials.
Only about half of the websites offer a portfolio of past projects and before/after work. However, almost all have the usual main pages: Home, About, Contact, and Services.
Several websites look unpolished, industrial, and/or bare bones. Abshers needed a polished and higher-end look to cater to the residential markets.

Who are our users, really?

After collecting preliminary research, I began formulating interview questions to distribute to the St. Louis community. Being an interior designer myself, I knew where to find the ideal users. I called on my fellow design community via Facebook and the local Chamber of Commerce chapters. I also sent out a post-project survey to clients to better understand their motivations, pain points, and opinions during and after the work.

Through User Interviews & Questionnaires

After completing the interviews, I collected the results, I analyzed the responses on sticky notes and began to cluster them into an empathy map below.

Created the empathy map above to gain insight into user perspectives

Clustering interview responses allowed me to discover trends and patterns from which insights could be constructed. Through this process I identified several user needs:

Users need to know that the painting company they hire to deliver high-quality services and clean/professional looking painters.
Due to a lack of time, some users were motivated by convenience over price when hiring a painter.
Trust/reputation, quality-of-work, and price were the key elements in hiring a painting company.
Users relied on referrals and reviews from sources like Angie's List & Houzz to confirm the reputation.

Developing a persona: Meet Mary, the busy working mom

Next, I used all of the data I gathered during the research process to create my persona, Mary. Mary is a working mom with two kids. Her family is currently moving to a new house in a new area. She seeks to find the highest quality and reputable painting company to provide a full list of services: prep, choose colors, and paint her home in time for the move. She simply wants to show up and have everything move-in ready.

I created a user persona card to humanize the problem and enhance understanding

Ideate

Mapping out the work & services

Below is a developed site map showing the list of pages within the website that are accessible to users. The website is meant to be simple and straightforward to provide customers with past work, services, contact information, and customer reviews.

I crafted a site map to ensure that all page requirements were met and the navigation remained simple yet straightforward

Design

Balancing the visual and informational

Below are wireframes of the multiple pages within the website. It is a visual representation in a skeletal framework. Abshers needed a consistent flow between the pages that focus primarily on their scope of work and images.

Mid-fidelity wireframes to visualize the entire site, scope, and imagery

Showing the work: Photographing and editing site images

I traveled to each job site to photograph the work, and then I used Photoshop to edit all images. Since seeing the end results was paramount to the user, I had to capture and display the best work we had in the portfolio.