tado° Shop
E-commerce product page redesign
Experience an intuitive way to shop with the newly designed e-commerce interface.
Company
tado GmbH
Task
UX research UX design UI design
Industry
Home energy management
Year
2025
Permission to publish this project on my portfolio was officially granted by the company, tado GmbH
This webshop serves as a central touchpoint to convert visitors interested in our products into customers by facilitating purchases. The Product Detail Page (PDP) offers comprehensive information, including key product details, benefits, and any awards or recognitions the product has received.
Challenge
The current mobile interface of the webshop requires users to scroll through 13 content-heavy sections, each featuring a wide range of colorful visual elements. This extensive layout can overwhelm users and hinder quick navigation. Additionally, the user journey is fragmented, with multiple external links directing customers away from the webshop to gather relevant product information. This not only disrupts the shopping flow but also increases the time and effort required for customers to make informed purchasing decisions.
Planning
The plan to achieve a new design for an enhanced customer journey begins with research and extends through to testing. This process involves gathering feedback from users and stakeholders to identify areas for improvement, while also addressing change management, as the existing Product Detail Page is already in use.
User research
The user study aimed to identify which visual information customers prioritize most. A hierarchy testing method was used, involving 10 cards that each represented a piece of visual content currently displayed on the webshop. Participants were asked to intuitively rank the cards from the most to the least influential message within a 3-minute timeframe. This approach helps determine the relative importance of key messages from the customer’s perspective, ensuring they align with their needs and decision-making process.
The testing results reveal a consistent ranking of priorities among the 10 participants, with visual elements ordered from 1 to 10 (indicated by a gradient from purple to pink).
Design
Based on the user research findings, key solutions were defined and the visual hierarchy was restructured. An option selection feature was added directly below the main image carousel, allowing customers to easily explore product variations. All essential information required to complete a purchase is now included above the fold, along with a sticky call-to-action (CTA) button. This layout enables a quicker and more efficient shopping experience, minimizing the need for excessive scrolling.
Additional relevant information has been organized into collapsible accordion sections for better clarity and navigation. Key benefits—such as a 10-year warranty, app control, smart home device compatibility, and Matter & Thread integration—are grouped together to help customers easily explore further details. When interested, users can simply click the dropdown arrow to reveal the content without overwhelming the main interface.
Previously, the compatibility checker was available only as a manual document, requiring users to invest time and effort in finding the right compatible devices. In the new design, an automated compatibility checker is integrated directly into the product detail page (PDP), allowing users to instantly verify product compatibility without leaving the interface. This solution is intended to keep users engaged on the page, streamline the shopping experience, and reduce confusion caused by unnecessary navigation. Once users are confident about product compatibility, they can continue exploring additional product information to support their final purchase decision.
Initial feedback from stakeholders has been very positive, indicating strong potential for the new design. As a next step, the project will continue with user testing to gain deeper insights into customer needs, behaviors, and expectations. These findings will help identify further opportunities for improvement and refinement.