← All work

Universal Learning Details

Nine content types, two products, one details page every learner can read the same way.

RoleLead Product Designer, team of three
CompanyCornerstone · Galaxy
Timeline2026 → July 2026 launch
PlatformWeb, tablet, mobile, 400% zoom
The redesign in 50 secondsSound on · 0:50
In one line

Every type of learning had its own details page, built by two different products. I designed one universal architecture, so learners always know where to look and what to do next.

The problem

Same question, nine answers

Before you start any learning you ask the same things: what is it, how long does it take, what do I need first, and what do I click? Galaxy answered those questions differently for every content type.

LMS content (online courses, materials, videos, tests, curricula, events and sessions) lived on the LMS Training Details page. LXP content (smartcards, pathways and journeys) lived on a separate UGC page with an inline player. Two products had built overlapping features, different terms and different actions, and learners had to relearn the page every time the content type changed.

It also slowed the business down. Every new learning feature had to be built twice, once for each product.

How might wegive every learning item one structure, so learners always get a consistent hierarchy and clear actions, whatever its source or format?

Before: the old LMS Training Details page for a material After: the new Universal Learning Details page Before · LMSAfter · ULD

Drag to compare the old LMS details page with the unified page.

Research

Auditing every type

I started with an audit of every content type in scope and wrote down its rules. The LMS page alone carried around 20 metadata fields, from versions and language equivalencies to training contacts and custom fields. Each type also had its own logic: curricula only take prerequisites, materials can have pre-work, post-work, a training purpose and pricing, and events depend on sessions, deadlines and seats. Admins can show or hide much of this per division.

I then mapped the information architecture of both old pages. Side by side, the maps showed the same jobs reached through different paths: a right-hand action card on LMS, and inline actions and a player on LXP. A short market scan of Docebo, Udemy, Coursera and Khan Academy pointed the same way: one predictable page, with detail revealed progressively.

Information architecture map of the old LMS Training Details page
Old LMS details page: information architecture
Information architecture map of the old LXP content page with a feature comparison table
Old LXP page: information architecture and feature mapping
Exploration

Finding the shape

I explored quickly and widely. I ran five rounds of AI-assisted concepts in Figma Make and Lovable, then hand-built versions that tried a hero video, a sticky action rail, an inline curriculum and tabbed reviews. Drag or scroll the strip to see how it moved.

Five rounds of AI-assisted explorations
Rounds 1–5 · AI-assisted concepts in Figma Make and Lovable
Version 1
V1 · hero video, Launch and curriculum in a side rail
Version 2
V2 · progress and player card in the rail, reviews inline
Version 3
V3 · single column, content inline
Version 4
V4 · first tabs: overview, comments, ratings
Board of details page explorations
Board · tabs, states and modals coming together

The side rail kept failing in the same way. It worked for a video and broke for a curriculum with 40 prerequisites, or an event with ten sessions. The structure had to hold the most complex type, not the simplest.

The key trade-off

One structure, not nine layouts

Option A

A best-fit layout per type

  • Each page tuned to its content
  • Learners relearn the page for every type
  • Every feature built and tested nine ways
Option B

One universal architecture

  • Same header, tabs, actions and statuses everywhere
  • Content types change what's inside, not where it is
  • New features ship once, for LMS and LXP

Why: predictability beats a perfect fit. If learners know where the duration, the next action and the prerequisites live, they stop hunting. It should also lower support volume. The cost was harder design work up front: every type's edge cases had to fit the shared frame.

Mar '26

My Learning page, generally available

Jul '26

Universal Learning Details goes live

Nov '26

Activity details, then admin and player experiences

The solution

A header you can trust, tabs you can predict

Universal Learning Details page state preview
A · Header

Type, requirement and status, title, provider, duration, due date and language, then the primary action with like, bookmark and share. Badges and points sit on the right. It is identical for every content type.

B · Five tabs

Overview, Content, Tasks, Discussion and Reviews. Horizontal tabs split a long page into predictable rooms and lower the cognitive load.

Try it

Take the curriculum yourself

A clickable prototype of one complete journey. Open the Figma curriculum from My Learning, look around the details page, preview a prerequisite without registering, launch it, watch the 20-second lesson, pass the quick check and finish. Every card and button responds. The guided tour shows the next step and can be switched off.

  1. Find it in My Learning
  2. Explore the details
  3. Preview the tasks
  4. Learn in the player
  5. Complete and rate
galaxy / learning / figma-fundamentals

Best on a laptop or larger. Open the prototype full screen ↗

Design decisions

What made it work

Tasks

Prerequisites, pre-work and post-work in one workspace

These used to be three separate lists further down the page. One Tasks tab with a segmented control handles "complete one of these options" groups, pagination and expand all.

Preview

Look inside before you commit

A preview flyout shows any task or pathway item, with next and previous buttons, without registering. That keeps unwanted items off the learner's transcript.

Social

Reviews and discussions, kept apart

Reviews help learners decide whether to enrol, while discussions are peer conversation. Each has its own tab with filters and sorting, and the later study confirmed learners tell them apart.

Built to be accessible and responsive. The July screens were designed at 320 and 768 breakpoints and checked at 400% zoom. Like, bookmark and close controls got unique ARIA labels tied to their card, and truncated titles reveal the full title on click.

Pricing & overview

Prominent, not a promotion

Leadership asked for pricing to stay prominent without feeling like marketing, and accessibility called the dark panel jarring. I moved to a light pricing card aligned with checkout, kept the price, training units and breakdown in the same order, and mapped every subscription and purchase scenario.

The Overview tab changed in the same pass: Quick links became Tags, and Resources, equivalent trainings and More information became collapsible sections, so the description stays at the top.

BeforeBefore: dark gradient Course pricing panel with a 35% off badge
  1. Calmer surfaceThe dark gradient became a light card, so pricing no longer shouts over the content.
  2. Same hierarchyPrice, training units and the breakdown stay in the same order and weight.
  3. Clearer totalCurrencies are labelled, and the total is separated from the line items.
  4. Checkout actionsAdd to cart and Buy now match the checkout buttons, with Buy now as the primary.
AfterAfter: light Pricing card with price, training units, breakdown and checkout-style buttons
The hard call

Don't ship a broken journey

Pathways and journeys were meant to join ULD with a dedicated player in November. Then the player slipped. Moving them onto ULD without it would have replaced a working inline experience with a fragmented one. I mapped the flows for normal, locked, unavailable, and locked plus unavailable items, and the gaps were clear.

I raised it with product and recommended holding pathways and journeys off ULD until the player was ready. We agreed an interim experience in a two-day workshop with product and engineering.

Option A

Onboard them to ULD now

  • One page for everything, on schedule
  • No player, so learning breaks mid-journey
  • Could stay live for several releases
Option B

An honest interim

  • Keep the existing pathway and journey page
  • Launch each item in its own player, with next and previous card
  • Breadcrumbs and locked states lead learners back

Known costs, written down: loading states between players, an extra jump for quizzes and polls, and no automatic return after checkout. We listed them up front so nothing came as a surprise.

Three ways through a pathway

The same learner, the same four items, three different experiences. The chips show how many places a learner has to pass through to get from one item to the next.

1 · Planned for November

Pathway on ULD, no player

  1. Pathway
  2. Item details
  3. Player
  4. Completion
  5. Back to pathway
  6. Next item details…
  • The pathway moves onto the universal page, with Overview, Content, Tasks, Discussion and Reviews.
  • Start sends the learner to the details page of each item. A banner has to explain it.
  • Each item opens in its own player, then the learner finds their own way back.
  • Locked items blur until the previous item is done.

Why I flagged it: five stops between items, and nothing holds the pathway together. With the player delayed past March, this could have stayed live for several releases.

Pathway on the universal details page with a banner explaining that Start opens each item's details page
Pathway on ULD: "Start" leads to each item's details page
2 · Interim, shipping November '26

Keep the pathway home, link the players

  1. Pathway home
  2. Player
  3. Next item ↻
  • The existing pathway and journey page stays the overview, in the order the creator set.
  • Start launches the first available item straight into its player: One Player for LMS items, Curriculum Player 2.0 for curricula, the inline player for quizzes and polls.
  • Previous and Next item sit above every player. Journeys show the section and card, such as 2 of 5.
  • A breadcrumb or "Back to pathway" always leads home. Locked items say why, and Next is disabled.
  • Finishing an item updates pathway progress. Finishing all of them marks it complete.

Accepted costs: loading between different players, a jump to LX pages for quizzes and polls, and a manual return after checkout. Training purpose in One Player is still being confirmed.

Interim experience: item open in the player with Back to pathway, Previous Item and Next Item
Interim: Back to pathway, Previous and Next item above the player
3 · Future, after research

One player for the whole pathway

  1. Player
  2. Next learning ↻
  • The whole structure lives in a side panel, expanded by default, so learners don't think they're done after item one.
  • Pathway progress stays visible at the top: 3 of 9 items, 33%.
  • Bolder Previous and Next learning buttons, with one Mark complete per item instead of two.
  • A tools rail for notes, downloads, discussion and rating, plus an AI course assistant.

Shaped by research: the side panel, the progress and the single Mark complete all respond to findings from the study with 22 admins and instructional designers.

Future adaptive player with an expanded curriculum side panel, pathway progress and AI course assistant
Future: the adaptive player, with structure, progress and assistant in one place

The same workshop settled card click behaviour on discover pages. Some customers want a card to launch content straight away, while others don't want every click added to the transcript. We made it a company setting, with View details always one click away.

Validation

Old vs new, side by side

Research compared the old and new pages with 12 learners making real course decisions (September 2026, research by Bhavya Srivastava). A second study with 22 admins and instructional designers tested the pathway and journey prototype (18 surveyed, 4 deep-dive interviews, September to October 2026, research by Sakshi Satardekar).

Organised better83%
Resources easier to find91%
Tasks noticed64%
Easier to compare64%

Share of participants who preferred the new experience, course comparison study.

More confident decisions

Average confidence rose from 3.6 to 4.2 out of 5, and 75% felt very or extremely confident with the new page.

Quick view landed

"Quick view is great for not having to register in order to see contents." Admin, enterprise customer

Format tags too quiet

"Took me 10 seconds to find the distinction between pathway and journey." Labels need to be spelled out, with icons only as support.

Still missing

Course format, cost and a side-by-side comparison remain the biggest gaps, so they're the next things to design.

Outcomes

What shipped, and what it did

83%

of learners preferred the new page for organising information and making a decision

4.2/5

decision confidence, up from 3.6 on the old page

93%

of admins found the new pathway and journey flow useful, and the same share found it visually appealing

Universal Learning Details went live in July 2026 for LMS and LXP content, replacing two details pages with one. It brings social features (ratings, reviews, likes, discussions and sharing) to every Galaxy content type, along with extended enterprise purchasing. The same architecture will carry Activity Details in November.

"I counted already three or four clicks before I know something about the content."Admin, enterprise customer · why key details belong up front
Reflection

What I'd keep, what I'd change

Design for the most complex type first. The layouts that looked best for a video fell apart on a curriculum. Starting from the hardest case saved several rounds.

Say the uncomfortable thing early. Flagging the pathway gap before launch cost a few hard conversations and saved learners from a broken journey.

Make labels do the work. Small tags and icons weren't enough to tell types apart. Next time I'd test labels as early as layouts.

Next case study

MaRT

Read case study →