Design System & Component Library
Year
Company
2022
branchbob
Project
Design Fundamentals
Challenge
During my employment at branchbob GmbH, my role was to develop a comprehensive design system and component library for the e-commerce platform. The primary challenges included:
​
-
Leveraging Existing Design Elements: Designing within the constraints of pre-existing colors and components while creating a cohesive and updated design system.
-
Collaboration with External Designers: Initially working with an external designer.
-
Creating a Modular Component Library: Developing a flexible and modular component library that would be highly compatible and applicable to a variety of use cases across the platform.
Skills: Design System, Component Design, Interaction Design, User Flow, UX Strategy, UX Writing, Visual Design, Responsive Design
​
Process
1. Initial Collaboration and Design System Creation
-
External Designer Partnership: Partnered with an external designer to align on the design requirements, making sure that the new design system fit seamlessly with existing colors and components.
-
Design System Development: Created a detailed and comprehensive design system that included colors, typography, buttons, input fields, and other essential elements. The aim was to establish a unified and consistent design language across the platform.
2. Component Library Development:
-
Modular Design: Developed a modular component library to ensure flexibility and wide applicability. Each component was designed to be adaptable to various scenarios, enhancing the overall usability of the platform.
-
Implementation with Development Team: Worked closely with the development team to translate the design components into functional elements, ensuring that the implementation met the design specifications and requirements.
​
Ongoing Development and Enhancement:
-
Continuous Improvement: Throughout my time at branchbob, I led the ongoing enhancement of the design system and component library. I collaborated with a student intern to refine components, iterate based on feedback, and ensure that the system evolved to meet new needs and challenges.
Solution
The project resulted in a robust design system and component library for Branchbob GmbH, delivering the following key benefits:
​
-
Comprehensive Design System: Established a well-defined design system that incorporated existing brand elements and provided clear guidelines for typography, buttons, input fields, and more, ensuring consistency across the platform.
-
Flexible Component Library: Developed a modular component library that is highly versatile and applicable to a range of use cases, improving the platform’s flexibility and ease of use.
-
Enhanced User Experience: The new design system and component library significantly improved the consistency and overall user experience of the branchbob e-commerce platform.
-
Ongoing Adaptation: Continued to adapt and enhance the design system and component library, ensuring that it remained effective and relevant as new requirements emerged.
branchbob GmbH now benefits from a unified and adaptable design system that supports a consistent and efficient development process, enhancing the overall quality and usability of their e-commerce platform.
