Case Study — 09

Amp Design System

Amp is our design system for internal tools and business facing products, it’s light and functional. Many of the products using Amp are information dense and display complex data so hierarchy and legibility are fundamental to the design. The few splashes of colour are used in data visualisation and to help communicate the current state of something.

Amp event overview

The Background

When I joined DICE, the event management tool had been created reactively to allow partners to view the progress of their events without a thorough design process. Over time, features had been tacked on and squeezed in and was becoming difficult to use. Other internal tools had been whipped up when needed, all with divergent visual design. I suggested we rebuild the primary product from the ground up and establish a flexible robust design system that could be used for all present and future internal tools.

I worked closely with our UX researcher to set up surveys and interviews and gather as much information possible about our partners needs and challenges, and their experience using our current product. From there I created a prototype that we heavily tested with users, recording the sessions for reference. With this rich overview of what we needed to build, and a prototype we were confident with, I moved on to developing the design system.

Amp prototype 2
Amp styleguide colour
Amp styleguide typography

The design system

The final Amp Design System, documented with a style guide, user journeys and a component library priorities modularity and hierarchy. At it's core, Amp uses Atomic Design to structure the components. It’s a clear and intuitive way of defining the core building blocks of our UI and creating more complex components from there. This cascading quality makes it easy to identify the genetic elements of any page and easily update and maintain the overall system. Visually, Amp is functional and high contrast, sections are clearly divided, purely aesthetic elements are limited, and use of colour exists to represent status and progress.

Amp ticket types
Ticket type variations
Amp sidebar
Sidebar interactions and responsiveness
Amp user journey

Iconography

The existing icon library used at DICE was distinctive and playful, but was beginning to look messy and distracting both in the app and internal tools. I redesigned the entire library in a lighter, more consistent style.

Amp icons
Reverb, our new icon system

Final designs

Amp dashboard
Dashboard
Amp live
Live events
Amp finances
Finances section
Amp audience
Audience analytics