Project Overview

After identifying major UI inconsistencies and accessibility issues, I built a design system that unified the experience and gave developers a reusable, documented toolkit.

Problems Identified During My UX Review

• No CTA hierarchy (no primary / secondary / tertiary structure)

• Typography inconsistencies (color, size, weight)

• Misaligned or mismatched icons

• Overuse of brand colors without rules

• Frequent color contrast accessibility failures

• No page-level or post-submit error messaging

• Multiple inconsistent red tones used for inline errors

• Too many UI libraries in use (Bootstrap, Kendo UI, Font Awesome)

• No mobile-friendly pattern for displaying tabular data

Solutions

Conducted a full UI audit, documenting inconsistencies in typography, color usage, buttons, spacing, icons, tables, alerts, and form elements.

• Proposed a design system as a strategic solution after researching scalable documentation frameworks

• Architected and developed the system end-to-end independently

• Aligned the system with Jackson & Coker’s brand standards

• Consolidated multiple UI libraries (Bootstrap, Kendo UI, Font Awesome) into a unified visual language*

• Implemented the system using SASS to enable maintainable variables, mixins, and nesting

*I advised using fewer UI libraries, but this was not approved.

Result

I built an internal design system website that:

• Documents all UI components and usage guidelines

• Provides developer-ready toolkits for quick code access

• Establishes a consistent look and feel across the product

• Includes a sandbox environment for rapid testing and replication

Here’s a look at key components, documentation structure, and interactive tooling from the final system.”