Design System for GEMS

    Design system for an internal management tool for Bowlero Corporation + all internal products

    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

    About the project

    Background

    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.

    The challenges tackled

    • Pre-Work Setup: The primary challenge was setting up the design system as part of the pre-work, even before the project officially kicked off. This required laying the groundwork for the design system, including defining its structure, guidelines, and foundational components, to ensure quick adoption and implementation.
    • Branding and UI Foundation: Establishing the product's branding and envisioning the overall UI were important challenges to address before the project kick-off. The design system needed to incorporate the brand identity and provide a solid foundation for the visual aspects of the user interface, setting the tone for the product's overall look and feel.
    • Scalability: One of the critical considerations was to ensure that the design system could be seamlessly extended and applied to other internal products.

    01.Understanding the requirements & stakeholder needs

    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. .

    Key activities:

    • Gathered insights from stakeholders.
    • Identified pain points and challenges faced by the design and development teams on current and previous projects.
    • Defined the goals and objectives of the design system.

    Needs & objectives

    1. Stakeholders need: Consistency across internal tools

      2. 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.

    2. Stakeholders need: Efficiency in design and development processes to ensure the timely delivery of the product

      3. 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.

    3. Stakeholders need: Scalability and adaptability

      4. 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.

    02.Defining the design principles

    Based on the gathered insights, I established a set of design principles that would guide the development of the design system. These principles ensured consistency, usability, and accessibility throughout the user interface.

    Key activities:

    • Conducted some research to understand existing design systems that we can use and researched their best practices.
    • Collaborated with stakeholders to define the core values and principles for the design system.
    • Created a visual style guide to showcase the desired aesthetic and brand identity

    Researching existing design systems

    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.

    Picking a framework

    • Material UI is well-suited for internal tools, making it a reliable choice
    • It offers ease of customization through its flexible theming and styling options. This allows us to align the visual appearance of our UI components with our branding and design preferences
    • Familiarity also played a role in selecting Material UI3. Both the development team and I have significant experience with the framework, enabling us to work efficiently and deliver results quickly.
    • Furthermore, migrating our existing systems/products to Material UI3 seemed to require the least effort. One of the products was built using the MUI tech component system, while another used the ANT system. Migrating from ANT to Material UI appeared to be a less demanding task compared and much more cost-effective compared to other frameworks.
    • Seamless integration with React

    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.

    Defining core values and principles

    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.

    Creating a visual style guide

    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.

    03.Establishing the component library

    Using the Material-UI 3 framework as a starting point, I identified the core design components required for the design system. These components formed the building blocks of the user interface and provided consistency across different products and platforms.

    Key activities:

    • Analyzed the existing Material-UI and MUI components+documentation and determined their suitability for the project
    • Developed new components as needed, ensuring they followed the established design patterns and guidelines.
    • Built components from scratch to ensure fluid components aligned with the fluid design we were going for

    Analyzing existing Material-UI 3 components

    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.

    Customizing and extending core 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.

    Developing new components - atomic design

    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.

    Building fluid components

    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.

    04.Creating documentation and guidelines

    I created comprehensive documentation and guidelines for designers and developers to ensure seamless adoption and understanding of the design system. These resources outlined most components' usage, behavior, and best practices.

    Key activities:

    • Created a design system documentation section, including detailed explanations and use cases for most components
    • Developed guidelines for designers, including principles for typography, color usage, and layout
    • Integrate Storybook, a UI component development environment, to showcase and document the design system components in an interactive, isolated environment. This lets designers and developers explore, test, and reuse components easily.

    Creating design system documentation

    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.

    Developing Guidelines for Designers:

    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.

    Integrating Storybook:

    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.

    Reflection

    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.

Copyright © 2016-2024 szanilee.com.
Website Design & Development by Szani Lee.