Crazy Egg Style Guide & Component Library
When I first joined Crazy Egg, at the end of 2016, we were on the verge of tackling a roadmap of new features and new markets.
Projects increased over time. Collaboration got harder as each designer and engineer would develop their own solutions. With over 220,000 customers, our inbox flooded with feature requests.
With each new project, our design files were made with different tools Adobe Illustrator, Photoshop, and Sketch files. It slowed us down. Inconsistent design styles showed up.
Our design process and product was breaking down. We faced the onset of three main problems:
Disjointed user experience: eroded trust in the Crazy Egg brand and product
Inconsistency: lowered users' sense of confidence and familiarity
Performance: repetitive code caused performance problems
We lacked a solid design patterns that guided design decisions.
To work through these challenges, we invested in a component library and style guide.
The goals we set for the project was to: create a comprehensive library of design assets that drives greater efficiency through well-defined and reusable components.
We audited our old designs against new ones. Where were experiences breaking? Which sections needed an overhaul?
We established a few principles to guide us:
Unified: Each piece is part of a greater whole and should contribute to the system at scale. There should be no isolated features.
Accessible: Marketers, product managers, designers and digital strategists around the world use Crazy Egg. Our products and visual language will be warm, welcoming and accessible.
Conversational: Our copy emotes a personality. No fluffy jargon. We communicate with clarity.
Laying the foundation
We didn't have a basic foundation. We didn't have a style guide. We had a vague idea of what typography, colors, icons, spacing and information architecture we should based on existing designs.
We worked on designs separately and reviewed our work daily to: (a) identify patterns and (b) course-correct when divergences surfaced. We standardized components and left room for creative freedom.
Compiling the library
We collected components into one master file. We often refer to this file throughout the design process.
As the library grew, we organized each component into an artboard: typography, colors, buttons, dropdowns, input fields, tiles and more.
We knew that this was a challenging project. There were things we wish we would have done differently.
There were sets of components that repeat often. For us, these components are tiles and progress trackers. Looking back, I wish we had taken more time to think about the progress trackers and come up with a stronger component and more explorations.
Documentation: Delineate what you should use as well as what you shouldn't use. Elaborate on why.
Active Maintenance: We automatically sync our libraries in real-time.
While this project required us to carve out time and resources, the library enabled us to:
work faster with more development cycles
shift focus from design reviews on colors, typography choices and padding to concepts and experiences
have a shared understanding of visual style
streamline many, divergent contributions into one system
prototype in high fidelity faster