SkilloVilla

B2C

Checkout experience - Purchase simplified for SkilloVilla traffic

Streamlining transactions to boost conversions and user satisfaction on SkilloVilla

Introduction

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. It boasts collaborations with over 300 companies, high placement rates and attractive salary packages for its graduates. The courses cover a range of fields, emphasizing practical, real-life problem-solving skills.

My Role

I'm the lead product designer for this project. I collaborated product manager (Mohit) throughout this project.

Problem

SkilloVilla users are mostly students where they didn't had credit card and credit score. Here are the few other problems

PROBLEM 1

Restricted view to add any new feature

  • User can’t add multiple course

  • 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.

PROBLEM 2

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

PROBLEM 1

Restricted view to add any new feature

  • User can’t add multiple course

  • 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.

PROBLEM 2

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

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 (15 days) was divided in phases. Discussion was between Product Designers & Product Managers to decide the route taken to solve the problem. The purpose of these sprints is to align everyone on the same goal. To improve our consumer experience by solving our user's 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.

Data on user querries and time spent

These data is collected from business team and sales operation team

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.

Find me on

LinkedIn

Resume

Built with Framer

Runs on vibes