All Work
Precision Garage Door: Homepage Redesign
Mood Technology Consultancy
2025
UX Designer
Domain
E-commerce
Year
2025
IA
Discovery
Overview
Precision Garage Door needed a modernized homepage that felt consistent with their existing brand but more visually distinctive. Contracted through MOOD, a Chicago-based technology consultancy, I designed a high-fidelity homepage prototype for both desktop and mobile, delivering a style guide, wireframes, and final mockups.
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
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.
Desktop blockframe
Mobile blockframe. Scroll to view the full page.
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.
Desktop hero section
Desktop about section
Mobile hero section. Scroll to view the full page.
Mobile about section. Scroll to view the full page.
Final Design
Scroll to view the full page.
What I Learned
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.