Objective
Initially the focus of this project was a technical one, where the business requirement was to move the Halifax public site website onto a new platform. However, the Halifax brand had just been updated, the website that existed at the time had not been aesthetically refreshed for 8 years, and did not provide an adequate multi-channel experience. The business goals were pragmatic, but it would have been a missed opportunity to continue with the brief presented, so we successfully made the case for the redesign shown.
Mortgage hub design on multiple devices
Challenges
• Creating a design that worked on legacy technologies like IE6, used predominantly in branch, a key digital touch point for Halifax customers.
• Creating a design system without changing the current content, that had been created without clear design principles or page templates.
• Using a Brand that had some fundamental issues in the digital space, as it had been created for non digital, above the line activity.
Homepage, Credit card hub, & Product detail page
Approach
• Pushed back the planned time spent initiating the project to challenge the business goals and successfully validated ideas around the added value to investment of a brand refresh and a responsive design to better optimise for multi-channel.
• Discovered that to change the current content the project would have lead to over 450 pages needing regression testing and assessment by risk and compliance. The project decided to keep the content the same as it would have hampered the delivery timeline. As a result, the design had to take a modular fashion, identifying key components that were common across the website. These were then designed with a number of styles that would give the flexibility desired to work across a website that lacked page templates and design principles.
•Led a design approach that saw design decision being validated in the browser sooner. This was very much required because of the legacy browsers that needed supporting. For instance, font weights were tested in browser to make sure they were legible on IE6. This also helped control the quality of the responsive design.
•Took a brand team, with an expertise that was more attuned to above the line, on the design journey, with regularly touch points and working sessions. By clearly demonstrating the issues we were having, aligning this with the brand team and working through them collaboratively. This created a trusted partnerships which continued with future work streams.
UI kit showing the colour palette and typography that was amended for digital from the core brand guidelines
UI kit showing the promo box styles which was identified as a key component
My role
Design Director, Lead designer
__
Team
Dan holder Creative Director
David Carruthers UX lead
George Marsden Senior designer
Kate kenyon Content strategist
Alex Chittock Tech lead