UX Case Study

Institutional Brand Governance

Architecting a centralized UI Style Guide framework to protect brand fidelity and enforce WCAG compliance within legacy system constraints.

Role: Lead UX Designer & UI Architect
Timeline: Ongoing Evolution
Team: 1 UI/UX Developer (Solo Design & Dev Execution)
Core Focus: Brand Integrity, CMS Tokenization, WCAG Accessibility
View Live Production Site

The Challenge

Managing an institutional web footprint across hundreds of academic departments requires strict operational control. At Weber State University, our digital ecosystem faced extreme visual fragmentation due to localized styling alongside severe technical limits embedded in our legacy CMS, Site Manager.

The Objective: Build a living, framework-driven UI Style Guide to serve as an enterprise source of truth, helping university creators seamlessly apply consistent, accessible interface elements without breaking core brand standards or system parameters.

Phase 1: Discovery & Research

To understand the landscape and our users, the project kicked off with competitive benchmarking and qualitative user mapping across our matrixed personas.

User Persona Development

We needed to serve a highly diverse user base. I synthesized our user research into matrixed personas to capture unique workflows, tech-literacy levels, and pain points:

  • The Content Editor: Needs an intuitive, snippet-based component library to publish department news cleanly without breaking layouts or formatting rules.
  • The Campus Web Developer: Wants a robust, production-ready framework utility built on clean SASS/CSS classes to speed up active sprint deployments.
  • The Brand Manager: Requires centralized, immutable system styles to lock in brand standards globally and eliminate manual design compliance reviews.
Primary Persona

The Content Editor

"I just need to publish department news without formatting errors breaking our desktop layout."

Core Pain Point: Frustrated by strict CMS template constraints and unpredictable styling behavior when copy-pasting layouts.
Ultimate Goal: A simple, snippet-based component library that works natively inside existing layout blocks.
Discovery Persona

The Campus Web Developer

"I want to build a custom application for student affairs that looks and feels exactly like the main university brand."

Core Pain Point: Lack of clean SASS/CSS style sheets forcing them to guess font scales, spacing tokens, and color classes.
Ultimate Goal: A robust structural base framework built on production-ready utilities to speed up active sprint deployments.
Administrative Persona

The Brand Manager

"Decentralized departments keep modifying our official colors and typography, diluting our visual identity."

Core Pain Point: Overwhelmed by manual design compliance reviews and fixing fractured code variations across sub-sites.
Ultimate Goal: Centralized, immutable framework classes that lock in design guidelines globally by default.

Phase 2: Information Architecture & Component Engineering

To manage hundreds of diverse layout variants across web domains, I engineered a modular asset ecosystem that abstracts framework configurations into plug-and-play code snippets.

The Tri-Token Tokenization Framework

I compressed our complex brand guide standards into three co-dependent utility layers to keep platform governance absolute:

  • Color Mapping & Brand Values: Locked in immutable variables for Wildcat Purple, University Gray, and essential supporting accents.
  • Structural Typography Hierarchies: Codified global font weights, line heights, and layout scales across all browser resolutions.
  • Utility-Driven Layout Modules: Engineered robust helper patterns for repeating elements like responsive data grids and alerts.
System Architecture
[ Base Global Theme Overrides ]
[ Color Swatches | Global Grid | Typography ]
▽ Core Grid Overrides (Foundation Base)
▽ Component Layout Snippets (Tables, Callouts)
▽ Typography Utility Class Allocations
Figure 1.0: Component token layout showing the structural integration of global brand definitions into our decentralized component library.
Interface Architecture

Engineering the Living Component Directory

The deployed UI Style Guide portal enables developers and non-technical managers to reference style rules and extract raw layout modules instantly.

System Branding Palette Page Mapping design variables directly to global CSS files.
01. Tokenized Color Architecture: The visual reference interface mapping brand swatches directly to unified CSS stylesheets.
Production component snippets ready for copy-paste inside the campus layout blocks.
02. Production Component Snippets: Clean HTML structures for tables, grids, and callouts ready for instant campus reuse.
Global typography rules mapping system headers to device responsive font clamps.
03. Responsive Typography Guidelines: Clear documentation locking font treatments across varying layout sizes.
Grid structure samples showcasing how utility layouts fit inside native template cells.
04. Layout & Grid Governance: The final implementation rules enabling clean structure deployment without template breakages.

Phase 3: Balancing the Triad Constraints

Enforcing design guidelines meant engineering an interface strategy that balanced user needs against institutional accessibility laws and platform constraints.

The Usability Challenge

Simplifying Sprawling Documentation

Initial technical audits revealed that campus authors couldn't navigate old, scattered style sheets when deploying basic pages.

Design Interventions:
  • Streamlined documentation into a single, clean, searchable living system index.
  • Separated abstract visual variables from executable frontend utility markups.
  • Built highly visible, accessible copy-to-clipboard blocks for effortless layout reproduction.

The Outcome & Impact

Deploying the live style guide successfully established system alignment across all web properties without straining our engineering velocity. The guide transformed manual design reviews into a self-service code layer.

Frictionless Branding

Autonomous Asset Deployment

Gave decentralized content creators the freedom to quickly self-source layouts while safely staying inside brand guidelines by default.

Minimized Waste

Elimination of Engineering Overhead

Drastically dropped duplicate front-end work across development cohorts by providing pre-tested component models for fast configuration.

Airtight Standards

System-Wide Compliance Safeguard

Protected the university from critical legal issues by making sure all new platform expansions are structurally accessible from day one.