Gavin Friel | Save My Exams

Whilst Lead Product Designer at Save My Exams, I had the responsibility of ensuring that our design system helped us moved faster, together.

Zero to hero

When I joined Save My Exams, we had no design resources — the site was built on a WordPress theme. We were entirely limited to testing layout tweaks or new hypothesis with users in wireframes. Leveraging brand guidelines from a recent rebranding intiative, I conducted a UI audit, identified design inconsistencies, and created an inventory of components. Using these insights, I prioritized key issues and developed a unified design system to improve consistency across the platform, building from Atomic Design.

When I joined Save My Exams, we had no design resources — the site was built on a WordPress theme. We were entirely limited to testing layout tweaks or new hypotheses with users in wireframes. Leveraging brand guidelines from a rebranding intiative, I conducted a UI audit, identified design inconsistencies, and created an inventory of components. Using these insights, I prioritized key issues and developed a unified design system to improve consistency across the platform, building from Atomic Design.

Impact

As we scaled our design team, we saw little to no negative impact on design cohesion across the site. V1 of the Design System really stood up in terms of scalability across all squads. We were a small team, but we knew it was important to establish documentation and a practice of critique and governance on the design side to evolve the system.

Critique and review

We updated our design template to add a dedicated location for any component variations or additions. Designers brought components to design critique, and engineers had visibility into suggested permutations to provide early feedback. Overall, this helped us decrease creep, as we were forced to be much more intentional about accepted component changes.

Contribution standards

I made use of Figma's branches capabilities to create rules for merging new components into the system. Designers were unblocked incorporate new changes after they had received suitable review.

Shared ownership with engineering

I helped make a case for a dedicated role on the front-end engineering team focused on building out the coded component library and served on the interview panel to fill the role, with the goal of bringing the shared language closer together.

Clear and accessible documentation

While the engineering team worked on updating Storybook, I assembled a Figma prototype that housed our documentation that anyone could reference. This included deep dives into the use and constraints for each component, and general information on contributing to the system, easily navigable for quick use.

Tomato, tomahto

Once we had stabilized the state of the design system components and documentation, I focused on the processes and structure that would help us evolve it together. We worked with the dev team to ensure Storybook was implemented and all component states were implemented correctly, and this collaboration went some way to ensuring we developed a shared language around our system.

Once we had stabilized the state of the design system components and documentation, I focused on the processes and structure that would help us evolve it together. We worked with the dev team to ensure Storybook was implemented and all component states were implemented correctly. This collaboration went some way to ensuring we developed a shared language around our system.