How Vitra Created the Perfect Furniture Finding Tool
It’s tricky to find furniture that fits your home aesthetic or gifts that would be perfect for friends and family. Keeping this in mind, furniture company Vitra decided that creating custom chair finders (and a Christmas gift finder) would make things easier for its customers - and it did! Working to create the website with agency Build in Amsterdam, the two collaborated to create an aesthetic and functional website for customers.
To start off, the ‘Office Chair Finder’ and ‘Lounge Chair Finder’ were launched first, allowing users to compare products, have a look at pieces which suited their needs and showcased the craftsmanship behind every piece of furniture. Then, when the holiday season approached, the brand and agency created the ‘Gift Finder’ to cater towards the Christmas season and help shoppers find the perfect presents for friends and family. Now, the finder continues to be both functional and useful for shoppers with over 40,000 people trying it out and using the brand’s augmented reality tool to virtually place each piece within their homes.
Speaking to LBB’s Nisna Mahtani about the design and functionality of the finder, the teams at Vitra and Build in Amsterdam share the process behind the work.
LBB> What prompted the idea behind Vitra’s ‘Office Chair Finder’? How does the finder concept integrate with the broader digital strategy of Vitra?
Vitra> We wanted to offer a better online experience to consumers by allowing them to dynamically compare the chairs and configure them according to their specific needs. Despite being a very recognisable brand, we needed some external guidance to help us properly showcase our beautiful products in the digital realm. With so many technical differences and configurations, we set out to build a meaningful and interactive digital assistant that would guide the user through all of these categories and filters.
Build in Amsterdam> With the finder initiative, Vitra took one of their key product categories – the office chairs – and aimed to offer a tool where complex specifications and ergonomics are simplified enough and made applicable to an end user. All in all, this way of thinking turned out very successful so the concept was extended to other product categories, such as the ‘Lounge Chair Finder’, ‘Gift Finder’, and others to come.
LBB> What was the purpose of the finder? What were the goals and requirements?
Build in Amsterdam> For the Office Chair Finder and Lounge Chair Finder, we were assigned by Vitra to build the perfect office chair finder from the ground up. The finder was briefed to be a digital tool, or assistant, centred around finding the perfect office chair to suit your needs. It is crucial, for that purpose, that the finder asks users only the right and most relevant questions, i.e, ‘Sitting time’, or ‘Your height’. Questions that you would be asked by the most knowledgeable Vitra staff in their stores.
The other side of it was to showcase Vitra’s rich history and high level of expertise in a visually appealing way and introduce it to a multitude of on- and offline brand touchpoints.
Thus the goal was to create a truly omnichannel tool, which seamlessly services the various needs of each touchpoint and provides an engaging and intuitive user experience, on the path of finding the perfect office chair.
The Gift Finder was initiated as a tool to help Vitra gather its enormous portfolio of accessories, storage items and small seaters & tables, and help them guide users – in a very visual and playful way – to narrow down their gift list by carefully selecting (and easy-to-understand) filtering options.
Vitra> First and foremost, we wanted people to use it (laughs)! We conceived the tool as a framework, something that evolves and can be adapted in the future. We were specific about not wanting the typical filters you see in most digital stores but rather wanted to see if we could really cater to the user’s specific needs. By marrying the visually attractive content that already exists with a tangible and flexible tool, Build in Amsterdam (BIA) managed to create a great experience. We’re launching a new office chair this year and the fact that we’ll be able to input that into the finder straight away is precisely what makes it great.
LBB> What was the process of collaboration between Vitra and Build in Amsterdam? Can you tell us about some of the initial conversations?
Vitra> From a collaboration perspective, it was quite a unique approach because BIA was able to offer everything in-house, from design to front-end and back-end development. Talking to developers directly and having them at the table meant they were able to show their own work and it really made for a holistic process. You often can lose a lot of traction and speed going back and forth, so this way of working was highly appreciated as we had a comprehensive overview of the project at all times.
After this positive experience, I see this as a model for how good work should be carried out and now try to apply this approach in other projects as well.
LBB> Most of the collaboration was done remotely. How did that go?
Build in Amsterdam> Since the pandemic, we inevitably got more used to conference calls and carrying projects fully remotely. Our collaboration with Vitra, which began in early 2021, was one such example. It is great to see, despite the physical distance, how our collaboration still thrives and delivers beautiful results.
But as nothing beats an in-person interaction, we went to visit the marvellous Vitra Campus in Germany and meet with the full team just before the office chair finder was launched. That visit completely immersed our team in the Vitra world. Throughout the whole campus, one can feast their eyes on immaculate product design, while strolling through buildings imagined by the most renowned architects. For us, the Vitra Campus was the real embodiment of the leading role Vitra holds within the modern design world.
LBB> How did you begin the website development process? What were some of the key things you wanted to include?
Build in Amsterdam> Going into the Gift Finder we knew we’d need to support 200+ items on the grid. This presented a unique challenge compared to the Chair Finder, as the layout had to be as flexible as possible. To tackle this, we started the process with prototypes. Early on this was critical to the approach we ended up taking. Not only did it help make sure we could A) support as many items and B) know the vast number of items would be performant and accessible, but C) it actually influenced the design approach too. By prototyping alongside design, we were able to bounce ideas off each other and eventually landed where we did. For example, one of the biggest things we pushed towards during prototypes was a completely fluid and playful experience without modals, popups or different pages.
Given the scale of products we needed to support, we wanted to try and maximise performance and ensure the site was as accessible as possible, while including as many nice details in the animations.
The Vitra finders were built using the same technology stack that we use for most of our projects - Next.js, Storyblok, and framer-motion. However, the Gift Finder had an additional feature in the form of a GUI system, which allowed for real-time modifications to the app. This added flexibility really helped us nail animations of the tool.
LBB> The finder embodies the Vitra website and the brand’s ‘aesthetic and comfortable designs’ mantra. What were some of the design aspects you were keen to include to keep everything cohesive?
Build in Amsterdam> From an aesthetic point of view, the design foundation was of course the font Vitra Futura, and its colour palette. The Finders that we’ve designed and built are slightly different in terms of layout approach. Usually, Vitra sits more in an editorial approach whereas for the Finder we had to approach it as a tool, a web app. This required a more open and content-focused approach. More space to breathe, maximum content and minimal UI.
LBB> Were there any challenges you faced during the process? How did you overcome these challenges?
Vitra> It was a very smooth working relationship. Both sides felt a lot of enthusiasm for the project and that really helped. There was never any tension, and there was always transparency, creativity and a professional approach.
Build in Amsterdam> We had to first make sure we have a very deep understanding of what the different chair features meant for the final usage of the product, i.e., why is a certain chair better for long periods of sitting vs another? To solve that, we started with an extensive research and prototyping phase, where we gathered knowledge about the ergonomics and design choices behind Vitra’s vast chairs collection. This allowed us, in close collaboration with Vitra, to narrow down the filtering path to seven questions and their respective answers, for users to navigate through.
Particularly for the gift finder, a huge challenge was the product grid. We had hundreds of sorting views, different products, and a bunch of viewports. Different margins between the products, different sizes, different product animations – it was a lot. Because we couldn’t design all of the hundreds of different states, we spent a lot of time in close collaboration with development. Next to that, we had to constantly remind ourselves that the main purpose of the tool was to explore and play. This is in many ways different from conventional e-commerce where you are comparing and looking for one product. This playfulness and exploration had to be translated into UI and UX very carefully.
LBB> What was the process behind creating the different categories (office chairs, lounge chairs and gifts) to choose from?
Vitra> The categories came about simply because we have a lot of products and configurations and needed guidance on how to make sense of all that, by figuring out the best way to showcase and compare them. Our office chairs range from rather simple chairs without armrests or height-adjustment options to chairs which are meant for long sitting sessions. It all depends on your requirements.
With the Gift Finder, we wanted to inspire and showcase our entire range and with one touch change the selection immediately.
LBB> The social media post for the gift finder has gained a lot of traction. Why do you think people engaged with it so heavily, especially over the holiday period?
Vitra> We think it’s really resonating with people. It’s a great mix of solving a problem and looking visually appealing and fun. I saw a lot of people sharing it and recommending it to their friends and followers, which is wonderful to see. It also means a lot to us, as we are now keen to allocate more time to social media and integrate the finders even more into our digital journey.
LBB> What have been some of the best reactions you’ve seen/heard?
Vitra> We see a lot of people using the finders, exploring the tool and not just leaving it at that, but in fact visiting the website, configuring and buying the products. We now have some of our online dealers asking for a version of the finders and we even translated the tool into Japanese.
Some useful stats from the ‘Office Chair Finder’ since it launched in April 2022:
• Around 40,000 people tried out the finder
• Around 11,000 virtual products have been placed in people’s homes/offices (our augmented reality (AR) functionality within the finder)
• 45% of the people who use the finder continue on to vitra.com to explore or buy a chair
• Only 10% prefer minimal padding for their desired office chair
Build in Amsterdam> The Office Chair Finder, to begin with, gained a lot of positive reactions within the e-commerce and design domain. The tool received a Site of the Day award on Awwwards and it became a Website of the Year on Dezeen from the public vote, which was a huge compliment for us! Furthermore, the Office Chair Finder became a Gold Lovie winner for 2022 (category ‘Lifestyle’). And even though awards are not our main goal or measure of success, at the end of the day they are a compliment from the industry professionals, and they do really help to promote the work from both the agency & client side and to attract new talent and business.
LBB> Are there any similar projects you’re working on? Or another part of this campaign which we should look out for? How do you see the future of the finder’s concept?
Vitra> We’re currently looking into ways we can appeal to as many specific needs as possible and to people who need help with an exact configuration. So we’re going to dive deeper into our materials and integrate things even better.
LBB> What was the most rewarding part of working on the three finders?
Build in Amsterdam> The pleasant collaboration from day one, the constant open doors for new ideas, where we constantly challenged and fed each other with a fresh outlook on things. It’s something you can really see coming together within the finder tools. And of course, it is the biggest honour for us as a design agency to work with such an iconic brand like Vitra. It was a dream come true. It’s a huge honour to design for Vitra. A global design icon, from architecture to product design. This made us very keen to deliver and made working together a real joy.
LBB> Is there anything else you’d like to share?
Build in Amsterdam> “The details are not the details, the details make the product,” said Charles and Ray Eames. We as Build in Amsterdam can only agree with that.
Vitra> One interesting side effect is that people seem to take the recommendation very seriously. So if a chair scores a 96% match, consumers generally don’t ‘opt down’ and choose a chair with lower compatibility. I was quite surprised that the exact percentage value has such an impact.
