Project 5
Since September 2008 I’ve been working on an internet banking re-design project at LBi (where I work), for one of the UK’s top-five banks. The project is part of a 5-year programme that includes a redesign of the internet banking service, as well moving to new technology platforms. For confidentiality reasons I’ll refer to this project as ‘Project 5’.
What is Project 5?
Project 5 will transform the bank’s online presence and internet services for its customers and businesses. The delivery of this will be a flexible, shared Internet banking technology platform.
LBi pitched along with other agencies for the chance to create the user experience for the internet banking service and we successfully won the pitch back in 2008.
Project kick-off and immersion
Project 5 kicked off with an ‘immersion’ study – looking closely at the business, its strategy and its long-term goals. It also included an extensive user research study that involved business stakeholders as well as the bank’s customers. Experience architects (EA’s) worked along with User researchers to gather primary research to gain a better understanding of user needs and goals. From the immersion study personas were created to help in the design phase and to give the business an understanding of who there customers were.
Phase 1
5 years is a long time and the bank wanted a first release of their re-designed internet banking service quickly so that it could set the foundations for future releases. Phase 1 was about taking the existing services and processes and adding key pieces of functionality/ content and refining them to create an improved user experience that would separate the bank from its competitors, strongly reflecting its brand and visual identity.
Creating the user experience
Business analysts worked for months documenting how the internet banking system behaved, how it communicated with other back-end systems and what it displayed to users into hundreds of use cases. These essentially helped us map out the system and its processes into user journeys. Essentially, the user journeys were a translation of the use cases into a more visual depiction of the system outlining the page flow, where errors could occur etc. From these we could easily identify where improvements could be made and where processes could be simplified to create a better customer experience.
Scetch/ scamp for setting-up a new payee process
After creating user journeys we went on to start fleshing out the interactions and some of the most challenging pages in the site, namely the logged in homepage/ account overview and the account statement page. We worked in teams sketching out ideas, working with designers and referred to competitor sites. From the sketches we created wireframes. We chose to use Axure to design our wireframes and one of its strongest features is the ability to create clickable prototypes, very quickly. Having a clickable prototype meant that the client could interact with pages and click links and buttons. This gave them a better understanding of how the page flow worked and the interactions that were taking place on each page. We also used Axure to produce a functional specification for the developers to use in building the internet banking site. Axure is not perfect, but it was the best tool for our needs because large teams could work on and contribute to the same project. Digital designers and Interface developers could also access the Axure prototype and look at the wireframes independently.
One of the most significant changes we introduced in our design was a move away from traditional navigation on a website to task-based navigation. Internet banking is very functional – you’re there to perform a task, pay a bill or someone, review your statement etc. You want to carry out the actions as quickly as possible and then sign out so you can get on with other things. You need to be able to access your account information such as your balance and statement quickly. At first the client was hesitant towards this change as the user base was very familiar with how to navigate around the website using the existing navigation. But eventually they warmed to our design because the design was tested with users using a clickable Axure prototype. This was just one example of where we pushed to create an improved user experience.
Learning’s
This has been the biggest project I’ve worked on so far at LBi. Both in terms of the size of the team, the budget and the time spent on the project. I’ve learned a lot, most notably how to work quickly and at a high quality, working within technical constraints and most importantly being brave with our ideas and recommendations and moving away from the norms of web design.
Very, very interesting reading! Large projects are challenging. Banking projects are scary, at least from server side infrastructure point of view.
Generally, large projects bring up the high risk of loosing track after developing few modules. Already built modules will risk to become stale as new requirements affect newly developed modules and design changes can not properly be implemented in existing modules. From UI perspective, this leads to design inconsintency, confusion, especially at the details level. Resources are limited, getting a large system implemented right demands an highly trained team and very, very good communication. Running, clickable prototypes are a must, either coded or tool-generated.
Axure is a very popular solution for prototyping. However, I hope you won’t mind if I point you to this tool called FlairBuilder, http://www.flairbuilder.com. It gives you the same capability of creating highly interactive prototypes, comprised of fully functional components like buttons, links, tabs, text and check boxes, etc. Although they have a plain wireframe look, the amount of interactivity you get allows you to do very complex usability testing.
You can try right away online at http://www.flairbuilder.com/demo or even try the free trial on your desktop. I hope you’ll find it useful!
Cheers,
Cristian