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
In the heart of Waco, Texas, Henderson’s Home Repairs & Remodeling has been growing its reputation through word-of-mouth recommendations. However, in the digital age, where a website can be the storefront to success, Henderson's found itself at a crossroads with no online presence to speak of.
Problem
Henderson's Home Repairs misses out on potential clients in Waco and nearby communities due to the absence of an online platform. This limits visibility and creates a gap between Henderson's expertise and homeowners seeking reliable, professional services.
Solution
Design a responsive website that not only encapsulates Henderson’s range of home services but also becomes the go-to for homeowners in Waco and neighboring communities.
Design Process
1. Discover
-
User Research
-
Affinity Map
2. Define
-
POVs/HMWs
-
User Persona
-
Feature Set
-
Sitemap
-
Task Flow
-
Low-fidelity Sketches
3. Develop
-
Mid-fidelity Wireframes
-
Logo & Branding
-
UI Kit
-
High-fidelity Wireframes
4. Deliver
-
Prototype
-
Usability Tests
-
Iterations
1. Discover
Navigating the Landscape of Home Improvement
User Research: Unveiling User Expectations
Following a productive discussion with my client, it was time to delve into the minds of potential customers. The mission? Uncover the essentials—what users truly seek in a home repair services website.
Research Goal
-
User Expectations: Decode the expectations and preferences of our target audience.
-
Key Information Hunt: Identify the vital details users seek in their quest for home repair services.
-
Usability Blueprint: Assess the usability needs across different devices.
-
Digital Persona Crafting: Find the optimal way to convey Henderson's prowess and professionalism through the website.
Key Research Questions
-
What do users seek when hunting for home repair services online?
-
How do users gauge the expertise, professionalism, and reliability of a service provider?
-
What design elements resonate with users in a home repair services website?
-
What challenges do users face across various devices?
A short screener survey paved the way for targeted interviews. The criteria were simple:
-
Homeowners or renters in the quest for home repair services.
-
Individuals well-versed in the online service provider search dance.
-
Diverse device users—primarily desktop and mobile.
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.
100%
opted for direct contact (phone calls or face-to-face meetings)
100%
relied on reviews for provider trustworthiness
63%
highlighted the importance of mobile-friendly websites
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
-
Reviews: Trust hinges on online reviews—a non-negotiable.
-
Clarity: Clean layouts, concise information, and visual appeal win the day.
-
Mobile Must-Haves: The majority wielded phones, underscoring the need for mobile compatibility.
-
Communication: Direct contact speaks volumes, especially through calls and face-to-face meetings.
-
Locality: A local touch and responsiveness to criticism build trust.
-
Price Transparency: Quotes and pricing details matter—a unanimous sentiment.
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
Shaping Solutions with Purpose
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 find 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 unfiltered 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
From Wireframes to a Seamless User Experience
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-fleshed 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
Unveiling Henderson's Home Repairs & Remodeling
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
-
100% direct success
-
94.3s average duration
-
100% 5-star ratings
User Feedback
-
Overall, the task was very easy, simple, and straightforward.
-
One participant suggested putting more color into the logo, breaking away from an all-black design.
"I love how clean and minimalistic your design was and the path to the reviews came very intuitively."
- Participant
Mobile Findings
-
100% direct success
-
55.5s average duration
-
100% 5-star ratings
User Feedback
-
Again, the task was overall very easy and straightforward to complete.
-
Two participants highlighted their enjoyment of the writing guide option.
"I liked the options for how I’d want my name to be displayed and the offer for a guide to help write the review . . . the site looks super legit and professional."
- Participant
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
Lessons Learned
-
Client Collaboration: I honed my ability to collaborate with a client, balancing their business needs while staying true to user-centric principles.
-
User Research Significance: The importance of user research became crystal clear. Being no expert in home repairs, hearing directly from those who are provided invaluable insights into user expectations.
-
Power of Language: The content of a website, the copy, emerged as a pivotal force. It's not just about task completion; it's about crafting an enjoyable, stress-free journey for users.
Impact
The potential impact of this project could extend beyond the digital realm:
-
Business Opportunities: Henderson’s Home Repairs & Remodeling can increase business opportunities, thanks to an enhanced online presence.
-
Client Attraction: The revamped website acts as a magnet, attracting potential clients who resonate with Henderson's expertise and reliability.
Next Steps
-
Hand-off to a developer
-
Design more pages as Henderson's online domain grows.
-
Continuous testing and iteration. The project doesn’t end; it evolves. Testing and iteration will be ongoing, ensuring the website remains finely tuned and responsive to user needs.