Interaction & Service designer

HDowns logo

HDowns are an Iron Foundry based in Huddersfield, West Yorkshire.

To celebrate their 70th year a new website and branding was commissioned, communicating the company's expertise and quality manufacturing.

To meet non-disclosure agreements, information maybe obfuscated. Views written are my own.

Home page

The challenge

Elevate and strengthen the HDowns Brand, celebrate company heritage, communicate industry experience and service offering to drive new business.

Landing page message

My Role

I initially pitched for the work and was responsible for research, user experience, interface design, creative and development. I worked directly with senior management to discuss and finalise branding, content and creative direction.

Goals

  • Increase reach and generate new business
  • Better communicate services and capability
  • Raise profile and present a more professional company

The Challenge

Elevate and strengthen the HDowns Brand, celebrate company heritage, communicate industry experience and service offering to drive new business.

ipad designs

Brand consistency

The HDowns brand had never been formalised, leading to inconsistent design interpretations. Since consistency is key to building trust with the target audience, we initiated consultations early on to refine and agree the branding. This included documenting the logo design, color palette, and typeface.

With a clear style guide in place, we moved forward confidently, using it to inform the broader web design.

Brand assets
Documenting brand assets
Discovery

Immersion & Questions

With the decline of heavy manufacturing in the UK, this project was a golden opportunity to celebrate a success story — highlighting the service and craftsmanship of the modern-day foundry.

Gaining an understanding of the process, from raw materials to the intensity of the blast furnace and the drama of casting, was both fascinating and insightful.

As part of the discovery phase, we took the opportunity to discuss processes and capture various stages of production through photography, providing valuable insights into the heart of the business.

Pouring the cast
Tapping the Cupola; molten Iron flows into the ladle
Design strategy

Review, Structure, Engage

The existing site content lacked organisation, having grown organically over the years without a clear structure or thoughtful navigation.

A significant portion of site traffic came through organic search, landing visitors on pages with inconsistent and confusing navigation. This left userss disoriented, contributing to a higher bounce rate and potential loss of customers.

Design objectives:

  • Review existing content, prune obsolete information and provide clear call-to-actions
  • Create intuitive taxomony and clear navigation across devises
  • A ground up redesign of the user experience and interface design
Mobile first

Designing with data

Examining the existing site's web analytics provided valuable insights into visitor behavior and demographics. These metrics would later be used to measure the success of the redesign — particularly in increasing mobile traffic.

Upon investigation, I was surprised by the high number of legacy browsers being used. After discussions with stakeholders, it became clear this reflected the setup of a typical business enquiry from a SME manufacturing company.

We embraced this requirement, ensuring the site was designed to display and function well on older, less standards-compliant browsers.

Mobile landing page
Website

Taxonomy

Before starting the ideation process, we took the time to organise the existing content. A simple card-sorting exercise was conducted with customers to group content based on their expectations and priorities. This allowed us to transform the original flat structure into an intuitive and user-friendly taxonomy.

Post content Structuring
Organising information to create structured content

Ideation

Wireframes

Sketching layouts allowed us to quickly explore page structure and articulate key ideas for the redesigned sections.

Sketching Interfaces
Sketching out wireframe ideas

Visual design

Aesthetically, the client wanted to maintain an established engineered look that encouraged users to browse the broad subject matter. Mockups were created to showcase key landing pages, reflecting this vision.

Materials landing page
Mockups to visualise key landing pages

These designs informed the creation of an initial interactive prototype, offering valuable insights into imagery use and color schemes.

Prototype

Responsive components

Certain areas of content, particularly the large material specification data tables, posed UI challenges for mobile users.

To address this, we implemented Zurb responsive tables, allowing users to navigate table information intuitively, which proved to be an elegant solution.

Another design consideration was the large masthead images, which consumed unnecessary bandwidth for mobile users and detracted from the headline message. As a result, these images were removed for devices with smaller screen sizes, optimizing the mobile experience.

Service landing page
Left - responsive tables (scrolling table with fixed 1st col)
Center and Right - clear, unobtrusive navigation controls maximising display area

Data-sheets

We observed that the material specification pages were among the most popular, driven by search engine result pages from specific technical specification keywords.

To better support customers, we produced a series of offline data-sheets with inDesign to accompany the material standards, allowing users to download and print if needed.

Website Icons
International Standards Datasheet

Icon design

To help personalise and develop the site style a bespoke set of vector based icons were created to communicate key messages and functions.

Initially constructed within Illustrator, vector SVGs were then imported to Fontello, a useful webapp for creating custom, icon based font families which can then be easily manipulated with CSS.

Website Icons
Pixel perfect construction
Website Icons
SVGs converted to bespoke webfont

Testing

The website was continually tested throughout the build process with both legacy and more compliant browsers.

As part of the QA checklist, HTML5 compliance was achieved through W3C validator. CodeKit used to debug, compile and minify JavaScript and CSS3, reducing errors and helping maintain site assets.

Mobile screens
The Results

Site visits up 250%

Since the first month since soft launching the HDowns website, their profile, user engagement and reach has grown substantially:

  • Greater Reach - Unique visitors & Mobile visitors increased 20%
  • Better Engagement - Sessions increased 250% while bandwidth reduced by 40%
  • Increased Conversion - Contacts page submissions increased 360% and business is brisk

Results achieved 100% organically, without PPC or offline marketing.

Visit the site at HDowns.co.uk

Top