If you have logged into Akamai Cloud Manager recently, you may have noticed that it looks a little different. It’s the UI equivalent of a team of interior design elves sneaking in and ever so slightly updating your home’s paint colors, furnishings, and somehow finding a place for that that ever-present clutter pile. In essence, this is what happens when a team of designers and front-end engineers are tasked with synchronizing or updating design systems, but the actual process is a collaborative effort where every little bit of nuance gets discussed, mocked up, reviewed, and made available for internal feedback.
This is a process that application developers know well, and sometimes it can be a series of headache-inducing sprints. When our front-end and UX teams tackled the project of integrating Akamai’s branding and design elements to make a more cohesive experience between Cloud Manager and the Akamai Control Center, they saw an opportunity to make a more lightweight UI. In this Q&A, we go behind the scenes with Lead Senior Software Engineer Jaalah Ramos to talk about the concept of design tokens, creating consistency between multiple platforms, and how this effort will improve our product design as a whole.
Q: What prompted making any changes to the Akamai Cloud Manager UI?
A: After Akamai initially acquired Linode in 2022, we have been making incremental changes and updates to the Cloud Manager UI to accompany product releases as our cloud services and locations continue to expand. However, we knew that these small changes would not lead us directly to achieving design parity between Cloud Manager and the Akamai Control Center, so we wanted to approach this as an opportunity to refine and refactor our front-end design system to go beyond changing the font and a couple of brand colors. We saw an opportunity to create a design token system.
Q: What are design tokens?
A: Design tokens are like building blocks for design and engineering. They help simplify and share design decisions such as colors, fonts, and spacing by representing them in code. In a sense, they can act as a common language between design and engineering to ensure that designs remain consistent across different products, services and platforms. So what does this mean? We take all the design decisions surrounding things like color, typography, and spacing and represent them using a semantically named token. So the underlying value of the token is abstracted away in place for a name that describes what the value was trying to convey or mean.
In addition to deriving a good semantic name, how we categorize tokens is an important phase we’re working on. How do we classify the tokens we create so that they have a consistent structure? We wanted to be able to provide guidance as to how to create tokens so that there’s no confusion.
The naming convention derived from our taxonomy is ordered from the most generic categories to more specific. This is an intentional way of ordering each category to build upon one another, resulting in tokens that have natural, human-friendly names like “Button.Primary.Hover.Text”
Q: What were some of the requirements for the design token system itself that you found teams asking for?
A: Many of our teams use TypeScript, so we prioritized creating a system that enhances the developer experience by ensuring all type information flows through to the design token package. We meticulously structured our type definitions to preserve the full token taxonomy, enabling robust autocomplete and type-checking capabilities, while also ensuring that the underlying values display on hover. This gives developers immediate visibility into exactly what colors, spacing, or typography values they’re implementing without needing to look up documentation or switch contexts.
Q: Is a design token system one-size fits all?
A: No, not at all! Our design tokens operate at three levels: global, alias, and component-specific, giving us control over the majority of CSS properties. When a designer updates a global color hex value or modifies an alias token (like those for action items), the change cascades seamlessly throughout all affected components.
That said, we deliberately leave room for our product teams to contribute to the system’s evolution. We’ve created feedback channels where teams can suggest improvements based on their real-world implementation experiences. Sometimes this means rethinking parts of our token structure entirely. This collaborative approach helps ensure our design system remains practical and responsive to actual development needs rather than just theoretical design principles.
Q: How does this help Akamai users?
A: We have users that use both Akamai Cloud to manage cloud infrastructure and Akamai Control Center to manage security products and content delivery, so they’re constantly switching between systems that previously looked and felt unrelated to each other. We believe that a consistent user interface is key to helping users complete their everyday tasks faster, easier, and with greater success. Streamlining our design system eliminates visual inconsistencies and reduces cognitive load– your eyes and brain have to work a little less to differentiate between systems, and this just makes it more visually appealing and aesthetically satisfying.
Q: How did accessibility updates factor into this design update?
A: Digital accessibility is a significant focus area for my team, and we receive tons of feedback from customers about both what’s working and what we need to improve. While embarking on design updates, we added some subtle tweaks to increase Cloud Manager accessibility, including:
- Updates to our table display! We did a subtle refresh our table displays with alternating row colors, which reduces eye strain when browsing through compute instances, object storage buckets, and other tabular information
- Updated color palette to meet contrast standards
- Improved typography to increase readability
Q: Any other background about what went into this project?
A: This transformation emerged from the deep partnership between our design system UX team and Cloud Manager front-end developers. This was truly a collaborative effort over the period of 12 months, with both teams bringing their expertise to overcome challenges and create a system that serves everyone’s needs. I would be remiss not to give a shout out to the Akamai Design System Team who championed this effort, along with all the other UX designers, UX researchers and our front-end team (and others!) for the many hours we poured into this effort. There’s still a lot to do, but we’re much closer to our vision of a unified visual language that maintains consistency across all our products while dramatically simplifying both design and implementation processes.
Cloud Manager will continue gradually adopting the Akamai Design System and updating UI components. You’ll see these updates rolling out in the near future, enhancing the overall experience without disruption. As always, we’d love to hear your feedback. Let us know what you think of these design updates.
Comments