Amp Design System
Amp is DICE’s 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.
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.
The design system
The final Amp Design System, documented with a style guide, user journeys and a component library prioritises 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.
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.
Final designs
