Akamai Technologies
Arc Design System
Creating a modern, versatile design system for enterprise usage
Problem
Akamai lacked a unified design approach, and it showed. The visual style from the 2012 redesign felt outdated and wasn’t applied consistently across the platform. Internally, the web portal had hundreds of distinct applications, owned by multiple product teams with siloed designers. To our customers, the portal was one entity that lacked consistency, with design that lagged behind our competitors.
Objective
Bring cohesiveness and a modern look-and-feel to the platform for our users with a design system that can be leveraged by all of Akamai’s designers and developers.
Outcome
Arc Design System was launched in Q4 2017 with a new visual and writing style, updated component library, and guidelines for designers, writers, and developers.
It saw steady adoption across multiple teams and applications across the company, and customers were excited to see the new visual direction and praised the cleaner, more modern feel.
Subset of components, before (left) and after (right) the redesign
Role
The project team consisted of 4 UX/visual designers, 2 front-end developers, and 2 QA.
​
As one of the UX designers, I was responsible for researching industry standards, participating in visual design exploration, finalizing the behavior and visual design of a large set of components, and writing documentation for the new design system.
​
After the launch of Arc Design System, I was the point of contact for feedback on the design system, led making updates, and maintained the design assets in our Sketch libraries and documentation website.
Process
We assembled a team of designers to create a new visual style that could work across all our applications. I worked with front-end engineers to update the existing component library with new visual design and improved functionality and behavior.
​
Our design goals:
-
Create a design system framework that is robust and flexible enough for our entire platform of over a hundred applications.
-
Modernize our interfaces, while remaining familiar to users and aligning with Akamai's existing brand.
-
Write guidelines to drive consistency in how components are used and our workflows are structured, even across different teams and products.
To start off, we brainstormed about our brand personality and possible visual styles. We created moodboards and style tiles to explore different styles, while keeping our brand colors in mind.
Style exploration
We narrowed down our style options, and tested them on our components and sample pages. We knew we had to keep a professional, mature feel, but wanted to feel more modern and a bit bolder as well.
Design system creation
After deciding on a design direction, we honed in on specific details like our typography, color palette, spacing, and iconography. This style language was then applied to UI components and page patterns, to create a holistic, modern design system.
Knowing that the new design system would continue to live alongside the old style for at least a year or two, we wanted to find a balance between modernizing the style yet remaining familiar enough, to not creating a jarring effect as users might bounce between two styles. For example, we kept consistent usage of our brand colors orange and blue -- orange continued to be our primary button color, and blue was used for interaction states.
Our design assets were created and organized in Sketch libraries, which I created and continued to maintain after the design system launch. I also wrote and managed documentation about the design system (see Arc Design System website). The development team implemented the components using Angular and Bootstrap, to be reusable across all platform applications.
After the design system was launched, we encouraged adoption across the Akamai platform. The first adoption project involved overhauling the home page, menu, and global elements (see Akamai Control Center). Gradually, more and more applications used our reusable components and design system patterns, leading to a more consistent experience for our users.
