Making the GARDENA shop easier to buy from without changing the brand
GARDENA sells irrigation and garden tools at gardena.com/de. The redesign reworked the homepage, listing, product page, search and checkout so that products, prices, stock and delivery are visible where the decision is made — using the existing brand, typography and categories.
Summary
Objectives
- Make products easy to find: a visible search that accepts article numbers, and one link per category instead of two.
- Turn the listing and the product page into places where people can compare: open filters, stock, key specs and a clear button.
- Take the doubt out of cart and checkout: delivery dates, trust signals and a checkout on one page.
Role
UX/UI Designer · NoAgency
Period
2019–2022
Team
UX/UI Designer · Project Manager · E-commerce Lead (client side)
2 Front-end · 1 Back-end · QA Engineer
Key Skills
- UX Audit & Heuristic Evaluation
- Information Architecture
- E-commerce UX & Shopping Journey
- Interaction Design
- Interactive Prototyping
- Design Systems & Design QA
- Conversion Optimization & A/B Testing
- Responsive Design
Impact
↑ 14%
Successful task completion across the tested shopping journey
- Discovery, product decision and checkout unified around one product card and one shopping path.
- Cart and checkout reworked around delivery dates, trust signals and a single-page flow.
Comparative beta test with 100 participants: 50 used the existing experience and 50 used the redesign to perform the same shopping tasks.
Three problems shaped the redesign
01 · Shop hidden behind the brand. The homepage showed no product and no price above the fold; categories appeared on the third scroll. Hypothesis: categories and bestsellers on the first screen will bring more people to product pages. Evidence: three of four hero slides led to editorial content.
02 · Two ways to “buy” everywhere. Every category had two links, “Entdecke” and “Shop”; search was an icon; filters sat behind a button. Hypothesis: one link per category, a visible search field and open filters will shorten the way to the listing. Evidence: dropdown behaviour was unclear and each category exposed two competing destinations.
03 · Cards and cart did not help deciding. Cards showed article numbers instead of rating, stock or a real button; the cart opened with “items are not reserved”. Hypothesis: decision information on the card and trust signals in the cart will raise add-to-cart and checkout completion. Evidence: the cart showed no delivery date before checkout.
The shop before the first scroll
The homepage starts with one offer and one secondary action, followed by a category row and bestsellers with price, stock and a button. Editorial content moves below the shopping path instead of replacing it.
Listing built for deciding
A compact category header with sub-category chips replaces the banner. Filters are open and show counts, active filters sit above the grid, and every card shows rating, key spec, stock and “In den Warenkorb”.
Product page: one reading order down to the button
Rating, price with free delivery, three benefits, set choice, quantity and a button that shows the price — then stock and a trust block. Everything needed for the decision sits above the fold.
Search by product, need or article number
A persistent search field supports both natural product terms and exact article numbers. Autosuggest separates products, categories and matching products, helping shoppers move directly to a result without navigating the full catalogue.
Checkout without the site chrome
Logo, steps, “Sicherer Checkout” and a phone number — nothing else. Address, delivery and payment are accordions on one page; delivery shows real dates and pick-up at a dealer. The order summary stays on the right.
Same decisions on mobile
On 390 px the homepage and the product page keep the desktop order: search first, then categories and bestsellers with stock and a button, and a sticky “In den Warenkorb” that shows the price.
A mini design system, not a UI kit
Tokens for colour, spacing and radius, 14 text styles and 12 components — enough to keep nine screens consistent and to hand over states and usage instead of a pile of screens.
What I learned
Changing behaviour without changing the brand
No new colours, no new type, no new categories — that was the brief, and it turned out to be useful. Every improvement came from hierarchy, wording and what is visible by default. The shop still looks like GARDENA; it is just easier to buy from.
The product card did most of the work
The product card became the most widely reused decision component. Rating, stock, key specifications and a clear purchase action created a consistent pattern across homepage, listing and search.
What I would do differently
Test mobile earlier: sticky purchase actions and open filters introduce constraints that desktop prototypes do not reveal. I would also distinguish exact article-number searches from broader product discovery.