Henderson's Home Repairs & Remodeling

CLIENT PROJECT

Product

Responsive website

Industry

Home services

My Role

UX/UI designer, user researcher, brand designer, UX writer

Length

80 hours

Tools

Figma, FigJam, Google Suite, Notion, Maze, ChatGPT

Situated in the bustling heart of Waco, Texas, Henderson’s Home Repairs & Remodeling has garnered a commendable reputation through word-of-mouth endorsements. However, in today's digital era, where an online presence often serves as the gateway to prosperity, Henderson's faces a pivotal moment with a complete absence on the web

Problem

Solution

Design Process

1. Discover

2. Define

3. Develop

4. Deliver

1. Discover

User Research: Unveiling User Expectations

After an insightful conversation with my client, it was time to gain insights into the needs and preferences of potential customers. The objective? To uncover the fundamental elements that users genuinely desire in a website for home repair services.

Research Goal

Key Research Questions

A short screener survey paved the way for targeted interviews. The criteria were simple:

The Talk: Conversations That Matter

Eight participants, one-on-one interviews—this was where the real stories emerged. The insights flowed, giving life to needs, pain points, and challenges faced by service seekers.

Mapping the Journey: Affinity Magic

To make sense of the mosaic of insights, I crafted an affinity map in FigJam. It wasn't just about data; it was about spotting patterns, uncovering truths.

Themes That Echoed Loud and Clear

Armed with these revelations, the next phase was more than a step forward; it was a leap. I had not just heard but seen the user's script, laying the foundation for a digital experience that resonates with desires—both expected and pleasantly unexpected.

2. Define

In this crucial phase, my mission was clear: transform challenges into opportunities that resonate with users seeking home service providers.

Point-of View Statement

I want to explore ways to help home service provider seekers have a seamless experience using Henderson’s website, because current service provider websites often lack the necessary information and features users need, leaving them uncertain about the quality of services.

How might we . . .

. . . ensure Henderson’s website offers a seamless and responsive experience on all devices? . . . help users swiftly and essential information about Henderson's services? . . . provide users with a clear understanding of Henderson's capabilities and expertise? . . . effectively integrate user reviews and ratings to showcase Henderson’s track record and build trust?

User in Focus: Meet David

Enter David—the embodiment of our target audience. A busy homeowner with a vision for a better living space, David seeks to delegate tasks to a professional, aiming to eradicate the hassle from home repairs. His time is precious, and trust is non-negotiable.

Future-Proofing with Features: A Glimpse Forward

Peering into the future, I outlined a feature set. Essential elements included robust review capabilities, a quote request form, and a comprehensive overview of Henderson's services. Anticipating growth, potential features like a customer portal, online booking, and integrated payment systems were also envisioned.

Structuring the Terrain: Sitemap Strategies

To navigate the user seamlessly, I structured the website content into a sitemap. Simplicity was the compass, ensuring easy navigation without overwhelming complexity. Reviews were prioritized for swift access.

Navigating the User Narrative: Task Flow

In collaboration with the client, a tailored task flow emerged. The focus? A review system allowing both positive and negative customer experiences to be shared. Transparency was the key, echoing the user's desire for unaltered insights. This flow, meticulously crafted for desktop and mobile users, became the gateway to honest testimonials.

From the Mind to Paper: Low-Fidelity Sketches

Ideas took shape on paper as low-fidelity sketches mapped out the homepage and review writing screens for both desktop and mobile users. This was the bridge between brainstorming and execution.

With a roadmap in hand, it was time to transfer these sketches from paper to screen, transforming the conceptual into the tangible.

3. Develop

Transforming Ideas into a Digital Tapestry: Mid-fidelity Wireframes

In the heart of Figma, my vision came alive. Mid-fidelity wireframes emerged, translating sketches into tangible screens that hinted at the digital journey ahead. The collaboration with the client infused excitement into the evolving canvas of Henderson’s online presence

Brand Essence

A pivotal moment was the birth of the logo—a fusion of repair tools forming the capital letter H. This became more than a mark; it symbolized Henderson’s essence. From sketches to digitized concepts, the final logo and brandmarks stood tall, ready for a prominent place in the digital and print realms.

Infusing patriotism into pixels, we chose a deep, trust-inducing blue as the main hue, complemented by vibrant gold/yellow for quality and a touch of red for an exciting pop. This palette echoed professionalism, trustworthiness, and a dash of excitement. The font, a sleek sans serif, maintained simplicity and professionalism.

UI Kit: Key Components

As with all digital products with repeating elements, I created components in Figma to save time. Below is a snapshot of the most important components created, including logo variations, icons, navigation menus, and review cards.

High-fidelity Elegance: A Symphony of Colors and Text

The transition to high-fidelity wireframes marked the growth of the visual journey. Colors, fonts, logos, and UI components converged to birth fully-freshed screens for both desktop and mobile. For review writing, the text copy became a focal point—I wanted the tone to be clear, professional, yet conversational and friendly. Every pixel was a brushstroke, enhancing the writing experience for users.

4. Deliver

In this phase, I transitioned from ideas to reality, showcasing Henderson's Home Repairs & Remodeling in its full form.

High-fidelity Prototype: Making it Work

I transformed the detailed wireframes into a working prototype using Figma. The GIFs below demonstrate the user journey

Usability Tests: User-Tested, User-Approved

With the prototype ready, it was time for usability tests with real participants. Due to a quick turnaround, I conducted unmoderated tests on Maze. Two tasks: write a review on desktop and write a review on mobile. There were seven total participants

Desktop Findings

User Feedback

Mobile Findings

User Feedback

The usability tests were a smashing success with no major issues, just minor cosmetic suggestions. This led to the decision to change the logo color from black to navy blue, aligning with the overall color scheme.

Wrap Up

A short screener survey paved the way for targeted interviews. The criteria were simple:

Lessons Learned

Impact

The potential impact of this project could extend beyond the digital realm:

The usability tests were a smashing success with no major issues, just minor cosmetic suggestions. This led to the decision to change the logo color from black to navy blue, aligning with the overall color scheme.

Next Steps

Thanks for reading!

Want to reach out?

Muhammad Aun

aunzuxd@gmail.com