Housefix - Handyman Website | Design and Webflow Development

Al Razi Siam

Completed work

UI Designer

UX Designer

Webflow Developer

Figma

Webflow

Building & Construction

Case Study Overview

Client: Housefix- HVAC Plumber Handyman ServiceCompany

Project Duration: 1.5 Months

Role: Product (UX/UI) Designer, Brand Designer & Webflow Developer

Tools: Figma and Webflow

🔥 Live Website: https://housefix.webflow.io/

🔥 Webflow Preview: https://bit.ly/4byJgtg

🔥 Figma Preview/Download: https://bit.ly/41tlRof

Introduction

Housefix is crafted for handyman contractors such as plumbers, HVACs, cleaners, etc. It includes essential features like service pages, pricing plans, and contact forms, ensuring your business can easily connect with potential customers.

Design/Work Process

Research User/Business Needs

To kickstart the project, I conducted a comprehensive company analysis, pain points, and competitor analysis on leading construction companies in their area with customer research. This provided valuable insights into the industry's information architecture, helping me understand the essential website sections to incorporate into Housefix's homepage.

Wireframing and Information Architecture

The next phase involves creating user flows and wireframes, focusing on the optimal page structure and information flow. Each section was carefully crafted, with thoughtful consideration given to UX best practices. The wireframes served as a blueprint for the subsequent design stages.

The Design System: Colors, Typeface and Grids

After the wireframes, we focus on building a design system so that company can always follow brand guidelines and keep a consistency throughout the website. This involves creating color system, typeface system and grid system.

Design Iterations

The design process splits into creating a design system that includes color system, typeface system and, and other necessary components. These components were intentionally curated to resonate with 0260Labs's brand while maintaining a visually appealing and cohesive design. Seamless integration between Figma and Framer facilitated a smooth transition from static designs to interactive prototypes.