Design challenge | Product design

A Comprehensive Login/ Sign Up Flow 
for Users onboarding into a Fintech Platform

Client

Volopay

industry

Fintech

role

Product Designer

Timeline

2 days

Context

As part of the interview process at Volopay in Dec 2022, I was given a 2 day home assignment. Before we jump right in, here is a quick overview of the product.

the product
Volopay is a spend management platform and it helps businesses automate and control financial processes, providing visibility and efficiency in managing corporate spending.

This platform streamlines expense management and enhances financial oversight.
the USP
Comprehensive Expense Management
Real-Time Tracking and Reporting
Budgeting and Spend Control
Automated Invoice Processing
Multi-Currency Support and Corporate Cards
Seamless Integration Management‍
The problem statement

Build a comprehensive login/signup flow for users onboarding into a fintech platform.

i
The flow should consist of all the user-facing screens for the login/signup flow onto a platform.
ii
All use cases of the whole flow should be covered in detail.
iii
Login flow should be secure considering it’s a fintech.
The solution

A comprehensive Low-Fidelity Login and Sign up flow for a UPI payment application consisting of all the use cases covered in detail while being secure.

The Design Process

Following the design processes doesn't just give users an intuitive and pleasurable experience - it poses an opportunity for designers to iterate and improve their designs.

01. DISCOVERY

01. DISCOVERY

01. DISCOVERY

01. DISCOVERY

01. DISCOVERY

01. DISCOVERY

01. DISCOVERY

01. DISCOVERY

01. DISCOVERY

01. DISCOVERY

1.1 IDENTIFYING THE USER SEGMENTS

On examining the user segments of the Volopay application based on the type of spending, I was able to categorise them as follows:

Small to Medium-Sized Enterprises (SMEs)
Large Enterprises
Startups and Rapidly Growing Companies
Tech-Savvy Organisations
International Businesses
Remote and Distributed Teams
EXPECTATIONS OF THE TARGET AUDIENCE
i
Simplify the Process for startups and new users by reducing the number of steps and providing clear guidance.
ii
Offer Advanced Options for large enterprises, such as detailed customisation and integration setups.
iii
Ensure Mobile Accessibility for remote and distributed teams, making it easy to sign up and use the platform from any device.
iv
Provide Localised Support for international businesses, including multi-currency options and region-specific compliance information.
1.2 EXPECtATIONS FROM THE FLOW

Through user research, I identified that ease of use, efficiency, clarity, and data security are top priorities for users during the Sign-Up and Sign-In process.


Security and Trustworthiness
efficient and User-Centric Design

02. DESIGN

02. DESIGN

02. DESIGN

02. DESIGN

02. DESIGN

02. DESIGN

02. DESIGN

02. DESIGN

02. DESIGN

02. DESIGN

2.1 user journey

For the sign-up process, I focused on defining the key steps in the user journey and corresponding user actions to identify potential touch-points. This approach ensures a clear, structured flow from the initial inquiry through to ongoing support, facilitating a seamless user experience.

The Account Creation and Verification phase is the critical focus of the sign-up process. I broke down the user actions, along with their goals and experiences, to identify potential pain points.
This analysis highlights where improvements can be made in both the sign-up and sign-in flows, ensuring a smoother, more efficient user journey.

user expectations during the sign up process
user expectations during the sign in process
2.2 user flow

Now that we have a detailed step-by-step analysis of the user journey for both the sign-in and sign-up flows, the next step is to outline the ideal user flow. This will ensure users can efficiently navigate through each phase with minimal friction.

Ui Elements for the flow
Logging in
Intuitive, clean design with labeled fields.
Clear buttons for SSO with recognisable logos.
Simple, clear error handling instructions.
Highlighted message reminding users to check their email for verification.
sign up and information procurement
Clearly labeled and broken down steps with animations to enhance the experience.
Concise fields with drop-down for easy inputs and placeholder text.
Progress indicators showing completed and next steps.
Interactive navigation and smooth transitions.

03. DELIVERY

03. DELIVERY

03. DELIVERY

03. DELIVERY

03. DELIVERY

03. DELIVERY

03. DELIVERY

03. DELIVERY

03. DELIVERY

03. DELIVERY

3.1 design goal

Through user research, I identified that ease of use, efficiency, clarity, and data security are top priorities for users during the Sign-Up and Sign-In process.


ease of use
The interface should seamlessly guide users with intuitive, well-labeled elements that make navigation simple and clear, allowing users to focus on completing tasks.
efficient
Streamlined fields and progress indicators eliminate unnecessary friction, helping users complete the process quickly while maintaining clarity at each step.
secure
User security is prioritised with robust verification steps and clear instructions, ensuring sensitive information is protected without adding complexity to the experience.
3.2 wireframes
1. sign up flow

These screens focus on smooth step transitions, clear setup instructions, real-time feedback, and flexible options, enhancing user engagement and reducing drop-off rates.

2.

This wireframe follows a predictable and user-friendly pattern with clear input fields, document upload sections, and immediate verification methods for key details like phone numbers. The logical grouping of information and consistent use of buttons and tabs ensures ease in navigation and minimal user friction.

3.

The intuitive wireframe layout, with consistent elements like progress bars and structured form fields, guides users seamlessly through each step while offering flexibility for corrections or updates.

4.

The intuitive wireframe layout, with consistent elements like progress bars and structured form fields, guides users seamlessly through each step while offering flexibility for corrections or updates.

3.3 future considerations that could improve the flow

To improve the flow of the onboarding process depicted in the wireframes, here are two actionable suggestions that will enhance user experience, reduce friction, and increase engagement:

Autosave for Form Data
Current Situation:
It’s unclear if there’s any autosave feature in the current flow.
Improvement:
Implement autosave for form inputs, especially when dealing with long multi-step forms.
Reason:
If the user leaves the process, having their data saved allows them to resume without re-entering information, preventing frustration and abandonment.
Inline Validation & Assistance
Current Situation:
Some fields appear to have validation (e.g., password confirmation), but it could be more robust.
Improvement:
Implement real-time inline validation with instant feedback (checkmarks for correct formats, warnings for incorrect input).
Reason:
Immediate feedback reduces frustration. Without having to wait until form submission to see mistakes, users can fix errors immediately, streamlining the process.