Autopiter. Ran a WCAG audit, built a design system synced to code and designed mobile from scratch for one of the largest auto parts marketplaces in Russia.
- +38%average B2C order value
- +43%recurring orders
- 2.1Mmonthly visits, from 900K
Context
Autopiter.ru is one of the largest auto parts marketplaces in Russia — 900K unique users and 5M+ monthly visits, with over 400 pickup locations. Historically a B2B platform, it was expanding into B2C and adding new product categories — aiming to become a full automotive marketplace.
I owned the entire design direction: web, mobile, personal accounts, supplier tools, new services. Not just the visual layer — the decisions about what to build, why, and in what order.
Two problems at once
When I joined, two complaints kept coming from opposite sides.
Users were reporting poor contrast and readability across the site. The thin icon style and low-contrast palette made prolonged use uncomfortable — especially on data-heavy pages that wholesale customers spent hours in.
Development was frustrated that every interface element was essentially unique. Building anything new meant rebuilding from scratch — no shared components, no reusable patterns. Product work and visual fixes were competing for the same capacity.
These weren't separate problems. A design system could solve both — give development reusable blocks, and fix the visual foundation users were struggling with. That became my starting point.
Building the foundation
WCAG accessibility audit, atomic design system, programmatic Figma → code sync
Starting with what hurt most
The first thing I did was run a full contrast audit against WCAG 2.1 standards. The existing palette wasn't just aesthetically dated — it was actively making the product harder to use, especially for B2B users who spent a lot of time on a website.
I reworked the entire color range: neutral but sufficiently contrasting, aligned with the brand identity.
Replaced the thin outline icons with heavier stroke versions so they'd actually read against the background.
For interactive elements that needed visual hierarchy, I introduced a standardized elevation system — four shadow types, consistent across the product
Typography
The headline font stayed — its informal, rounded style carried a connection with the logo that worked. But most of the site is tables and text, especially for wholesale customers and suppliers.
That needed a different font. I brought in Fira Sans for body text — clear, readable, built for dense information.
Atomic design
The system had to do more than document what exists — it had to make building new pages fast. I structured everything around atomic design: styles compose into components, components into blocks, blocks into pages.
This mattered because we didn't have the luxury of a slow rollout. The marketplace was actively growing — new sections, new services, new user types. The system needed to accelerate that, not slow it down.
The result: 24 pages across 6 sections — Styles & Rules, Components, Controls, Master Pages, Banners, Iconography. Every element documented and organized into libraries.
Making it actually work: Figma → code sync
We didn't have enough people to both build the design system and keep shipping product. Doing them as separate workstreams would have stalled the team.
I looked for a way to remove the bottleneck. The solution: programmatic sync between Figma and the codebase. I worked with the dev team to figure out how to integrate automatic token and style updates — plus fixed blocks — into the pipeline. We developed a script that I ran whenever components were updated. Changes first landed in a front-end playbook, where developers reviewed and moved them to production.
This meant design system updates didn't need their own dev cycles. A style change in Figma could reach the live site in one step. The team could focus on product work while the visual layer improved in parallel.
Mobile from scratch
Designing mobile as a real product surface, not a responsive afterthought
By this point the design system was solid. And I was looking at the data. Mobile traffic was growing, but the company had never treated mobile as a real surface. There was a basic responsive version — roughly 10% of users — but it wasn't designed. It was an afterthought.
An external SEO audit confirmed what the numbers already showed — there was a significant organic growth gap directly tied to poor mobile performance.
I made the case internally and started designing the mobile version from scratch. Not an adaptation of desktop — the information architecture, navigation, catalog, cart, and checkout all had to be rethought for a smaller screen and a different use context.
The design system made this faster than it would have been otherwise. Components were already defined and documented — adapting them to mobile was mechanical work. The hard part was the product thinking, not the pixels.
Scaling the marketplace
Self-service supplier portal for a historically manual B2B marketplace
In parallel with the system work, I was designing new parts of the product as the marketplace expanded.
Supplier portal
Autopiter was historically B2B, with every partner managed manually by account managers. Onboarding was slow, data was hard to track, and there was no way for suppliers to self-serve. We wanted to change that — let partners see their own revenue data, manage price lists, register on their own. The way normal marketplaces work. I designed the full portal end-to-end. It launched after I left the company.
Car insurance marketplace
A new service integrated into the platform — users could compare insurance options and purchase directly. I owned the UX and interface.
Delivery branding
The company operated a mixed delivery fleet — both company-owned vehicles and independent couriers. Before I joined, branding was handled ad hoc: someone would just send a photo of the logo and leave it to each driver to figure out. I developed detailed branding guidelines covering every vehicle type — from intercity trucks to sedans — with specific placement rules, proportions, and material specs for each format. The 32-page detailed guideline became part of the global brand book for franchisees. Over 30,000 vehicles were rebranded under the new system, giving the company a consistent visual identity across its entire delivery network for the first time.
Impact
+38% AOV, +43% recurring orders, +27% conversion rate, 900K → 2.1M visits
Working closely with the company CEO, CTO, marketing team, analysts, and development we achieved:
- +38%
- Average B2C order value
- +43%
- Recurring orders
- +27.3%
- Conversion rate
- 900K → 2.1M
- Monthly visits traffic
