Redesigning the Library: One Home for Four Kinds of Content
Built for one kind of content. We needed it to hold four.
Recreated example, not the actual product.
Role
Senior Product Designer: led the redesign end to end, from IA through the responsive card system.
Status
Design complete. Not yet built.
Scope
Mobile-first, scaled to desktop — four content types, one shared card component.
Summary
- The Library started as a single-purpose course catalog — one content type, one layout
- The platform grew to include surveys, forms, and documents, and none of them had a home
- Without a shared pattern, every new content type risked becoming its own one-off page
- I redesigned the Library as one system instead of four separate pages: one navigation structure, one adaptive card, and one filter pattern shared across all of it
← scroll to compare before and after →
Before: one content type, uniform cards, no status, no filters. After: four content types, one adaptive card, status built into every state.
The Process
Auditing the Current Experience
- Mapped where each new content type would need to live inside the existing IA
- Identified where the single-purpose Learning layout would break under added variety
- Flagged the filter and search pattern as something worth reusing, not rebuilding, per tab
Designing One Adaptive Card
- Built a single card component instead of one-off cards per content type
- Status bar, status chip, and CTA label (Start / Continue / Review / Retake) all shift based on progress and content type
- Same card reads correctly whether it's a course, a survey, a form, or a document
Extending It to Mobile
- Full responsive redesign
- Designed a dedicated expanded-filters state for small screens
- Cards restack to a single column without losing status or hierarchy
The Challenge
The Old Library
- Supported exactly one content type, with a layout built around it
- Status system lacked visual hierarchy — a course looked too similar whether it was untouched or finished
- Filtering options were located in multiple areas
What Growth Exposed
- Surveys, forms, and documents were arriving with nowhere consistent to live
- Each new content type was on track to get its own bespoke page and its own card design
- Navigation had no scalable pattern for "which kind of content am I looking at"
The Solution
One Navigation, Four Content Types
- A tab-based Library: Learning, Forms, Surveys, and Documents, all in one place
- One shared filter panel (status, keywords, programs) reused across every tab instead of rebuilt per type
- One search and sort pattern, so the controls stay familiar across every tab
Same card component shown across two content types (Learning, Survey) and three states (not started, in progress, complete).
One Card, Every State
- Status bar and status chip communicate progress at a glance: not started, in progress with a percentage, or complete
- The call-to-action changes with the state — Start Learning, Continue, Review, Start Survey, Retake — instead of one generic button for everything
- Content-type icon and label make it clear what kind of item the card represents, even mixed into the same grid
Built for Every Screen
- Filters collapse into an expandable drawer on mobile instead of disappearing or getting cramped
- Cards restack to a single column while keeping the same status and CTA logic
Four Library tabs and the filters panel, shown on mobile.
The Impact
- New content types can now slot into the Library without a new IA or a new card design. The pattern already scales
- One adaptive card means less design and engineering work per content type added going forward
