Designer
NatWest new visual brand identity. Image courtesy of FutureBrand

NatWest & RBS Digital Rebrand (2017)

In 2017 NatWest and Royal Bank of Scotland went through a major brand redesign. A new strategy and visual language were introduced, and they approached Sapient Publicis (formally SapientNitro) to roll-out a digital brand experience in line with the new brand strategy.

I joined Sapient as a User Experience Manager consultant and with the team worked onsite collaborating with the key stakeholders and our tech partner Accenture.

Focusing on only a few products offers, we started by auditing the entire journey both from the perspective of the user and the content creator (journey manager). The main challenge was to optimise the end-to-end flow for prospects & customers for a better self-assistance and to improve the quality of the digital experience by giving the right tool for the journey manager to design with purpose and consistency.

NatWest new visual brand identity. Image courtesy of FutureBrand

NatWest new visual brand identity. Image courtesy of FutureBrand

Screenshot of the NatWest website

Screenshot of the NatWest website

Since the beginning, one of our aims was to help users to find what they were looking for easily. A lot of effort has been allocated to the architecture information and graphic design.

A user-journey mapped out for an auditing workshop

A user-journey mapped out for an auditing workshop

We kicked-off the project by analysing the old website with qualitative and quantitative researches. Data from the analytics were used to map out the most common user journeys and screen recordings to analyse the behaviour of people on those pages. All this knowledge helped us to understand where the website was performing or not and why.

A heatmap analysis of the old website

A heatmap analysis of the old website

Heat map visualisations were used to understand user engagement and site interaction. We collect data from click, move and scroll heatmaps and combined with other information to highlight valuable behaviours.

AEM components analysis

AEM components analysis

An important task during the research and discovery phase it was a deep scanning of each component used by the journey manager. We audit all of them one by one, measured the number of the time they were been used, how and why. We needed to understand what the content creator was trying to achieve so we could build new purposeful components tailored around the client’s needs.

Example of a user task flow

Example of a user task flow

One of the biggest challenges was to create a library of features that has to work with both NatWest and RBS banks, even when the brands were offering different product solutions. It was essential to compare and contrast those journeys and understand how they were different. We noted all the founds in a product backlog as acceptance criteria.

UX and design workshops

UX and design workshops

Our team had an ongoing collaborative relationship with the stakeholder. We invented them to be part of the solution and design with us. This approach was a critical part for this project; it allowed us to reduce uncertainties, make sure the client was comfortable with the solutions and reduced the number of formal presentation (that can be a waste of time).

Components grouped by purpose

Components grouped by purpose

During our researches, we fund out that content creators were calling content components by their purpose and not by their functional name (e.g. “feature description” vs “rich text editor”). We decided to group and reorganise all of them by macro categories that could help anyone to find what they were looking for, reduce components misuse and encourage the discoverability and usage of new components.

Wireframe prototype designed with Axure

Ideas were constantly tested by implementing them into a prototype designed with Axure. The prototype evolved sprint after sprint from lo-fi placeholders to real components with real content and UI design. At each stage of the work, we used the prototype as a testing tool to validate design and content messaging.

Example of the product overview component and its design interactions

Example of the product overview component and its design interactions

Often we tested the same component with different design iterations measuring the architecture information, content value for existing customers and prospects and business KPIs.

Design / UX component documentation

Design / UX component documentation

Interaction design prototype design with Principle

Interactive prototypes were part of our final delivery to the development team. In many instances, we used Principle to document motion graphic design and components iterations.

Screengrabs of the live website (Jun 2019)

Screengrabs of the live website (Jun 2019)

After two years, our UX/UI design strategy is fully implemented on the NatWest website across all the range of products and services. These are some screenshots of the website.

Video of the live website (Jun 2019)