Case study / 03 — E-Commerce · B2B & B2C

One platform, two very different buyers.

End-to-end UI/UX for AUTOMARTO — a unified automotive parts platform serving individual owners (B2C) and dealers, workshops and fleets (B2B) across web and mobile. Two tailored modes live inside one coherent system.

Role
UI/UX Designer (End-to-End)
Platforms
Web · Mobile
Duration
8–10 weeks
Type
B2B & B2C E-Commerce
0
User modes
0
Process phases
0
Key decisions
0
Research insights

OVERVIEWTwo modes, one system

AUTOMARTO had to serve two very different users without becoming two products. I designed a single platform with a B2C mode — discovery-led, educational and confidence-driven — and a B2B mode — task-led, fast and data-driven — chosen at onboarding and switchable anytime.

THE PROBLEMA fragmented aftermarket

The automotive aftermarket is fragmented and inefficient. Buyers can't tell which parts fit their vehicle, B2B buyers fight bulk ordering and inconsistent pricing, and existing platforms treat everyone the same — driving low trust, high order errors and poor repeat usage.

MY ROLEEnd-to-end ownership

I owned the full UI/UX process — research and synthesis, personas and journeys, information architecture, B2B and B2C user flows, wireframing and prototyping, the UI design system, and usability testing and iteration.

DESIGN PROCESSResearch to iteration

01 Competitive analysis
02 User surveys (B2C & B2B)
03 Stakeholder interviews
04 Personas & journeys
05 Information architecture
06 B2B & B2C user flows
07 Wireframes → UI system
08 Usability testing & iteration

METHODThe workflow, end to end

01
Step 01
Competitive analysis
02
Step 02
User surveys (B2C & B2B)
03
Step 03
Stakeholder interviews
04
Step 04
Personas & journeys
05
Step 05
Information architecture
06
Step 06
B2B & B2C user flows
07
Step 07
Wireframes → UI system
08
Step 08
Usability testing & iteration

KEY DECISIONSWhat made it work

🔀

Two modes, not two apps

Mode selection at onboarding personalizes features, pricing and navigation from the first screen — without forking the product.

🚗

Compatibility-first discovery

Every part surfaces a fit check against the buyer's vehicle, answering the biggest question before the cart.

📦

Built for bulk (B2B)

Bulk upload, tiered pricing and invoice-based checkout with credit terms make high-frequency ordering fast.

🛒

Fewer steps to buy

Checkout stripped to the essentials — especially on mobile — to cut abandonment and order errors.

RESEARCH & INSIGHTSWhat shaped the direction

Discovery combined competitive analysis (Amazon Auto, Alibaba, regional marketplaces), B2C and B2B surveys, and stakeholder interviews. The same catalog complexity was hurting both sides — buyers unsure about compatibility, B2B buyers slowed by pricing and re-ordering friction.

🚗

Fit is the first question

Compatibility uncertainty is the single biggest blocker to purchase; resolving it early removes the top reason carts are abandoned.

B2B runs on speed & clarity

Dealers and workshops prioritize fast re-ordering, tiered pricing and inventory clarity far above visual polish.

🙋

B2C runs on reassurance

Individual, mobile-first buyers need guided discovery, plain-language specs and verified sellers to buy with confidence.

WHO IT'S FORDesigning for real people

B2C PERSONAThe vehicle owner

An individual owner — often a first-time, mobile-first buyer with low technical knowledge. Needs compatibility checks, guided discovery and reassurance before buying.

B2B PERSONAThe dealer & workshop

A dealer, workshop or fleet manager buying frequently and in bulk. Price-sensitive; needs efficiency, tiered pricing, re-ordering and control.

DESIGN LANGUAGEThe visual system

A neutral automotive palette with strong accent actions, bold typography for the data that matters — price, availability, MOQ — and a consistent grid. Accessibility is built in: high-contrast text, large tap targets for mobile, and clear error and validation states.

Neutral palette + accent actions
Bold data typography
Compatibility indicators
High-contrast, large tap targets
Clear error & validation states

TESTING & ITERATIONPressure-testing the design

Task-based usability testing and dedicated feedback sessions with B2B users drove the iterations: filters were simplified, pricing breakdowns made clearer, compatibility indicators improved, and checkout steps reduced — each round removing a doubt or a click.

PROJECT SCREENSInside the app

Automarto app — home & categories Automarto app — product detail Automarto app — compatibility selector Automarto app — search & filters Automarto app — checkout Automarto app — order tracking Automarto app — return details Automarto app — order summary Automarto app — address & location

Auto-scrolling — hover any screen to pause & lift

OUTCOMEA simpler path for both sides

The result is a scalable system that supports B2C and B2B within one platform — faster product discovery, reduced ordering errors and improved buying confidence. Related surfaces: the seller dashboard and marketplace website.

View full project on Behance

KEY LEARNINGSWhat I'd carry forward

01 B2B and B2C demand different success metrics — design each to its own definition of done.
02 For B2B users, speed and clarity beat aesthetics every time.
03 Early user validation prevents costly redesigns downstream.
← Previous
VOIZZIT CHAT — Real-Time Messaging