The same catalogue of degrees, doctorates and certificates, walked into three ways: as a fourteen year story, as a night sky world, and as a gallery you hold and drag. Every design below is live. Scroll, click and drag inside the frames.
The three concepts
A scroll story that follows one learner from a village school to a doctorate.
Narrative / scrollA full site in a dusk to dawn world, for people who learn after the working day.
World / multi pageEight flagship programs on a draggable strip, each with its own colour and sound.
Gallery / dragConcept 01 / Narrative
Instead of a catalogue, the homepage tells a story. A single red thread runs from Kodihalli in 2012 through a degree, a certification, a PG, a master's, placement, study abroad and a doctorate. Each chapter pins, draws its line illustration, counts the year forward and lands a real program card. The finale zooms out to a canvas of thousands of lines like hers.
Scroll inside the frame to move through the chapters. Use the tabs at the top to follow Arjun instead.
The flow
The village draws itself in, the sun rises on scroll and the red thread starts at the bottom of the screen.
Headline words rise from masks, the year ghosted behind counts up, and a program card lands last.
Scroll turns sideways. Free courses and workshops slide past on a track that fills with red.
The thread becomes a flight path and a plane follows it from Bengaluru to San Francisco.
Her line draws first, then thousands of others. The counter runs to 100,000+ and ends on program chips.
Concept 02 / World
A complete multi page site built on one idea: the people upGrad serves study in the evening. The palette runs from night ink to dawn amber, programs become stars in a constellation grouped by domain, and the admissions route is a road with a walker on it. It carries a working filter, a shortlist drawer, program detail pages, stories and a small game.
Jump straight to a page from the flow below, or navigate inside the frame.
The flow
A sky loader, the hours of a working week, then a constellation where each domain lights its programs.
Filter by credential, field and duration. Results count live and every card can be saved.
A detail page breaks the months down, lists what you get, and suggests close alternatives.
Hearts collect programs in a drawer that follows you across every page.
Stories from managers and founders who studied mid career, with video.
Concept 03 / Gallery
A focused way to browse the flagship catalogue. Program posters sit on a strip you hold and drag, scroll or step with the arrow keys. The poster pattern encodes the field, the ambient light shifts to each program's own colour, and an index and detail panel sit either side. Sound is optional and off by default.
Click the frame first, then drag or press ← → to move between programs.
The flow
A short intro names the eight programs and a tips card explains how to move around.
Posters tilt and scale as they pass the centre. The background light takes on the new program's colour.
The side index and the bars below go straight to any program, from the DBA to General Management.
A full panel shows partner, type, duration and what the program covers, with a next program link.
Side by side
| One line | After Hours | Programs | |
|---|---|---|---|
| Leads with | A learner's story | A mood and a promise | The programs themselves |
| Movement | Vertical scroll, pinned chapters, one sideways section | Page scroll plus routed pages with curtain transitions | Horizontal strip by drag, wheel or arrow keys |
| Main interaction | Choose whose story to follow | Filter, save to shortlist, open a program | Browse, jump from the index, open a panel |
| Colour world | upGrad white and red, dark chapters for night | Night ink to dawn amber, stars in domain colours | Black stage, one ambient colour per program |
| Signature moment | Thousands of lines drawing out from one | Programs as a constellation | The ambient light changing as a poster centres |
| Scope | Single page | Full site: home, programs, detail, stories, free courses, help | Single view with panel |
What holds them together
Design system red, highlight purple on the chapter rail, pink for chapters already passed.
--red #ee2c3c / --highlight #6a11b0Ink blues for night, amber for the glow of a desk lamp, cream for type.
--ink #080b22 / --amber #ffb547A neutral black stage so each program's own ambient colour carries the screen.
--black #000 / --red #ee2c3c