Warmteservice
Improved UX through a data-driven Headless Redesign
Optimization or the user journeys in the e-commerce platform of Warmteservice, leveraging a design system repository, and backed by a data-driven approach.
SUMMARY
Client
Warmteservice
Case
2023 Headless Redesign
Services
UX Research, UX Strategy, Brand Research, Digital Concept & Brand Design, Target Audience Definition, Audience Journey Mapping, UX Design, UI Design, Design Systems.
Warmteservice is an established and successful enterprise in the Netherlands. Focused on the market of installation (central heating, sanitary, electronic systems), Warmteservice operates through 61 physical outlets in the Netherlands. The company caters both the B2C and the B2B market with products and services. Its promises are ‘always close in your area’ and ‘willing to service you in the best way possible’. In half a century Warmteservice saw a steady growth in shops, turnover, margin, customer loyalty and engagement.
Business Drivers
- Renew look & feel of ecommerce environment to drive digital innovation.
- Unite and engage organizational departments by cross-discipline and co-creation workshops.
- Improving B2B and B2C customer satisfaction by optimizing online user journeys and combining commerce with inspirational content.
THE CHALLENGE
One of the major challenges faced by Warmteservice is the outdated look and feel of the webshop, which fails to reflect its innovative character. Additionally, there is a lack of understanding regarding the goals, needs, and problems of their target audiences, making it difficult to address them effectively.
The slow pace of innovation is mainly due to the limited possibilities to re-use components of the old Warmteservice platform. Furthermore, the presence of commerce and inspirational content in separate domains poses another challenge for Warmteservice. Lastly, the digital roadmap prioritization of Warmteservice seems to be focused on internal perspectives rather than considering external factors.
THE OUTCOMES
Based on the challenges we encountered, these are the key outcomes of the project:
- New digital brand identity
- Deeper understanding of the needs of the target audience, which have been prioritized and validated
- Scalable design system repository to facilitate re-use of components, speedy innovation and quick go-to-market
- Digital customer journey design combined with content to enrich the e-commerce experience and drive revenue growth
- Digital roadmap prioritised upon business and customer value (opposed to technology as the main driver)
DISCOVERY
During the discovery phase with Warmteservice, we conducted a one-day branding workshop, followed by customer interviews. We then delivered two concept proposals that captured the essence of Warmteservice's brand and met the needs of their customers.
3-Hour Brand Sprint
To kickstart the project, we run a 3-hour branding workshop to identify Warmteservice's core values and brand essence. This helped to understand the requirements for a refreshed brand identity to improve the overall user experience and customer engagement.
Learn about Value Driven Design Sprints
Key audiences
How to design one platform for both B2B and B2C? We shifted the traditional mindset from demographic and task-driven personas towards goal-driven audience types. By doing this we realized that many goals were similar to different audiences and only differentiated on a several key elements. These insights helped us better prioritize UX design decisions.
Customer interviews & validation
To gain a deeper understanding and validate the target audience's goals and problems, we organized several customer interviews. This enabled us to prioritize and validate the needs of real users, resulting in a customer-centered e-commerce experience.
Concept creation: two directions & validation
To meet the needs of Warmteservice's brand and customers we created a concept proposal with two directions, that after validation resulted in a prioritized digital roadmap that considers both internal perspectives and external factors.
DELIVERY
During the delivery phase, we implemented the validated solutions to enhance the Warmteservice platform to improve the overall user experience and satisfaction.
Mobile-first Atomic
Optimization of the Warmteservice webshop to improve the customer journey for mobile users through UX, using an atomic design approach. This activity helped to increase flexibility and accessibility of product information.
Learn more about Atomic Design
Design Repository
We have delivered a design system repository to facilitate the reusability of components across the platform, accelerating development time and the deployment of design improvements. This ensured consistency throughout the platform and made it easier to introduce new features and functionalities.
Learn more about Design Systems
Combining Commerce & Content
To enrich the e-commerce experience, we combined commerce with inspirational content, allowing customers to engage with the Warmteservice brand and product offerings in a more meaningful way, resulting in improved customer satisfaction and increased engagement.
CONTINUOUS IMPROVEMENT
Warmteservice made it a priority to continuously improve their platform and drive ongoing innovation.
Continuous Improvement Process
Warmteservice dived deep into a collection of customer feedback collected with an online form, to build an ongoing process of generating options to improve the platform from the bottom up. At the same time, customer service provided phone and chat feedback, to identify and address small frustrations on a daily basis.
Re-use of Design System
Encouraging to re-use design system components throughout the platform helped to reduce development time and ensure consistency throughout the platform, improving the pace of updates and reducing costs. New pages and component were designed in a matter of hours instead of days.
[USE CASE] Wizards UX improvements
Implementing the Wizards UX design pattern helped to simplify the customer journeys and guide users in a clear way. By using clear calls to action and breaking down complex processes into smaller, more manageable steps, users were able to complete their desired actions more easily and efficiently. This resulted in improved customer satisfaction and increased engagement.
The new & modular structure also allows the business to add or adapt different steps into the wizard.
Our customers don’t spend a lot of time in the office. In the data we saw this behavior reflecting in the growing use of mobile devices. We optimized the web-shop for these users by introducing a responsive design and making the product information better accessible on mobile phones. Immediately after the optimization, we noticed our relevant KPIs were improving. More customers interacted and ordered via mobile viewports.
KEY TAKEAWAYS
Lessons Learned
There's some gems of lessons that we learned to make the Warmteservice project a success:
- Putting a structure of cascading strategic goals in place at the start was extremely beneficial for the following activities, making it clear to the product owner what should have priority, preventing him from vulnerability to internal politics.
- A multidisciplinary team achieves laser focus when there is a specific theme or goal per development cycle (e.g. “This quarter is all about improving lead generation”).
- If you are serious about Continuous Improvement and are going to put a lot of effort in setting up a team and processes, it is key to build a strong foundation, removing assumptions, and ensuring both input and output are measurable.
