ux/ui     product design     design systems

Core Design System

Project Overview

When I joined EventConnect they had no accessible design system to work off of for designers and developers. This led to many hours diving into old projects and utilizing html to figma plugins to grab designs so that new features could be added. Another problem was that devs had no system to reference and would create new modals, buttons, and type hierchy on their own. 

I along with other designers on the team advocated to create a cohesive design system along with EventConnects new brand refresh so that the confusion between dev and design would be solved.

The Goal

The Core Design System Update focused on modernizing EventConnect’s visual identity and strengthening its design foundation. The goal was to refresh the brand while creating a scalable, consistent design system that could support current and future product experiences across platforms.

Tools

Figma

Role

Product Designer

Team

Christine, Cam, Moe – Design

Spencer, Mackenzie – Dev

Process

1

Audit & Discovery:

I reviewed the existing brand and UI patterns to identify inconsistencies, gaps, and opportunities for improvement. Below is an example of all the buttons I had discovered accross multiple pages and modals in the product.

2

System Foundations & Component Design:

Our team established core design tokens (colour, typography, statuses) to ensure consistency across products. Once the foundational system was complete we created UI components that could be easily shared and resused across teams.

3

Testing & Implementation:

The new design system didn’t just solve the question of what button to use, but it refined layouts across pages, it cleaned up spacing between copy and input fields. Information became much more digestible for the user.

As the design system continues to evolve, we evaluated the impact of the newly implemented components on the overall product. Feedback from the development team highlighted both successes and areas that still need refinement.

Outcome

The updated design system delivered a refreshed, cohesive brand identity and a flexible set of reusable components. 

 

Overall this design system:

  • Created consistency across the product
  • Allowed devs to spend less time coding new components
  • Made handoff from Design to Dev seamless
  • Reduced back and forth during QA