Back to portfolio

Case study · 03 / 03Edtech websiteUX/UI design

ApnaSchool

A course website that helps people pick the right level in seconds, then shows exactly what they will learn, who teaches it and when the next batch starts.

Client
ApnaSchool
Platform
Marketing website
Audience
Freshers to design leads (0–10 yrs)
My role
UX/UI design

01Overview

ApnaSchool runs live UI, UX and Product Design courses for freshers and for designers with 1 to 10 years of experience.

The website had two jobs: help a student find the right course for their level, and help schools and academies start a design department with ApnaSchool. Every page leads to one of two actions: Register or Request a call.

Challenge

Sixteen courses across four tracks and four levels, without overwhelming a first-time visitor.

Approach

Level first, then track. Every course card shows length, start date, modules and tutor.

Outcome

Five pages with a direct path from "which course?" to "Register".

4

Levels, from Beginner to Lead.

4

Tracks: Product, UX, UI and Development.

5

Facts on every course page: duration, format, schedule, start and seats.

2

Actions everywhere: Register or Request a call.

02Approach

Every course follows the six steps product teams use, at the depth that fits your level. The Culture page tells that story.

  1. 01

    UX Audit

    Review a live product and find where users drop off.

  2. 02

    Research

    Talk to users. Turn interviews and data into clear problems.

  3. 03

    Define

    Frame the problem, set success metrics, decide what to build first.

  4. 04

    Design

    Flows, wireframes and UI in Figma, with AI tools where they help.

  5. 05

    Test

    Prototype, test with real users, then fix what doesn't work.

  6. 06

    Ship

    Hand off to developers, launch, measure and improve.

03Key screens

Four pages from the website.

Course detail page: Product Design, five course facts, modules and tutor
Course detailFive facts up front: duration, format, schedule, next start and seats. Then the modules, the tutor and the certificate.
Home page: teal hero, numbers, tracks by level and student stories
HomeA teal hero, proof in numbers, tracks by level, student stories and answers to common questions.
Find course page: four level cards, track filters and course cards
Find coursePick a level, then a track. Every card shows length, start date, modules and tutor.
Partners page: start a design department with us
PartnersA separate path for schools and academies: four steps and one call to action.
Find your courseChoose a level and a track, and the course list updates.

04Design system

Friendly, clear and consistent.

Design system: Poppins typography, six colours (Teal #00DEBD, Ink #101212, Sky #DDECF6, Blue #083AED, Mist #ECEEF4, Paper #FFFFFF), buttons, filter pills, chips and the course card

05Deliverables

Pages

  • Home
  • Find course
  • Course detail
  • Culture
  • Partners

UX

  • Information architecture
  • Level-first course finder
  • Course page structure

UI

  • Type & colour system
  • Course and level cards
  • Buttons, pills & chips
  • Responsive layouts

Content

  • Course facts
  • FAQ
  • Partner program
  • Student stories

06All pages

One clear path across every page.

Next case study · 01 / 03 Daal Scene Daal Scene case study preview