Building from the foundations to scale
Wanda Design System —
Wanda arose from the need to create a coherent user interface for Bipi's digital environment. We developed a scalable and atomized design system that not only streamlined workflows for both designers and developers but also ensured faster and more consistent results. This system was crafted to embody our brand image, integrating specific visual decisions that set us apart from our competitors. By focusing on the design of its components and foundations, our design system effectively supported both the design and development teams, enhancing the overall product experience.
Building Wanda, Bipi’s Design System
The need to create a new design system emerged from the limitations of our existing components, which were poorly structured, outdated, and lacked the necessary properties. Constantly detaching and modifying them slowed down our workflow. Additionally, the components failed to reflect the innovative visual identity we aimed for, and the design file itself was disorganized and difficult to navigate. Our goal was to develop a modern, efficient system that would streamline our process and deliver a cohesive, forward-looking brand experience.
Goals
01. Create a Recognizable and Consistent UI
Develop a cohesive user interface across the platform, ensuring that the car subscription process is fully digital and the brand is easily identifiable by users.
02. Design Scalable and Flexible Components
Design components that are adaptable and easily utilized by both designers and developers to enhance workflow efficiency while promoting scalability.
03. Document for Collaborative Use
Provide comprehensive documentation for all components and guidelines to ensure that designers and devs can understand and apply them in a coherent and consistent manner.
04. Build a Streamline File Structure for Increased Agility
Develop a well-organized and intuitive file structure that enables rapid access to design components and their corresponding documentation.
First of all, the discovery phase
Step 1
Conducting an Audit
We audited all UI components and core structures, cataloging elements like color codes, typography, and button styles. This clarified what needed refactoring for the new Design System while ensuring alignment with existing components and developer implementations.
Step 2
Researching Brand Materials
Next, we reviewed our brand book to understand our core message and collaborated closely with the marketing team in a workshop focused on verbal identity and defining our future corporate identity goals. Throughout this phase, we prioritized user-centric design.
Step 3
Benchmarking Other DS
In the final step, we benchmarked other Design Systems to gather insights for creating our own. This helped us identify key elements to develop, define document structures, and establish a prioritization strategy based on needs and effort. Analyzing these examples ensured our Design System would align with best practices.
Next, defining Wanda
Co-creating among teams
Design Systems must be embraced by the teams that use them, so we ensured the ideation and core structure were co-created by all involved departments. Through a series of collaborative workshops, we defined key elements together, ensuring buy-in from everyone.
Some worshops
Naming
Naming might seem minor, but it fosters engagement and pride. This is how Wanda came to life—a name that reflects our connection to the project and increases its value within the team.
Design Principles
Drawing from our early research, we established core design principles that define who we are as a design team and what Wanda's design must always embody.
Document Structure
To serve Wanda's users—designers and developers—we outlined a document structure that includes files, sections, foundations, and components, ensuring it's organized and easy to use for everyone.
Building a Design System
Core elements
Creation of the foundations
We needed to establish the core values and translate them into Figma styles. We debated whether to use styles or variants, but since variants were still in beta, we chose to stick with the traditional approach. Additionally, we prioritized accessibility from the start by using plugins like "Contrast" and "Stark." Another key, yet challenging, aspect was defining tokens. In collaboration with developers, we created tokens following Nathan Curtis' guidelines.
01. Color
We started with primary and secondary colors, then defined semantic colors. We also worked with developers to create color tokens.
02. Typography
We defined typographic hierarchies for mobile and desktop, creating corresponding styles in Figma based on size.
03. Icons
To ensure a well-structured atomic design, we built an icon library and established best practices for adding new icons.
04. Images
Guidelines were established specifically for the use of car images and how users should interact with them in the product.
05. Grid and Layout
We optimized layouts and grids for all viewport sizes, ensuring responsiveness and maintaining a consistent experience across all devices.
06. Radius
We applied an 8px rule for corner radius, ensuring consistent and cohesive radii across all components to enhance visual harmony
Atomic design
Components creation
Following the prioritization matrix, we began refactoring and creating new components, categorizing them as defined in the workshops. Before designing each component, we conducted thorough benchmarking to determine the necessary properties, values, states, and variants. This ensured the components were easy for designers to use in prototyping. We collaborated closely with the development team, reaching agreements on what components were needed and how they could adapt elements from their existing libraries to meet our design requirements.
Designed for Cross-Team Use
Documenting for a better application
Documenting a design system is crucial for ensuring consistency and clarity across all teams involved in the design and development process. We meticulously listed all states and the anatomy of each component, detailing their purposes and providing clear do's and don'ts for usage. This comprehensive documentation not only guides designers and developers but also fosters a shared understanding of each component's role within the system.
Zeroheight
To further enhance usability and recognition, we are actively seeking funding to transition our documentation to ZeroHeight. This platform will provide a centralized and visually appealing space to showcase Wanda, empowering teams and strengthening collaboration across the organization.
Governance
Additionally, we are establishing governance processes to manage requests for changes and the introduction of new components, ensuring that the design system evolves in a structured and efficient manner.
Design systems are continuously evolving to meet the growing technological needs of the company and its teams.
Post-Process Insights
Co-creation
Design systems connect design and development while reinforcing brand communication. Involve teams and stakeholders to ensure alignment and collaboration.
Guidelines
Comprehensive documentation is key to success. The more clearly you explain the application of components, the fewer mistakes will occur, leading to better results.
Accessibility
Accessibility should be central from the foundations. Define components carefully to ensure they’re accessible to all users, with no room for oversight.
Adaptability
Like digital products, design systems are constantly evolving to meet new design needs. Ensure scalability and set up a strong process for managing changes and updates from all teams.