How design tool innovation helped us navigate complex design system updates
Leonie Proske and Gonzalo Vasquez, Product Designers in the Zalando Design System team, share highlights from their talk at Schema in London on how collaborative design tooling catalyzed the success of a high-priority project.
Done right, design systems can speed up the design process, freeing up space for the moments of inspiration and connection that drive innovation. The Schema conference in London, one of Figma’s three major recent global conferences dedicated to design systems, created a valuable space for exchange within the design systems community on tools and approaches we can use to move forward together.
“We are all facing similar challenges, regardless of the size of our organization,” reflects Leonie Proske, who presented at the conference with fellow Zalando Design System (ZDS) Product Designer Gonzalo Vasquez. “It was inspiring to learn how others are solving problems in this space. We loved the examples of multidimensional systems and how they bring brands and marketing closer together. Automation and motion design are other exciting developments. The conference gave us food for thought on how we can expand our sphere of influence, and the mindsets we can use to approach that.”
The pair took the audience through their team’s instrumental contribution to a high-priority project. Uniting experts from across Zalando’s design community, the challenging brief of Project Omnibus was to redesign our product cards to reflect the European Union’s new rules on how to disclose price discounts, benefitting both business goals and the customer experience. And all in just a few weeks! (Learn more about the discovery and design process in this recent article.) An integral part of our e-commerce system, product cards give customers an intuitive overview of a product. Along with an image thumbnail, they display all the essential information — including brand, style name, and price — while being optimized for every device.
How did the ZDS team navigate complex component updates in collaboration with embedded design teams, and what tools catalyzed their success? Read on for a summary of Gonzalo and Leonie’s talk.
The Zalando Design System
The Zalando Design System (ZDS) supports over 50 teams in building products that masterfully express our brand identity. It covers all of Zalando’s platforms — web, app, and email — with more than 200 components and 70 styles. Far from being a simple pattern library or a set of design guidelines, our design system is created and maintained by dedicated teams and owned and contributed to by all.
“What makes the Zalando Design System so effective is its human face. It is built around the people that use it rather than the components themselves.”
What makes the Zalando Design System so effective is its human face. It is built around the people that use it rather than the components themselves. In other words, like all product design work at Zalando, our design system is driven by the customer’s experience, making it an (internal) product in its own right.
“Our design system is very mature,” says Gonzalo. “It’s up there with the most established players in the industry, taking into account the size and cross-functional structure of our team and the sophisticated support we offer. We believe design systems are socio-technical systems. Collaboration is what drives us forward. Design systems are for people — as per design systems advocate Jina Anne’s rallying cry back in 2017.”
Keep it simple, Sherlock
No quote could sum up the product card better than Paul Rand’s: “Design is so simple, that’s why it’s so complicated.” The design of a product card factors in much more than a product picture, description, and price. How we present information greatly impacts the customer experience. And on the business side, making even the smallest changes can significantly influence the conversion rate. As one of Zalando’s founding principles, “Keep it simple, Sherlock,” describes, simple, robust solutions come from deeply understanding a problem. The Project Omnibus team’s chosen product card design resulted from in-depth user research and hundreds of design iterations. The last piece of the puzzle was devised by the ZDS team: a component that dynamically adjusts its height to accommodate additional pricing information. On a technical level, the challenge was not so much creating the component itself, but the surrounding responsive grid layouts that would accommodate it — something that made collaborators and stakeholders a little nervous.
“The product card is the heart of our e-commerce system and requires more attention due to its central function.”
“A simple change to the product card contains a lot of complexity because it is optimized for every pixel,” explains Leonie. “The product card is the heart of our e-commerce system and requires more attention due to its central function. Currently, we have ten product card components in our library, which can be used in many different ways and contexts. What’s more, they are all owned by embedded product design teams responsible for different parts of the customer journey.”
Components of collaboration
The ZDS team did not only need to address the immediate challenge of designing an innovative product card component and grid layout. They also had to consider how the embedded teams would use it to craft their part of the customer experience. This included making design changes easier to navigate in the future, advancing design progress.
“We endeavor to future-proof updates,” says Leonie. “Previously, we had to update each product card design manually. Our new product price component is inserted into all product cards, allowing us to make faster global changes.”
During the updates, they noticed that some changes would break the Zalando Zill-It-In plugin, which directly influences how designers use the product cards. The custom-made internal plugin automatically populates Figma layers using real data from the Zalando website (images, product names, prices, etc.). The designers closely collaborated with Software Engineers in their team to fix any issues related to the new component properties and to add multi-language and multi-currency support.
Deepening co-ownership
Leonie and Gonzalo credit some of their team’s rapid progress to two new features from Figma. The team used Boolean Properties to iterate on component structure, adding more toggles to make the product card easier to use. “We aspired to relieve designers working with the product card component, saving them clicks and clearing up any confusion,” explains Gonzalo.
The Branching feature had the most impact on the design system updates. It offers a safe way to isolate each designer’s work, allowing them to experiment without making any changes to the main file in the library. “Previously, the whole team was working on the file simultaneously,” says Gonzalo. “Now we can branch off and merge our work back into the library when ready. We used separate branches for each product card component. This enabled us to review the changes separately with each team and establish a proper approval process before publishing.”
“Design systems cannot be made in a lab. Co-ownership works only if we ensure teams are part of the process.”
Zalando’s Product & Category Experience team owns the vertical product card component. When first reviewing the updates, they shared valuable insights on how they use the component and the issues they experience. “This encouraged us to include more properties and increase parity between design and code,” Gonzalo explains. “Even though the maintenance effort and the number of variants would increase on our end, we believed it to be a good return on investment because we are dealing with one of the most used components.”
The bonus of integrating Branching is deeper co-ownership. “Since the review feature enables teams to approve new changes before we merge them, component owners are more informed than ever about what we’re creating or changing,” Leonie explains. Another advantage is that Branching allows any team member with access to the file to create their own branch, further encouraging other teams to contribute to the component library.
“Design systems cannot be made in a lab,” Gonzalo asserts. “Co-ownership works only if we ensure teams are part of the process. We have now integrated Branching as part of our workflow for other contributions, thanks to new internal branching guidelines and naming conventions.”
Branching 101
Are you feeling inspired to integrate Figma’s Branching tool into your collaborative work? Here are some quick tips from Leonie and Gonzalo.
- Start small: “Try to capture all possible changes in a branch in a manageable way so that others can review them easily. As a rule of thumb, consider one branch per component.”
- Sequence the merges: “Following the review and approval process, merge the branches in the order of possible dependencies. Ask yourself: Does one branch depend on another? Which one should we merge first?”
- Plan the release: “Organize how to announce the new features to the design community in alignment with the code releases.”
- Avoid copying between branches: “There are many reasons not to do this; the main one being that it risks breaking the components in the branch.”
From bug bash to big bash
Before publishing the updates, Gonzalo and Leonie ran a bug bash with colleagues from the Zalando design community to detect issues such as overrides and missing variants. Bug bashes are collaborative sessions in which software is explored from all angles and devices in order to root out as many bugs as possible. “To be as thorough as possible, we did this in a structured way,” Gonzalo explains. We prepared a sheet linking to each branch and created a template in Figma with instructions to test the component and the plugin. This allowed us to resolve each bug one after another.”
The ZDS team’s achievements exceeded their expectations. “The component properties allowed us to build a very flexible component that now includes all relevant features as toggles,” Leonie explains. “Ultimately, we have more design variants than before, but a significant improvement in usability and only one click to toggle a sale price instead of the previous seven clicks. We also identified future opportunities for both the product card component and the Zill-It-In plugin. Thanks to Figma’s new Nested Instances feature, currently in beta, we will soon be able to reduce the number of variants significantly.”
Key takeaways
Presenting at and participating in such a major design systems conference was an impactful experience. “One of the biggest takeaways from the conference was that design systems have so much potential!” Gonzalo and Leonie reflect. “These kinds of conferences create key moments where the community can see how others are progressing and there’s a feeling that we’re all moving forward together. The event and talks sparked so many small and big ideas that we will now use as conversation starters in our teams!”
What was the most rewarding part of the ZDS team’s journey? The excitement of the Zalando design community when they announced the updates and a demo of the new product card. “The response gave us a clear indication that we are moving in the right direction,” says Leonie. The journey is not over; we’re encouraging designers to share feedback when working with the new component. The power of feedback to elevate design systems was emphasized at Schema. We already have a good feedback practice at ZDS. However, we want to further establish it with regular surveys so that we can really understand how useful and helpful the design system is for the users.”
“Treat everyone around you as co-learners and build empathy between system and feature teams. We have so much to learn from one another!”
What was Gonzalo and Leonie’s biggest takeaway from Project Omnibus? “It was amazing to see what we could achieve collectively and to experience the support and commitment of everyone involved,” reflects Leonie. “We would encourage others to seek feedback where they haven’t before and to find opportunities to listen more deeply to users and observe. If we were to face a similar challenge again, we would be well-equipped due to the knowledge, tools, and processes we evolved and documented during this process.”
“Trust is everything,” Gonzalo concludes. “At Zalando, the design level is super high, so you can always trust that people will do the right thing — both independently and collaboratively. Above the tools, processes, and team spirit, so much of our success comes down to how we build and maintain relationships. We treat each other as human beings before all the technical stuff. One learning that stood out from this project was this: Treat everyone around you as co-learners and build empathy between design system and feature teams. We have so much to learn from one another!”
If you would like to learn more about Leonie and Gonzalo’s design process in this project, you can watch their full talk on YouTube. And, as always, we would love to hear your reflections in the comments.
