Ben Wakefield, Digital Product Designer - Halifax, UK

HDowns

HDowns & Sons are an Iron Foundry based in Huddersfield, West Yorkshire. The company was forged in the closing months of WWII and has grown to be an integral part of Huddersfield's industrial heritage.

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

Home page

Background

The existing HDowns website was a legacy from the late '90s and provided an interesting flashback to nascent Internet days where designing with tables was commonplace.

To celebrate their 70th year a new website and refocused identity was instructed, communicating the company's expertise, quality manufacturing and service offering.

Landing page message

My Role

I initially pitched for the work and was responsible for all areas of the research, taxonomy, user experience, interface design, photography and site build. 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

We were in the advantageous position whereby structurally and visually we could start from scratch, however questions remained on how we best drive new business, establishing what was needed from existing content, determining the correct tone and refocusing the diluted brand.

ipad designs
First things first

Brand Identity

The HDowns brand had never been formalised, resulting in a back catalogue of design interpretations. As consistency is key and builds trust with the target audience, consultation was opened at an early stage to focus the design, and document logo, color palate and typeface.

We moved forward confidently with a clear style guide from which we could inform the wider web design.

Brand assets
Brand assets
The Approach

Don’t throw the baby out with the bathwater

Examining the existing site's web analytics revealed important visitor behaviors and demographic data. In due course we would use these insights and quantitative data to gauge the redesign's success - particularly in driving more mobile traffic.

Despite a degree of push-back when considering various viewing devices, I demonstrated that the majority of searches now happen via mobile devices and without building a responsive site we would limit our reach and be penalised by search engines.

Analyising domain statistics
Web analytics revealed a high proportion of Internet Explorer 8 users

On investigation I was surprised by the high level of legacy IE users, however after discussing with stakeholders this appeared to characterise a typical B2B Persona within a SME manufacturing company.

We embraced this requirement and ensured the site was designed to display and function well using older, less standard compliant browsers.

The Discovery

Immersion, Research & Questions

Lack of domain knowledge meant I needed to dive into foundry life, spending time with staff in the office, pattern shop and foundry floor to get a better understanding of the business.

Understanding the process from elemental materials, through to the intensity of the blast furnace and drama of casting itself proved interesting and insightful.

We made time to talk about and (Health and Safety permitting) photograph various stages of production.

Pouring the cast
Tapping the Cupola; molten Iron flows into the ladle
The Vision

Reflect on the past, look to the future

With the exception of modern Spectrometer testing, Foundry production processes hadn't changed much in 150 years.

It was inspiring to witness the Pattern Makers craftsmanship, Foundry men’s focus and control while managing molten metal and the detailing of the Finishers.

With the general decline of heavy manufacturing in the UK, I felt this was a golden opportunity to champion the craftsmanship, creativity and true grit of the modern day foundry.

Mobile landing page
The Plan

Review, Structure, Engage

The existing site content lacked organisation, having grown organically over the years without structure or thought to navigation.

Much of the site traffic came through organic search results to pages with inconsistent or confusing navigation leaving the viewer disorientated, contributing to bounce rate and potential loss of custom.

Our strategy:

  • 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

A full content review revealed many dated and poorly optimised images. Without any realistic alternatives it was decided some of the original images should be left within the redesign for historical reference, however if greater resources were available we would have ideally replaced all poorly optimised images.

The Framework

Structuring Content

Before commencing any ideation we spent time making sense of and organising existing content. A simple card sorting exercise was conducted to identify the best content labeling and categorisation. From the original flat structure we quickly grouped the content into a first draft taxonomy.

Post content Structuring
Content quickly catagorised
Design Solution

Ideation

Sketching layouts helped us explore ideas and develop user journeys from an early stage. This enabled us to communicate the essence of the redesign and encouraged client dialogue and quick feedback.

Sketching Interfaces
Sketching Interfaces

Hi-Fidelity Mockups

From an aesthetic perspective, the client was keen to keep an established engineered look that encouraged people to browse the broad subject matter.

With pressing schedule, there was eagerness from stakeholders to deliver more realistic presentations early in the process. Once we had discussed layout, I moved to create Photoshop mockups to detail a selection of landing pages.

Materials landing page
Created in haste: detailed mockups

In hindsight, a first draft interactive prototype would have been more appropriate in the first instance as ultimately one of the landing pages became surplus to requirement. However insights were gained in regards to image use and colour schemes.

Responsive design

Certain areas of content did create UI challenges for mobile users, in particular the large material specification data tables.

We used Zurb responsive tables which although not a perfect user experience, allowed viewers to navigate table information in an intuitive manner and made for an elegant solution.

Other design considerations included the large masthead images which did not warrant the bandwidth for mobile users and distracted from the headline message. Subsequently they were removed from pages served to devices with smaller screen sizes.

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

Icons

To help personalise and develop the site style a bespoke set of icons were created aiding communication of the key messages.

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

Datasheets

From web analytics we observed the materials pages were broadly the most popular through niche search terms and specifications.

To monopolise on this, using InDesign, I produced a series of datasheets to accompany the material standards, which users could download and print.

Website Icons
International Standards Datasheet

Prototype and Testing

The site prototype was built with Bootstrap / JQuery / SASS, allowing us to rapidly build a demonstrable interactive model, which was regularly reviewed until client signoff.

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.

Visit the site at HDowns.co.uk


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% & business is brisk

Compared with year to date figures (November 2016). Results achieved 100% organically, without PPC or offline marketing.

Top