Shopify E-commerce • 2021
UX & Conversion Focus

OBD2EU E-commerce
Redesign

Redesigning an existing Shopify store for the EU arm of a diagnostic tools business already established in the UK — sharpening the brand, modernising the UX, and making technically complex products easier to browse and trust.

ROLE
UX/UI Designer (Solo)
TOOLS
Balsamiq · Sketch · Shopify
DELIVERABLES
Redesign · Wireframes · Hi-Fi Designs · Shopify Build

PROJECT CONTEXT

Repositioning an existing store for the EU market

OBD2EU sells professional diagnostic tools and remote parts catalogues to mechanics, workshops, and specialists across Europe. The business already had an established UK counterpart, OBD2UK, and this project focused on redesigning the EU-facing store so it felt clearer, more credible, and more tailored to its own market.

The client came to me needing a stronger visual identity and a more convincing e-commerce experience for the EU business. I took ownership of the redesign direction from wireframes through high-fidelity UI and final Shopify implementation, while also refining the brand expression used across the store.

The core creative challenge was that the products themselves — OBD scanners and parts catalogue subscriptions — are highly functional but not visually exciting. Making them feel premium and trustworthy to a professional B2B audience required deliberate visual thinking and a strong focus on usability.

THE CHALLENGE

Making unexciting products look and feel professional

Redesigning an existing store while giving the EU business a clearer identity created a different set of constraints. The main design challenges were:

  • Creating a brand identity (logo, colour palette, typography) that conveyed technical authority and reliability
  • Designing product pages for items that aren't photogenic by nature — making specs and compatibility the hero
  • Clearly communicating a subscription model (remote parts catalogues) to users unfamiliar with the concept
  • Giving the EU store its own clear positioning while staying adjacent to the existing UK business
  • Delivering a fully responsive experience for workshop owners and technicians browsing on mobile
  • Working iteratively with a non-technical client and gathering actionable feedback at each stage

DESIGN PROCESS

Iterative, stakeholder-led design

I worked in structured phases — completing a page, sharing it with the client, incorporating feedback, then moving on. This kept the client engaged and aligned throughout, and avoided late-stage surprises.

01

Brand Identity

Designed the logo and established a visual language — colour, type, and tone — that would carry through the entire store. Goal: technical credibility without feeling cold.

02

Wireframes (Balsamiq)

Built detailed low-fidelity wireframes for each key page. Shared each page with the client for sign-off on layout and content hierarchy before moving to high-fidelity.

03

High-Fidelity (Sketch)

Once the client was happy with the layout of each page, I moved to polished, component-based designs in Sketch — then implemented directly into Shopify.

KEY PAGES

Designed and iterated page by page

A few of the strongest final screens from the redesign

OBD2EU homepage redesign

Homepage redesign — clearer hierarchy, stronger trust signals, and a more confident first impression for trade buyers.

OBD2EU homepage redesign zoomed detail

Homepage zoom detail — closer look at content hierarchy, trust cues, and visual structure.

OBD2EU homepage below-the-fold section 1

Homepage below-the-fold detail 1 — supporting content and trust-building sections.

OBD2EU homepage below-the-fold section 2

Homepage below-the-fold detail 2 — clearer merchandising rhythm and scan patterns.

OBD2EU homepage below-the-fold section 3

Homepage below-the-fold detail 3 — deeper content hierarchy and conversion support blocks.

OBD2EU collection page redesign

Collection page — browse and filtering made easier for users comparing highly technical products.

OBD2EU collection page redesign zoomed detail

Collection zoom detail — clearer category scanning, spacing, and product comparison rhythm.

OBD2EU product page redesign

Product page — specs, compatibility, and purchase confidence brought to the front of the experience.

OBD2EU product page redesign zoomed detail

Product zoom detail — technical specs and CTAs organised for faster buyer decisions.

OBD2EU product page up-sell section

Product up-sell detail — related recommendations positioned to increase basket value.

OBD2EU cart and checkout redesign

Cart and checkout — a cleaner purchase flow with visible reassurance and less friction at the point of commitment.

UX THINKING

Decisions that shaped the experience

Stakeholder communication at every stage

Rather than delivering everything at once, I presented each page individually — wireframe first, then hi-fi — and gathered structured feedback before progressing. This kept the client confident and aligned throughout, and avoided costly late-stage revisions.

Visual appeal despite unglamorous products

OBD scanners and parts catalogues aren't iPhone-level photogenic. The solution was to make the layout, typography, and information design carry the visual weight — strong grid, confident use of whitespace, and a colour system that communicates reliability and expertise.

Dynamic cart for immediate feedback

Implementing Shopify's dynamic add-to-cart meant users got instant visual confirmation of cart updates — no page reload, no uncertainty. Small interaction details like this build trust and reduce abandonment.

Responsive-first for mobile mechanics

Workshop owners and technicians often browse on their phones. Every layout was designed to work cleanly on mobile — readable specs, tappable product cards, and a checkout flow that didn't require a desktop.

Trust architecture for a more credible store

The redesign needed to strengthen trust quickly for first-time EU visitors. Warranty badges, support contact, clear returns policy, and a consistent professional UI all worked together as visible trust signals throughout the store.

OUTCOMES

From dated storefront to a sharper, more professional experience

The redesign gave the EU business a more coherent brand identity and a more credible Shopify experience, while making the catalogue easier to understand and shop. Key outcomes:

  • Refined brand identity — logo, visual language, and design system refreshed and applied consistently across every page.
  • Clear subscription model presentation — the remote parts catalogue offering became easy to understand and compare against one-time products.
  • Polished, trustworthy UI that elevates technically complex products and positions the brand as a credible professional supplier.
  • Smooth purchase flow with dynamic cart updates — immediate feedback reducing hesitation at the point of purchase.
  • Fully responsive across mobile and desktop for a user base that works on the go.

REFLECTION

What I took from this project

This project reinforced that great e-commerce UX isn't about the products looking beautiful by default — it's about designing a system that makes people feel confident enough to buy. When the products themselves are functional rather than fashionable, the design has to do more work: clearer hierarchy, stronger trust signals, and a more deliberate visual language.

The iterative wireframe → feedback → hi-fi workflow worked extremely well with a non-technical stakeholder. Balsamiq was the right tool for early conversations — it kept focus on structure and prevented the client from getting distracted by colour choices before the layout was agreed. Moving to Sketch only after sign-off on each page kept revisions manageable and the project on track.

Managing the entire project independently — from brief to live Shopify store — also sharpened my ability to prioritise, communicate proactively, and make design decisions without a team to validate every step. That end-to-end ownership is something I genuinely enjoy.

KEEP EXPLORING

See next project or jump back

PREVIOUS PROJECT

Focal Hub

NEXT PROJECT

Vixel

Want to see more?

I’d be happy to walk you through the full process or discuss how I approach e-commerce UX projects.

Get in touch