NatWest new visual brand identity. Image courtesy of FutureBrand
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
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
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
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
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
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
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
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
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)
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.