Reserve Bank of India (RBI)
The objective was to revamp the user experience for client's website and mobile app users, which enhanced usability in the complete user journey. The client expected a rich, modular, highly interactive, and turn-key solution based on the latest technology with a comprehensive future road-map to revamp its websites and mobile app (Android & iOS).
Overview
MY ROLE
UI Design, User Testing, Design System, Stakeholder discussions (Client, Dev team, Business Analysts, Designers)
DELIVERABLES
Adobe XD high fidelity design (Web, PWA, mobile), Design system, Development audits
DURATION
June 2022 - April 2023
Awaiting Go Live - 2024
TEAM
Experience Consulting, PwC India
CLIENT BRIEF
The current website suffered from poor discoverability and navigation issues with 2,00,000+ pages set in a complicated information architecture. These challenges impacted the bounce rates of the website and forced users to do a Google search to retrieve the information they were looking for. They wanted to redesign this experience keeping inclusivity and accessibility in mind and also bring in a modern touch while portraying the legacy of the bank.
Furthermore, less than 30% of the users were aware of the mobile app and the website UI was not optimised for a mobile.
OUTCOME
Created a design language for a new and improved brand identity and personality that resonated with the idea of ‘The Central Bank of Tomorrow’. By the end, created 70+ information architecture and 1800+ high fidelity screens in Adobe XD.
Post launch, the website will significantly improve on task completion rates, bounce rates, user session time, and NPS across cohorts. The mobile app is primed for increased usage rates amongst power users. As the project is yet to go-live, we performed preliminary user testing.
8.5/10
Avg. navigation experience
8.6/10
Avg. CSAT score
8.6/10
Avg. net promoter rating
The Transformation ✨
Objective
Enhancing the information structure of all digital touchpoints
Promote a user experience that is both intuitive and interactive for all user groups while maintaining synergy and uniformity across the website and app
Introduce features aimed at enhancing the overall functionality of the website and app
Contribute to the enhancement of the website and app performance by conducting SEO and traffic analysis based on selected benchmarks
Target groups
The wide base of the client's users were clustered into 4 key cohorts on the basis of their attitude to the website, and their key purpose of engaging with it
01
Followers
02
Guidance Seekers
03
Information Seekers
04
Information Super Users
Users who are associated with regulated entities need to adhere to the guidelines laid down by the bank e.g. Private Banks, Foreign Exchange etc.
Businesses and organisations who seek guidance/direction to make key business decisions
Users who seek information such as news and exam updates, job opportunities etc.
Users who conduct detailed analyses and/or processes information and data on the website e.g. Academicians, Researchers etc.
3-Fold Challenge
The client has a website and a mobile app. Both act as powerhouses of information for the general public but are cumbersome to navigate, forcing users to use other sources. Reimagining their digital footprint was a complex task that presented 3-fold challenges.
Catering to diverse user needs and preferences
The bank caters to all types of users - regulated entities, students, bankers, policy makers, citizens. Each user group has unique tasks, pages and published content they access. It was clear that a one-size-fits-all solution would not work and each user’s needs must be studied deeply.
How might we make it easy for different users to perform unique tasks on a central bank website?
Balancing stature vs. modernity
The current design language for the app & website was outdated and lacked visual interest. More importantly, the design needed nuance & finesse that went beyond enabling task completion & left a lasting impact in the user’s mind.
​
The design system needed to strike a balance between communicating the bank’s legacy, consistency, authority but also gives the feeling of inclusivity and a modern outlook.
How might we create designs that balance out the sensibilities of the bank and communicate stature, mass appeal making it memorable?
Experience that aids information discovery
The website & app are not optimized for information discovery. The website needed to ensure that the mass wealth of files & policies that currently lie locked away on the website are made super accessible to the user and the information should be presented in a consumable way as well.
How might we enable easy and user-friendly information dissemination and management using the website & mobile app?
Our vision
Seamless user journeys
State of the art navigation
Drive intuitive information discovery through universal and distinctive design
100% Accessible
Memorable design
A robust design system
Font selection
Use of Noto Sans and Libre Baskerville for a multilingual design
Colours
The primary color palette includes complementary shades like blue, yellow, white, and neutrals, creating a harmonious fusion of boldness and fresh energy.
Components
Our design
A unified, inlcusive experience for everything digital.
More Visual
Unnecessary visual complexity was removed to decrease cognitive load
Synergy & uniformity
Aimed at providing a consistent, synergised experience across all platforms
Reduce Cognitive Load
Uses more images, videos, icons, infographics, and graphical data to improve the user experience and reduce cognitive overload
Use of White Space
Clean, simple and minimalistic design
Intuitive & user friendly
Improved navigation, information architecture, and usability, including an enhanced search experience and streamlined sitemap organization
Accessibility
Easy toggle between dark/light theme and text resize to 125% for a truly inclusive user experience
Prominent CTAs
Powerful imagery with clear indication of function & call-to-action. Colour and an underline were used to clearly indicate the link to people who are colour blind.
Use of Colour and Contrast
Bold yet purposeful use of colour representing authenticity & stature
Designing for All
Accessibility is not a 'business requirement' but part of design
Designed to be intuitive, accessible, and beautiful.
Every component was crafted with usability in mind, as well as being WCAG AA compliant with a minimum contrast ratio of 4.5:1.
Text resize, light and dark mode integration
Seamless toggling between light and dark modes, plus easy text resize upto 125% for a personalised experience.
Bridging boundaries with multilingual integration
Selected fonts suitable for multiple languages with excellent readability
The Impact
80
/100
Net Promotor Score has gone from 2/100 to
A new and improved brand identity and personality which was engaging and accessible
95% +
Task completion rate has gone up by
Simplifying the complex for a universally inclusive design, in sync with the bank's modern outlook & unparalleled legacy
A robust design system created for not only the website and app but for all digital footprints
Catered to novice users and the experienced professional making it an inclusive design for all.
My learnings and takeaway
Working in collaboration with all
Balancing design requirements with development constraints while having regular design updates with the client was challenging but despite complexities, I gained valuable experience in delivering large-scale projects effectively by working in collaboration with designers, product managers, business developers, QA and web developers.
One size does not fit all
As each page was unique and had a different purpose, it had to be adapted accordingly. This meant refining and adding new edge cases to the design system as it is an ever-evolving element. The design system should be such that it can be scalable.
Design and tech: a seamless partnership
Making aesthetic designs is not the priority but instead it should be functional and meet client requirements. To do this, I had regular check-ins with the development and business teams to understand technical feasibility and work arounds to create feasible, functional and aesthetic experiences.
Quality control while managing time
Attaining pixel-perfect precision demanded meticulous quality control, essential for conveying precise requirements to the development team.
Psss! I got a debut award for showing exceptional capabilities :)
Thank you for reading it till the end!
