Design system for an online gaming platform

My role

I collaborated with the front-end development team and another product designer to spearhead the creation and ongoing maintenance of a comprehensive design system.

• Designing and documenting reusable components
• Ensuring design consistency
• Facilitating a smooth handoff between design and development

Tools

Sketch, Zeplin, BootstrapVue, Material Icons, Confluence, Jira

Duration

The foundational work on the design system took approximately two months. I then continued to maintain and refine the system over the following two years, adapting it to new product requirements and feedback.

Project overview

To streamline the collaboration between product and development teams and create a cohesive visual language across the Bingocams platform, I co-led the creation of a robust design system. Built on Bootstrap, the system became the UI backbone, providing a library of reusable components, design guidelines, and visual standards that enhanced consistency across the platform. By establishing a scalable design framework, we were able to expedite feature development and improve cross-functional communication, ensuring alignment on visual and functional details from the outset.

Problem

Bingocams.co.uk, a community-focused bingo platform, was undergoing a UI refresh to improve the user experience. However, the lack of a structured component library created inefficiencies in the design and development process, often resulting in an inconsistent user experience and requiring repetitive work for common UI elements. This inconsistency affected both the platform’s usability and the speed of implementation.

Process

• Research & Analysis: Conducted an audit of existing UI elements to identify inconsistencies and redundancies across the platform.

• Design System Structure: Created a component library using BootstrapVue as a foundation, prioritizing components commonly used across Bingocams.co.uk. Worked with stakeholders to define design guidelines, ensuring they were aligned with the brand’s visual identity and adaptable to various platform requirements.

• Documentation: Documented each component’s usage, interaction states, and styling specifications in Zeplin, making it easier for developers to integrate components accurately.

• Iterative Testing & Feedback: Regularly tested components in the platform environment, gathered feedback from both designers and developers, and made adjustments as needed. This collaborative process helped us refine and expand the design system over time.

Impact

The introduction of the design system had a notable impact on both the product and team workflows:

• Consistency and Cohesion: The platform's visual consistency improved significantly, providing users with a seamless and intuitive interface that aligned with Bingocams’ brand identity.

• Efficiency and Productivity: With a shared library of components and design guidelines, the development team was able to implement new features more quickly and with fewer iterations, reducing production time and costs.

• Scalability: As the product evolved, the design system allowed for smooth scaling, enabling new features to integrate seamlessly into the existing UI.

• User Satisfaction: The consistency and intuitiveness of the updated UI led to positive feedback from users, enhancing their overall experience on the platform.

Results

The design system became a pivotal tool in ensuring a unified user experience across Bingocams.co.uk. Thanks to the structured collaboration, the platform’s UI consistency improved, resulting in a better product for users and a more efficient development cycle for the team. This project not only addressed the immediate needs of the UI refresh but also set a scalable foundation for future growth and design innovation.