a student-led collective shaping Northwestern's first design system to create experiences that feel inclusive, accessible, and connected.
impact: created principles, components, and adoption strategies that transformed a fragmented ecosystem unto a unified design culture.
my role
Design Systems UX/UI Designer,
DesignOps Researcher, Project Manager
timeline
january - march 2025
tools
Figma, FigJam, Slack, Google Suite,
Northwestern Brand Guidelines
↦ introduction
At Northwestern, design lived in silos—spread across departments like the Segal Design Institute, Facilities, and Research Labs. Creativity thrived, but without a unified approach, the result was inconsistent digital experiences, fragmented brand identity, and inefficiencies in design delivery.
For our Design Systems and Operations graduate course (Winter 2025), our team created the Northwestern University Design Collective (NUDC): a hypothetical cross-departmental design team that doesn’t currently exist, but could serve as a unifying force for design and innovation across the university.
We took a collaborative, research-driven approach to Northwestern’s unique challenges and opportunities. With a university this large - spanning research, teaching, and multiple undergraduate, graduate, and professional schools—aligning design efforts across so many diverse areas is no small task.
To guide our work, we held regular meetings and workshops, combined with online collaboration to capture insights and make decisions. We audited Northwestern’s current design structures, identified gaps, and explored how a more connected approach could better support the university’s goals.
Our mission was simple: build design systems and operations that make Northwestern’s digital presence consistent, human-centered, and scalable.
↦ the challenge
Northwestern’s design ecosystem was defined by fragmentation and inconsistency:
Fragmentation: 12+ colleges and schools each with their own look and feel.
Inefficiency: Repeated design work with no shared foundations.
User Experience: Inconsistent navigation, buttons, and layouts diluted the NU brand and made sites harder to use.
Scalability: Without a system, design maturity and adoption couldn’t grow sustainably.
We needed a design system and operational model that could:
Align with NU’s academic mission,
Serve diverse stakeholders (students, faculty, alumni, staff)
Provide clear governance and scalability for future growth.
This became the foundation for the Northwestern University Design Collective (NUDC), designed to unify efforts and create a connected, innovative, and sustainable design culture.
↦ the designOps canvas
Before defining system foundations, we stepped back to map the bigger picture using a DesignOps Canvas. This helped us understand Northwestern’s organizational landscape and clarify where a centralized design team could have the most impact.
Through this exercise, we identified four key themes:
The Need for a Centralized Team – Design at Northwestern was happening in silos, which made consistency nearly impossible. NUDC was envisioned as a unifying function to streamline intake, co-create with stakeholders, and deliver cohesive experiences across websites, apps, and marketing.
Team & Growth – We proposed starting small with a design program manager, UX researchers/designers, and an ops lead, with future growth into developers and specialists. Recruitment would prioritize students and alumni for cost-effectiveness and cultural alignment.
Communication & Knowledge Sharing – Internally, we emphasized structured collaboration with weekly standups and shared tools. Externally, we planned for transparency and engagement through welcome events, progress reports, and showcasing impact via workshops and newsletters.
Constraints & Challenges – We acknowledged the realities of building from scratch, from resource limitations to privacy, security, and accessibility requirements (FERPA, Illinois PIPA, ADA/WCAG). Rather than barriers, we treated these as opportunities to embed inclusivity and trust into the system from the start.
The canvas gave us a strategic foundation: balancing autonomy with the common good, aligning with Northwestern’s mission, and grounding our work in transparency, accountability, and scalability.
↦ our approach
our beginnings
Our mission: deliver cohesive, human-centered, and innovative design solutions that connect students, staff, alumni, and departments while supporting Northwestern’s broader academic mission.
We recognized early that building from scratch brings challenges in planning, execution, and scalability. But we also saw this as an opportunity: the freedom to imagine a design function that could be sustainable, scalable, and aligned with the university’s long-term goals.
guiding principles
To ground our vision, we created a set of design principles rooted in Northwestern’s mission and values. Using brainstorming and affinity mapping, we distilled broad themes like diversity, innovation, and excellence into actionable principles:
Fresh – Innovate when it adds clarity and impact, experimenting with research-driven methods to keep NU’s digital presence engaging.
Feedback-Driven – Center the voices of students, staff, and alumni, ensuring designs evolve through research and iteration.
Straightforward & Action-Oriented – Keep information simple, navigable, and accessible so users can find what they need quickly and confidently.
These principles became our North Star, ensuring that NUDC’s work remained people-first, consistent, and aligned with Northwestern’s identity.
operational model
Northwestern’s current design structure is decentralized, with designers embedded in departments. While effective for specialization, it sacrifices consistency and cross-campus cohesion. To solve this, we proposed a hybrid model that blends the strengths of centralized and decentralized structures:
Centralized team – provides governance, brand consistency, and innovation.
Embedded designers – work directly with high-engagement departments (like Kellogg or McCormick), ensuring solutions are tailored while staying aligned with shared standards.
Collaboration at every stage – researchers, designers, and project coordinators move fluidly across discovery, prototyping, and delivery, supported by managers and a Design Director who tie everything back to NU’s mission.
This hybrid approach allows us to scale design maturity while balancing consistency and flexibility.
career ladder
To make the NUDC sustainable, we developed a career ladder that supports mentorship, growth, and leadership opportunities across the team.
Team composition: Designers (UX/UI, visual, interaction), Researchers, DesignOps Project Managers, and Managers.
Growth path:
Entry-level (including Segal interns) build foundational skills.
Mid-level take on complex projects and mentor juniors.
Senior-level lead large initiatives and strategy.
Management oversee teams and operations.
Executive leadership (Design Director) aligns design vision with NU’s mission.
Core competencies: user-centered design, collaboration, problem-solving, technical proficiency, and operational efficiency.
Together, the hybrid model and career ladder create a structure that can scale with Northwestern’s complexity—delivering consistency today while building a pipeline of leaders for tomorrow.
auditing the ecosystem
To ground our work, we conducted an audit of Northwestern’s digital ecosystem, starting with the Home and Admissions pages. Each teammate reviewed layouts, calls-to-action, buttons, and usability, capturing a range of perspectives that revealed consistent gaps.
What we found:
Inconsistent layouts and buttons disrupted navigation.
Uneven branding diluted Northwestern’s identity.
Unclear accessibility compliance risked excluding users.
We visualized these issues in a system map spanning 12 colleges, Northwestern Medicine, and Northwestern Sports. While some shared elements existed, their inconsistent use created a fragmented user experience.
By synthesizing these insights into three takeaways—usability patterns, design inconsistencies, and areas for improvement—we created a clear roadmap. This audit became the foundation of the NUDC Design System, ensuring our principles and components directly addressed Northwestern’s real challenges.
↦ building the system foundations
foundations
We began with the essentials—the core building blocks of a design system—to bring consistency, accessibility, and cohesion to Northwestern’s digital presence.
colors
Color is central to Northwestern’s identity, from campus signage to digital interfaces. Our refined palette reinforces both tradition and innovation while serving three purposes:
Consistency – unifying previously fragmented platforms under a cohesive brand.
Accessibility – meeting WCAG standards for contrast.
Hierarchy – guiding users through clear visual differentiation.
We organized colors into Brand Colors (primary/secondary) and System Colors (neutral/semantic). Updates included clearer usage guidelines and improved accessibility checks—such as the Gold Button Instance (#FFC520) paired with Purple 160, which passes AAA/AA compliance.
typography & spacing
NUDC streamlined typography for readability and consistency:
Poppins (Bold) – primary heading font.
Roboto – body text for legibility across digital experiences.
Noto Serif – optional for print collateral.
All typography follows a 14-column grid with a 4px spacing system, ensuring alignment across modules. We also removed all caps to improve accessibility and legibility.
rounded corners
Rounded corners add a modern, approachable detail while providing clear differentiation between elements. We standardized three sizes—4px, 8px, and 12px—applied consistently across buttons, containers, and modules.
iconography
We standardized iconography using Google Material Icons for their clarity, accessibility, and scalability. Our curated set of 33 icons supports navigation and interaction, with updates from image files to SVGs for sharper rendering and performance.
graphic elements
Three graphic elements enhance Northwestern’s digital identity:
The Slash – a bold accent for titles or backgrounds.
Rules – simple dividers for clarity and structure.
The Facet – a signature Northwestern shape, used sparingly for sophistication, especially in print and dark backgrounds.
These were previously a part of the Northwestern University original design scheme. We wanted to make sure to continue their use in future designs.
error states
We standardized error treatments to ensure clarity when things go wrong:
Notifications – temporary alerts at the page level.
Module-Level Treatments – highlighting issues within specific sections.
Inline Messaging – surfacing form or field errors in context.
This consistency reduces friction and helps users recover quickly.
404 page
Even error pages deserve intention. Northwestern’s 404 uses a Hero module layout with a Purple 130 background for immediate recognition.
The design avoids imagery, keeping the focus on clarity and navigation, reinforcing trust and cohesion even in failure states.
↦ designing components
from inconsistency to clarity
Our component library evolved significantly to improve consistency, usability, and clarity across Northwestern’s digital ecosystem. Early versions revealed gaps—misaligned spacing, inconsistent labels, missing states—that made components hard to scale. The updated system introduced:
Clear labels and documentation.
Corrected spacing and alignment.
Responsive behaviors and technical specifications.
Visual indicators for multiple states.
In-page examples showing real-world use.
A reorganized Figma file (one component per page) for easier adoption.
This transformation turned fragmented elements into a cohesive, reusable library—making it easier for designers and developers to collaborate and deliver consistent experiences.w, and emotional design with user feedback and lived experiences.
key components
Buttons – Now unified with two styles (light/dark) and rounded corners, ensuring clarity and consistency across schools and platforms.
Site Headers – Consolidated into a single design that reinforces brand identity and helps users stay oriented as they move between departments.
Navigation – Standardized dropdown menus and dark headers for intuitive, consistent browsing.
Search – Offered in light and dark versions, providing flexibility while maintaining consistency.
Hero Module – A high-impact component for home and landing pages, used to feature dynamic content and highlight Northwestern’s value.
Large Feature Module – Flexible content blocks that combine titles, images, and copy in multiple styles for depth and storytelling.
Feature Blurb Box – Designed for key quotes or promotional content, available in light and dark versions to stand out or blend in.
News & Events Module – Highlights 2–3 stories or events with flexible layouts to showcase timely, engaging content.
Statistics – Displays 2–6 data points in clean layouts for landing or marketing pages, adaptable for light or dark backgrounds.
Accordion – Organizes up to 10 expandable items, ideal for FAQs or info-heavy pages, with scalability for longer lists.
Gallery – Showcases full-width images or graphic formats, perfect for campus life or event highlights.
tech spec and handoff
Each component page in Figma includes developer-ready documentation to ensure smooth handoff:
Interaction specs and responsive guidelines.
Error and empty states (including forms, toasters, and 404 pages).
Detailed version notes for ongoing iteration.
By pairing design detail with technical clarity, the system ensures components are consistent, accessible, and scalable across Northwestern’s ecosystem.
↦ adoption and
communication
plan purpose
A design system only succeeds if it’s adopted. For NUDC, this meant going beyond documentation to create a communication plan that educates, supports, and engages stakeholders. Our plan focused on three goals:
Implementation – ensure consistent adoption of NUDC standards across digital and print products.
Relationships – maintain touchpoints with schools, departments, and functional roles.
Clarity – simplify design processes so stakeholders can easily stay aligned.
stakeholders
We identified key stakeholder groups - including McCormick, Kellogg, Weinberg, Feinberg, and other schools - along with roles most impacted by design: designers, developers, marketers, administrators, and peer collaborators. More specifically:
Schools & Units: McCormick, Kellogg, Weinberg, Feinberg, and other academic/administrative departments.
Functional Roles: designers, developers, marketers, administrators, and peer collaborators.
engagement strategies
To engage stakeholders, we proposed a layered approach:
Onboarding → standardized training to embed design from day one.
Ongoing Communications → monthly digests, “Did you know?” shares, version updates, and community channels.
Targeted Touchpoints → quarterly workshops, training events, town halls, prototype testing, and success stories.
why it matters
This strategy transforms communication from a one-time rollout into a continuous feedback loop. By building awareness, trust, and shared value in design, NUDC positions itself not just as a toolkit, but as a long-term partner across Northwestern.
↦ reflection
looking forward
NUDC is still in its early stages, and success today looks different than it will tomorrow. Early wins will include:
Community engagement and adoption.
Integration of NUDC principles into stakeholder projects.
Actionable feedback to fuel iteration.
As maturity grows, future success means design becomes a shared competency: prioritized early, practiced across stakeholder groups, and embedded into decision-making.
Looking ahead, NUDC and its design system will:
Provide clarity on branding and design standards
Create a consistent and cohesive user experience.
Ensure accessibility compliance and alignment with university values
Strengthen communication & collaboration across Northwestern's ecosystem.
Ultimately, the design system is more than components and guidelines—it’s a framework for culture change. By grounding our work in research, principles, and community adoption, we’ve laid the foundation for a sustainable, people-first design practice at Northwestern.
