I’m Dhiraj ChouhanProduct Design Case Study
How I took Masters’ Union from a 20-page site to 150+ pages: an 8-finding audit, 12 traced design decisions, an atomic design system and a three-phase approval workflow.
/ Overview
I joined Masters’ Union as one of its first designers, when the school was barely a year old, and stayed four years. I worked directly with founder Pratham Mittal, growing from UI/UX Designer to Senior, and went on to lead an 8-person design team.
The brief looked like a website. The real problem was that one small team had to ship 10+ programs, 150+ pages and 70+ events, plus 70+ marketing campaigns, without quality or brand falling apart. So I treated it as three connected problems: the system, the program page and the way decisions got approved.
View Website
3 problems
Rapid growth exposed three problems. Each one needed a different kind of answer.
The site couldn’t handle the growing volume, creating bottlenecks in design and engineering.
Decision
Build the system before building more pages.
What shipped
A token-based design system with 16 component groups. One change updates every page.
The design failed to reflect the premium brand positioning, resulting in poor user engagement.
Decision
Rebuild the program page as a decision journey, with proof before the ask.
What shipped
An 8-finding audit, then 12 numbered decisions on the new page.
Complex approval workflows and file management issues caused friction with C-level stakeholders.
Decision
Make approval a system, not a conversation.
What shipped
Three phases with one file per phase, one approver and a clear exit gate.
6 methods
I used each method to settle a specific question, then traced what it changed.
| Method | With | Question | What it changed |
|---|---|---|---|
| Stakeholder interviews | Founders, managers, internal teams | What the business needed the site to do | Set the three problems above |
| Feedback review | Marketing and stakeholders | Where publishing and approvals broke down | Shaped the three-phase workflow |
| Behaviour analysis | Site user data | Where users lost interest or dropped off | Set audit priorities, such as the form (finding 6) |
| Competitive benchmarking | Competing programs | Where the page fell short of the category | Raised the bar for the visual language |
| Page audit | Existing program page | What exactly was failing, section by section | 8 numbered findings |
| A/B testing | Live users | Whether generic copy was doing its job | Three proof-led journeys (decision 7) |
5 stages
Outcome: Clear understanding of key pain points and opportunities for growth.
Impact: Simplified discovery of programs and content, reducing user friction.
Impact: Improved brand perception and empowered teams to maintain content quickly.
Impact: Reduced bottlenecks and improved project execution.
Outcome: Continuous enhancement of user experience and platform efficiency.
Before
Each number on the old page matches a finding, tied to a specific section so every fix could be traced back.
Findability
Finding Users could not easily reach a specific program. One all-in-one menu gave no hierarchy and no priority to special programs.
Direction A hierarchical navigation with global search, and visual emphasis on priority programs.
Addressed by decision 6
Action
Finding “Download Placement Report” was the only button. “Apply Now” was plain text, so the page pushed the secondary goal.
Direction Rebuild the hierarchy around the primary goal, with stronger copy and video in the background.
Addressed by decision 1, 3, 5
Proof
Finding The section gave blunt, minimal information. The journey and USP never came through.
Direction Tell the program’s value as a story, with key USPs, visuals and short snippets.
Addressed by decision 4, 10
Comprehension
Finding Tabs showed only course titles and professor names. No terms, and no split between in-class and out-of-class.
Direction Structure it by Term 1, 2 and 3, separate in-class from out-of-class, and add objectives and success stories.
Proof
Finding The school’s core promise was three static tabs. No context, no journey, no video of real outcomes.
Direction Three distinct sections, one per USP, with video snippets and student stories.
Addressed by decision 7, 9
Action
Finding Many users dropped off before submitting. Nothing explained what the form was for or what came next.
Direction Give every section a hook and one clear CTA, so the next step is obvious.
Proof
Finding Social handles were spread across separate thumbnails, with no single way to experience campus life.
Addressed by decision 8
Findability
Finding Few questions, low discoverability, no search and no categories.
Direction A searchable, expandable FAQ grouped by Program, Admissions and Placements.
4 themes
Grouped together, the eight findings were four problems.
People could not get to the program or answer they came for.
Findings 1, 8
Decisions 6
The page asked for the wrong thing, and gave no reason to continue.
Findings 2, 6
Decisions 1, 3, 5
The school’s strongest asset, real outcomes, was described and never shown.
Findings 3, 5, 7
Decisions 4, 7, 8, 9, 10
Dense information had no structure to read it by.
Findings 4
16 component groups
Built atom to organism, on tokens. One change, every page updates.
3 phases
Explore widely before anyone is asked to approve anything. Designers brainstorm, gather inspiration and produce multiple iterations for web and mobile.
Exit gate: one solid concept, moved to the Phase 2 file.
Pratham shares the design brief, explaining what’s needed.
Harsh, the designer, gathers the team or consults with the design head. They brainstorm ideas and discuss possible directions.
Harsh starts collecting inspirations, analyzing competitor designs and sketching out ideas.
Multiple design iterations are created-both for web and mobile views.
Once a solid concept is ready, Harsh finalizes the Phase 1 design and moves it to Phase 2 for approval.
One approver reviews the design in a dedicated file, so feedback lives in one place and is checked against the project’s vision before anything moves forward.
Exit gate: approved. Any change goes back to the Phase 1 file and is resubmitted, so the approved file is never edited directly.
Harsh shares the design with Pratham in the Phase 2 file.
Pratham carefully reviews it, ensuring it aligns with the project’s needs.
There are two possible outcomes:
Approved
Revisions needed
If changes were made, Harsh goes back to the Phase 1 file, completes the necessary edits and then resubmits the updated design in Phase 2 for re-approval.
Once Pratham is satisfied, the design is officially approved and moves forward.
All text, images and assets are finalized before development. Accuracy matters here, because any inconsistency reaches the final product.
Exit gate: an organized, annotated, export-ready file shared with engineering.
Harsh (the designer) reviews the approved design and ensures that all text, images and assets are finalized.
He checks if any placeholder content needs to be replaced with the final version.
He ensures that mobile and web versions have the correct typography, spacing and image resolutions.
The design is packaged and prepared with organized layers, developer annotations and export-ready assets.
The final file is shared with the development team for implementation.
/ 35 pages
Drag a page corner, swipe, or use the arrow keys.
Information architecture
We restructured the entire information architecture by grouping pages based on user intent rather than internal hierarchies. This makes it easier for users to find programs, understand offerings and move across sections without confusion.
After
Each number marks one decision on the page, why I made it, and the finding it resolves.
Decision Open on “Learn by Doing”, the core USP, in three words.
Why Primacy effect anchors perception early, and a simple phrase is recalled faster.
Resolves finding 2
Decision Show practitioners as faculty, and use the Cyberpark campus as the image.
Why Authority bias lifts trust, and context communicates credibility without text.
Decision Video is the first CTA, with the yearbook beside it for high-intent users.
Why Emotion first, reason later. Progressive disclosure keeps the ask light.
Trade-off Apply is no longer the first ask in the hero. It moves down to the admissions deadlines (5).
Resolves finding 2
Decision Lead the proof with placement numbers, plus the faces and names behind them.
Why Social proof makes outcomes feel real, numbers reduce doubt, and relatable profiles spark “this could be me”.
Resolves finding 3
Decision Countdowns and deadlines sit on the program cards, with tabs for programs, news and events.
Why Urgency nudges people to apply now, and tabs hold the rest back until it’s wanted.
Trade-off Urgency only works while deadlines are real, so it is tied to actual admission rounds.
Resolves finding 2
Decision Category tabs, with format, eligibility and deadline upfront on each card. Full details in 1–2 clicks.
Why Hick’s Law: fewer choices at each step, and faster scanning and comparison.
Resolves finding 1
Evidence A/B tests showed users ignored generic copy.
Decision Three tangible journeys, Dropshipping, VIP and Demo Day, each with metrics and video.
Why Chunking removes ambiguity, and proof builds trust faster than promises.
Trade-off Three full sections make the page longer. This is the USP, so it earns the space.
Resolves finding 5
Decision Vertical, edge-to-edge video in an auto-swipe carousel.
Why It uses the Instagram and TikTok habits users already have, which lifts time on page.
Resolves finding 7
Decision A scrolling timeline, with sticky media that swaps to match each step.
Why Linear progression reduces overwhelm, and each action gets context with no extra interaction.
Resolves finding 5
Decision Three faculty segments with a percentage share, plus faces and titles.
Why Percentages give a quick mental model, and faces map expertise to real people.
Resolves finding 3
Decision A 15-second product walkthrough of the real interface.
Why Motion gives context before reading, so comprehension is faster.
Decision A large centre video with side cards, in a horizontal scroll.
Why The centre frame holds focus, and the side cards invite continued swiping.
Outcome
“By the time he left, design wasn’t a function at MU. It was a pillar.”