Role
Product Design Lead
Type
Ecommerce website
Industry
Building materials
Welt der Baustoffe: From photo to perfect match
TL;DR
The Welt der Baustoffe website helps customers browse and compare building materials. But finding the right tile is still tricky, especially if users don’t know what to search for. This project introduced a visual search tool that lets people upload a photo and get similar-looking tile suggestions. The MVP focused on speed, ease of use and flexibility across mobile and in-store settings.
Who is Welt der Baustoffe?
Welt der Baustoffe is STARK Deutschland’s online platform for discovering and comparing building materials. It supports both professional tradespeople and private customers, offering product information, pricing and availability alongside inspiration and in-branch consultation tools.
My role
STARK Deutschland asked me to help with the structure and behaviour of their new visual search tool. I defined what the experience needed to do, who it was for, and how it should integrate with the broader Welt der Baustoffe platform. I created user flows, contributed to MVP definition and the post-launch roadmap, and handed off UI designs built in Figma to their third-party development team.
Workshops and meetings were held in German, although my German was a little rusty at first. Where vocabulary fell short, we switched to English and kept things moving. It ended up being one of the smoothest cross-language projects I’ve worked on.
Problem statement
Finding the right tile can be frustrating, especially when customers don’t know what to search for. Sometimes it’s just a case of seeing something and thinking, “I want something like that.” We wanted to make that moment easier to act on by giving users a more visual way to explore and compare tiles.
The experience needed to be intuitive, fast and responsive across devices. It also had to work in different contexts, from casual browsing at home to quick product lookups during a showroom consultation. The solution had to integrate seamlessly into the Welt der Baustoffe platform.
Research
Workshop
We kicked things off with a cross-functional workshop to set up the framework for collaboration. It helped align everyone on stakeholder roles, key audiences, and how the team would work together. We used a shared Lucid board to capture everything from proto-personas and initial goals to sprint planning and workflows in Jira.
While this session didn’t define the MVP or interaction flow, it laid the groundwork for faster decision-making later. That early clarity helped us avoid rework and kept things moving once design began.
Personas
Five proto-personas were created to reflect the two core groups this tool needed to support: end customers and in-house teams. They were quick, practical profiles that helped us think through how the experience should behave across different contexts.
Diana, an interior architect, needed fast visual matches based on colour and style
Lisa, a renter furnishing her first flat, was looking for trendy tiles she could quickly visualise in her space
Sabine, a branch sales advisor, used the tool during customer consultations to match reference images to in-stock tiles
Thomas, a contractor, needed technical filtering for specs and standards
Anna and Peter, a creative couple, were focused on budget-friendly suggestions from reference images
These personas helped shape early design decisions by grounding the experience in real-world usage scenarios. They gave us a way to sense-check the flow, the messaging, and the overall tone across a wide range of user needs.
We also considered in-house use through Sabine, a branch sales advisor who used the tool during customer consultations. While the experience didn’t need to change between customer and internal contexts, it still had to work seamlessly across both.
Competitors review
As part of the early research, we reviewed visual search tools from industries like fashion, homeware and marketplaces to see how AI-powered image matching worked in practice. We looked at examples like Pinterest Lens, IKEA, and Amazon StyleSnap to understand how they handled uploads, presented results, and guided users on what to do next.
Some felt intuitive and responsive. Others returned vague results with little context, leaving users unsure how to refine their search or what to expect.
That gave us useful reference points for things like upload behaviour, no-result messages, and how much guidance people might need after submitting an image.
Design process
Ideation
Before jumping into flows, I pulled together a list of questions to help the team get clearer on what the MVP actually needed to do. The goal was to cut through any ambiguity, flag edge cases early, and make sure the developers had something concrete to work from. The questions touched on everything from accessibility and scalability to customer support and what should happen when things don’t go to plan. A few examples:
Should the flow support booking a consultation, or is that something for later?
What happens when no results come back? Do we prompt for another image, suggest alternatives, or show some guidance?
Sharing these questions early gave us space to challenge assumptions before the flow was locked in. It helped keep everyone aligned and reduced the risk of last-minute rework later on.
User flow
With the MVP scope defined, I mapped out the full user flow from upload to results. It covered key steps like cropping, re-upload prompts, and error handling.
This flow was used for technical logic validation and to help the team spot anything that didn’t make sense. It also gave developers a clear structure to build from and helped stakeholders understand how the experience would behave across different devices and entry points.
Visual design
I designed the UI in Figma, using the existing design system from Welt der Baustoffe to ensure consistency and smooth integration. The layouts were kept simple, with a focus on clear calls to action and minimal distractions. Key components like upload areas, prompts, and error messages were designed to be reused across different states and entry points.
New elements to the design system were added, such as tooltips, error messages, and instructional messaging, to help users navigate potential friction points. Everything was integrated into the component library to ensure consistency and ease of development.
Results
Final design
What began as a focused MVP turned into a polished, scalable experience. The outcome balance simplicity and utility, giving users a clear and confident way to explore and compare tiles.
Dedicated tile visual search landing page, and functionality to crop or retake your picture.
Search results and PLP promos for organic reach.
Impact
The MVP delivered on its core goal: making tile discovery faster and more intuitive. Users can now upload a photo and quickly get relevant matches, whether they’re customers or branch teams supporting in-store queries. Despite the absence of formal user testing, early feedback has been positive, confirming that the tool meets user needs and functions well across devices.
Next steps
With the MVP successfully launched, the roadmap includes several key enhancements to expand functionality and improve user experience:
Saved items: Allowing users to save and revisit their favourite tiles, whether logged in or not
Sharing functionality: Enabling users to share their saved items or product lists via links, WhatsApp, or other platforms
Stock visibility: Adding stock and availability checks for a more complete shopping experience
Targeted product placements: Allowing manufacturers to feature their products more prominently in search results
User feedback loop: Enabling users to provide feedback on result accuracy, helping to improve the matching process over time
Expansion to other product categories: Extending the visual search tool to include a wider range of building materials beyond tiles
These features will build on the existing MVP, bringing even more value to the user experience while allowing the tool to scale and grow.
