Crazy Egg Style Guide & Component Library

Problem

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:
We lacked a solid design patterns that guided design decisions.

Goal

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.

Process

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.
As the library grew, we organized each component into an artboard: typography, colors, buttons, dropdowns, input fields, tiles and more.

Lessons Learned

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.
I worked with our front-end engineer and we came-up with a simplified approach by scrapping the mousetrails. We moved forward with the implementing the mouse hover and mouse click interactions.

Final Designs

Here are the final designs that demonstrate the Recordings product.
© Jessica TIAO, 2024
LinkedinMEDIUMInstagram