Design System

I led the creation of a scalable design system and jumpstarted a content management system migration to modernize the digital presence for a public university serving a diverse student population in the Gulf Coast region. The goal was to move beyond a generic web template and instead deliver a system that reflected university's unique cultural identity as a historically Black university.

Home page mockup
Streamlined mobile nav
Component examples

Project Overview

Problem

The web presence lacked a cohesive visual identity and functional content management system. The existing design was generic—easily mistaken for any institution with a logo swap—and the site suffered from inconsistent mobile experiences, limited accessibility, and no scalable framework for growth. Additionally, content contributors across campus had no clear system or training for managing and publishing web content effectively.

Goal

  • Develop a unified, scalable design system rooted in the university's cultural identity.
  • Select and lay the groundwork for a content-first CMS to improve governance.
  • Improve mobile usability and accessibility across all device types.
  • Create reusable UI components and documentation for future scalability.
  • Build a flexible system that empowers decentralized content editors while maintaining brand consistency.

Roles

I led the end-to-end design system initiative—from foundational research and CMS planning to component design and front-end development. I collaborated directly with the Marketing and Communications team, influenced leadership decisions on CMS adoption, and delivered a complete design library within a 3-month timeline.

Audience

  • Primary: Internal content creators and web editors across the university's colleges and departments.
  • Secondary: Prospective students, parents, faculty, and stakeholders seeking a modern, culturally resonant digital experience.

Project Highlights

Brand-Centric Exploration

From the beginning, I knew this project could be more than just a modern design system—it was an opportunity to reflect the university's soul in the smallest details. Rather than jump straight into components, I led an exploratory phase with the Marketing and Communications team, where we built and refined mood boards together.

We pulled from what made the university feel alive: the movement in the murals, the pride in tradition, and the energy of HBCU culture. Each iteration of the mood board was presented for feedback, with open dialogue guiding refinements around tone, color, and emotion. This process surfaced core visual themes:

This wasn’t about decoration—it was about honoring identity. I believed that even micro elements in a design system could carry meaning. And by taking the time to get that right, we didn’t just build a system—we built a foundation that the university could see itself in.

Systematized UI Components

This is where my experience in higher education really came into play. In a decentralized environment like many universities, success doesn’t just come from bold design—it comes from distilling complexity into reusable, intuitive micro-elements that non-designers can apply confidently.

I built a modular component library that balanced consistency with flexibility: buttons, tabs, alerts, cards, layout grids, and other building blocks that honored the brand while supporting a wide range of use cases. Every element was tested for accessibility, responsiveness, and real-world application—supporting both marketing teams and academic departments with varying technical skill sets.

Accordions

Searchable accordions with animated expanded and collapse

Cards

Alternating color cards

Lists

Numbered list with circle wrapping numbers and line connecting numbers

Buttons

Arrows appear on hover

Accessibility Improvements

Accessibility wasn’t an afterthought—it was built into the system from the start. I performed regular page scans and manual checks throughout development, remediating issues related to contrast, heading structure, focus states, and ARIA usage. These improvements not only enhanced usability for all users but also ensured WCAG 2.1 AA compliance—a key requirement for public institutions.

Zero Issues reported from axe DevTool from template

Did You Know?

Texas state websites are only required to include Texas links on the homepage. This made it possible to simplify the user experience across every other page—legally and effectively.

Understanding that good UX isn’t just visual, I proactively researched Texas state web compliance policies and discovered that required links (like the Compact with Texans and Texas TRAIL) were only necessary on the homepage. This insight allowed us to streamline the footer site-wide, reduce visual clutter, and improve mobile usability—without sacrificing compliance.

Sample of Texas Administrative Code Rule 206.74

I centralized all required Texas compliance links into a ribbon at the bottom of the homepage only.

Choosing the Right CMS Matters

When I joined the team, I inherited a technically complex CMS that required developer support for even basic updates. This created three major challenges:

With leadership support, I evaluated multiple CMS options and successfully made a case for a platform that:

The decision to adopt a new CMS didn’t just solve a technical issue—it created a rare opportunity to start fresh. Instead of migrating outdated structures and habits, we took a clean-slate approach. This allowed us to build a modern, scalable design system from the ground up—something most teams don’t get to do without a “lift and shift.” The new platform became the foundation for both visual clarity and operational efficiency.

Key Takeaways

Experience This Project Firsthand

Although I transitioned to a new role before full implementation, the foundational system I built continues to guide TSU’s digital growth.

In higher education, decentralized content management empowers many teams to shape their own pages, which brings variation in how design elements are applied. This reality underscores the importance of building a flexible, scalable system—one that supports consistency while allowing for the unique needs of different campus areas. I’m proud to have delivered a foundation that balances those needs and enables long-term success.

© 2024 Jessica Gorbett. All right reserved.