Cover Image.png

Crazy Egg Style Guide & Component Library

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. We had designers and engineers join and leave.

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 requests.

We needed to compete with the high saturation of other CRO companies. 

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.

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.

style-guide-component.png

Compiling the library

We collected components into one master file. We often refer to this file throughout the design process. 

style-guide-artboards-1.png
style-guide-artboards-2.png

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 and more explorations. 

  • Documentation: Delineate what you should use as well as what you shouldn't use.
  • Sketch: We first tried to create symbols in Sketch. But that caused a huge mess. It's a challenge to maintain. 

Since then, we've automatically synced our symbol libraries in real-time. We actively maintain the styles.

Style Guide - Component Library 1.png
Style Guide - Component Library 4.png
Style Guide - Component Library 5.png
Screen Shot 2018-05-18 at 1.52.31 PM.png
Screen Shot 2018-05-18 at 1.51.53 PM.png

Conclusion

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