Henderson's Home Repairs & Remodeling
Muhammad Aun
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
The absence of an online platform for Henderson’s Home Repairs results in missed opportunities to connect with potential clients in Waco and neighboring communities. This lack of visibility creates a disconnect between Henderson’s expertise and homeowners in need of trustworthy and professional services.
Solution
Craft a dynamic and responsive website that not only comprehensively presents Henderson’s diverse array of home services but also establishes itself as the primary destination for homeowners in Waco and nearby 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
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
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.
opted for direct contact (phone calls or face-to face meetings)
0 %
relied on reviews for provider trustworthiness
0 %
highlighted the importance of mobile-friendly websites
0 %
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 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
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-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
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
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.
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.
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
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.
Thanks for reading!
Want to reach out?
Muhammad Aun
aunzuxd@gmail.com
@2024 by Muhammad Aun
Like this project
Posted Nov 4, 2024
Situated in the bustling heart of Waco, Texas, Henderson’s Home Repairs & Remodeling has garnered a commendable reputation through word-of-mouth endorsements. H
Likes
0
Views
3
