Date: 2023 - 2024 | Device: Mobile app / Tablet | Team: PM, BAs, UX, Visual lead, Tech team
Services: UX UI, Concept ideation, high-fidelity prototypes, User journey
Project overview -
TYL is a B2B banking app streamlining financial operations by integrating dashboards, payment tracking, and invoicing into one platform. It simplifies management, enhances transparency, and boosts efficiency for businesses of all sizes.
Problem statement -
Small businesses struggle with complex payment systems that disrupt their workflow and growth. NatWest TYL aimed to change that by designing a simple, reliable platform to streamline payments, manage transactions, and provide insights that empower businesses to make better decisions.
The goal was to create an intuitive, all-in-one solution that simplifies financial tasks, making them easy and stress-free for users managing their financial activities.
The Challenge -
How might we...
....simplify business financial management by seamlessly integrating dashboards, payment tracking, and invoicing within a B2B banking app?
....design a B2B banking app that prioritises security without compromising usability?
....enhance transparency in financial management for businesses through clear and intuitive features?
....boost operational efficiency for businesses using the B2B banking app?
Concept overview
My role -
I was responsible for the app’s visual design and user experience. Collaborating closely with UX designers and business analysts, I helped shape the concept and crafted a high-fidelity prototype for NatWest, ensuring the design aligned with the client’s vision.
Key Contributions
UI Design: Crafted a cohesive visual style with brand-aligned colours, typography, and iconography, ensuring a polished, intuitive interface that enhances usability. I partnered closely with the visual design lead to finalise the app's overall look and feel, ensuring a cohesive, polished design that balances brand identity with a user-centred approach.
High-Fidelity Prototypes: Developed and iterated on prototypes that brought the app's functionality to life, incorporating stakeholder feedback to refine the user experience.
Cross-functional Collaboration: Worked closely with Business Analysts and UX designers to align UX solutions with business goals, ensuring the design served both user needs and strategic objectives.
Features overview
Stage 1
Visual exploration -
Before diving into UX solutions, I explored several design directions to solidify the visual style, ensuring alignment with the brand and user needs.
These explorations clarified the overall touch and look, shaping the visual language and guiding essential design decisions.
These explorations helped refine the visual language and guided vital design decisions.
UI exploration
Crafting dynamic opening
I experimented with the opening animation, incorporating brand colours and creatively exploring various elements to achieve a dynamic and engaging introduction.
This exploration aimed to reinforce brand identity while delivering a visually appealing user experience. Crafting
UI Decision -
After collaborating closely with the visual lead, we chose the final design to ensure it aligned with our goals.
The decision to implement a dark mode with high contrast was driven by the need for better readability and user comfort, especially in low-light environments.
Compared to the traditional white mode, this approach enhanced visual clarity and reduced eye strain, delivering a more accessible and engaging experience.
Final decision (Visual)
Stage 2
UX Solutions -
After we finalised the visual style, we shifted our focus to crafting comprehensive UX solutions. Working closely with UX designers and business analysts, we mapped and mocked up the entire user journey to address key pain points and meet business needs.
Integrating features like real-time dashboards, streamlined payment tracking, automated invoicing, and an AI-powered chatbot into a cohesive and intuitive experience.
By aligning the visual direction with the UX strategy, we delivered a seamless and engaging platform that reinforces the brand and enhances operational transparency for businesses of all sizes.
Onboarding
A simple, secure, and user-friendly login experience, ensuring quick access while maintaining strong security measures.
Login/Sign up
Set up for first time users
A two-step setup process for first-time users ensures a simple and intuitive onboarding experience while maintaining ease of use and security.
First time set up
Dashboard
Customisable Dark Mode Dashboard
In collaboration with my team, I designed a comprehensive, user-friendly dashboard focused on enhanced readability and customisation. We used dark mode to reduce eye strain and improve visual clarity, particularly in low-light environments.
The dashboard consolidates critical information in one place, making it easy to manage and navigate. Additionally, we incorporated a flexible design that allows users to personalise their homepage layout and content based on their specific needs, creating a more tailored and efficient user experience.
Payment set up
Payment set up
The "Payment Setup" key screens guide users through a customizable journey to configure payment preferences tailored to their needs. Each screen is designed to offer flexibility and control, allowing users to set payment methods, schedules, and notifications.
From selecting preferred payment options to configuring reminders and security settings, the process is intuitive and user-friendly, ensuring a seamless experience while empowering users to personalise their payment setup according to their specific requirements.
The TYL AI Chatbot
The chatbot is an advanced virtual assistant designed to enhance the user experience by providing instant data estimations and facilitating seamless support. It offers quick and accurate financial estimations, helping users manage their B2B banking needs efficiently.
Additionally, the chatbot is equipped with smart escalation features that allow it to connect users with live agents for more complex inquiries or personalised assistance.
This dual-functionality ensures that users receive timely, relevant information while maintaining the option for human support when needed, thereby improving overall satisfaction and operational efficiency.
TYL AI Chatbot prototype
Conclusion
In my role, I am dedicated to ensuring that TYL meets and exceeds client expectations regarding usability and visual appeal.
By leveraging high-fidelity prototypes and a keen eye for design, I aim to create an app that is both a powerful tool and a pleasure for our B2B clients.