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.
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.
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.
- Increase reach and generate new business
- Better communicate services and capability
- Raise profile and present a more professional company
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.
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.
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.
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.
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.
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.
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.
- 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.
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.
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.
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.
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.
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.
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.
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.
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.
Visit the site at HDowns.co.uk
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.