Precision Garage Door - Homepage Redesign
MOOD Technology Consultancy | UX Designer


The Problem

Precision Garage Door's homepage felt outdated. The ask was to reference their existing site as a starting point, but push the design toward something fresher and more unique — while maintaining consistency across the company's web presence.


My Role

Freelance UX/UI Designer, contracted through MOOD — a Chicago-based technology consultancy. I was tasked with creating a high-fidelity homepage prototype for both desktop and mobile — referencing Precision Garage Door's existing web presence while pushing toward a fresher, more distinctive visual direction. Deliverables included wireframes, a visual style guide, and final mockups for both breakpoints.


Style Guide

Precision Garage Door style guide showing Poppins typography, Desert Sand and Spruce color palette, and three button variants

The visual system was built around Precision Garage Door's existing brand identity while pushing toward a more refined, modern feel. Poppins was supplied by the design agency for its geometric clarity and friendly professionalism — approachable without feeling generic. The color palette pairs Desert Sand and Spruce, grounding the design in earthy, trustworthy tones that feel appropriate for a home services brand. Three button styles provide flexibility across the page while maintaining visual consistency.


Wireframes

Before designing the full homepage, I mapped out the page structure using block frames — establishing the section order and spatial relationships before introducing any visual design. This ensured the content hierarchy and user flow were sound before moving into high fidelity.

Lo-fi block frame wireframe for Precision Garage Door desktop homepage showing section order and content hierarchy
Lo-fi block frame wireframe for Precision Garage Door mobile homepage

Mockups

With the structure validated, I moved into high-fidelity mockups for both desktop and mobile — applying the visual system from the style guide to bring the page to life. Each section was designed to guide the user naturally from awareness to trust-building to conversion.

High-fidelity desktop hero section mockup for Precision Garage Door homepage redesign

Desktop Hero Section

High-fidelity desktop about section mockup for Precision Garage Door homepage redesign

Desktop About Section

High-fidelity mobile hero section mockup for Precision Garage Door homepage redesign

Mobile Hero Section

High-fidelity mobile about section mockup for Precision Garage Door homepage redesign

Mobile About Section


Final Design

Complete high-fidelity desktop homepage mockup for Precision Garage Door
Complete high-fidelity mobile homepage mockup for Precision Garage Door

Outcome

Delivered a complete design package to the agency — including wireframes, a style guide, and high-fidelity mockups for both desktop and mobile. The work established a visual foundation for a modernized Precision Garage Door homepage that balanced brand familiarity with a fresher, more distinctive direction.

"The client responded positively to the final design direction, describing it as exactly the modernized presence they were looking for.