Project
Overview
As India’s largest public sector bank, SBI serves millions through platforms like Yono Lite, its mobile banking app for managing accounts, payments, and transfers. This project reimagines the Yono Lite experience by simplifying flows and enhancing usability. With insight-led UX improvements and a modern visual refresh, the new design delivers a clearer, more intuitive, and engaging banking journey.
Client
SBI YONO
Team
UST Global
Role
Lead Visual Designer
Year
2024-25
Challenge
The challenge was to streamline complex banking journeys and transform them into a more intuitive, user-friendly experience. Our focus was on simplifying the flow, enhancing clarity, and elevating the overall visual design to make interactions more engaging and effortless for SBI’s diverse customer base.
01
Solution
We conducted user research and interviews to uncover key pain points. Insights from this process guided a complete restructuring of the flow for better intuitiveness. We then executed both UX refinements and a visual uplift to create a modern, engaging experience.
02
Research Insights
Primary Observations
User Interviews
Direct user feedback highlighted that the registration process felt lengthy and cumbersome. Users also expressed that the app lacked personalized features tailored to their behaviour. This resulted in a sense of effort and friction right from the onboarding stage.
The app’s features feel generic and not aligned with my usage behaviour. It doesn’t adapt to my needs or surface the actions I perform most frequently.
Thufail Mehraj
User since 2018
The registration process felt cumbersome, and the login experience was unintuitive. This friction & made onboarding more difficult than it needed to be.
Ravi Kambalakatta
User since 2022
Yono Lite App feedback
We analysed existing user reviews to uncover recurring concerns around navigation, interface clarity, and connectivity issues. Many users also highlighted frustration with frequent or forced updates. These insights helped pinpoint key areas that required redesign and optimisation.
I've had a very frustrating experience with the SBI YONO app. One of the most annoying issues is that every time I press the back button, the app asks if I want to quit. If I wanted to quit, I would know how to do that. I simply want to go back, not exit the app. This constant interruption is highly inconvenient and disrupts the user experience. Moreover, the user interface is not pleasant. It's clunky and not intuitive, making navigation a chore rather than a seamless experience.
Anwesha Kumar
02y ago
1.5/5
The app is not user friendly. Most of the time it doesn't connect at all. Some error or other. Even if the app is not updated, atleat it should open, giving chance to the user to update it at their convenience rather than forcing them to update immediately. It hampers the work we do. poor service...need a more user friendly & efficient app. Overall worse experience. 👎
Karan Yadav
03m ago
2/5
Difficulty locating key features shows the app’s navigation isn’t intuitive.
A complex, time-consuming onboarding experience limits adoption and needs simplification.
Multi-step simple tasks frustrate users, showing the need for a more efficient flow.
The generic dashboard doesn’t reflect user preferences, indicating room for personalization.
Identified Opportunity Areas
Streamline banking processes to help users achieve their goals quickly by reducing steps and eliminating unnecessary complexity.
Simplify & enhance task flows
Follow global standards for a consistent, high-quality banking experience, applying usability and design best practices across all devices.
Adhere to global design principles
Highlight key banking actions with intuitive design to make important features prominent and easily accessible.
Bring emphasis on core actionables
Customize the interface to suit user preferences, providing personalized banking features and content based on behavior and feedback.
Build tailored & adaptive experiences
Ensure the app is accessible to all users, regardless of age or digital familiarity, by prioritizing financial literacy and inclusive design.
Focus on financial inclusion & accessibility
Optimisation
Personalisation
Universal
Accessibility
Prioritization
Key Impacts
Wireframe Approach
Visual Execution
The visual strategy focuses on creating a cleaner, more modern interface that reduces friction and enhances usability. By introducing clearer hierarchy, simplified navigation, and personalized visual elements, the design aims to make key actions more accessible and intuitive. A refreshed colour palette, improved iconography, and consistent layouts work together to build trust, improve clarity, and deliver a more engaging, user-centric banking experience.
Design Strategy
The typography focuses on improving clarity and readability across all screens using a clean, modern typeface with consistent hierarchy. Clear distinctions between headings, subheads, and body text help users scan information quickly, while increased spacing and improved contrast enhance legibility.
Typography
Approach
Effra is a clean, contemporary sans-serif typeface known for its geometric shapes and high readability. Its modern yet approachable form makes it ideal for digital interfaces, offering clarity at both small and large sizes.
Effra
Primary Font
Medium
Regular
Inter is a modern, highly legible sans-serif typeface designed specifically for digital interfaces. Its clean shapes, generous spacing, and refined proportions make it easy to read at any size.
Inter
Secondary Font
Light
Regular
Color Palette Direction
Yono Grade
#CF2164
#280071
SBI Purple
#280071
SBI Blue
#00A9E0
Lite Lavender
#F0F0FF
The pattern was developed using fundamental SBI brand shapes, drawing inspiration from their geometry and visual language. These elements were stylized into a modern, cohesive pattern that reinforces brand identity while adding subtle visual interest across the interface.
Pattern
Expressions
The color palette was refined by building on existing brand tones and enhancing them with a subtle gradient approach. This creates a more modern and vibrant visual identity while maintaining familiarity. The updated colors improve contrast, guide attention, and help establish a more engaging and cohesive interface throughout the app.
Interactions & Prototype
The interactive prototype showcases the complete visual design system along with smooth transition animations. It brings the redesigned experience to life, demonstrating improved navigation, personalized flows, and enhanced visual elements through engaging, real-time interactions.
User Interface Design
