Applying atomic design principles to Oracle - Grapeshot’s reference library overcomes UX issues

Oracle - Grapeshot provide market-leading digital ad technology services to over 600 organisations world-wide, including media buyers, media sellers and technology providers.

They wanted to build on their most successful commercial application ‘Keyword Signal’, but in order to do that needed a more comprehensive design library to help their front-end developers implement new features in a more consistent way.

The source of truth

Oracle-Grapeshot don’t have an in-house design lead, so the library had to become the defacto source of truth for users; eliminating the need for personal interpretation, multiple frameworks or duplication of effort.

We applied the principles of atomic design to review and refine their existing design library, including fonts, spacing, margins, inputs and stateful features. We also broadened the existing colour palette so that colours for things like active/inactive states were clearly delineated. And in each case, we created a variant for tablets and mobiles.

Atoms, organisms and components

The library was organised by its design ‘atoms’ - the constituent building blocks from which all the user interfaces were derived. The atoms can be used and reused in isolation without worrying about any implicit dependencies. And everything that’s available to developers is immediately visible all in one place.

It had to be easy to navigate and access so that customers could use it without resorting to help from the development team. It also allows different users to add new updates and assets - the eventual goal is for the library to accommodate words and code snippets too.

No matter how good a design library is, it can’t exist in isolation, especially if the goal is for it to be the definitive source of truth. Oracle-Grapeshot hope to ensure its ongoing success by communicating its value internally and making it part of the on-boarding process for new team members.