The power of metaphor in designing a visually elevated experience
Product Designer Anna Shapovaliuk explains how her team used metaphor to reimagine the look and feel of Zalando’s Designer experience.
Life is a journey, not a destination.
The world’s a stage.
The future is a blank canvas.
Metaphor is an invaluable creative tool, enabling us to discover and express the nuances that foster a rich understanding or experience. Envisioning an unknown in terms of the known appeals to the very essence of the human imagination. Metaphor shapes how we think and act; harnessing its power, we can create sensory landscapes that elicit deep emotional responses. As such, metaphor is rocket fuel for product design.
A solid metaphor, like a strong set of design principles, can shape a refined experience by providing an unshakeable reference point throughout the product development process. It can help us carry qualities from one experience over to another, as demonstrated by the ‘Mash-Up’ ideation method. In the visual sphere, it can also provide direction and cohesion in the look and feel of a product.
When the product design team behind Zalando’s luxury, beauty and pre-owned assortments, Emerging Propositions, set out to reimagine our Designer experience, they began by asking the question:
How might we create an elevated Designer experience that speaks the same language as luxury brands and tells a consistent story across the journey?
Metaphor was the answer. Understanding that much of the story would be told visually, the team chose the metaphor of a physical designer boutique to craft a look and feel evocative of luxury. Read on to learn more about how they interpreted and expressed this metaphor through visual product design.
Online shopping as a boutique experience
The team had an interesting problem: to attract more brand partners to grow the Designer assortment and, in turn, attract more customers shopping for luxury fashion.
“When we started, the aesthetic of Zalando’s luxury experience was no different than the regular one,” explains Product Designer Anna Shapovaliuk. “We wanted to achieve an elevated look and feel, and give the sense of sophistication, elegance, and luxury typical for this category of items. Understanding that our target customers are accustomed to a certain aesthetic and experience, we used the metaphor of a physical designer boutique to discern what key visual elements and design details we would need to include in the reimagined experience.”
It was important for the team to achieve this elevated aesthetic while retaining the visual identity of Zalando. As such, they wanted to hone in on a style that was more contemporary than experimental, exciting and inspiring the customer without overwhelming them.
The project would involve multiple teams and touchpoints, including the catalogue, brand home, Designer home, and the product detail page. The Zalando Design System (ZDS) team would also contribute to the interface design, creating a tailored theme.
“Our challenge was not only to design an elevated look on Designer home, where we present the assortment, but also to be a red thread for customers. As they moved from page to page, we wanted them to have a consistent experience, which wouldn’t end abruptly when leaving the catalogue to go to the product detail page.”
What makes a store a boutique?
To translate the boutique experience to the online medium, the team did extensive benchmarking to pinpoint the key aesthetic elements that evoke a feeling of luxury. From this research, they defined common attributes and translated them into digital design elements.
A curated selection
“The luxury experience is the opposite of the shopping mall experience where you see many items at once. The selection is more minimal and directional, taking customers on a journey. We wanted to emulate this in our digital experience.”
Multiple media formats
“The physical space provides a platform for the brand, which is showcased in multiple media formats. Likewise, we wanted brands to be able to use our platform to tell their story compellingly.”
A space that gives the products the stage
“Boutiques are often architecturally elevated but toned down enough to avoid interference with colours and prints. They are almost like gallery spaces where products are presented as art pieces. The rooms are very spacious, allowing the products to breathe. This translates visually into product design as plenty of white space and a clean, uncluttered, and mostly monochrome layout.”
Luxurious furnishings
“In boutiques, furniture pieces add an extra dimension of luxury to the space. An equivalent in the online experience is elevated typography. For example, playing with fonts or using big titles as a decorative treatment.”
A platform for brand expression
Another crucial part of the research and development phase was interviewing internal stakeholders and existing partner brands to discern their needs and expectations.
“Our conversations with stakeholders helped us validate and expand on the ideas that emerged from the benchmarking process. They also highlighted motion design as a way to increase the immersion of the experience. Most of all, partners envisioned a platform where they could express their brand. For example, through full-screen images.”
Developing the visual elements
The team then developed on the boutique elements that surfaced during the discovery phase. It was a highly experimental and collaborative process, where they explored multiple ideas through moodboarding, rapid sketching, and daily discussion. To ensure alignment on the visual direction, the expression of the Zalando brand, and scalability, they also implemented daily check-ins with stakeholders. Given the fast-paced nature of the project, this allowed them to facilitate quick reviews and iterations. As the Zalando Design System (ZDS) team needed to create scalable new components, they were involved very early in the process.
“The metaphor played a big role in crafting the desired visual elements. For our typography ‘furnishings,’ we stayed true to the Zalando fonts but combined serif and sans serif for a subtle twist that adds visual interest. We also made titles bigger to grab the customer’s attention as a decorative element. Reflecting on the clean and spacious contemporary boutique feel, we increased white space and created a neutral and minimal colour palette to allow editorial images to stand out.”
Following partner and stakeholder guidance, the team included motion design elements to give the feeling of a crafted experience. For example, certain images enlarge to meet the eye when the customer scrolls past them.
“The book Aesthetic Intelligence by Pauline Brown inspired me a lot. It gives many examples of how aesthetics and elements like motion help to articulate a feeling. Using haptic feedback in the digital space, for example, engages more of the customer’s senses, through which we can create a stronger emotional connection.”
To facilitate brand expression, the team also integrated immersive full-screen layouts to spotlight editorial campaigns through captivating photography and dynamic video content.
Touchpoints as curated spaces
The team reimagined the different touchpoints in the Designer experience as curated spaces, just like the different areas or displays one might encounter while exploring a luxury boutique.
“The Designer homepage is a window to the Designer experience, an immersive space to showcase high-end products, editorial, and inspiration. Brand home is an immersive curated space for brands to share their story, collections, campaigns, and collaborations using a dynamic library of elements. The redesigned browsing experience is free of distractions like product flags and red pricing, allowing product imagery to shine. Finally, product pages have a new decluttered aesthetic that puts more emphasis on product imagery and the story it has to tell.”
Reflections on selling a dream
Ultimately, says Anna, the boutique sells a dream. “When shopping for designer clothing, it’s not necessarily about needing an item but wanting it. Therefore, customers make different considerations. They want to see the story behind the craftsmanship or the designer, and the premium price tag also factors in the experience or journey of the shopper. As a Product Designer, I found it incredibly interesting to dive into this dream and represent it visually in the digital space.”
The team began rolling out the new Designer experience in January 2024. “The redesign has been well-received all round. It helped us to open conversations with potential partners, giving them confidence that we could showcase their brand and products in an elevated setting.”
Anna believes the boutique metaphor was instrumental to the project’s success. “The metaphor not only helped us arrive at the core concept but informed all our decisions throughout the product development process. Whenever we had to decide on any detail, we asked ourselves, ‘Will this help us to be minimalistic and curated?’. This experience demonstrated how fundamental metaphor is to the design language. It brings us back to our initial concept, fostering alignment and maintaining coherency and consistency.”
Designing in the luxury space also reinforced for Anna the importance of attention to detail. “If even the smallest detail is not executed with precision, it can compromise the whole experience and make it look less crafted. The motion elements we added were subtle, yet they strongly contributed to the elevated look and feel. This attention to detail translated the quality we were aiming to represent.”
Key takeaways
Are you ready to harness the power of metaphor in your next product design project? Here are some key points to keep in mind.
- Interpret and express the metaphor within the context of your core brand identity
- Use your chosen metaphor as a ‘source of truth’ throughout every stage of the product development process
- Involve stakeholders and partners/customers in the process from the beginning to create a tailored solution
- Factor in multiple touchpoints for a consistent and coherent customer experience
- Sweat the small details: design with precision and consider including interactive motion elements to increase emotional connection and achieve the crafted look and feel
- Align regularly with your team and stakeholders on potential solutions and ensure scalability.
Do you have any thoughts on using metaphor to drive product design? Let us know in the comments! Next, let’s destigmatise failure: Six members of Zalando’s product design community share how failure led to breakthrough moments in their design careers.
