This project focused on creating a user-friendly website for Hardin Construction, a home improvement business serving homeowners aged 38-90. The goal was to design a clean, accessible digital platform that would help the company connect with clients and make their home improvement dreams come true.
The project:
Solo UX Designer
As the solo UX Designer for this project, my primary goal was to simplify a construction website for older users. To achieve this, I owned the entire UX lifecycle, beginning with moderated and un-moderated usability tests with five participants. The feedback from these sessions directly informed my redesign of the checkout flow, resolving a key pain point and ultimately creating a more intuitive and user-friendly experience.
My role/responsibilities:
March 2025 to May 2025
Project duration:
Challenges:
Competitor construction websites were overly complex and difficult for a target audience, particularly those aged 38-90, to navigate.
The goal:
Create an intuitive and accessible digital presence for Hardin Construction that prioritized a clear visual hierarchy and larger imagery to simplify navigation and improve readability for all users.
I conducted both moderated and unmoderated user studies to gather direct feedback from the target audience. The data was synthesized into empathy maps to better understand user needs and pain points. A key insight from this research was that users found sites with clear, straightforward navigation to be more user-friendly than those with complex or convoluted layouts.
Research Summary
Icon Misinterpretation: The use of standard "home" and hamburger menu icons was not intuitive for the older target audience, leading to confusion and difficulty with primary navigation.
User pain point 1
Lack of Affordance: Interactive elements and call-to-action buttons lacked visual clarity, making them difficult for users to identify and interact with. This resulted in significant confusion and friction in the user flow.
User pain point 2
Background: Johann is a dedicated truck driver who spends most of his time on the road. When he is home, he wishes he had more time and energy for home improvement projects but often feels he can't get to them.
Goal: Johann wants to find and hire a reliable local contractor to build a new sidewalk on the side of his house.
Pain Points:
Time Constraints: His busy schedule as a truck driver leaves him with little free time to dedicate to extensive DIY projects.
Inconvenience: The side of his house becomes a muddy mess when it rains, creating a constant nuisance he wants to solve permanently.
Online Frustration: He struggles to find the right contractor due to the overly complex and confusing websites of competitors, which he finds difficult to navigate.
User persona: Johann, The On-the-Go Homeowner
I created a user journey map of Johann's end-to-end experience to visualize his process from initial need to a potential solution.
This tool was crucial for identifying key moments of friction and uncovering opportunities to streamline his path, ultimately making his journey on the website smoother and more efficient.
User journey map
The sitemap was my solution to the "overly complex" websites of competitors. I established a straightforward information architecture to eliminate user confusion. By grouping services into clear, top-level navigation items like "Carpentry" and "Concrete," I created a user-friendly blueprint for the website that directly informed my design, ensuring the most important information was only a few clicks away.
Sitemap
My process began with paper wireframes to quickly sketch out a clean and straightforward interface. The primary goal was to simplify the user experience, particularly for the target audience. To address the need for clarity, I focused on a minimalist layout with larger imagery, which was featured prominently on a carousel. I also ensured the company logo was consistently placed at the top to provide a constant point of reference and build brand trust.
Paper wireframes
Recognizing that users would access the site from various devices, I designed responsive layouts for key screens. This process ensured the website would not only be functional on all platforms but would also maintain the clear, straightforward interface and large imagery that my research showed was crucial for the target audience.
Paper wireframes screen size variations
Moving from paper to digital, the primary goal for my low-fidelity digital wireframes was to establish a clear visual hierarchy. I ensured the website's main call-to-action—connecting with Hardin Construction—was always prominent and easily accessible, providing users with a constant path toward completing their goal.
Digital wireframes
With the goal of creating an effortless user experience, I developed a low-fidelity prototype. This allowed me to test the user flow and interactions, ensuring that my design provided a smooth, simple journey. The prototype's structure was built with the findings from my research in mind, specifically to avoid the complex navigation that frustrated users on competitor sites.
Low-Fidelity Prototype
Un-moderated usability study
Study type:
Usability study: Parameters
Location:
United States, Remote
Participants:
5 Participants
10-15 Minutes
Length:
Icon Misinterpretation:
During the usability study these was what I uncovered:
Icon Misinterpretation: The use of standard "home" and hamburger menu icons was not intuitive for the older target audience, leading to confusion and difficulty with primary navigation.
Lack of Affordance: Interactive elements and call-to-action buttons lacked visual clarity, making them difficult for users to identify and interact with. This resulted in significant confusion and friction in the user flow.
Lack of Affordance:
For the mobile lo-fi mockups, my priority was to create a streamlined experience for on-the-go users. I designed a simplified, single-column layout that ensures key information and calls-to-action remain prominent.
This mobile-first approach directly addresses usability challenges on smaller screens while maintaining the clean, professional visual structure that builds user trust.
Mockups
The desktop lo-fi mockups were designed with a focus on creating a clean and spacious interface. By leveraging the larger screen size, I established a clear content hierarchy and a predictable navigation structure.
This structured and organized layout was crucial for building visual credibility and ensuring the site felt professional and trustworthy to the user.
Mockups
Mockups: Original screen size
High-Fidelity Prototype
The final stage of the project involved creating the high-fidelity prototype, where the visual design was brought to life. I implemented the company's brand colors and a professional typography set to establish a consistent brand identity. To build credibility, I used a combination of high-quality stock photography from Unsplash to maintain a modern aesthetic, and authentic images of the completed work from the company's Facebook page. This was a deliberate choice to move the visual aesthetic away from a cluttered, unprofessional look toward a clean, minimalist design that builds user trust and professionalism.
Accessibility considerations
As a core principle of my design, I focused on web accessibility to ensure the site was usable for everyone. I established a clear visual hierarchy by using distinct heading sizes to structure the content, improving readability and scannability. To simplify navigation, I used large, high-quality images as visual cues, providing a clear path for users. Finally, a high-contrast color palette—primarily a clean black-on-white scheme—was implemented to ensure optimal readability for users with low vision or color blindness.
Project takeaways:
Next steps:
The final design was successfully validated by the target users. Feedback confirmed that the website was "very easy to navigate," with the larger images and straightforward layout directly contributing to a positive user experience. This feedback proved that a design focused on clarity and accessibility was the most effective solution for the target audience.
Impact:
This project reinforced the power of a user-centered approach. While a clean aesthetic can make a site feel modern, the most valuable lesson was the importance of prioritizing a straightforward, uncluttered user experience above all else. This foundational principle is what truly drives a successful and usable design.
What I learned:
Validation: Conduct a final round of usability testing on the live website to gather data and ensure the implemented changes are effective and the user flow remains straightforward.
Content Expansion: Expand the project gallery with more completed pictures, directly addressing a key user pain point by providing more authentic and trustworthy content from the company.
New Features: Ideate and explore new features, such as a blog or a testimonials section, to further engage users and position the company as a credible authority in the industry.