Framework Design | UX

Ethical Online Banking

In January of 2014, one of the UK’s biggest banking services committed to a multi-million pound investment to redevelop their online banking experience for both of their brand’s customers. Experience design and technology agency, Splendid were commissioned to lead the creative design and user experience. I was hired to work alongside the creative lead to produce a digital design framework, develop ideas and support the UI and UX designers working in the Agile sprints. Brand names and logos have been removed from this case study as the work is still in development and covered by an NDA.


Beyond a digital overhaul of the current banking site, the challenge was focussed on staying true to the brand and its ethical policy to create a world-class, rich and immersive experience for all users.

Working with the existing brand guidelines my job was to research, create and invent to produce up to date, comprehensive, digital design framework that would be the foundation for the future release. I worked collaboratively with product owners, analysts, developers and designers sharing the same ambition; to produce a new experience, paving new ground toward the future of digital banking.


To invent the new, the existing must be explored. I researched other online banking applications, their visual language, user journeys, and how people interact with their money. The walls were filled with ideas and inspiration, from colour schemes to entry forms, studying element positioning, information architecture, typography and messaging. We studied analytics, demographics and data collected by the business. We learned that unless the bank took drastic measures to improve their digital offering, competitors will continue to eat into their profits. We knew we needed to produce a simple, tactile, device-friendly interface that is accessible and intuitive, giving users the tools and ability to interact quickly and securely with their accounts.Staying on brand, with a clean, bold look, I began to produce high fidelity visualisations in Photoshop. My aim was to say more in less space and replace verbose messaging with relevant, attractive and intuitive toolsets to grow the brand’s values through a delightful user experience, strengthen brand loyalty to up-sell products and make life better for the user.

Working with the creative lead we produced a framework document which describes the grid system, scaling principles, colour palette, typography rules, UI components, icon sets and the kinetics and transitions. The framework is a living breathing document which, over time as the sprints advanced included marked up key screens, user journeys and navigation rules.Rather than multiple design documents across three break points, separate wireframes and copy documents we produced a ‘widget library’ of the UI components in Axure. This meant that visual designers, UX designers and copywriters could all work in the same Axure team file, published as high fidelity wireframes for the developers to begin the development sprints. Most importantly we could use the wireframes as an interactive testing prototype to allow us to quickly user test, learn and iterate journeys as they were created.

Banking is predominantly task based. When users log-in to perform a particular task, whether it be check their balances, transfer money, pay bills, set up payments or amend their overdrafts, our aim was to make the journey slick, quick, simple and beautiful. We opted for a ‘hub and spoke’ model so users see a snapshot of their banking in the ‘hub dashboard’ then choose their task which is displayed as a stand alone ’take-over’ journey, free from any clutter, navigation and distractions of other functionality not relevant to their task. Clear messaging, large typography and a clean, minimal design aesthetic in these stand alone ’take-over’ tasks have proven in user testing to hand hold the user through their task from start to finish making them feel confident and comfortable interacting with the application and their money.

Build, test, learn, repeat! To create experiences that work, user testing is essential. We worked closely with user testing agency Nile, using a sophisticated testing lab with carefully recruited test subjects to regularly study and learn how users of different demographics, existing customers, non-customers all with different usage levels, would interact and react to the new proposition. We were able to quickly learn, iterate and improve the experience and test again until we were comfortable every single journey and task was as smooth as possible.

Since the current proposition was built 15 years ago, technology, devices, and the way people interact with their bank has changed massively. Before the new system is put live we recommended easing in the new digital design framework in a strategic, phased approach. I was solely responsible for designing a refreshed version of the current offering with the addition of some new functionality, including paperless statements and easier product applications.

Since the launch of the first release, the response from the user base has been excellent. Online product sales are at a monumental high, volume of calls to the call centre are at an all time low, and 167,000 of users have already opted for paperless statements in the first three weeks since launching, saving the business a very significant amount of money and giving the user a much more pleasant, easier and clearer experience.   



Phone: 07736650954