Liubov Tsebekova
← All projects

Zelenyy Instrument Nov 2019 — Jan 2024

Designing six storefronts on a shared platform

Zelenyy Instrument operated six online stores for tools, garden equipment and car accessories. I was the sole designer, responsible for the interfaces and the systems behind their content. Customers needed to understand compatibility and product differences, while three content editors needed templates they could use independently.

Sole designer · Senior Product Designer, 2022–2024Read the outcome ↓
Business
Six storefronts on shared Bitrix / Aspro infrastructure
My work
Storefront UX/UI, vehicle selection, product information and design systems
Collaboration
Three content editors used my templates and guidelines
Scope
Two store launches, a rebrand and a vehicle selector for 30,000 roof-rack SKUs
Archived Roofrack storefront with vehicle selection above the product offers
Archived Husqvarna storefront using the shared platform and its own brand colours
6 STOREFRONTSSHARED COMPONENTS
Archived Roofrack and Husqvarna storefronts: shared structure with distinct product and brand priorities.
In this case 5 decisions + outcome

01

The stores shared components and kept distinct identities

Roof-rack customers need to know whether an accessory fits their car. Tool buyers need to distinguish the tool on its own from a kit and check the battery platform. Each store also has its own manufacturer guidance and product priorities.

I built shared catalogue, product-page and form patterns, with brand-specific colour, imagery and content. The work supported two store launches and a rebrand, alongside email and landing-page systems and listing layouts for Ozon.

The equipment store prioritises product categories and follows the manufacturer’s identity.
The equipment store prioritises product categories and follows the manufacturer’s identity.View full size ↗

02

Vehicle selection narrowed the catalogue to compatible products

The automotive catalogue contained 30,000 roof-rack listings. I designed a dependent selector for make, model, generation and roof type, so each choice limited the options that followed. The interaction had to work within a legacy CMS.

I also set rules for product names and for collecting and tagging installation photos. A gallery filtered by car and store helped shoppers see racks fitted to cars like theirs.

RoofrackCOMPATIBILITY MODEL

Find the right rack for your car

Four dependent choices narrow a catalogue of 30,000 roof-rack listings.

  1. 01

    Make

    Choose a manufacturer

    Start with the car the customer knows.

  2. 02

    Model

    Models for this make

    The previous choice limits the options.

  3. 03

    Generation

    Model generation

    Keep different versions of the car separate.

  4. 04

    Roof type

    Compatible roof types

    Use the mounting configuration to find suitable racks.

SELECTED VEHICLE

Compatible products

Installation photos provide an additional visual reference.
Reconstructed interaction model with English labels. The archived screens below show the storefront implementation.
An archived desktop selector. This earlier screen uses shorter field labels than the full dependency model explained above.
An archived desktop selector. This earlier screen uses shorter field labels than the full dependency model explained above.View full size ↗

03

A visual try-on helped customers judge a roof box on their car

Compatibility information answered whether a box could fit; some customers also wanted to see how it would look. I created a visualisation service using manual Photoshop composites, with a landing page and an entry point on product pages.

Customers went on to buy roof boxes after receiving the visualisation. The service is now unavailable, and I do not have a conversion figure for it. The archived homepage shows its promotion alongside the catalogue.

The archived Roofrack homepage, including the visual try-on promotion in the lower-left campaign tile.
The visual try-on service appears in the lower-left campaign tile of the archived homepage.View full size ↗

04

Analytics informed the mobile page hierarchy

Click and funnel data in Yandex.Metrica and Google Analytics helped us review the homepage hierarchy. Some promotional areas received little attention while useful categories were harder to reach.

I reworked key landing and product pages for mobile and brought category entry points and compatibility tools higher in the layout. Historical reporting recorded an approximately 25% increase in mobile conversion after the redesign. Other business changes may also have contributed.

Two archived homepage versions show different placements of the vehicle selector and promotional content.
Two archived desktop homepage versions show different placements of the vehicle selector and promotional content.View full size ↗

05

Templates helped content editors produce graphics independently

I created reusable Figma templates and guidelines for three content editors. They could prepare graphics independently while following the stores’ visual standards.

A batch of 30–40 images took about half a day after the change, compared with about a day before. This is my retrospective estimate. Shared templates also gave email, landing pages and marketplace listings a consistent starting point.

COMPONENT STRUCTURESix stores on one platform
Shared structure

Catalogue · product · form

Reusable page layouts, controls and content rules.

Brand layer

Colour · type · imagery

Each store follows its identity and manufacturer guidance.

Content production

Figma templates & guidelines

Three editors prepare graphics using the same standards.

Storefront pagesCampaign emailLanding pagesOzon listings
A diagram of the shared design and content system. Archived campaign materials follow below.
Archived product and campaign modules for the tool brands.
Archived product and campaign modules for the tool brands.View full size ↗

Outcome

Where the work stands

I delivered two store launches and a rebrand across six storefronts. Shared templates let three content editors prepare graphics independently, with an estimated reduction from a day to half a day for batches of 30–40 images. The automotive work connected compatibility selection, installation photos and a roof-box visualisation service.

Scope & next steps

This retrospective case uses archived screens and reconstructed diagrams. The production-time estimate is based on my recollection. The separate mobile-conversion figure comes from historical analytics and cannot isolate design from other business changes.

Open to Product / UX / UI roles

Let’s talk about your product.

Based in Lisbon. Looking for a team in Europe, remote or hybrid.

Get in touch