Csongor Farkas

WorkHouse of Mobile & Games

Redesigning an e-commerce homepage and lifting conversions by 46%

House of Mobile & Games is a Berlin phone- and device-repair business. As the sole designer on the project, I owned it end to end — research through to shipped UI — redesigning their e-commerce experience starting with its most important page, the homepage, then carrying the new design language into the category and product pages.

houseofmobile-berlin.de ↗

Contents
  1. 01The problem
  2. 02The redesign
  3. 03Outcome

Client

House of Mobile & Games

Company

SEO-Revolution GmbH

Category

E-commerce / UX/UI

Role

Sole designer

House of Mobile & Games homepage preview

My role

  • UX research
  • Competitor analysis
  • User-flow improvements
  • Mid-fidelity prototypes
  • High-fidelity clickable prototypes
  • A/B testing

The team

  • CEO & Management
  • Frontend & Backend Developers
  • Product Management

Deliverables

  • User-flow optimisation
  • Mock-ups
  • Prototypes
  • Custom icon set
  • Design-language update
  • Test results

01

The problem

The homepage introduced the shop. The customer arrived with a broken phone.

The homepage carries the whole storefront. Almost everyone landing on it wants one thing: to find out what it costs to fix a specific device. The old page answered a different question first.

The old homepage above the fold
The top of the page belonged to the shop. Two addresses, opening hours, phone numbers and a discount banner — before any way to start a repair. Navigation was manufacturer-first, so you had to know which dropdown your device lived under.
The old device chooser, a grid of device photographs
The device chooser did exist — three screens down. Built from mismatched product photographs at different crops and quality, it scanned as decoration rather than as the primary action.

The insight: nobody visits a repair shop's website to browse. They arrive with a broken device and one question — can you fix this, and what does it cost? The homepage's job was to answer that above the fold, and let everything else follow.

02

The redesign

Put the repair journey first, and make every service reachable without digging.

I rebuilt the page around a three-step filter — manufacturer → model → repair service — sitting directly under the headline, ending in a price. It turns a browse into a form the customer can finish in three clicks. The shop's addresses and opening hours didn't disappear; they moved below it, where they answer the second question rather than the first.

The redesigned homepage — headline followed immediately by three dropdowns for manufacturer, model and repair service
After — the customer's question, answered first. Three dropdowns and a quote, above the fold, with the guarantees that remove hesitation sitting immediately beneath.

Three moves did the work. The filter-first layout, so a repair starts with the device instead of a scroll; a mega-menu that surfaces every manufacturer and service in one opening, so nothing needs a second guess; and a custom icon set I designed for the services and guarantees, replacing the old photo grid.

Six of the custom service icons — display repair, battery replacement, water damage, speaker replacement, data recovery and diagnostics — drawn in one consistent two-colour line style
The icon set — a sample of many. One line weight, one two-colour palette, one device silhouette across the whole set, so a customer scanning the services reads comparable options rather than unrelated photographs.

I prototyped the interactions in Adobe XD before development. Each one answered a specific question rather than just demonstrating screens:

  • Mega-menu — could it expose every manufacturer and service without a second click?
  • Homepage filter — did it still feel fast once the model list ran long?
  • Mobile navigation — how should the three steps collapse into a stack on a phone?

The fourth recording sets the two surfaces side by side — the same journey, sized for a desk and for one hand.

Mega-menu — opening every manufacturer in one step
Homepage filter — manufacturer, model, service
Mobile navigation — the same journey, stacked
Mobile & desktop — one design across both surfaces

03

Outcome

A/B tested against the previous homepage — the filter-first version won on overall conversion.

+46%

Conversion-rate uplift

Validated against the previous homepage, not estimated

The redesigned homepage was A/B tested against the previous experience. The filter-first version increased overall conversion by 46%, validating the decision to bring the repair journey directly to the start of the experience.

Session recordings supported the quantitative result, showing visitors engaging with the filter immediately after arriving on the redesigned homepage.

The mega-menu showed the same pattern: service pages that had previously taken several steps to reach were opened directly from the navigation.

Project extended

On the strength of the test, the client extended the redesign across the category and product pages — where I carried the same logic further, making the repair service and its price selectable on the product page itself.

The redesigned category page — a consistent grid of devices, each with a price reduction badge and a clear repair label
Category — the same device grid, made consistent and browsable
The redesigned product page — a device, a list of selectable repair services, a starting price and add to cart
Product — the repair service and price chosen on the page itself
House of Mobile & Games homepage before the redesign
Before — the full page
House of Mobile & Games homepage after the redesign
After — the full page

More work

View all