NatWest
Enabling 8 million customers to manage their spending through smart categories
Team
1 Designer
4 Experience Managers
My Role
Visual Design
UI & UX Design
Industry
Finance
Duration
8 weeks
The brief
As pockets start tightening as a result of the cost of living crisis, people are paying more attention to where their money is going. Offering a feature to categorise spending on a granular level helps customers to feel in control of their money by understanding their finances in a digestible way.
Challenges with the brief
Many aspects of this brief were already mapped out before involving design in the process. The design process involved working around and adapting to the infrastructure of how this feature would work as we were using a third party to push the categorisation capability. Some of the challenges were around data visualisation, user journeys and information architecture.
After experimenting with ideas, pushing back on requirements in favour of a better user experience and showcasing work to the client, we arrived at a simple yet meaningful solution.
Business objectives
Unique Visitors
An increase in unique visitors means that more people are aware of and using the feature, which in turns means greater engagement in the app
Setting a budget
An increase in the number of users setting up a category budget suggests that there is value in the categorisation feature, and that people want to be more in control of their spending.
Manual categorisation
We wanted to make it easy for customers to manually categorise uncategorised transactions so that their spending insights are as accurate as possible.
Exploration
An audit of the current experience and carrying out competitor analysis helped to identify gaps in the experience or opportunities for improvement in-line with the ask.
Four journeys to consider
The final flow considers 4 key journeys: onboarding first-time users, assigning categories, viewing categories and recategorising. The design process also took into consideration the presentation of data and unhappy paths.
The snapshot below shows the evolution of each of the four journeys as they were iterated upon and reviewed with experience managers, designers and tech. This process helped to drive meaningful conversations cross-functionally and uncover any gaps in understanding, as well as arrive at a solution that is meaningful to users and beneficial for the business.
Experience mapping
It was important to understand how the four key journeys were going to intertwine with each other. Iterating on this helped to bring clarity in the core functionality of each screen when designing the experience of the interfaces themselves.
Outcome
The mid-fidelity wireframes and journeys were finalised and signed off before moving onto high-fidelity screens. These were created in Sketch using design system components, and then reviewed by a UI designer to ensure that the screens were consistent with the rest of the app's design patterns.
Key design decisions
Introducing tooltips help guide the user through the changes in the experience without completely disrupting the flow of their activity in the app.
These are used sparingly at key points of change to help the user comprehend the new experience.
Previously, the only way for users to navigate between the months was to scroll left and right along the bar chart.
This capability has been maintained, however, arrows have been introduced to add an alternative method of navigation to give users more control, which is particularly beneficial for those who rely on assistive technology.
To reduce cognitive load and maintain the segmentation categories and subcategories, these were split into two separate destinations.
With the presence of the bar chart, a shorter list beneath means users can scroll up to the bar chart with ease, as opposed to scrolling up and down a list of 70+ subcategories.
The architecture of the previous budget indicator was inconsistent, meaning users weren't able to comprehend their progress easily.
Revising the structure to be consistent, whether a user has set a budget or not, means that users can quickly interpret their spending in relation to their budget, reducing cognitive overload.
When recategorising a transaction, users need to be able to select a category and subcategory from the entire list available.
Listing these out all in one would require a lot of scrolling. Accordions were implemented to chunk up the list and reduce the number of items visible at one time. This helped users easily navigate through the list and select a subcategory with minimal friction.
Impact
Unique Visitors
1.57m new visitors in the spending tab (+25%)
in the first 3 months
Setting a budget
10.1k new users setting up a budget (+7%)
in the first 3 months
Manual categorisation
145k manually categorised transactions
in the first 30 days