Learn by doing, not by watching.

Project

Cognilearn — Website Redesign

Duration

6 weeks

Team size

3 (Designer + 2 Developers)

My role

Lead UI/UX Designer

Tools

Figma, Miro, Notion

Platform

Responsive Web (Ed-tech)

A full website redesign for Cognilearn — a four-year “experiencship” model that puts students inside real company workflows instead of classrooms. Moved the brand from a generic ed-tech catalog feel into a serious editorial product narrative.

“Cognilearn doesn't sell courses, but the old site sold it like one.”

Who: Pre-college students choosing where to spend four years, and college partnership leads evaluating Cognilearn as a curriculum partner.

What: The old site led with course catalogs and feature lists. Cognilearn's actual offer — four years of structured time inside real companies — was buried below the fold.

Why it matters: The mismatch between message and offer hurt both student applications and college-partner credibility. Students couldn't tell what was different; partners couldn't justify the model internally.

• 01Increase student application completion rates.
• 02Open the college-partner pipeline by making the experiencship model defensible in 60 seconds of scroll.
• 03Speak to both audiences on one homepage without splitting it into two.
• 04Build a component library reusable across the public site and the future student-side product.

Mixed-method research to understand both the teenager voice and the partner voice:

• Student onboarding sessions: sat in on live calls; tracked which phrases landed and which got blank stares.
• Founder interviews: working sessions on the “experiencship” glossary — a coined word that the design has to make feel earned.
• Competitor teardown: ed-tech sites across Coursera, Masai, Newton, Scaler, NextLeap and regional players — hero patterns, IA, pricing presentation.
• Content audit: existing marketing material, curriculum docs, and the old site's analytics.

• Aevery competitor scanned led with course catalogs — none led with outcomes, leaving open space at the top of the funnel.
• Bstudents give a site a short window before deciding it's “another learning platform.” The hero has to make the difference visible immediately.
• Cboth audiences (student + partner) can coexist on one page if it's chaptered — student-friendly pace up top, partner-grade depth lower down.
• Done word — “experiencship” — does the heaviest brand lifting. Typography and accent colour have to make it feel earned, not gimmicky.

STAGE      Discover     Land            Understand      Compare         Apply
─────────────────────────────────────────────────────────────────────────────
ACTIONS    Reel / ad    Hits hero       Scrolls         Opens Tracks    Application
                                        chapters        page            flow

THOUGHTS   "Looks       "Wait, what     "Okay this is   "Better than    "Hope the
           different"   is this?"       different"      Scaler?"        form is short"

EMOTION    curious      attentive       convinced       confident       committed
             ●            ●●              ●●●             ●●●             ●●

PAIN       short        unclear         long copy       8 domains       long form
POINTS     attention    pitch           on landing      to compare      (next iter)

Friction peaks at “Land” (unclear pitch) and “Apply” (long form). The redesign solves the first with a verb-led hero; the second is logged for the next round as a 3-step conversational split.

Students don't need more courses. They need a way to see, in 10 seconds, that this isn't another course.

The opportunity is to reframe the hero from feature-list to verb — “Learn by doing, not by watching.” — and let the rest of the page earn that claim with structured chapters. Picking a non-default accent colour (lime over the expected ed-tech blue) signals voltage instead of safety and makes the brand visually distinct in the category.

Three rounds of structured thinking before any polished UI:

• Crazy 8s on the hero: 8 opening lines tested — chosen was the 3-line cascade “introducing → THE REAL INDUSTRY → EXPERIENCSHIP.” because it earns the word through rhythm.
• Feature prioritization (MoSCoW): Must = Hero, Experiencship model, Domains, Career paths, Apply CTA. Should = Why Experiencship long-form. Could = Alumni stories. Won't = Blog, course catalog.
• Information architecture: chaptered homepage + 3 deep routes for sales/signup path.

/                          Home — chaptered scroll
├── 01 Experiencship Model
├── 02 Industry Exposure
├── 03 Domains
├── 04 Career Paths
└── 05 Apply

/tracks                    Eight domain detail pages
/why-experiencship         Long-form for college partners
/career-paths              Outcomes & alumni
/signup                    Application flow

Primary student flow — reach “Apply” in five clear chapters.

Home (chaptered scroll)
  │
  ├── 01 Experiencship Model
  ├── 02 Industry Exposure
  ├── 03 Domains  ──────────► /tracks (8 domain detail pages)
  ├── 04 Career Paths ──────► /career-paths (outcomes + alumni)
  └── 05 Apply  ────────────► /signup (application flow)

Partner branch:
Home  ──────────────────────► /why-experiencship (long-form pitch)

Greybox wireframes in Figma at desktop / tablet / mobile before any colour or type was applied. Five components carry the entire homepage.

• Lo-fi: 6-frame scroll storyboard, hand-sketched, to lock chapter order with founders.
• Mid-fi: hero block (display verb left, floating device mock right), sticky chapter index, 4×2 domain grid, oversized outcome stat, full-width application CTA band.
• Evolution: dropped a planned testimonials slider after greybox review — replaced with a single outcome stat per section. Numbers convert better than carousels for this audience.

Built on five primitives — color, typography, components, grid, spacing — so the homepage, the eight domain pages, and the future student product can all share the same library.

Shipped at cognilearn.org. The site became the primary sales tool for both college outreach and student applications.