ESSENT RETAIL ENERGY

Design System

Re-introducing efficiency, consistency and the possibility of scale to Essent's digital products.

The Atomic Design Methodology

Based on the atomic design methodology, the Essent design system (EDS) uses molecules, organisms and templates. By doing so, the system is easy to understand and even easier to implement in products and applications.

Elements

These are the smallest building blocks of your project. Individual legos. Text styles, buttons, icons, input fields, checkboxes, etc. All these elements cannot be divided into smaller parts without losing any use (for instance, why would you need a button with no label or icon?)

Components

Those are more complex entities consisting of several atoms. Things like notification toasts, data values (label: value), input fields with buttons, etc. Sometimes, molecules are already functional elements that could be put anywhere on the page and work on their own. Usually, though, they need to be a part of an organism, to truly have a value.

Templates

Essentially, those are pages without real content. They combine organisms into a proper website layout. Once we defined our templates, they were able to be filled by Essent’s content team.

Sketch Library

Getting all designers on the same level

To make sure all designers are on the same page and are working with the latest version of the system, we published the Essent Design System to Sketch Cloud. Doing so made it extremely easy to push updates or changes to every single designer.

handoff from design to code

Bridging The Gap Between Design & Development

Product development is not just about crossing the finish line – it’s about seamlessly executing each step along the way, including the handoff from design to code.

Single Source of Truth

To make sure everybody is on the same page, we created a brandportal that acts as a single source of truth. Defined components (with accurate documentation and test results) are all stored in a central location and designers and developers are able to use the very same components.

Many of the frustrating and expensive misunderstandings between designers and developers have been reduced to a minimum thanks to this setup.