Website Overhaul
I worked with a general contractor on the UX strategy, branding, and writing for his new website. Here’s the story.
More about Bennington Craftsmen
Owner and Founder Forest Byrd cares deeply about his community and aims to show it through his online presence. His new business is built on trust, transparency, and integrity.
I’ve had the pleasure of translating his personality and loyalty to his clients through design, thoughtful content creation, and a well structured IA. He will soon be able to show everything he offers, including his passion project; Bennington Murals.
Project Overview
My Role: UX/UI Designer (working w/ 1 Dev)
Contributions: UX Research, Competitive Analysis, Content Writing, Information Architecture, Brand Strategy, UX/UI Design
Tools: Figma, Photoshop, Illustrator
Duration: Freelance/Ongoing - MVP in Development
In Progress Prototype
How I Got There
The Problem
Bennington Craftsmen is building a name for themselves ; new clients depend on a flawless reputation. How might we create a trustworthy and friendly web experience to attract clients and create brand awareness?
In addition the contracting the website must properly integrate the owner’s passion project; Bennington Murals LLC.
The Hypothesis
Through user research and a simplified path to contact, design a website that exceeds user’s needs and expectations, and showcases Bennington Craftsmen’s professionalism.
We will know this to be successful when website analytics show more traffic and client inquiries increase.
Research
Learning from 14 users who’ve hired a general contractor
The results came from 14 participants, who have previously hired a general contractor to work on their home. During this exploratory research, I had a few underlying questions to answer, here are the main ones.
How does one identify if a company is trustworthy?
What factors help you choose between contractors?
How do you prefer to contact them?
Insights
Trust is #1
What makes users trust a general contracting site?
“How they explain their approach to the project. How much money they ask for up front. References from people I trust. Monitoring the work as it goes.”
-Anonymous User
#2 We are only human
Users are more likely to choose a contractor who treats them equality and respect. Learning from the data, respect, equality, and professionalism is key!
“Sexism (do they treat my wife with the same respect as me?)...”
“Professionalism of the people who did the estimate, were they on time? Did they wear masks? Were they courteous?”
- Survey Respondents
#3 Filling out a contact form is not preferred
The web developer originally wanted a contact form to follow the user down every page. User data informed our decision to make the phone number visible on every page; user’s preferred method.
Survey results showed that most users prefer calling or email, and are the least likely to fill out a form as a method of contact.
Analysis
Meet our user personas: new home owners (millennials), and long time owners.
UX Strategy
The stakeholder informed me that local general contractors are notorious for not showing up, being late, or rescheduling on short notice.
He couldn’t stress enough how important it was to get the message across that they show up when they say they will, and work hard! That assumption was an accurate trend in my user research.
MVP CONTENT PLAN
The content plan ensured transparency across the team and a clear roadmap.
The plan consisted of 5 core pages: Home, Services, Murals, Our team, and Contact.
Ideation
The first round of sketches focused on showing both general contracting and mural at first glance.
After further review with the Dev and Stakeholder, the choice was made to focus on general contracting with murals being secondary. The stakeholder wanted to introduce his mural projects and expertise in the brand story and link to a more in-depth overview via the top navigation.
Homepage Sketch
Mobile Sketches
Homepage Sketch
Design
I designed wireframes at the same time as mid-fidelity mockups to gauge style direction and speed into branding respecting his limited budget.
Desktop V1
Mobile V1
Mock Choice 1 - The Dev’s favorite
Mock Choice 2 - The stakeholder’s chosen direction
Design
The first project gallery solution focused on categories of work. One issue was that Bennington Craftsmen doesn’t have a full portfolio of projects in every category.
This format was overwhelming to the stakeholder since he did not have all the images to fill every skill they have to offer. I went back to the drawing board to find a solution better suited for a new business.
Desktop Experience V1
USABILITY TESTING
Four users gave impressions of the interface and walked me through finding their desired service and viewing projects.
User insights:
Confusing structure
They clicked on the bottom next buttons expecting to see more images of the project.
Mobile was more intuitive
Mobile Experience V1
Iteration
“Each project is a work of art.” -Stakeholder
Bennington Craftsmen specializes in tailoring the remodeling project to a customer’s SPECIFIC needs, a competitive part of their business. Thinking of each project as a story led me to the next photo gallery version.
With UX writing, I emphasized the uniqueness of each project and showed all their skills in list form.
Taking inspiration from the stakeholder’s “each project is a work of art” I created a gallery that tells a story of each project they have.
Desktop Experience V2
Mobile V2- Hiding and showing details to maximize space and lessen scrolling.
This solution offers perks to both users and stakeholders.
Easy way to show many details and in-process photos without overload.
From initial user research, I found many people want a further description of each project and the GC’s process.
Starting out the projects will look robust even with a few to add at the beginning, putting less stress on the stakeholder for having images.
Visual Design
The design system I created will help to accommodate future goals; including a blog, podcast, and artist partnership page.
Although the website will start out small, the stakeholder has big plans for Bennington Craftsmen.
Defending Choices
For full transparency, I showed the WHY behind each brand decision.
Why this font? Arvo
This slab serif font was chosen to inspire trust, stability, and strength! Serif header fonts are not as widespread, which will help differentiate the brand from similar competitors.
Why this sub-font? Open Sans
Open Sans adds a clean modern sleek compliment. And it has great legibility for body copy!
Why these colors?
During initial mockups, the chosen design included a photo over a blueprint. The blueprint drawing was deemed too distracting but the checker pattern with light blue gives the pages texture and depth. Using the “blueprint” as a base color, I searched for color palette options. A Grayish Navy was chosen for a calm monochromatic effect. Green (or an Orange) were options for pairing, and the stakeholder chose Green.
To choose the right Green I used a WCAG contrast checker, it’s score is AA compliant at a 3.4:1 ratio.
Colors and the Users
Users expressed wanting a caring, transparent, and trustworthy General Contractor. Blue stands for trust, integrity, and confidence!
Interaction Design
The stakeholder added a requirement; customer testimonials will be part of the experience of viewing projects.
Here’s the mobile version where the testimonial is shown upon opening, and can easily be closed and reopened if needed.
Hand-OFF
Collaborating with the developer, I refined the project gallery further.
After I handed off the initial design to the developer, I was asked to wireframe a few more layouts for the desktop project gallery interaction.
I spoke with the stakeholder and here was my direction:
Look at Zillow and Redfin for inspiration.
Can we incorporate customer reviews into the project gallery?
Clearly show the number of images available for each project.
Chosen wire-framed solution
3 Things I learned
Be flexible; designs and and branding will evolve over time and after user and stakeholder feedback.
Make the developer your friend! Working closely with the dev streamlined my process and avoided bottlenecks.
Content design is fun. I enjoyed helping create a digital presence and help start his story which is always evolving.