Optimized website with responsive design to acquire an online estimate.

Redesigned a website guided by heuristic evaluations, user research, user testing and business objectives.

Welcome

The COVID-19 pandemic hit the world in an unprecedented way. The effects of it have yet to be determined. Some of the devastation left in its wake is the affect it had on small businesses. Although the pandemic presented monumental challenges to small businesses it also opened opportunities to embrace the challenge and adapt. Fortunately, I had the privilege to help solve some problems caused by the pandemic that a small business was bravely willing to face.

Prior to the pandemic the owner of a tile installation company had always conducted estimates for projects in person. With the uncertainty of the pandemic, safety precautions were of the utmost importance and would need to be taken into careful consideration. Once his small business was deemed essential, adjustments needed to be made in order to conduct business as safe and as smart as possible.

This led to reconsidering and restructuring how his small business conducted their services, mainly how potential clients would be able to obtain an estimate for a residential or commercial tile project without physical interaction. The process of acquiring an estimate for a potential project needed to be done virtually now. That’s where I come in. I was tasked with devising a way for his business and potential clients to interact virtually in order to obtain a digital estimate.

Mobile Contact page and Project page for The Tile Group website.

Role: UX Researcher/UX Writer/Content Strategist/Photographer/Responsive Web Designer

Sector: Construction, Trade Industry

Client: The Tile Group

Project Title: Website Redesign/Online Estimate Acquisition

Project Duration: 2 Months

Tools: Adobe Suite, Google Surveys, WAVE, Wordpress, Zoom

Audience: Home Renovators, Contractors

Constraints: Budget, Time, COVID-19

Goal: Develop an online estimate with a virtual assessment accessible across multiple devices with transparency regarding project details, risks involved and potential unforeseen costs.

Mobile Contact page and Project page for The Tile Group website.
RESEARCH

Heuristic Evaluations

I first examined the existing website to have a general understanding in how it was performing and functioning for users. To do this I audited the site. The framework for the review was based on the Heuristics established by Jakob Nielsen, coupled with eight new standards outlined in the 21st Century IDEA Act. The goal of this evaluation was to provide guidance and actionable recommendations for the development of the new site.
 
Due to resources being limited I analyzed and tested the website by walking in the shoes of an everyday user. If more resources were available I would have utilized expert reviewers to work along side of to conduct a thorough evaluation in order to discover more perspectives other than my own. I explored the design, layout, functionality, navigation, content and any supporting documentation. The Heuristics used to conduct the evaluation are Jakob Nielsen’s 10 Usability Heuristics of User Interface Design.

View Homepage Audit

The Tile Group Homepage Audit

Market & User Research

Since my focus was on how users could acquire a digital estimate I directed my research toward competitors within the market who were already deploying such methods.

Competitive Analysis

Not one competitor was discovered within a 50 mile radius offering a process to receive online estimates. Competitors would require a form to be filled out with contact and some project information. A representative from that company would then reach out to the person inquiring about an estimate or the person would need to call. There were websites dedicated to matching a customer with a tile installer according to the scope of the project, but none offering an online estimate.

View Competitive Analysis

Market Research- Competitive Analysis

Online Estimates vs. Instant Online Estimates

Upon analyzing the research I quickly realized I had uncovered a niche. I share this information with the stakeholders. They found the possibility of an instant online estimate intriguing. Unfortunately, time and resources didn’t permit further exploration. Due to these restrictions I continued with the original objective in mind:

Work with people who are or have been in the market to hire a tile contractor along with stakeholders to develop a digital form for an online estimate.

Possible Opportunities for an Online Estimate

Opportunity #1

Transparency

Including all of the project details in an online estimate would create transparency with the potential client.

Opportunity #2

Anticipate Needs & Goals

An online estimate would help field potential questions and meet goals people inquiring about an estimate might have.

Opportunity #3

Eliminate Frustrations

An online estimate would eliminate frustrations people might have had in the past when trying to acquire an estimate.

Opportunity #4

Save Time

An online estimate would speed up the process and cut the response times.

Opportunity #5

Save Money

An online estimate would save a company money from paying an employee to take an estimate.

Opportunity #6

Lead Generation

Research showed people preferred filling out a form online instead of speaking to someone on the phone or filling out a form to be contacted.

Opportunity #7

Project Details

An estimate form would inform details about a project they may otherwise not have known and eliminate "hidden costs."

Opportunity #8

Productivity

An online estimate would allow employees to focus on client's projects and increase productivity.

Potential Obstacles with an Online Estimate

Obstacle #1

accessibility

Potential accessibility issues could limit some people from acquiring an online estimate.

Obstacle #2

Missing Details

An online estimate could be missing details people want to have answered.

Obstacle #3

Connectivity Issues

An online estimate could be lost due to a bad connection causing frustration for the potential client.

Obstacle #4

Unanswered Questions

An online estimate might not answer all of the questions for a potential client.

Obstacle #5

Missing Estimates

An online estimate could be missed by the company causing frustration for the potential client.

User Interviews & Surveys

The research transitioned from competitors to users. Due to the pandemic I conducted interviews remotely using Zoom with two different categories of people. I was able to find participants for the interviews by reaching out to people who have inquired with The Tile Group about an estimate along with my own network via social media, family and friends. 

A simple questionnaire was sent out as a Google Survey to discover what people prioritized when searching for a contractor.

Interview Objectives

There was a group of eight participants interviewed. The group was divided into two categories with four participants each. Within each categorical group I included two men and two women. The reasoning behind this decision is that households are usually comprised of two partners living together. To reinforce this reasoning, decisions are not typically made unilaterally, but collectively. This would be reflected in the user personas later.

The first group was placed in the "On the Hunt" category and included those in the market to have tile installed or a bathroom remodeled. The second group was placed in the "Experienced Hunters" category which included those who had tile installed or a bathroom remodeled within the last six months. With each group I asked each participant fifteen questions and the interview lasted approximately forty-five minutes.

Interview Insights

Insight #1

Insufficient Information

Lack of information presented on websites. Especially concerning a company's process.

Insight #2

Referrals are king

People trusted family, friends and neighbors the most when choosing a contractor.

Insight #3

Proof of work

People want to see the finished project when considering a contractor.

Insight #4

Contact Blues

People loathed contacting contractors for estimates.

Insight #5

"Ugly" Websites

People found most contractor's websites to be visually unpleasant. One referred to them as "ugly."

Insight #6

ballpark quotes

Everyone would rather provide details for a project through an online estimate and hear back with a ball park quote.

Survey Objectives

Two separate surveys were developed using Google Surveys to gather information. One survey was sent to the eight interview participants. It included an example form for an online estimate. Information to include in the estimate form was collected from the stakeholders. The goal was to identify missing information people expected to find when completing the form for an estimate.

The second survey was sent out with three questions to twelve individuals whom did not participate in the interviews, but are looking for a contractor or have used one in the past. Survey participants were asked to identify certain aspects important to their search for a contractor and indicate the level of importance with a numerical value. Out of the twelve surveys sent, there were nine responses. The goal was to discover what information people prioritized when searching for a contractor as well as the information they expected to find when viewing a contractor's website.

Survey Insights

The surveys provided valuable insight into the desires, frustrations and goals of people shopping for an estimate along with researching and selecting a contractor for a home renovation.

Survey One Results

The questions from survey one targeted information people were willing to give as well as needed and the results from the survey confirmed assumptions made developing the assessment.

Survey Two Results

The data from survey two would greatly contribute later in the design process when designating design decisions as well as inform marketing decisions for the stakeholders and business.

Research Findings

People want an easy, yet trustworthy method to obtain an estimate for a home renovation project. They didn't want to schedule multiple appointments to have contractors physically come into their home especially during a pandemic. And they didn't want the hassle of communicating back and forth with a contractor about an estimate only to not choose them in the end resulting in wasted time and energy.

The Problem

There is a general stigma with most people that there is a lack of transparency when receiving an estimate from contractors.

The Goal

Develop an online estimate with a virtual assessment accessible across multiple devices with transparency regarding project details, risks involved and potential unforeseen costs.

EMPATHIZE

Building an Empathy Profile

Using the qualitative and quantitative data I developed and defined empathy profiles to empathize with. These profiles would represent the user and focus on their motivations, frustrations and expectations. User Stories, User Personas and Journey Maps were utilized to accomplish this.

User Stories

User Stories were written to communicate the collective voice of the user who would be using the website to acquire an online estimate along with connecting business objectives held by stakeholders. The statement below would guide design decisions throughout the iteration process toward the needs and goals of the users.

"As a recent homebuyer who wants to make some renovations I need an easy way to obtain an online estimate from an experienced contractor who takes into consideration all the possible risks during a remodeling project so that I can have peace of mind knowing there are no hidden costs after I've signed the contract to start the project."

User Personas

To better understand the people using the website to acquire an online estimate user personas were created to better visualize, empathize and prioritize their motivations, expectations and frustrations when designating design decisions.

For this project I developed a single persona of a married couple as they were making the decisions together with differing desires and goals, but a unified outcome.

Married Couple Persona Picture

"Remote Roberts"

The Roberts are newlyweds living in Milwaukee, Wisconsin and are looking to make some bathroom renovations to their new home mainly because they both are transitioning to work from home.

Liam, 33, Product Manager

“There’s too much back and forth with contractors just to get an estimate you might not even use.”

Sherri, 31, Salon Owner

“When there is unaccounted costs after the agreement you would think a professional would put a margin in place to account for that risk.”

Journey Maps

I developed a journey map to highlight different phases the Roberts would venture through. From defining their needs and goals, the process of researching and comparing contractors, the frustration of negotiating timelines and estimates, to making their final decision in selecting a contractor.

ITERATE

Information Architecture

The research, problems discovered, goal and empathy profiles were systematically arranged to inform, iterate and designate design solutions as well as to initiate the structure and flow of the sitemap for the website.

Lo-Fidelity Wireframes

I put together some quick wireframes with placeholders to help the stakeholders conceptualize and visualize the layout. Then I carefully crafted all of the copy to eliminate industry jargon and close the language barrier between users visiting the website and the services provided by the business.

Spontaneous Concepts

Although the world was in the midst of a global pandemic the business was deemed essential so that it may remain open as mentioned earlier. They had an office where I was able to conduct a lot of my work. Every now and then a person would walk in looking for more information or to make a payment. However, there were a few occasions when someone would walk in and it was obvious they were expecting a to find a showroom with tile instead of an office space. After the second person walked in and immediately walked out I was curious to know if the business was misrepresented online. So I quickly followed after her to see if I could help her with whatever she might be looking for. She quickly informed me and I quote:

“From the website it looked like you had a showroom at your location. It’d be nice if the website made it clear that you don’t.”

My assumption was confirmed that what was represented online did not match expectations in reality. I immediately implemented her suggestion into the design on the homepage of the website.

Photo of implemented suggestion for website

Hi-Fidelity Wireframes

Upon hearing feedback from the stakeholders I made adjustments to the layout and produced Hi-Fidelity wireframes to depict a final product for user testing.

Sitemap

Data was embedded in the survey, "Choosing a Contractor", for the sitemap. Participants defined expectations of what they anticipated to see on a contractor's website by numerically ranking the level of importance. This information allowed me to evaluate and generate ideas for the information architecture of the design to define the sitemap. Each page of the website was carefully crafted to help navigate visitors on their journey to obtain a "Free Estimate" by completing the estimate form.

Website Sitemap

Responsive Web Design

The site is fully responsive, live, functional and may be accessed from multiple devices. One caveat to take note of is the company has taken responsibility for the maintenance of the site and may have made changes that might not reflect certain aspects of this case study.

Responsive Web Design Devices
UI

Visual Design

The visual design was atheistically improved upon which also enhanced and reinforced the usability of the website for visitors.

Old Homepage
New Homepage

Design Documentation

To keep the branding and communication consistent I created a style guide to define the look, feel and tone of the content. Since this project consisted of a redesign for the entire website and it would be passed off to the company for routine maintenance and updates it was necessary to develop design documentation to pass along.

Photography & Easter Eggs

The company needed updated profile and team pictures for the website. I organized, coordinated and photographed the photo shoot with the permission of the business owners. I edited the pictures and inserted them into the layout of the website.

Easter Egg

During the photo shoot one of the employees broke out his skateboard and started doing some tricks. I captured some great shots of him with a Canon 60D DSLR camera. I thought it would be fun to add an easter egg to the website. I wanted this particular employee's profile picture to flip and the image change to his kick flip trick on the skateboard. So I pitched the idea to the owners and they loved it.

TEST

Usability Testing

Desktop, tablet and mobile devices were used to evaluate the usability, functionality and responsiveness of the website and estimate form. The usability testing, both moderated and unmoderated, was conducted remotely using Skype. Jakob Nielsen’s error severity rating scale was used to evaluate the design to either validate or eliminate usability issues. Several adjustments were made to the design following the testing.

User Testing Script, Questions & Results

I wrote a series of scenarios and direct tasks to guide the test and generate feedback. Five people were recruited from The Tile Group's own network who were either looking for a tile contractor or who had used The Tile Group as their contractor in the last six months to participate in the usability testing.

Moderated & Unmoderated Remote Testing

Two of the five tests were moderated via screen sharing on Skype. The other three tests were unmoderated due to scheduling conflicts. Overall the feedback generated from each test provided useful information.

Accessibility Testing

WAVE, Web Accessibility Evaluation Tool, was used to conduct the accessibility testing for the website. Several errors were identified and in need of correction. The corrections were implemented in the revision for the site.

WAVE Accessibility Testing Image

Analysis & Adjustments

Using the results gathered from the usability and accessibility tests, necessary adjustments were applied to the design before launching the redesigned website live.

New Revision of Website
Analysis of Revised Website image 1 of 2
Old Revision of Website
Old version of website for comparison image 1 of 2
Analysis of Revised Website image 2 of 2
Old version of website for comparison image 1 of 2
REVIEW

Conclusion

I signed on for a two month contract with The Tile Group to fulfill my responsibilities. I finished the project in six weeks. I took a week to check my work, comb through details, set up search engine optimization and transfer the newly redesigned website to the original domain. At the end of the week I walked the stakeholders through a presentation of the newly redesigned website and estimate form. We launched the site a week early which brought the stakeholders a great deal of satisfaction.

Learnings & Future Considerations

In the end the stakeholders decided against the estimate form for their own reasons. I was not given a full explanation as to why. This was hard for me to understand in the moment, but taught me a valuable lesson. The lesson was this:

Sometimes the work I do will not always be used, seen or even appreciated.

Although I worked hard to provide a unique feature within the design of the website which I believed, and still do, would have set the company apart from their competitors. I took pride in fulfilling the responsibilities I was hired on for and delivering a professional product in a professional manner.

Navigating Communication

Navigating communication in the midst of a pandemic took a lot of planning. Sometimes the plan didn't go according to schedule. The ability to be flexible and make adjustments in a moments notice was crucial.

Essential Research

This project taught me how to use essential research and quickly discard what is not. Time was of the essence and my ability to quickly process what was useful information helped keep me ahead of schedule and finish the project early.

View More Work

Targeted game incentives for a mobile application.

Aiming to increase frequency of gameplay through a customized experience.

view Case Study
RESEARCH/CONTENT STRATEGY/PRODUCT DESIGN

Founded a new non-profit and developed the Brand and CX strategy.

Attempting to establish an identity for a new non-profit.

coming soon
FACILITATION/RESEARCH/BRAND STRATEGY
WelcomeResearchEmpathizeIterateUITestreview