GOAL
Redesign company product "Vanguard Backstage" to make more successful demos.
What is a Vanguard?
It is an end-to-end Flexible, Integrated, Modular, and Intelligent Digital Lending Origination platform from Customer journey origination through in-principle sanction and up to disbursement. Vanguard is a visually driven zero-code platform that can be effectively managed and operated by the bank’s business and IT staff.
What is Vanguard Backstage?
Vanguard Backstage Application is where they handle all customer-related documents and information. Once documents are verified with respect to the information provided by the customer, then the loan is approved.
Who uses Vanguard Backstage?
Backoffice users of a bank.
What are my roles in this redesign?
My roles in this redesign are User Research, User Analysis, Sketching, wireframing, Prototyping and Visual Design.
Team Size: 3
Project Time Period: 4 Weeks
Tools used: Adobe XD and Useberry
Domain: Banking and Finance
OLD VANGUARD BACKSTAGE DESIGN
Challenges before project
1. Lack of understanding of bank business workflow.
2. Only one designer in the company and has to handle multiple projects. Example: Doing POC, Sharing Graphic Resources.
3. Technical issues need to resolve. Example: Laptop performance, Software I use performance
MY UX Design Process
1. Design Breakdown
2. User Research
a. User Survey
3. User Analysis
a. User Persona
b. Identifying key problem areas
4. Sketching
5. Lo-Fi and Hi-Fi Wireframe
6. Visual Design
7. Result
2. User Research
a. User Survey
3. User Analysis
a. User Persona
b. Identifying key problem areas
4. Sketching
5. Lo-Fi and Hi-Fi Wireframe
6. Visual Design
7. Result
1. Design Breakdown
By analyzing the old design I planned to break it down to understand and create a survey. This helps me understand the definitions and purpose of each section.
What is this screenshot about?
A customer loan application details. It undergoes loan process steps.
A customer loan application details. It undergoes loan process steps.
Who verifies and approves loans at a bank?
Underwriter. An underwriter is a loan officer who evaluates a loan application to determine whether it is viable for the bank. The underwriter assesses the financial history of a client to check whether they are a risk worth taking.
Underwriter. An underwriter is a loan officer who evaluates a loan application to determine whether it is viable for the bank. The underwriter assesses the financial history of a client to check whether they are a risk worth taking.
2. USER RESEARCH
a. User Survey
We sent a quick survey to 10 Users of Bank Backoffice who use this application and here is the result we found.
Why user survey?
Because we don't have many resources in our office to conduct user interviews. We have chosen a user survey as a quick and fast method without disturbing users of bank.
"Here we got 30% Overall Customer satisfaction"
3. USER ANALYSIS
a. User Persona
b. Identify Key Problem Areas
According to a short survey and persona, we found that these are the key problems user is facing.
1. Vanguard Backstage UI design is not intuitive and outdated. Example:-
a. UI Loan process steps are confusing.
b. Titles of every section are not highlighted.
c. Notification section takes up a lot of space.
2. Application is not mobile-friendly.
4. SKETCHING
I have taken some inspiration from Behance and dribble then done some quick sketching.
5. WIREFRAMES
a. Lo-Fi Wireframe
b. Hi-Fi Wireframe
6. VISUAL DESIGN
Visual Design was done on Adobe XD and icons are collected from the noun project.
7. RESULT
5 Second Test Results:
We have 5 Users ( Bank Backoffice ), whom I have sent this "5 Second Test" link. To find out the
how quickly they can understand this screen.
how quickly they can understand this screen.
We divided it into 2 groups "Got It" and "Didn't Get It".
Test #1
Got It = 60% ( 3 Users have re-opened the test link )
Got It = 60% ( 3 Users have re-opened the test link )
Test #2
Got It = 80%
Got It = 80%
What was the overall customer satisfaction?
There was an increase of 50% in CSAT.
There was an increase of 50% in CSAT.
What do I learn from this journey?
1. Always learn the definition of the product sections.
2. Interact with developers and team members for a better understanding of the situation.
3. Collect some sample screens of other competitors and think about why. Example:-Software Advice and Mobbin websites helped me alot.
4. Learn quick-to-fail methods like the 5 Seconds Test.
2. Interact with developers and team members for a better understanding of the situation.
3. Collect some sample screens of other competitors and think about why. Example:-Software Advice and Mobbin websites helped me alot.
4. Learn quick-to-fail methods like the 5 Seconds Test.