Vegapay approached our team to overhaul their website and enhance the usability of their digital products, aiming to boost conversions.
Our collaboration spanned across a spectrum of products, including their website and several dashboards tailored for diverse banking operations such as credit card management, loan collection application for their field agents.
Our objective was to provide scalable design solutions that facilitated easy customization, empowering banks and non-banking financial institutions to access cutting-edge technology seamlessly.
Improving User Experience Through Simplified Interactions
BUSINESS CHALLENGE
How might we improve the general user experience to increase their reach?
Lead Experience Designer
MY ROLE
Stakeholder Interviews
Design language system
Visual direction and UI design
Prototyping and Branding
Managing a team of 4 designers
Design QA
Capturing business goals, user needs and technical constraints
STAKEHOLDER INTERVIEWS
Conducted UX audit to identify and grade heuristic issues
Conducted virtual interviews with co-founders, product managers, and tech team for holistic perspective
Utilized affinity maps to extract common themes and resolve conflicting assumptions
Leveraged insights from themes to drive product and design decisions in brainstorming sessions
Collecting user pain points from staff and target users
KEY INSIGHTS
Vegapay’s business heavily involves developing data heavy dashboards catering to various user tiers.
I wanted to gather the complaints and concerns expressed by the users when interacting with existing products.
These insights combined with the stakeholder interview themes helped me define focus areas for the new design.
Target users belonged to the Banking Official persona within the age range of 25-50.
Uncovered intriguing insights as outlined
UX CHALLENGE
How might we ensure consistency and simplify the flows across all their products?
Streamlined User Experience
Simplify navigation and interaction for intuitive usability.
Data Visualization Clarity
Optimize data presentation for quick comprehension of key metrics.
Responsive Design for Accessibility
Ensure seamless access and usability across users of 35-50 years age group
01
02
03
Themes and implications
DEFINE
Brainstorm solutions
collectively
DESIGN THINKING
Created rough wireframes on paper for initial concept visualization.
Collaborated with stakeholders using FigJam to discuss and iterate on wireframes.
Incorporated feedback to refine wireframes and finalize screen designs for the project.
Test fast, fail fast, fix fast
WIRE-FRAMING AND TESTING
5+ web products and 1 mobile application
20+ prototypes
12 users across 3 states
SEPTEMBER 2023 -DECEMBER 2023
Story
Upon initiation, the primary focus was on the Client Management Dashboard, envisioned as an all-encompassing solution catering to Vegapay's diverse client base. Recognizing the need for customization, the dashboard was designed to accommodate various banking needs, ensuring adaptability and scalability.
Final Designs
WIRE-FRAMING AND TESTING
Client Management System
MODULE #1
Challenge
The multifaceted nature of the product posed several challenges. Ensuring seamless user experiences while accommodating numerous functions was paramount. A significant consideration was the mental model of users, ensuring that the steps were intuitive and did not overwhelm with cognitive load.
Additionally, features such as bulk data uploading from sheets and real-time card preview required meticulous attention to detail. Compliance with banking regulations further added complexity to the design process.
Solution
We prioritized user-centric design, leveraging research and iterative processes to refine the dashboard's structure. We tested with users at different stages of the process to get feedback. Use of micr interactions was also key. Bucketing the right sections together and breaking down complex flows ensured usability. Collaboration with stakeholders ensured alignment with business goals and regulatory requirements, resulting in a seamless banking experience for users while meeting industry standards.
Story
Transitioning from the Client Management Dashboard, the focus shifted to developing the Loan Collections System, a mobile app empowering Bank Field Agents to efficiently manage all loan collection tasks.
Loan Collection System
MODULE #2
Challenge
Designing a comprehensive mobile application with various functionalities posed significant challenges. Balancing usability while incorporating features such as expense recording, route optimization, and leave management required meticulous planning.
Solution
Adopting a user-centric approach, research was conducted to understand the needs and preferences of Field Agents. In addition, the app offered supplementary functionalities to enrich the agents' experience. These included recording and submitting expenses during trips, along with a digital process to track expense status. Additionally, it provided route optimization to ensure efficient collection drives. Other features encompassed leave management, account settings, and comprehensive insights into all collection visits.
Designed a scalable and versatile logo for seamless integration across digital and physical products.
Crafted a modern and minimalist logo, incorporating brand colors to maintain consistency.
Developed secondary assets for social media and communication purposes.
Established a detailed design system on Figma to ensure consistency and facilitate future expansion.
VISUAL BRANDING
Consistent branding and design system
Utilized UI micro interactions and animations to enrich user experience.
Strategically employed to guide users and encourage exploration of product features.
Enhanced usability through intuitive feedback and engaging visual cues.
UI ANIMATIONS
Efficient use of animations
LEARNINGS
Design is key in driving product decisions
Impact of Design Handoff on Product Quality
This project underscored the significance of refining the design handoff process for developers. Implementing a new design system and enhancing dev documentation reduced development time notably and fostered positive collaboration between teams.
Early Engineering Involvement
Involving engineering teams early in the design process mitigates rework by addressing technical limitations upfront, informing a more informed design strategy.
01
02
05
04
03
Importance of Effective Knowledge Transfer
Long-term projects inevitably witness team and personnel changes. To maintain efficiency amid tight timelines, my team scheduled regular meetings to organize project files, ensuring seamless knowledge transfer.
Strategic Planning for MVP Launch
Implementing a strategic MVP launch plan mitigates out-of-scope requests and ensures timely delivery of a high-quality product.
Continuous User Testing
User testing remains pivotal even after development, as design is an ongoing process of enhancing user experience. Prioritize collecting and incorporating user feedback to drive iterative improvements.
IMPACT
Positive results
and more to do
Vegapay website was successfully launched in February 2024.
XX% reduction in drop rate within one month of launch
XX% increase in lead conversions within one month of launch
