The Project

As TSB’s only UK-based UI designer, I was responsible for managing a team of four offshore designers based in India. One of the key challenges I faced was that the app’s UI had previously been led by UX designers, which resulted in inconsistencies across different user journeys. Although the app utilised components and colours from the design system, they weren’t assembled in a consistent way, making it feel like different teams had designed various parts of the app. This lack of cohesion impacted the overall user experience.

Accessibility was also an area that had been largely overlooked until 2022, when the app introduced screen magnification support and launched its tablet version. Up until then, accessibility considerations had not been a priority, which presented a significant challenge in delivering an inclusive experience for all users.

My primary goal was to improve the UI of the TSB app, with the vision of creating a ‘best in class’ user experience. This included addressing existing accessibility issues through reskins and ensuring that the user interface was cohesive, intuitive, and familiar to users, making navigation seamless and consistent across all journeys.

Previously, UI designers at TSB were brought in primarily as a ‘clean-up’ crew after a product designer had already created a high-level flow for a project. Their role was limited to refining and polishing the designs rather than being involved in the early stages of the design process. When I joined, I shifted this dynamic by taking on a consulting role during the discovery phase of projects. I worked closely with stakeholders to help them estimate the design effort required for each project, ensuring better resource allocation. I also provided guidance on which components to use and suggested existing design patterns that could either be replicated or improved.

In my role, I define the interaction and final interface design for all journeys, ensuring that every detail—from the imagery used to the button hierarchy—is thoughtfully crafted and validated through user testing. This approach ensures that the user interface is not only visually appealing but also engaging and intuitive for users.

For each project, I embed myself within the feature team, collaborating directly with stakeholders, designers, copywriters, and developers. Additionally, I regularly attend QA review sessions held every sprint to troubleshoot any issues with developers, ensuring the design is implemented accurately and functions as intended.

I established design standards to ensure consistency across all projects moving forward, with a particular focus on improving error screens and celebrating happy moments in the UI, such as payment confirmations and interactions within the benefits hub. For error screens, I replaced the repetitive yellow triangle icon with unique illustrations tailored to each type of error, enhancing the user experience by making error messages clearer and less frustrating. Additionally, by incorporating more thoughtful design into positive user interactions, like payment confirmations, we aimed to create a more engaging and enjoyable experience for users.

Interface errors happen unfortunately
- previous error screens were tech heavy in lingo and had rage-inducing copy
- we soften the blow