Role: Design System Manager
Westwing's tech team faced two main challenges:
1. The lack of a proper UI library led to the creation of unnecessary components, resulting in wasted design time, duplicated elements, and inconsistent visuals across platforms.
2. An existing UI Kit was unfeasible due to the absence of a clear design pattern, making reuse of elements rare. As a result, even the smallest implementations required building from scratch, significantly increasing man-hours.
1. Simplification: The first step was to audit all UI elements, removing duplications, simplifying complexities, and challenging unjustified customizations.
2. Research: With the final set of preserved elements, the goal was to determine the best structure to support the company’s complexity and ensure alignment between the UX Design and Engineering teams.
3. Documentation: To ensure consistent adoption across teams, comprehensive guidelines were documented to support the proposed structure.
4. Implementation: Team collaboration was key! The entire design team participated in a 3-day sprint to populate the Design System library, migrating existing components and creating new ones based on the newly established guidelines.
After a previous attempt to organize our UI elements using the Atomic Design Methodology, we developed BEA, our final design system.
BEA is organized into four sections:
1. Foundations: Where we store the company’s branding and core guidelines.
2. Assets: Includes UI exports such as icons, logos, and badges.
3. Components: The most complex and frequently used section, housing all reusable components that are essential for the UI Kit.
4. Standalones: Contains elements not reused in code (e.g., footer, header) but still important for the design team when creating mockups.
