Back
SkilloVilla | B2C
Streamlining transactions to boost conversions and user satisfaction on SkilloVilla
SkilloVilla is an online platform offering industry-aligned courses designed to enhance skills and ensure job readiness. With live classes, mentorship from top industry professionals, and comprehensive career support including resume building and interview preparation, SkilloVilla aims to bridge the gap between learning and earning.
My Role
I’m the product designer for this project. I collaborated with the product manager (Mohit Sharma) and my design manager (Anup Sharma) throughout this project.
Problem
SkilloVilla users are mostly students where they didn’t have credit cards and credit scores. These were the other problems.
Restricted view to add any new feature
Users couldn’t add multiple courses
Unnecessary info on the lift side of the screen is a distraction
Price break-up is missing (Tax info)
Focused element should be checkout info.
Operationally heavy
User’s has been sent payment link to third party gateway by the sales team. managed offline.
Cancellation and course payment was managed in excel sheets manually
Time consuming process to create sales report
Goals
To give user multiple payment options on the checkout page
Users should be able to add multiple courses/career tracks to the cart
Enable cardless payment options
Clear segregation between trade discount and additional discount has to be provided with tax info
Process
Design sprints were divided into phases to align product design and product management around a shared goal: improving the consumer experience by solving users’ problems.
Competitors research
I have researched on 2 direct competitors
Unacademy
Pre-defined part payment options (depending on ticket size)
No cost EMI options (Mobile authentication mandatory)
Multiple payment options are available.
Knowledgehut UpGrad
Pay after-placement options available on the PDP
Part-payment options available on the PDP
Low ticket size course have standard checkout with part payment options
Quantitative analysis
These metrics were provided by Ops team while having a discussion during the research.
User flows
I'm the lead product designer for this project. I have headed this project with product designer (Ruma) and product manager (Mohit) throughout this project.
Wireframes
A sneak peek into my wireframes
User details details & Part payment transaction
Scalable Components – Each component can be redesigned independently to support multiple flows on the same page.
User Details Pre-collected – User information is gathered upfront as the first step in the process.
Part Payment Triggered by Sales Interaction – The part payment option is initiated based on discussions with the sales representative and the student.
Order history
Consistent Visual Hierarchy Clean layout with clear section headers (e.g., Orders, Transaction History).
Navigation Tabs: Easy toggle between Orders and transaction history.
Segregated section: Part payment and full paid order are further differentiated keeping in mind multiple order placed (Course enrolled).
Impact
As this is a huge project, we released the new designs in phases (Current V1). I have omitted the actual values for these metrics.
