WMF Coffee Machines
Corporate site
WMF Coffee Machines
A shiny new corporate site
WMF Professional Coffee Machines asked Studio Volpi to redesign from the ground-up their global website. The design process focused both on the WMF PCM and Schaerer websites considering the two brands as part of the same WMF Group family. However, I mostly worked on the former.
Research, UX & UI, Animation, Design system
Fabrizio Gagliardi, Nikola Mitrovic, Alessandro Sala
May 2019 - March 2020
Tuning into the customer base
To start off, our internal content strategy team, who already knew the client, provided us with comprehensive documentation around the customer's brand positioning, competitors' analysis, digital presence and traffic data. As a result of the thorough collaboration between us and the product owners, as well as the data provided in their marketing analysis, we were able to meticulously develop six user personas and their relative user journeys. The comparison of their experiences in interacting with the previous site, led us to identify common concerns we needed to address in the redesign.
Research insights
Expand and compress paragraph
Appeal to a wide range of personas
By intersecting different target groups, we needed to provide a sufficiently wide range of information, from product specs to the company's history, in order to satisfy the needs of a very diverse set of user personas.
Strengthen the sitemap navigation
After a thorough comparison of each persona's experience with the existing website, we realized that all of them were facing lots of frictions during the main navigation, caused by a poorly structured and confusing sitemap.
Rationalizing the sitemap
We compiled all the use cases, identified common needs, and converted them into features organized within the sitemap structure. We also introduced new essential features, and we ensured that each idea could nicely scale on mobile devices as well. Drawing from years of collaboration with WMF, we already knew well their brand guidelines, so we crafted a visual language based on their core communication values. We pitched three different options and landed on one for the final design.
Hand annotations over the screenshots of the old WMF website
Screenshots of project documents, tables and google sheets
Set of low-fidelity designs
High-fidelity and early designs of the WMF website
Three design concept of the same WMF website page
Unmistakably WMF
The work done in collaboration with WMF and Ray Sono, the partner development company, paid off. We were able to craft a much more performant, intuitive and user friendly version of the website, that truly encapsulated the products and values of the company. Despite the project being paused in 2019 due to the Covid-19 pandemic, our work heavily influenced the redesign of the CoffeeConnect platform and the 1300S coffee machine product page.
High-fidelity render of cappuccino in a glassFlip card back
We gave a central importance to the machines, by making their discovery a crucial part of the site experience.
Flip card
Three images of the new WMF website on a tablet
3D render of a WMF professional coffee machine dispenserFlip card back
By making the website more lively through lots of short videos and animations, we made the interaction with the website more enjoyable.
Flip card
Image of a design screen ready for implementation
3D render of a steaming cappuccino cup placed on a WMF professional coffee machineFlip card back
The Coffee Connect site still shows traces of our proposals and might represent the beginning of a future platform redesign.
Flip card
Next project
Scroll back to top
Back to top
Scroll back to top