Based on the Atomic Design Method, the Eventbase Manager design system is a comprehensive pattern library and styleguide built for the purpose of uniting the product design and front-end development teams around a common visual language.  

Based on the Atomic Design Method, the Eventbase Manager design system, is a comprehensive pattern library and styleguide built for the purpose of uniting the product design and front-end development teams around a common visual language.  

After conducting an extensive UI audit of Eventbase Manager, it was clear to me that we needed a more scalable system of design that would accelerate the design process and create consistency between features and functionality for the platform. Using the tools available at the time – Confluence, InVision, and Sketch I created a component-based library and online style guide that was used by the product design and front-end development teams. 

This new system of design helped to alleviate the challenge of designing complex systems by providing approved components for all core functionality. As we added new features to Eventbase Manager, we would review and add the required components to the pattern library, creating a living document that all designers could contribute to.

After conducting an extensive UI audit of Eventbase Manager, it was clear to me that we needed a more scaleable system of design that would accelerate the design process and create consistency between features and functionality for the platform. Using the tools available at the time – Confluence, InVision, and Sketch I created a component-based library and online styleguide that was used by the product design and front-end developement teams. 

This new system of design helped to alleviate the challenge of designing complex systems by providing approved components for all core functionality. As we added new features to Eventbase Manager, we would review and add the required components to the pattern library, creating a living document that all designers could contribute to.

The results were a component-based pattern library using Sketch, and an interactive style guide using InVision. We designed our components on 8 point grid which provided a flexible solution for future responsive web improvements, and extended the colour palette to account for notifications, alerts, and data visualization. 

Not only did this help to streamline our overall design process and workflow, but it also helped to create a component-based development process that allowed the front-end team to re-use global components for new features and functionality, which in turn increased velocity and collaboration between the two teams. 

The results were a component-based pattern library using sketch, and an interactive styleguide using InVision. We designed our components on 8 point grid which provided a flexible solution for future responsive web improvements, and extended the color palette to account for notifications, alerts, and data visualization. 

Not only did this help to streamline our overall design process and workflow, but it also helped to create a component-based development process that allowed the front-end team to re-use global components for new features and functionality, which in turn increased velocity and collaboration between the two teams.