We did a thorough audit around getting all different components like the type styles here, under one file. This gives us a rough idea about what was ahead of us.
→ Performance Issues:
The website was not performant with a considerably high load time for the components on every page change.
→ Development Issues:
The teams were not happy with the current amount of technical debt which growing at a high pace as new product experiences were being developed.
→ User Experience Issues:
Our design experience was inherently broken making our brand image to be affected.
Notes from one of our many workshops to gather components (like buttons, here) and argue if we need them or not.
→ What is the ES Design system?
ES Design System is a place of reference for both designers and developers, where all the reusable components and design patterns that we have use are gathered and documented. This will make us to build platform agnostic products with less time in building components and more on building experiences.
→ What the ES Design system is not?
ES Design System is not a redesign or a rebrand project, it doesn't expect the developers to go back in time and change what is done so far. The project aims to build present and future components without wasting time writing duplicate code. All components that exist in the system, should be reused.
Some of decisions we took early to provoke a discussion around what we wanted to achieve with the design system now and what we could do with in future.
First draft of our grid system, taking insipration from existing grid system in the code base. We made this the default grid to start any new project.
Our first reduced color palette, it still had gapping holes since our brand color and the error(the 2 reds) color were particularly close to each other.
© Raghu Nayyar — 2020