Constraints and design challenges

The project began under difficult working conditions. The website was initially perceived as a burden rather than a business priority, which limited staff availability and made it difficult to gather information consistently.

The primary constraints included:

• High employee turnover, which repeatedly introduced new perspectives and required substantial rework.
• Staff availability challenges during discovery and content collection.
• A lack of centralized digital content or documentation.
• Most site information existing as handwritten notes on legal paper.
• Images being available before the supporting written content was organized.
• The need to establish a shared direction while stakeholders were still forming their understanding of the website’s role.

These constraints made alignment, content structure, and decision-making as important as the visual design itself.

Research and discovery

The discovery process combined qualitative research, collaborative design methods, and content-organization work to understand the business, its audience, and the story the site needed to tell.

Research and discovery methods included:

• Literature reviews
• Generative user interviews
• Focus groups
• Design thinking
• Participatory design sessions
• Stakeholder workshops and customer-journey discussions

This strategy turned a large content set into a coherent product with a clear purpose and a logical path through the material.

The research focused on understanding:

• What affluent collectors and enthusiasts value when considering bespoke fabrication work.
• How prospective clients evaluate craftsmanship, credibility, and technical capability.
• Which projects best demonstrate the shop’s range and quality.
• How the team’s experience and collaborative culture contribute to client confidence.
• What information a visitor needs before moving from inspiration to inquiry.

Because much of the source material was handwritten and staff availability changed throughout the project, discovery also became a content-recovery and alignment effort. Workshops helped convert scattered knowledge into shared commitments around the customer journey and the purpose of each page.

Experience strategy and customer journey

The strategy was to organize the website around a trust-building journey: understand the shop, see the work, learn about the people, and make contact.

The experience supports a progression from the homepage and service overview, to project galleries and individual project stories, and then to a direct inquiry or related marine experience.

The strategy was guided by five principles:

• Craft-first storytelling: Lead with the quality, detail, and character of the work.
• Projects as proof: Use real projects and galleries to demonstrate capability rather than relying only on claims.
• Premium positioning: Create an experience that reflects the bespoke, timeless, and non-mass-produced nature of the work.
• Human credibility: Introduce the team and the collaborative culture behind the builds.
• Direct connection: Make it easy for a qualified prospect to contact the shop and continue the conversation.

This strategy positioned the website as both a portfolio of craftsmanship and a qualification tool for prospective clients.

Information architecture and content structure

A significant part of the UX work was deciding how to transform incomplete source material into a coherent structure that could support both storytelling and business development.

The primary experience areas included:

• Homepage: Established the Metal Union identity, approach, capabilities, and primary entry points.
• Metal Forming & Fabrication: Explained the shop’s specialized services and technical point of view.
• Sheet Metal Fab Projects: Organized project examples into a browsable collection.
• Project detail and image galleries: Provided project-specific descriptions and visual evidence of the work.
• Meet the Team: Introduced the owners, builders, designers, fabricators, engineers, and apprentices behind the projects.
• Contact: Provided the shop’s location, phone, email, map, and social links.
• Metal Union Marine: Extended the experience to the related custom jet-boat business.

The information architecture was designed to help visitors enter through a service need, a project of interest, the team, or a contact task and still reach a clear next step.

Key design decisions

The design translated the strategy into a dark, image-led, and distinctive automotive experience.

Key decisions included:

• Using large project imagery as the primary evidence of craftsmanship.
• Creating browsable project cards to help visitors compare the breadth of the work.
• Designing individual project pages and gallery views for deeper inspection.
• Using image-overlay and modal patterns so visitors could view project details without losing context.
• Structuring service content around clear headings, supporting imagery, and practical explanations.
• Introducing team members through roles, biographies, and personal background.
• Using textured dark backgrounds, high-contrast headings, and warm metallic accents to reinforce the industrial and premium character of the brand.
• Maintaining consistent navigation, footer content, social links, and calls to action across the site.

The design intent was to make the site feel authentic to the shop’s craft while giving high-value prospects a polished, credible, and visually compelling way to evaluate the business.

Development, launch, and ongoing ownership

The project extended beyond design into the practical operation of the website.

I translated the visual storytelling strategy and page structure into a working public website while also taking responsibility for the surrounding infrastructure and ongoing management.

The implementation work included:

• Building the website structure and page layouts.
• Implementing project grids, project-detail pages, and image-gallery patterns.
• Maintaining navigation, footer information, contact details, social links, and calls to action.
• Hosting the website.
• Managing email.
• Performing maintenance and content updates after launch.
• Supporting future growth as new projects, galleries, services, and marine content were added.

Owning these responsibilities provided continuity between the original UX strategy, the live implementation, and the ongoing site evolution.

Iteration and stakeholder collaboration

Several iterations were required across both the design and development phases. High employee turnover brought new insight into the project at different stages, which resulted in extensive rework to content, structure, and page decisions.

A major challenge was overcoming analysis paralysis. To move the project forward, I facilitated workshops, clarified the intended customer journey, and helped stakeholders make commitments around the direction of the site.

The iteration process included:

• Reworking content and page structures as new employee perspectives became available.
• Converting handwritten source material into organized website content.
• Revisiting page layouts as the customer journey became clearer.
• Using workshops to resolve uncertainty and establish shared direction.
• Refining project presentation, team content, calls to action, and navigation based on stakeholder input.
• Balancing stakeholder requests with the need to protect the overall experience strategy.

This process reinforced the importance of creating alignment early and treating stakeholder participation as part of the design work rather than a final approval step.