Improving R&D process by covering daily jobstories with design system

SEOmonitor is an analytics tool that helps SEO agencies to acquire and retain more clients with efficient SEO campaign management. Based in Romania, serving customers based in US and Europe.

My role was to create scalable components library to cover daily designers’ and engineers’ needs in SEOmonitor’s complex environment.

Problem

After several redesigns, product became overwhelmed with bunch of similar and inconsistent components, leading to longer development cycles, blocking possibility of quick experiments.

Showcasing existing UI inconsistencies. — Example of design inconsistencies in product onboarding.

Solution

We decided to implement new components while revising one of the core flows of the SEOmonitor. This way we could test components in reality and create a practical usage example for the team.

I received proof of concept as an input. My goal was to systematize the designs and build a flexible component foundation that would serve the team for this and upcoming projects.

Crafting components

I documented all required component and built basic version of them covering just a couple of states each to validate the approach.

Personal testing

I rebuilt proof of concept project using new components. This served as a first UX test and uncovered improvement points to work on. To get to the final result I had to improve on few parts:

Settings of the component
States
Flexibility, yet simplicity
Library organization

All steps rebuilt on new components — All steps of the onboarding were covered by design system.

Testing with designers

Real validation came from designers working on complex features. I prepared test tasks using our most technically challenging screens.

Surprisingly it went much smoother than all of us expected. Both designers were able to complete the test. We identified few things to optimize, but overall results were far beyond our expectations.

Showcase of designers iteration on testing the components — Both designers rebuilt the concept in just 10 minutes, even though it was their first time seeing the new components.

Making the system

As next step we needed to implement all of them to our small but existing component library. After a bit of research, I’ve expanded our categorization system to make space for new components.

Illustration of the design system library structure

Frontend delivery

I aligned with FE team on the implementation principles and components to implement. Nothing special to say here, it went pretty smooth with some minor alignment of property names with common frontend namings.

Result

All new projects are built using design system components. Both design and frontend teams can now focus on the logic and flows, instead of pixels.

The library structure I designed was successfully scaled across multiple product directions. I supported the scaling phase with instructions and component reviews.