Kris Tile Service Site Redesign
Project type: Responsive web, UX/UI Design
Timeline: 4 weeks (80 hours)
Scope: Research, interaction design, prototyping, testing, interface design
The home renovation sector is pretty familiar to me; about 80% of the men in my family work as contractors. Over the years, I’ve observed a disparity between these hard-working business owners’ online efforts and their increasingly tech-savvy customer base.
In order to investigate this problem space, I decided to work with Kris Tile Service to explore the ways in which contractors could better their customers’ experience by improving their online presence.
Currently, the KTS website is a disorganized and minimally functional brochure-style page. The business owner wants to invest in a website that will better represent the brand, increase conversion rates, and automate some of the communication with leads.
High-level design goals:
Design a responsive website that allows customers to receive an online estimate
Update KTS branding to look more modern and professional while keeping family-owned feel
These changes could facilitate the complex home renovation process for customers, better demonstrate the company’s value proposition, as well as lighten the workload for the company.
Research & Discovery
To kick off my research, I conducted an interview with Kris - the owner of KTS, to get a better understanding of the company and his vision for its future.
Kris explained that a key moment to converting a lead is the estimate; customers have the option to text, email or call about a project quote. He says responding even a couple hours later after the request is received seriously lowers the value of the lead, as people are very impatient.
This conversation illuminated a few things: communication with clients is disjointed and there is no standardized estimate process. In addition, the company is established, but their online presence doesn’t represent that worth - something Kris wants to change.
Getting to Know the Users
I wanted to speak to people as close to the KTS demographic as possible so I recruited five participants from Reddit’s Homeowners forum. I interviewed about their most recent experience hiring a contractor.
The interviews were far more emotional than I had anticipated; 4/5 participants recalled a bad experience with a contractor, and it was clear they approached the topic with apprehension.
Homeowners visit contractor websites to review their credibility: eg. photos of past projects and license proof.
Homeowners feel that the process of searching for and hiring a contractor is stressful and perplexing; they are unsure of what to look for.
Participants state that they would like to see more standardization around what information is available about contractors online.
After observing typical user needs and pain pints in the interviews, I created Shelby to help emphasize these insights in the design strategy moving forward.
Shelby is based largely on two interviewees, who fit the profile of a typical KTS customer, as described by the stakeholder and observed in site analytics.
With research findings in mind, I created several How-Might-We (HMW) questions to transform Shelby’s pain points and goals into actionable solutions.
How might we help Shelby feel informed throughout her home renovation project?
How might we help Shelby gain trust for the company?
How might we improve communication between Shelby and the contractor?
These questions helped me create a product roadmap, in which I prioritized features and developed a content strategy that would solve the users’ problems while accomplishing the business’ goals - with metrics to track the progress.
To create the structure of content, I mapped out the site and organized services into two categories: installations and cleaning/maintenance.
With an analysis of over 200 company emails, I was able to see that customers usually refer to their installation requests by the room that they will be in, so I decided that type of categorization would make the most sense.
The Estimate Flow
Following the structure of the site map, I created a user flow of the main initial task customers seek to complete: requesting an estimate.
I included a few estimate types to account for the various levels of complexity projects including:
For complex projects, an individual can request an in-person estimate, whereas for simple installations, they can use the digital estimate tool.
To serve customers at different stages of their home projects. From research, I found that some people start browsing to gather insight, while others are trying to collect concrete estimates. So I included the option for the user to send an estimate just to their own email, or straight to the contractor.
These various types of estimate CTAs can hopefully account for all types of user inquiries.
After some pen-and-paper sketch iteration, I created mid-fidelity wireframes in Sketch to plan for the hierarchy, layout, and flow of the new Kris Tile Service website.
The wireframes focus on effectively displaying the services offered and offering a simple estimate request process.
User interviews revealed that potential leads look to contractor’s websites to review their credibility. These wireframes answer that by increasing visibility of the company’s credentials through:
content about the company’s experience level and practices
reviews & links to review sites
CTA to request licensing proof
BBB & HomeAdvisor certification badges
accessible photos of past projects
A few iterations on my own later, I decided to put the site to test. Four moderated in-person usability tests were conducted, screening for individuals who had hired someone for a home service in the past two years. (I had to expand my participant pool due to time constraints.)
I tested for the tasks my research interviewees mentioned: requesting a license, viewing project photos, and requesting an estimate.
As demonstrated in this portion of the usability test affinity map, the majority of problems were found throughout the estimate process; namely, users were confused by some of the questions. Better annotations and exemplary visuals would help with clarification, which meant it was time to move onto visual design.
Branding & Visual Design
Priority revisions were made to the mid-fi wireframes, so the next step was to liven up the brand with styling. Since branding is such a subjective aspect, I made sure to include Kris (the business owner) throughout these decisions.
Our discussions revealed that he felt attached to the present logo, but was open to updates. I made several modernized iterations of the existing logo, of which he selected:
Next, I created three style tiles with varying color schemes and typography. After some deliberation, Kris and I agreed on the style tile that led to this UI kit:
Some brand adjectives we hoped to achieve with this look are: trustworthy, modern, and professional.
I used the UI Kit to put together the finished designs. Site analytics showed that about 40% of users access the website from their cell phones, so it was important to create a responsive layout.
The Estimate Tool
View full high fidelity prototype here
The estimate tool only requires 10-15 simple questions answered to calculate a quote range. Questions are presented one at a time to reduce cognitive overload, and annotated with pictures and explanations to minimize confusion.
In the final screen, the user can choose whether to submit their estimate to the contractor to move the project forward, or to send it to themselves if they are feeling non-commital.
The users receive an itemized breakdown of the estimate, allowing them to see how their approximate quote range was derived.
The ability to edit the estimate empowers the users to make changes if they have any budget issues.
Given more time, I would have liked to test the designs once more with users closer to the demographics of Kris Tile Service clientele. In addition, it would be interesting to explore what the estimate tool would handle multiple projects (like a kitchen and bathroom renovation) - something I didn’t explore in this MVP design.
Currently, I’m working with a developer to bring this site to life; we plan to launch the first version of it (sans estimate tool) around early April. Stay tuned!