Halifax - Lloyds Banking Group
Creative Lead on the project to launch one of the UK’s first responsive banking websites.
Situation
The project started from a technical requirement, as the platform was reaching end of lifecycle and needed to be moved. Design was not a key business objective.
A new brand direction had newly been launched
The website had not been updated aesthetically for 8 years, and the digital touch-points that existed did not offer an adequate multi-channel experience
Challenges
Designs had to work on legacy technologies like IE6, used predominantly in branch, a key digital touch point for Halifax customers.
Creating design without changing the current content, that had been created without clear design principles or page templates.
Applying the new Brand that had some fundamental issues in the digital space, as it had been created mostly with above the line, OOH considerations.
Design approach
What we did
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.
Decided to take a modular design approach, 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 branding 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.
Design System
Created best in class Design System UI kit so that they could be shared to product teams around the business.
The design system was rigorously tested to pass WCAG AA accessibility standards as a minimum.
All design elements and components were built alongside the UI kits to ensure they worked well in legacy browsers, that had to be supported.
Version Control & Governance strategy was clearly documented with contribution and review workflows communicated with product teams.
A selection of the foundation elements put together in the UI Kit
A selection of components in the UI kit, in this instance the promo boxes which were ubiquitous in the content structure.
Components
Common components were identified over 450 pages of content, with pages created with little standardisation or templates. They needed to be flexible to work in a number of uses.
Components Architecture was structured to an atomic methodology (atoms, molecules, organisms) Component variants and states were also clearly defined.
Responsiveness were baked into the components and the breakpoint strategy clearly documented
Created a component additions sandbox and deprecation process
Header desktop component
An example of the desktop header component. The only component that needed a total reassessment to work responsively.
Header mobile component
An example of the mobile header component. The only component that needed a total reassessment to work responsively.
Responsive table component example (credit cards)
Without changing the content we had to design a number of table component variables that accommodated dense amounts of information that had regulatory information. It was important that this information was clear on all devices to users.
Page templates
Common components were identified over 450 pages of content, with pages created with little standardisation or templates. They needed to be flexible to work in a number of uses.
Components Architecture was structured to an atomic methodology (atoms, molecules, organisms) Component variants and states were also clearly defined.
Responsiveness were baked into the components and the breakpoint strategy clearly documented
Created a component additions sandbox and deprecation process
Selection of templates (Branch Finder, Account Detail, General Content)
Outcomes
• Created a best in class UI Kit that was made available to all product teams increasing design consistency across the business
• Launched one of the first responsive banking websites
• Increased mobile channel product applications by 25%
• Account opening applications saw 18% higher completion rates on mobile
• Session duration on mobile increased by 32%
• Pages per session improved by 24%