Solid Construction, LLC

Re-design of the website for a construction company located in Rehoboth Beach, DE.

Year

2022

Duration

4 Weeks

Project Type

UX Audit, UX & UI Design

Role

UX/UI Designer

View Prototype

Final Product

Design by Natalie

Overview

Solid Construction

Solid Construction LLC is a family business, which has started as a handyman service company back in 2017. Since that time, they grew into a wide-range construction firm that offers various services and works with a team of contractors. Back in the day, the owner of the business created a website on the Squarespace platform and hasn’t updated it ever since. All these years the company received new clients mostly by word of mouth and through Facebook advertisements.

But they have recently realized that the website could also play a bigger role since they have about 1,000 visitors monthly. The owner thinks that the website needs a facelift to get a more modern look. But after a brief evaluation of the website, I realized that the IA and UX Writing could also be improved.

Problem

The owner of the company would like to update the design of the website to a more modern version. He wants to keep most of the information. After evaluating the website, I found out that the Information Architecture and UX Writing could also be improved for better usability.

1. Pictures on the homepage are disorganized, which makes it difficult to understand what kind of work they represent.

2. Disorganized pictures that illustrate various stages of the working process clutter the space with its impressive amount, which seems overwhelming.

3. The majority of pictures in the gallery section appear very small, which makes it difficult for a user to find the picture they need.

4. Names of some categories are inconsistent throughout the website. The descriptions of the services as well as the About Us section needs some updating to better convey the message.

Process
Solution

The updated version of the website with improved Visual design, IA, and UX writing.

Discover

Is re-design necessary?

The first stage of the process was conducting an interview with the business owner to learn his reasons for the website redesign. I dug deeper into the business goals, and the role, that the website plays in the company's life. We also discussed in detail what parts of the website the owner wants to keep and which sections or elements he is ready to get rid of.

Analyzing Key Metrics

Evaluating the key metrics in the analytics section of Squarespace gave an insight into the website's performance. After analyzing the statistics for the past 6 months, I discovered that the majority of traffic visits are direct and the most popular keyword is the name of the company - solid construction. The most visited page is Home followed by "Contact Us" and "What We Do".

SEO Audit

Another step was to run an SEO audit on Semrush. The statistics for the past 2 years indicated that the most searchable keyword is the name of the company - Solid Construction followed by "Solid LLC" and "Word of mouth remodeling" consequently.

Competitive Analysis

The next stage of the UX Audit was to evaluate competitors to learn their strengths and weaknesses as well as to understand the place of Solid Construction on the market and what areas can be improved. I reached out to the owner of the company to get the list of his direct competitors. I also conducted my own research to discover indirect competitors.

Strengths

  • A leading home builder in Delaware, with over 200 employees
  • Has an online design studio
  • Created a Heartbeat platform that allows customers to connect with all staff; to get the design inspiration, track their build, view all their documents, and manage warranty items post-build
  • Features some of their clients’ testimonials in a video format
  • Provides 3D virtual tours
  • Builds energy-efficient homes

Weaknesses

  • The homepage seems a bit cluttered with excessive text
  • The design isn’t very consistent throughout the different sections
  • The UI looks a bit outdated

Strengths

  • All services with pictures are conveniently presented on the homepage
  • Testimonials are easily accessible at the bottom of the homepage
  • Has a blog that features necesary info

Weaknesses

  • The UI looks outdated
  • The pop-up from the right with featured services is confusing - it’s hard to tell what its purpose
  • The Hero Image at the top has “About Us” CTA, which doesn’t look like the most important action
  • “Request an Estimate” is not prominent enough
  • The last post in a blog was in 2018

Strengths

  • Minimal and clean UI with a lot of white space
  • "Our Work" section is well-organized by dividing all projects into various categories
  • Features the company’s team with their pictures and job descriptions
  • Has a blog that shares the news about the company and other important info

Weaknesses

  • The fonts are small throughout the whole website, which makes it difficult to read
  • “Learn More” CTAs on two main sections on the home page don’t work

Strengths

  • Very prominent section with “Get Free Estimate”
  • All services with pictures are conveniently presented on the homepage
  • Testimonials are at the bottom of the homepage
  • Completed works are divided into categories in the Gallery section

Weaknesses

  • The UI looks outdated
  • The pictures in each category of the Gallery are not organized well, which makes it confusing to understand the stage of the process
User Interviews

Having the business owners' perspective, the website's performance statistics, as well as my independent research results on hand, I knew that I was still missing the most important aspect. The users' point of view.

The owner stated that the majority of his website visitors are new, therefore they won't suffer from the dramatic overhaul of the platform. However, it was important to ensure that I get a green light on changing the overall look and feel of the website from both sides.

I conducted interviews with 4 company's clients to learn what role the website plays in hiring a construction contractor and what areas they pay attention to the most. I also ran a usability test of the existing platform to learn what is better to keep and what to get rid of for good.

Key Takeaways
01

100% of participants state that the website is very important for them in hiring the contractor

02

100% of participants state that they check the pictures on the website, which is an essential step in making a decision

03

100% of participants ask their friends or family for referrals when looking for a construction company

04

Reviews, especially negative, are a driving factor for 50% of participants

05

75% of responders would like more structure in the gallery section of the Solid Construction website

06

A detailed description of services is a must for 75% of participants

Define

Deciphering insights

With all the pieces of information that I gathered from the research, I started interpreting the results to formulate a solution to the detected pain points and wants/needs.

Affinity Map

I divided the results into the following categories: Suggestions General and Related to the website, Important, and Frustrations. Separately, I made two columns to divide what users like and what they dislike about the current website.

Persona

After assembling all common themes into one persona, I was able to establish a better connection with the user and explore deeper his point of view on the website, which gave me more insights on the direction to take in the redesign process.

Ideate

Building a Better Experience

The research helped me to fully formulate the problem to tackle: to improve the website's usability by adding a modern look and reorganizing the IA to make it easier for users to find and perceive information to make informed decisions.

Site Map

I created the Site Map of the current website and analyzed the areas that could be optimized based on my research. As a result, I added more information to the homepage:

1. The most popular services
2. Testimonials
3. Get a Free Estimate portion.

I also removed the Testimonials section from the Nav Bar and added it to the About Us section.

Old Sitemap

New Sitemap

Mid-Fidelity Wireframes

The owner has recently updated the logo, which was an additional variable in the equation of crafting the new design.

To solve the defined problem, I added services to the homepage so users can instantly get an idea of what the company offers.

I have also added the "Get Free Estimate" and Testimonials portions at the bottom.

To add more order to the IA of the Gallery, I split the pictures into categories, which the user can choose in the "Type of the Project" Dropdown.

View Wireframes
Style Tile

To achieve the modern feel and look I chose the San Serif font Avenir. Colors are more subtle in contrast with the excessive saturation of the previous version that some users found "too much".

Solution

Let's Open "the Oven"

The new version of the website offers an updated items organization in the gallery section as well as on the homepage. It includes the services that the company offers on the homepage for easier search, has more prominent "Contact Us" and "Get a Free Estimate" buttons on the homepage, and updated descriptions in various sections.

Homepage

The updated homepage includes a catchy slogan, updated names of the sections, and a CTA.

Old Version

Updated Version

About Us

Updated text in the About Us section conveys the company's vision.

Old Version

Updated Version

Homepage: New Additions

Additional information on the homepage: the list of services that the company offers for a faster and easier search and the company's strengths.

Homepage: CTAs

The previous version didn't include any CTAs on the homepage. After discussing the most desired action from the user with the business owner, I have added the following CTAs at the bottom of the page. I have also added testimonials at the bottom of the homepage based on the research.

The Gallery Section

Pictures in the updated Gallery Section are organized by the type of the project.

Old Version

Updated Version

The Updated Services Section

Old Version

Updated Version

Test

Usability Testing

I tested the website's usability with 7 participants via Maze to evaluate the design flow and information architecture. 100% of testers successfully completed all the missions. The participants noted the overall modern and clean design, and easiness to use.

The only trend that has been persistent throughout suggestions, was showing more services that the company does on the homepage. 40% of testers expressed this opinion.

Quotes
01

"The company looks modern, skilled, and organized! The styling is very contemporary, everything is laid out well and is easy to understand."

02

"1. GORGEOUS 2. It definitely looks more modern/luxe than I would expect of a construction company - it seems to not be assuming that it's always going to be an older straight man making these purchasing decisions 2. The layout is interesting without being confusing 3. each section is clearly demarcated

03

"Looks great! I love the little design details - overall feels very visually cohesive!"

Iterate

Updating the Homepage

I removed the descriptions of services, which allowed me to fit more service types on the page to address users' needs. Additionally, this maneuver added more white space to the page making information easier to digest.

Old Version

Updated Version

Next Steps

Lessons Learned

Working with a real company was an excellent opportunity to get hands-on UX/UI experience. Communicating with the business owner and learning about the company, its competitors, and business goals, and translating insights into design was a challenging but rewarding journey. Reorganizing existing Information Architecture was new for me.

While working on this part, I was guided by my research, and information from the stakeholder, along with recently gained knowledge about the best practices in the industry. Another new challenge for me was to create a design with the existing logo and bridge the gap between images with real projects that the company completed and stock images to create one harmonious design story. The one that could really happen with this particular company.

More Case Studies