The Premier league

Content Management System (CMS) Redesign

The Need

Modernize the internal CMS website (hosting information for every Premier League club including the 92 EFL clubs) and create a new design system for the CMS website

Delieverables

High-fidelity CMS website mockup in Figma, new design system and component library, "dark mode" UI options

My Role

Lead UX Systems Designer

Tools

Figma

Client Goals

  • Complete UI redesign of internal CMS site
  • Modernize and freshen the outdated feel of the site
  • Use The Premier League's official colors and branding guidelines
  • New CMS design system and component library including "dark mode"

UX Audit of CMS

Original CMS Navigation Sidebar

Original CMS navigation bar

Original CMS Data Tables

Navigation Sidebar Redesign

Streamlined navigation by mapping the original navigation structure and designed an optimized site map to improve user speed and usability

  • Reduced navigation headers from 6 to 4 to enhance cognitive accessibility
  • Reorganized links under appropriate category headers
  • Designed a more evenly distributed dropdown menu for improved UI and aesthetics

Sidebar Wireframes

Screenshot of U.S. Bank hero image section with the header "We've made big improvements to your mortgage experience.

Sidebar UI A/B Testing
(Official Premier League Colors)

Screenshot of U.S. Bank hero image section with the header "Manage my mortgage: Understanding your U.S. Bank mortgage".

Final Sidebar Design

CMS Data Table Redesign

Table header before and after

  • Filter icons moved next to header
  • Created table "UI bar" for the search and buttons
  • Incorporated official Premier League purple  

Creating Figma table components

Screenshot of "time saving tools" video with video player buttons and transcript link and the user mortgage dashboard.

Table UI A/B Testing

Final CMS Data Table Design

Screenshot of "payments" section with payment quick links and the "Payment FAQ" section

CMS Before and After

Redesigned 17 CMS data tables including team kits, team members, match times, etc. using the newly developed modernized style guide

Dark Mode Options

Delivered 3 dark mode UI variations adhering to strict brand guidelines, designed for flexible implementation across platforms

CMS Component Library

View more of my work