WEB DESIGN
SH Built
UX Design for a luxury custom home builder with a focus on customer acquisition and brand awareness.
ROLE
UX Researcher
UX/UI Designer
Copywriter
TOOLS
Figma
Miro
MilaNote
DURATION
8 weeks
TLDR
THE NITTY GRITTY
Background
SH Built has been building luxury custom homes in Aspen, CO for over 15 years. The company is focused on transparency, communication, and accountability.
Their site hadn’t been updated in five years, making it look outdated. They hired me to build a new site that felt more modern while keeping it classy and clean.
Problem
While SH Built is an expert in custom home building, their site is outdated, leaving customers to believe their builds will be as well. The site lacks intuitive information architecture and luxury branding.
Furthermore, users are experiencing difficulty in locating the information they need about the company due to the unclear navigation options.
Solutions
EMPHASIZE SERVICES OFFERED & COMPANY’S TRANSPARENCY
We wanted to increase the visibility of the three types of services SH Built offers and highlight that they use a third-party construction management app that speaks to the company’s transparency with clients. Information about these is now prominent on the landing page.
REIMAGINE INFORMATION ARCHITECTURE
By expanding the level one navigation options and simplifying the information architecture, users will be able to access the information they’re looking for more quickly.
OLD NAV
NEW NAV
The site was text-heavy and users said they weren’t likely to read most of the copy on each page. By reorganizing the information on the site, trimming down the copy, and presenting it in more interesting ways, we are able to engage users and convey the information we need to.
TRIM THE COPY
THE PROCESS PT. 1
Research
The project started with research to better understand what clients prioritize on a contractor’s website, the goals of the stakeholders, and what their main competitors are doing on their sites.
Stakeholder Interviews
Several interviews were conducted between myself and the two primary stakeholders to understand their business, challenges with their online presence, and goals with their website.
Most business is from word of mouth. The site's purpose is to show the company's legitimacy and emphasize the benefits of hiring them.
MAIN CHALLENGES
1
Outdated Site
The site looks outdated and does not lend to the legitimacy of the company.
2
Low Conversion Rate
The conversion rate is low. Leaving them to only depend upon word of mouth for new customers.
MAIN GOALS
Customer Acquisition
SH Built would like to expand its customer base and gain new clients through its online presence.
Brand Awareness
SH Built would like to increase brand awareness and have its site branding better suited for the luxury home market.
User Interviews
I interviewed 3 potential customers to better understand why and how they explore custom home builder’s websites. Unfortunately, I didn’t have access to any SH Built clients. However, I was able to interview people who are familiar with the Aspen market and have used home builders before. I asked participants to screen share with me, visit the SH Built site, and complete a number of tasks.
About the participants:
3 users, between 30-65 years old
Familiar with Aspen home-owning market and have hired general contractors in the area before
MAJORITY OF PARTICIPANTS
Were confused about navigation options and didn’t know what to expect on a majority of the tabs.
Said they didn’t know exactly what the company does from the information on the home page.
Emphasized the importance of reviews and word of mouth when it comes to home builders.
Secondary Research
After conducting a site audit of shbuilt.com, I reviewed other homebuilder sites that the stakeholders identified as competitors. This was done in order to determine what trends are popular amongst their main competitors.
Here is where you can see the MilaNote file.
Discoveries based on this research:
Most competitors prioritize photos of the home’s exterior
Most have a navigation tab dedicated to their Team
THE PROCESS PT. 2
Ideation
After completing the research phase, I moved on to ideating solutions to the problems presented. This involved creating sitemaps. These provided clarity on what to focus on before starting to design.
Sitemaps
A barebones sitemap of the current SH Built site helped to visualize what the information architecture looks like as is.
From there, a sitemap was created for how I’d like to reorganize the SH Built site.
THE PROCESS PT. 3
Design
Designing was a couple of phases on its own. I first did sketches to get all the ideas on paper before starting to do lo-fi wireframes on Figma. After getting client feedback, I was able to create hi-fi wireframes.
Lo-Fi Wireframes
When designing the lo-fi wireframes, I wanted to highlight customer reviews, the services SH Built offers, and the key business value of transparency. This was determined by information gathered from the research phase of the design process.
Below are the key screens.
Landing Page
Our Story Page
Individual Project Page
Testing and Iterating
THE PROCESS PT. 4
After gathering feedback from the key stakeholders on the lo-fi wireframes, I implemented UI elements and created a working hi-fi prototype. Usability tests were done at this stage. This provided important insights on what revisions needed to be made. Below are a few of the significant changes that were made.
Text Heavy Story
Users were skipping over this information that the client wanted to share
The information wasn’t presented in a way that made users want to engage
FINDINGS
Made hierarchy more clear with a bold heading
Made information more digestible with a two-column layout
Broke up information with a large image
REVISIONS
Unclear Company Message
Users were unclear on what the company did, based on the homepage without scrolling
Users prefer to be told a short blurb about the company before jumping into the services offered
FINDINGS
Added a section before the services about the company
Wrote clear heading about what the company does
Used the opportunity to add another feature photo
REVISIONS
THE PROCESS PT. 5
Final Designs
YOU MADE IT THIS FAR!
Conclusion
After making many iterations on the final designs, I implemented the designs utilizing Squarespace. The client was very pleased with my design choices, thinks the new website conveys their luxury brand well, and we are expecting the new responsive website to bring in new client traffic.
Key Takeaways
I practiced balancing the needs of multiple stakeholders with the needs of the users. It was a fun challenge to puzzle through, providing restraints that proved to push me more creatively than if I had full autonomy during the design process.
Additionally, I worked on knowing when to pause in the design process while waiting for important feedback from stakeholders vs when it’s okay to be confident in my research-backed design choices and move on.
Next Steps
We had to launch the site before getting testimonials from their clients and partners. Based on my research, users value quotes from past clients and I believe these are important to include on the landing page. Thus, SH Built is currently working on gathering testimonials for me to include on their website, at which point I will implement them!