ELANGO
ELANGO
Portfolio
Design System-Cover.jpg

Background & Strategic Fit

Our team empowers about 100+ Digital Marketers across 16 teams distributed in different continents to build Marketing pages on Experian.com. The platform provides marketers with 10 templates and 52 components for page building. 3 years ago, when the platform was first setup, the UX and UI was driven heavily by Engineering team. We have had to scale up rapidly in the last 2 years resulting in a huge design debt. 

Recurring issues around spacing, typography and other inconsistencies has forced us to take a deeper look at building stronger foundations.

 The goal of the design system initiative:

  • Create a shared visual language  between Engineering and Design teams

  • Establish new standards around the platform to create uniformity across all components

  • Collaborate with key engineering team members to establish the pattern library on Figma


Why

  1. To remove inconsistencies and handle design debt

  2. To be nimble and scale faster

  3. Easy onboarding for Designers and Developers

Process

To build the robust design system that is easily scalable, I used the principles of Brad Frost's Atomic Design.

FIGMA AEM UI KIT

Shared Styles

Screen Shot 2021-01-08 at 11.42.51 AM.png


FIGMA AEM UI KIT

Component Library

Screen Shot 2021-01-08 at 11.42.19 AM.png

SKETCH

Shared Styles & Component Library

Screen Shot 2021-01-08 at 11.46.37 AM.png