Skip to main content

TSU Web Design System

Texas Southern University needed a digital foundation that could support content ownership across its colleges and departments while reflecting its identity as a historically Black university. Routine updates depended on developers, content grew stale, and inconsistent design made the site harder to use. I proposed CMS modernization alongside a reusable design system, worked with Marketing and Communications to align the visual direction, and gained leadership support for evaluating a more sustainable platform.

My role: As Senior UX Developer, I led component design and front-end development for the design system, collaborating with Marketing and Communications on the visual direction. I also advocated for CMS modernization and editor training to support departmental content ownership.

Addressing the System, Not Just the Website

A visual redesign alone would not resolve the university’s content problems. The existing CMS required developer support for basic updates, leaving subject matter experts unable to confidently manage their pages and a small web team responsible for routine publishing.

With leadership support, I evaluated CMS options around the needs of decentralized content editors. My recommendation prioritized intuitive editing, structured content, role-based permissions, and global updates. These capabilities would give departments more ownership while allowing the web team to maintain shared standards.

I led research, CMS planning, component design, and front-end development, delivering a complete design library within three months. The approach connected content governance with a consistent, accessible experience for prospective students, families, faculty, and other university audiences.

Building an Identity That Feels Like TSU

Working with Marketing and Communications, I used mood boards to align stakeholders on a direction rooted in campus murals, university traditions, and HBCU culture. The goal was a recognizable TSU identity that could carry across pages and components.

Movement and rhythm informed the visual direction; gold and beige brought warmth to the university’s maroon; layered imagery and textures reflected the cultural storytelling found across campus.

Mood board combining Black cultural imagery, art and museum website references, layered portraits, and maroon, beige, and gold color swatches.
Mood board exploring artistic expression, layered imagery, typography, and a maroon palette with gold and beige accents.

Accessibility as a System Requirement

The system’s WCAG 2.1 AA requirements informed component design and development from the start. I checked contrast, heading structure, focus states, and ARIA usage through regular page scans and manual review. Building these checks into reusable patterns gave future pages an accessible starting point.

axe DevTools results showing zero detected accessibility issues for the scanned template.
An axe DevTools scan of the template reported zero detected issues. Automated scans were paired with manual checks during development.

Rather than repeat every state resource link on every page, I researched the requirements in effect during the project. The homepage-link provisions informed my recommendation to group Texas resources in a homepage ribbon, simplifying interior-page footers and reducing mobile clutter.

Historical Texas Administrative Code §206.74 excerpt listing requirements for homepage links, site policies, and key public entry points.
Research: the historical §206.74 excerpt informed link placement during the project.
TSU homepage footer with university contact information and a bottom ribbon containing Texas resource links.
Design decision: group Texas resources in a separate homepage ribbon, keeping the university footer focused.

Building a Foundation for Sustainable Growth

Within three months, I delivered the design library and established groundwork for CMS modernization. The University of Houston recruited me before implementation. My contribution established a foundation for rollout, editor training, and adoption; those steps were not completed during my involvement.

Delivered During My Involvement

  • A complete design library with reusable components and a visual direction developed with Marketing and Communications.
  • Front-end patterns supported by responsive behavior, accessibility checks, and component documentation.
  • CMS evaluation and planning, with leadership support for modernization and editor needs guiding the recommendation.

Intended Organizational Benefits

  • More ownership for departmental editors and less developer time spent on routine updates.
  • More consistent branding, accessibility, and content maintenance across the university.
  • A framework for rollout, editor training, and ongoing governance as the site grew.