All work

E-commerce · Design + Build

Mastribe — a premium marketplace for African fashion

Full design and development: Figma design system, Framer front-end, Shopify commerce engine. Designed, built, integrated, and launched end-to-end by Prodix.

Client
Mastribe
Industry
E-commerce
Service tier
Design + Build
Timeline
To be confirmed
Mastribe homepage hero — a model in a printed dress against a terracotta backdrop, headline "Bridging Culture, One Style at a Time."

The problem.

Describe the original brief in 2–3 sentences: what Mastribe came to Prodix with, and why an off-the-shelf template or freelancer wasn't going to cut it. The Figma file shows the destination (a premium storefront for African fashion designers) but not the starting problem — need the client's original ask to write this honestly instead of reverse-engineering it from the finished UI.

01

A storefront that reads premium, not generic. The brand needed to hold its own next to established fashion e-commerce, not look like a template.

02

A full commerce flow, not just a landing page. Browse, product detail, cart, and checkout all needed to work as one coherent system.

03

A pain point from the original brief — technical, operational, or brand.

04

A pain point from the original brief — technical, operational, or brand.

Our approach.

  1. 01

    Discover.

    What we framed, researched, and scoped before designing anything. The design file shows the destination, not the discovery work that led there — add once the discovery notes are available.

  2. 02

    Design.

    We designed the full storefront in Figma as one connected system rather than a set of one-off screens: home, shop, product detail, cart, checkout, and the supporting pages (about, contact, FAQ, shipping & returns, policies) all draw from the same component set — buttons, nav, product cards — so the UI stays consistent as the catalogue grows. The product detail page carries the real weight of a fashion storefront: size and colourway selection, fit notes, and care instructions live on one screen so a shopper never has to guess before adding to bag. Checkout mirrors that discipline — contact, delivery, and payment collected in one flow, with the order summary pinned alongside so the total is never a surprise.

  3. 03

    Build.

    How the Framer front-end and Shopify commerce engine were assembled from the Figma design system.

  4. 04

    Launch.

    Integration, testing, and handover.

What shipped.

A Figma design system.

Components, type scale, and colour tokens the storefront is built from.

A Framer front-end.

The marketing and browse experience, built and deployed by Prodix.

A Shopify commerce engine.

Catalogue, checkout, and fulfilment, integrated with the front-end.

  • Figma
  • Framer
  • Shopify

Screens.

Mastribe shop page — filterable product grid with sort and pagination
Shop — browse and filter the catalogue.
Mastribe product detail page for The Contour Wrap Dress, showing size, colour, and Add to Bag
Product detail — sizing, colourways, and care info live on one page, no dead ends before checkout.
Mastribe cart page with line items and order total
Cart — line-item edits and a running total, no surprises before checkout.
Mastribe checkout page with contact, delivery, and order summary
Checkout — contact, delivery, and payment on one screen, order summary pinned alongside.

Results.

—

Results pending

Add once confirmed with the client.

Request a quote from the Mastribe team, with name and role.
Name — Role, Mastribe

Let's build it.

Tell us what you're trying to launch. We'll reply within one business day with an honest read — including whether you actually need us yet.

hello@byprodix.com See more work