Annie Au

When I joined the team MarkUp had no design system. I saw the frustration being felt by engineering and so I decided to implement a design system. MarkUp was also part of the Ceros product suite, but each product had separate identities with individual teams creating their own patterns using different tools such as Sketch, Invision, Adobe XD, and Zeplin. The goal was to have all products using a centralized Design System and patterns.

Each new feature that was being implemented had to be built from scratch by design and engineering.

I was the lead designer for MarkUp and created the Design System pattern that would be adopted by all Ceros products.

To get a real understanding of the problem, I started by speaking to the different teams at MarkUp and at Ceros' other product teams. Engineering had brought up in several retros, that building from the legacy design files was complicated and resulted in ambiguous decisions.

I was able to confirm that this problem had two primary causes:

    • Design file format
    • (Lack of) re-use of components

MarkUp's original design was built off of flat design files created in Adobe Photoshop, and eventually in Adobe XD. Each new design was built from scratch, resulting in slight deviations between each design element.

I also explored some established design systems like Material Design, and researched atomic design principles and methodology.

In order to move quickly, I began by experimenting using Figma as a proof of concept with engineering, which was incredibly successful. From there I started breaking out an iterative approach to start building our design system.

I began by auditing the existing design files, ensuring the design files are accurate and reflect production. This is an example of an Adobe XD file showing various dropdown states that was given to the engineers:

After this audit, I was able to to create a rough grouping to understand what was present and what was missing from the existing design files.

Building off of this proof of concept, I started to build out the MVP of the system. I started by fleshing out each of the details needed for the existing components.

I made sure that the progress that was being made here for design was also benefiting the engineering teams. We had frequent check-ins to review the design files usefulness.

Eventually, the MarkUp design team grew, and together we were able to get the design system to a much more complete state. We had detailed documentation for each component type which made design projects and technical implementation much faster.

We had proven that the investment in the design system was worth it, so I took our system and learnings and presented to the other designers in our parent organization. The other teams were interested in adopting, so I led a proof of concept that would create standardized components across our product suite.

The design system we had worked on came in handy when our leadership team decided all of our products should have a matching visual style. This initiative was launched at the same time as my project redesigning the MarkUp navigation. These are the original versions of Ceros and Chartblocks:

And after the redesign using the design system:

Since we had already worked towards cross-product adoption, the design explorations and implementation went very smoothly.

The design system paid for itself in the first month following the MVP. We realized that the product had run away from us slightly. We had over 20 shades of gray, modals and dropdowns would vary slightly, and much more.

Ultimately, design system enabled us designers to create more consistent files quickly, and empowered engineering to move more quickly. In addition, seeing the desire for cross product adoption really reinforced my pride in the value of the system.