NatWest
NatWest
NatWest
As one of the "Big Four" banks, NatWest is a leading retail and commercial bank in the UK. It is part of the NatWest Group and serves millions of customers with various financial services, including personal banking, business banking, loans, mortgages, and digital banking solutions.
Year
2019
Role
UI Design
Project length
12 months
Team
Project Manager
2 x UX Designer
2 x UI Designer
Lead Designer
Head of Design



Problems
The current design system is not structured well, which makes it hard for other designers to use.
It is difficult to categorize spending, track overall trends over the months, and manage each card easily.
The app does not have dark mode, even though this feature is available in iOS 13.
A new look and feel could improve the overall experience for users.
The current design system is not structured well, which makes it hard for other designers to use.
It is difficult to categorize spending, track overall trends over the months, and manage each card easily.
The app does not have dark mode, even though this feature is available in iOS 13.
A new look and feel could improve the overall experience for users.
Solutions
Improved the Design System to make it more efficient and scalable.
You can now easily categorize your spending and track your monthly expenses using a simple navigation chart.
Designed the dark mode with a focus on readability and accessibility while using NatWest's brand colours.
Refreshed the interface to give it a more modern and user-friendly look.
Improved the Design System to make it more efficient and scalable.
You can now easily categorize your spending and track your monthly expenses using a simple navigation chart.
Designed the dark mode with a focus on readability and accessibility while using NatWest's brand colours.
Refreshed the interface to give it a more modern and user-friendly look.
The library is user-friendly. Symbols and components can be located easily by browsing the iOS and Android sections, modifying them with overrides, and adapting their size for various devices. Each element retains the authentic style of its respective operating system.
The library is user-friendly. Symbols and components can be located easily by browsing the iOS and Android sections, modifying them with overrides, and adapting their size for various devices. Each element retains the authentic style of its respective operating system.



I consistently provide developers with pixel-perfect screens using an 8px grid, keeping them updated through Zeplin or InVision. I also organize everything neatly by creating separate sections for different projects.
I consistently provide developers with pixel-perfect screens using an 8px grid, keeping them updated through Zeplin or InVision. I also organize everything neatly by creating separate sections for different projects.















Spending section
The spending section will help users understand where they spend money in specific categories, which will help them manage their finances.
The spending section will help users understand where they spend money in specific categories, which will help them manage their finances.






Current account and Manage cards
I worked on different app features for both mobile and tablet.
I worked on different app features for both mobile and tablet.


















After introducing a new feature, I ran user tests with UX researchers. My role was to create prototypes for each feature and then regroup them into one prototype accessible to the user through a simple index. After writing down all the positive and negative feedback, I could reiterate the design to implement something better.
After introducing a new feature, I ran user tests with UX researchers. My role was to create prototypes for each feature and then regroup them into one prototype accessible to the user through a simple index. After writing down all the positive and negative feedback, I could reiterate the design to implement something better.
Dark mode
When iOS 13 was released, we had to address the introduction of the dark mode. The most challenging aspect was ensuring readability on a dark background. To tackle this, I successfully resolved the issue by creating new brand colours for the dark mode that passed the accessibility WCAG standards.
When iOS 13 was released, we had to address the introduction of the dark mode. The most challenging aspect was ensuring readability on a dark background. To tackle this, I successfully resolved the issue by creating new brand colours for the dark mode that passed the accessibility WCAG standards.






New look and feel
I desinged a user-friendly visual style with a minimalist design that simplifies navigation and delivers essential features to enhance the user's app experience.
I desinged a user-friendly visual style with a minimalist design that simplifies navigation and delivers essential features to enhance the user's app experience.















Copyright © Alessio D'Angelo
Let’s work together
Let’s work together
Let’s work together