Helping industrial customers find the right tool in minutes, not hours.

Background

When I joined, most customers still relied on thick paper catalogues and phone calls to buy tools. To place a single order, an engineer would eye‑scan tables, jump between pages for models and accessories, write down part numbers, and then call a salesperson to complete the purchase.

This flow was slow, error‑prone, and cognitively heavy. One of our main tasks was to redesign the Product Selection stage so that customers could discover the right tool and accessories with far less effort, while still supporting advanced industrial requirements.

Existing journey & pain points

Through observational studies, we mapped the real journey of buying a tool from the catalogue:

• Find the right category in the table of contents (e.g. Angle Drills, page 210)
• Scan long tables to understand angle, weight, speed and other parameters
• Write down the chosen model and part number for later reference
• Jump to another section to repeat the process for compatible accessories
• Call a salesperson and read all numbers again to place an order

Small mistakes at any step created wrong orders, rework for sales, and frustration on both sides. The opportunity was clear: translate this mental model into a digital journey that feels familiar, but radically simpler and less error‑prone.

Aligning stakeholders through fast wireframes

The manufacturing domain was complex, and at the beginning the client team struggled to articulate concrete requirements. Rather than wait for a perfect brief, I quickly sketched early wireframes of the key pages and used them as conversation starters in stakeholder interviews.

In each session, I brought an updated version of the product page and tech spec area, incorporating feedback from the previous round. This made abstract requirements tangible, and helped everyone converge on a shared vision much faster.

User testing and design sprints

I evolved the initial sketches into an interactive wireframe covering the full flow from discovery to checkout. We iterated this with around 10 end users and 10 domain experts, running a three‑week design sprint that stayed one sprint ahead of development.

The wireframe covered:

• Category page – marketing content plus a clear overview of products in each category
• Product page – hero details, imagery, and a structured overview of all models
• Model page – deep‑dive into tech specs, documents, and related accessories

Once the structure felt right, we applied visual design and micro‑interactions on top of the validated wireframe instead of trying to solve everything in one step.

Story‑driven journey from SEO to checkout

To communicate the experience to stakeholders, I built a story‑driven slideshow from the perspective of two personas:

• Robin, an aerospace engineer at Airbus, starts with a Google search for “pneumatic drill”, lands on a category page through SEO/SEM, filters products, compares models, and finally requests a quote.
• Robert, a car workshop owner, follows a similar flow but proceeds directly to online checkout for impact wrenches where pricing can be more transparent.

This narrative made it easy for non‑design stakeholders to understand why each screen existed, how the journey shortened decision time, and where business rules such as pricing and login would appear.

Designing within Intershop constraints

The shop was implemented on Intershop’s PWA framework. It brought faster performance, but also strict templates for front‑end layouts. Many UX improvements we validated—like a dense comparison table view of models—were not directly supported and had to be adapted.

On the product page, for instance, we temporarily moved from the preferred table layout to a list view closer to the Intershop template so development could ship within the timeline. At the same time, I documented the table view as a prioritised UX improvement for future iterations, explaining why it mattered for quick visual comparison and for users used to reading physical spec tables.

Visual design, prototype and handover

I used Sketch to apply visual design to static screens and built a high‑fidelity interactive prototype in Axure. This prototype expressed the full product vision well before all development work was done, which helped sales, stakeholders and developers rally around a concrete future experience.

For handover, we used Zeplin, Axshare links and JIRA to connect design specs with the development backlog. The design process, tooling and rituals were set up so that the team could continue iterating after launch.

Impact & reflection

From a hiring manager’s perspective, the project demonstrates my ability to quickly gain altitude in a complex industrial domain, turn fuzzy requirements into a concrete product vision, and bring cross‑functional teams along.

• What worked – We delighted senior stakeholders by rapidly understanding their world, visualising it in an interactive wireframe, and advocating for user‑centred methods.
• What was hard – Committing to a new technology stack before the concept was mature led to trade‑offs such as the temporary list view for model comparison.
• What’s next – Scaling the approach to other product ranges and local markets, and revisiting advanced comparison patterns once the platform stack allows more flexibility.

Selected skills from this project

• Research – stakeholder interviews, desk research, competitive analysis, user testing, journey mapping
• UX / UI design – wireframes, high‑fidelity prototypes, interaction design, UI library
• With development – design‑dev collaboration using Zeplin, Axshare, JIRA, and Intershop constraints

If you’d like to see more about this project or discuss similar B2B experiences, feel free to reach out via email or LinkedIn on the main portfolio.