Lorem ipsum dolor amet, consect adipiscing elit, diam nonummy.

Follow Us

Search

Outdated Website Makeover

UI/UX Website Makeover for Goldfinch Brothers

UX Researcher, UI designer, Front-End Development

Project Overview

Legacy Meets Digital Evolution
Goldfinch Bros., Inc. has been a trusted name in commercial and residential glass and glazing services since 1892. With over a century of craftsmanship and industry leadership, the company is ready to strengthen its digital presence. This project aims to redesign their outdated website into a modern, responsive, and brand-aligned experience that better reflects their professionalism, history, and service quality. 

A Modern User-Centered Web Experience
The new website will integrate updated UI aesthetics with UX best practices to deliver a seamless and engaging journey for users—whether they’re browsing services, viewing project portfolios, or reaching out for quotes. The focus will be on responsive design, clear content structure, and intuitive user flows that drive conversion and build trust with both new and existing customers.

*This project was developed together with Web Casa Design LLC team. Credits are provided unless otherwise specified.

Company Overview

Goldfinch Bros., Inc. has been in business since 1892. We are a market leader in commercial and residential glass and glazing services, bringing consistency and attention to detail that is unmatched in the industry.

The Process

Identify

Pinpoint the problem, define success and begin sense-making

Discover

User Research
User Interviews

Ideate

User Flow
Information Architecture

Design

Wireframes
Visual Design

Test

Design iterations while implementing feedbacks

Identify

Problem Statement

Outdated Design, Disconnected Experience
The current website lacks a modern visual language, mobile responsiveness, and structured content hierarchy. It no longer reflects Goldfinch Bros.’ position as an industry leader, creating a mismatch between the company’s real-world reputation and its online presence. This disconnect is a missed opportunity to engage and convert potential clients in an increasingly digital-first market.

UX Challenges Impacting User Engagement
The existing site architecture is fragmented, with disorganized content and unclear navigation pathways. Essential user actions—like service discovery, quote requests, or contact—are not prioritized, leading to confusion and frustration. This creates friction in the user journey and lowers the site’s effectiveness as a sales and marketing tool. A strategic, user-first redesign is crucial to address these gaps and future-proof the company’s digital platform.

My Role

Research

User Interview

User Persona

User Flow

Wireframes

Visual Design

UI/UX Design

Usability Test

Front-End Development

Project Toolkit

Project Duration

The design process involves several steps to ensure a smooth and user-friendly experience for customers and visitors. Which consists of research, wire-framing, prototyping, design and usability testing.

This project was conducted on
May 17, 2023 - December 15, 2023

Days
0

Project Timeline

Discover

User Interviews

Overview

Six individuals were interviewed to understand the challenges customers face when seeking glass and glazing solutions. The participants included a mix of commercial contractors, residential clients, and industry professionals, ensuring a range of insights from different user types interacting with Goldfinch Bros.

All interviews were conducted remotely via Zoom, providing a convenient and flexible format for participants. This setup allowed for in-depth conversations that helped uncover key pain points and expectations when engaging with glass service providers.

Affinity Mapping

Problems We Identify

  • Outdated Website Design - Visual style does not reflect the company’s legacy or professionalism.
  • Poor Mobile Responsiveness - The current site is not optimized for mobile or tablet users.
  • Disorganized Content Structure - Users struggle to find key information due to lack of hierarchy and layout consistency.
  • Unclear Navigation & User Flows - Navigation is unintuitive; key actions like contacting or requesting a quote are hard to find.
  • Limited Trust-Building Elements - Lack of testimonials, certifications, and visual proof of work.
  • No E-Commerce Capabilities - No infrastructure to support future online product sales.
  • No Analytics or Performance Tools - Limited visibility into user behavior and site performance metrics.

Solutions We Offered

  • Modern, Brand-Aligned UI Design - Introduce a clean, professional, and visually engaging interface.
  • Responsive Design Implementation - Ensure seamless experience across all devices, including mobile and tablet.
  • Improved Information Architecture - Organize content with clear hierarchy, sections, and intuitive layout.
  • Streamlined User Experience (UX) - Design simplified, goal-driven user flows with prominent calls to action.
  • Enhanced Credibility Features - Add testimonials, case studies, certifications, and a polished portfolio.
  • Future-Ready E-Commerce Integration - Build a scalable foundation to support online product sales (e.g., windows and doors).
  • Analytics & SEO Setup - Integrate tracking tools and optimize site structure for search engine visibility.

Pain Points

Outdated Visual Design

The current website lacks a modern aesthetic and fails to reflect the company’s professionalism, credibility, and long-standing reputation. This creates a poor first impression for potential clients.

No Mobile Optimization

Existing resources present housing information in a cluttered and unstructured manner, leading to confusion and difficulty in identifying relevant rental or for-sale properties.

Disorganized Navigation & Content

Without proper filtering and search capabilities, users find it hard to locate properties that align with their specific needs, causing frustration and delays in decision-making.

Lack of Future-Ready Features

There is no infrastructure to support evolving business needs—such as e-commerce for selling products like windows and doors—limiting growth opportunities and operational scalability.

User Persona

I created different user personas based on the target user group and all the information gathered by the research, I was able to create two fictional characters who represents the target user group of the company.

Sarah Jacobs

Age: 36
Role: First-time homeowner
Occupation: Marketing Manager (remote)
Location: Everett, WA
Tech Comfort: High

Background & Goals

Sarah is looking to upgrade her home’s windows and front door, and wants a smooth, informative online experience before reaching out. She’s focused on exploring design options, understanding pricing, and learning about the installation process—all from a brand she can trust. Ideally, she wants to browse photos of real projects, skim service info quickly, and either get an online estimate or schedule a consultation. If possible, she’d love the convenience of ordering or booking directly through the site in the future.

Pain Points & Challenges

  • Overwhelmed by jargon or unclear service categories.
  • Distrusts sites that look outdated or unprofessional.
  • Prefers quick, visual overviews over long text-heavy pages.

Needs & Preferences

  • Modern, user-friendly design that works on desktop and mobile.
  • Visual galleries of available products and past work.
  • Simple, transparent service explanations.
  • E-commerce capability or inquiry forms for specific product interests.

Mike Claire

Age: 42
Role: Construction Project Manager
Company Type: Mid-sized commercial construction firm
Location: Seattle, WA
Tech Comfort: Moderate

Background & Goals

Mike is responsible for sourcing reliable subcontractors and vendors for commercial builds. His goal is to quickly assess whether a company like Goldfinch Bros. has the experience and capability to take on large-scale glazing projects. He needs to validate their credentials, browse recent project work, and request a quote or schedule a site consultation—all without wasting time. For Mike, efficiency, trust signals, and mobile accessibility are key, especially when managing projects from the field.

Pain Points & Challenges

  • Frustrated by outdated websites that aren’t mobile-friendly on job sites.
  • Wastes time searching for clear service offerings or contacts.
  • Needs to validate vendors fast, especially under tight project timelines.

Needs & Preferences

  • Mobile-responsive interface.
  • Easy-to-navigate service categories.
  • Easy-to-navigate service categories.
  • Clear contact and quote request CTAs.
  • Trust-building signals like certifications and project case studies.

Empathy Mapping

Empathy mapping is what allows put in users better, It helps a lot to identify the gaps between users need and the current solution they are using.

Sarah Jacobs

Says
  • I just want a quick idea of pricing and options.”
  • If the site looks outdated, I don’t trust it.
  • Do they even do residential work?
  • I’d like to see what the windows actually look like installed.
Thinks
  • This company doesn’t look legit if their site is this old.
  • Am I going to have to call someone just to get a basic quote?
  • Can I do this from my phone while I’m on the couch?
  • I hope this doesn’t turn into a complicated sales pitch.
Does
  • Browses several local contractor websites for comparison.
  • Scrolls through on mobile to check services and project photos.
  • Reads testimonials or reviews before considering a call.
  • Skips any site that looks cluttered or confusing.
Feels
  • Overwhelmed by too much technical info.
  • Frustrated by slow, outdated sites.
  • Cautious but curious — wants to trust the brand.
  • Relieved when she finds a clean, modern, easy-to-use website.

Ideate

Information Architecture

The primary navigation was established based on core user intent and business priorities, focusing on high-level content categories: Residential, Commercial, Portfolio, Showroom, and Contact. These represent the main pathways for both residential and commercial users to explore relevant services and engage with the brand. Each section was then expanded to include supporting pages and logical sub-navigation where needed, ensuring a clear content hierarchy and smooth discoverability.

In addition, we implemented a secondary navigation bar positioned above the main menu. This includes global utility links such as About, Careers, Blog, and a prominent call-to-action: Request a Quote. These items provide brand context, recruitment opportunities, and ongoing content engagement while keeping the conversion path always visible and accessible.

Design

Wireframes

We took our research insights and began creating sketches that touched all parts of our user journey. To narrow down our numerous ideations, we decided to decide on certain features within each sketch to include in our mid-fi prototype.

UI Design

Design Guidelines

The design guidelines for the Goldfinch Bros. website prioritize clarity, accessibility, and brand alignment. The visual language will reflect the company’s legacy and professionalism through clean layouts, structured typography, and a modern, minimal aesthetic. A responsive, mobile-first approach will ensure seamless usability across all devices. Consistent use of color, spacing, and UI components will enhance visual hierarchy and user flow, while accessibility standards (WCAG) will be followed to support all users. Overall, the design will balance function and form to build trust and drive engagement.

Aa

Lato

A B C D E F G H I J K L M N O P Q  R S T U V W X Y Z
a b c d e f g h i j k l m n o p q e s t u v w x y z

Regular

Medium

Bold

Brand Colors

#649A42

#FFA400

Additional Colors

#3F3F3F
#1A202C
#040404
#ffffff

Test

Usability Test

Prototype

Through out the project I was driven by a user-centered approach, and I focused on creating a clean, structured layout that would guide users naturally through the site. I started by segmenting the core audience—residential and commercial—and built the homepage to support both paths clearly from the start. I used a modular structure to organize content into digestible sections, including an overview of services, the company’s process, a project gallery, and testimonials for social proof. I prioritized clarity in navigation with both primary and secondary menus, and I made sure key actions like “Request Quote” were highly visible to support conversions. Throughout the design, I maintained consistent branding, clean typography, and responsive elements to create a seamless experience across all devices.

Outcome​

Overall, the usability test was quite successful, confirming the viability of the general flow. I implemented a few adjustments to further streamline and enhance the user experience.

Final Approved Design

Results

Following the website redesign, the client experienced significant improvements in user engagement and conversions:

  • Conversion Rate improved by 14%, driven by streamlined user flows and clearer calls-to-action.
  • Bounce Rate decreased by 18%, as users found it easier to navigate and access key content quickly.
  • Page Views per Session increased by 28%, indicating improved content structure and engagement.
  • Average Session Duration rose by 24%, reflecting more time spent exploring the improved layout and content.
  • CTA Clicks went up by 20%, due to prominent placement and stronger visual hierarchy.
  • Mobile Engagement improved by 18%, thanks to responsive layouts and touch-friendly design.
  • Lead Generation (via contact forms and inquiry submissions) grew by 16%, supported by simplified forms and trust-building design updates.

Key Takeaways

Challenges

  • Clear visual hierarchy and modular layout improved user engagement and scannability.
  • Strategic placement of CTAs like “Request Quote” enhanced visibility and supported lead generation.
  • Incorporating brand elements and real project imagery built trust and reinforced credibility.
  • Improvements to navigation and information architecture streamlined user flows and minimized friction throughout the site.

Lessons Learned

  • Content clarity is foundational: Legacy content needs to be audited early to avoid delays in information architecture and wireframing.
  • Mobile-first isn’t optional: Prioritizing mobile design from the outset ensures a smoother experience across all devices and reduces redesign effort.
  • User insights drive smarter design: Incorporating analytics and user behavior tools (e.g., heatmaps, session recordings) can significantly improve decision-making.
  • Small UX touches make a big impact: Features like sticky CTAs, hover states, and interactive galleries enhance usability and guide conversions.
  • Early stakeholder alignment is key: Clarifying business goals and user needs upfront ensures the design process remains focused and effective.

© 2025 Frey Suan ♥