Case study

Designing a document service for retail banking customers

Barclays Bank

Overview

Barclays wanted to provide customers with a service that enabled digital documents to be shared, organised and stored.

Barclays Cloud It was designed for online and mobile. It was integrated into the existing retail banking application to create a seamless user experience.

Customer segments

Existing Barclays customer segments and personas provided a focus for how the product could be used by target customer groups. They also informed usability testing recruitment to ensure we were testing with target users.

Three images depicting persona types — Customer segments

Feature definition

Based on discovery research and business requirements, features were defined, mapped and prioritised with the product owner and business analysts.

Diagram representing product features organised into categories — Product features

UXD process and methodology

There was a lack of understanding amongst stakeholders of the UX role. I created this diagram and walked stakeholders through it to give them greater clarity and understanding of UX, its methodologies and processes.

Diagram representing the UX team's process and methodology — UXD process diagram

Images representing each of the design principles: Focussed, Premium, Understated, Simple and Spacious — Design principles defined by the UXD team

Presentations

The design team regularly critiqued concepts and detailed design work. Show and tell sessions were run to present the progress to the broader stakeholder groups.

Steven Wise presenting a show and tell to stakeholders surrounded by UX artefacts stuck on the walls — Stakeholder show and tell

User journeys

Journeys were created for each feature and validated before more detailed screen-level designs were created.

User journey diagram — Example screen flows

Wireframes and specifications

Detailed documentation was required as we were working with a remote development team that would continue working on the product once the UXD team had been stepped down.

Wireframe diagrams — Example wireframes and specifications

Interactions and transitions

The application had many rich interactions. High-fidelity prototypes were created, demonstrating the interactions supported by detailed documentation.

Interaction and transition screen flow diagram — Example interaction and transition documentation

Mobile concepts and optimisation

An initial iOS app had been created by an external agency. I carried out a heuristic review of the app and then created new design options which were tested and incorporated into the app.

Mobile application wireframes — Home screen design concepts

Prototyping

The mobile prototyping tool Appcooker was used to rapidly test and refine the mobile app’s architecture, screen design and flow.

Mobile application prototype — Mobile app architecture

Future vision

The initial design and development focused on the core functionality of the product. The team were asked to provide a vision for how the product may evolve beyond this.

My concepts focused on creating an emotional connection with the user, linking the product with key life moments such as buying a house, having a child or going on holiday. Barclays Cloud It could become a safe and trusted place to organise and store away memories and essential artefacts related to life events.