Overview
In 2024, Michigan State University launched a university-wide migration to the Sitecore XM Cloud platform—an effort to modernize its digital ecosystem, unify disparate college and departmental sites, and enable more flexible content authoring.
As Lead UX Designer, I focused on aligning modular design practices with institutional needs across two pilot sites: the College of Law and Trademarks & Licensing.
Challenge
MSU’s previous digital ecosystem was fragmented, with varied navigation patterns, outdated design systems, and limited support for responsive, mobile-first design. The inconsistencies in IA and content structures led to:
Overloaded menus and ambiguous IA structures
Poor mobile usability and inconsistent responsive behavior
Gaps in accessibility and brand alignment
Limited flexibility for content creators
My team needed to balance institutional consistency with the distinct identity and needs of each MSU unit.
UX Goals
Unify IA and design patterns using atomic components and shared design tokens
Simplify navigation with a mobile-first mindset and clearer hierarchy
Tell each unit’s story in a user-focused, goal-oriented way
Empower content authors through modular templates and intuitive page scaffolding
Discovery & Research
The UX process began with a content and navigation audit of the College of Law and Trademarks & Licensing sites, supported by stakeholder interviews and analytics reviews. Key findings:
Navigation was overloaded, with duplicative and nested menus
Content was often buried behind generic links like “Resources” or “Information”
On mobile, menus were difficult to traverse
Content authors needed clarity on how to represent their site’s hierarchy within Sitecore
UX Strategy & Design Approach
Component-Based UX with XM Cloud
Using MSU’s XM Cloud Component Guide, I evaluated and refined key components to balance design flexibility with system constraints.
Examples:
Call-to-Action Rows were restructured for clarity, optional icons, and consistent heading levels
Featured Content Cards were optimized for scan-ability and responsive layout across breakpoints
Components were reviewed for accessibility, authoring logic, and visual hierarchy
Page Scaffolding & Content Migration
To guide migration, I collaborated with dev and content teams to define reusable page templates aligned with user flows and editorial goals.
Homepages prioritized key CTAs and audience-specific content
Interior pages emphasized breadcrumb clarity, scannable layout, and contextual links
Migration guidelines outlined page sectioning, link structures, and content hierarchy
Navigation Simplification
We used stakeholder feedback and prototype testing to simplify IA and reduce friction.
Examples:
College of Law: Top-level nav items reduced from 7+ to 5, with clearer secondary groupings
Trademarks & Licensing: IA refactored by audience type with tested labels for clarity and purpose
Early Outcomes
Improved mobile navigation validated via mockups and Figma prototyping
Reusable component library now being adopted across other MSU departments
Early content migration completed with UX-led reviews for structure, clarity, and flow
Scalable IA patterns that support both large and small departments
QA readiness and accessibility embedded early through UX walkthroughs
Conclusion
This project proved that modular UX thinking—when applied early—can drive clarity and cohesion in large institutional redesigns.
MSU’s transition to Sitecore XM Cloud is now grounded in scalable design patterns, flexible authoring tools, and improved user journeys—setting the foundation for a more unified and accessible digital presence across the university.