My Role: Lead product designer/Senior Product Designer
Team: Front-end developers, Product Owner, myself as the Product Designer
Design file in Figma: View the design system file
Time: May-June 2023
The project revolved around the set-up of a design system specifically tailored for an internal management tool at Bowlero Corp., aimed at supporting their day-to-day operations.
However, the scope of the design system extended beyond just the current management tool. It was designed to be a universal framework that would not only support the existing product (referred to as GEMS) but also serve as a foundation for future internal products developed within Bowlero Corp. This approach ensured consistency and synergy across various tools and applications, enhancing the overall usability and brand identity.
Note: This case study delves into the research, key decision points, and the initial setup, which I led independently. Later, I co-owned the design system with a senior designer who joined me later, but this project exclusively highlights my solo contributions and the initial setup.
To initiate the project, I actively engaged with essential stakeholders, including front-end developers, the product owner, the tech lead, and other executive members closely involved in the project. By gathering requirements and insights from this diverse group, I ensured that the design system would address their specific needs while aligning with Bowlero Corp.'s overarching objectives.
By actively listening to their input, I gained valuable insights into their unique requirements, pain points, and aspirations. This inclusive approach fostered a sense of ownership and collaboration among the stakeholders, ensuring their buy-in and commitment to the design system's success.
By harmonizing the stakeholders' input with the organizational objectives, I ensured that the design system would facilitate efficient and effective processes, streamline development efforts, and enhance the user experience. This alignment not only guided the development of the design system but also ensured its relevance and value in the context of Bowlero Corp.'s broader strategic initiatives. .
Goal/objective: Establish a design system that ensures a consistent visual language, interaction patterns, and user experience across all internal tools, creating a unified brand identity.
Goal/objective: Streamline the design and development workflow by providing a comprehensive set of reusable components, clear documentation, and guidelines, reducing duplication of effort and increasing productivity.
Goal/objective: Create a design system that can accommodate future growth and changing requirements, allowing for easy integration of new features, platforms, and technologies, thereby future-proofing the organization's internal tools.
Conducted thorough research to explore and understand existing design systems that could serve as valuable references. This involved studying established design systems used by other organizations and analyzing their best practices. This research aimed to gain insights into successful design patterns, components, and methodologies that could be applied to our own design system.
Although ready-to-use web components for Material UI3 were not available or stable at the time of setup, we agreed with the development team to style and customize the MUI components according to the Material UI3 guidelines.
We opted for Material-UI (MUI) for our new web application due to its seamless integration with React, our chosen development framework. Additionally, MUI's highly customizable theme provided us the flexibility to align the product's UI with Material Design 3. MUI has extensive and well-documented API references for each reusable React component that implement Material Design guidelines.
This choice is a win-win situation for the design and development teams, enabling us to create a visually appealing and cohesive user interface in a short amount of time.
Based on the collaborative discussions, established a clear set of core values and principles for the design system. These principles were focused on achieving consistency, usability, and accessibility throughout the user interface. Examples of such principles could include simplicity, clarity, efficiency, responsiveness, and inclusivity. These principles were the foundation for making design decisions and maintaining a cohesive visual language across the design system.
Developed a comprehensive visual style guide that captured the desired aesthetic and brand identity for the design system and the product/all internal products. This involved defining typography, color palettes, iconography, spacing, layout grids, borders/corners, elevation and other visual elements. The style guide acted as a reference document for designers and developers, ensuring visual consistency and coherence across different components and screens of the design system.
Evaluated the existing components provided by the Material-UI 3 framework to determine their suitability for the design system. This involved studying each component's functionality, design, and code structure and assessing how well they aligned with the product’s visual style and design principles. By understanding the capabilities and limitations of these components, informed decisions could be made regarding customization or development of new components.
Customized and extended the core Material-UI 3 components to ensure they harmonized with the product’s visual style and design principles. This involved making adjustments to typography, colors, spacing, and other visual properties to achieve a consistent and cohesive look and feel throughout the design system. By leveraging the existing components and adapting them to the product’s needs, development time and effort were optimized.
Identified the need for new components that were unavailable in the Material-UI 3 framework or required customization beyond the scope of the core components. Developed these new components from scratch, ensuring they adhered to the established design patterns and guidelines. This involved considering factors such as component functionality, visual consistency, accessibility, and responsiveness. The new components were designed to seamlessly integrate with the existing system and provide a comprehensive set of building blocks for the user interface. This activity needed consistent collaboration with the development team.
Implemented fluid components to align with the desired fluid design approach. These components were designed to be flexible and adaptable, accommodating various screen sizes and orientations. By considering responsiveness from the outset, the design system could effectively scale and adapt to different devices and platforms. This involved utilizing techniques such as fluid layouts, responsive typography, and dynamic component behaviors.
Established a dedicated section within the design system documentation that provided comprehensive explanations and use cases for most components. This documentation served as a central reference for designers and developers, offering detailed insights into each component's purpose, functionality, and usage. It included clear descriptions, visual examples, and any relevant design considerations or variations.
Crafted guidelines specifically for designers to ensure consistent and cohesive design practices across the organization. These guidelines covered essential aspects such as typography, color usage, spacing, layout principles, functionality guides, component variant guides, and other design elements. By providing clear instructions and best practices, designers could effectively align their work with the design system's visual style and principles. These guidelines helped maintain a unified and visually appealing user interface.
Integrated Storybook, a UI component development environment, into the design system. By leveraging Storybook, the design system's components can be effectively showcased with their various states, allowing for thorough documentation and demonstrating their behavior and usage in different scenarios.
While setting up the design system for Bowlero Corp., we faced challenges with limited ready-to-use components in Material Design 3. We overcame this by customizing existing components and developing new ones. Implementing fluid components for a fluid design approach also required careful consideration, but the team's dedication and collaboration led to a successful outcome, resulting in a comprehensive and scalable design system.