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.
ESSENT RETAIL ENERGY
Design System
Re-introducing efficiency, consistency and the possibility of scale to Essent's digital products.
The Atomic Design Methodology
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.
