CASE STUDY: Redesigning a garment builder experience
Freelance gig, London / Remote
Nov 2016 - Nov 2017

Redesigning a garment builder experience

Show me the work ↓

The short version

  • Role: Frontend architecture, research, UX and redesign planning; UI design with Jason Cianfrone and React development with Henrique Alves and Wagner Santos.
  • Problem: A brand refresh exposed years of UX debt in a complex merchandise campaign builder.
  • Decision: Rebuild in stages around reusable React components, with a Storybook library to preview and document them.
  • Result: A redesigned campaign builder and shared component package. This case study does not include a measured business impact.

Watch the components in use

The original Storybook recording shows the actual component library we built.

The creator’s route

Turn artwork into a campaign.

The builder and its shared components.

  1. Add artwork

    Which design am I using?

    Start with a dedicated upload step.

    View the evidence

  2. Choose products

    What will carry the design?

    Make product and colour selection reusable interactions.

    View the evidence

  3. Place the design

    Will it fit this product?

    Show canvas limits and artwork-placement controls.

    View the evidence

  4. Review the campaign

    What am I offering?

    Bring products, pricing and campaign options together.

    View the evidence

Tiny big detail

Keep the trade-off visible.

As the quantity changes, cost per item and total profit stay together, making the trade-off visible.

The original profit-calculator component in use.

01 / Design and engineering

Design the interaction. Build the component.

From artwork to campaign

Moteefe campaign builder artwork upload screen Moteefe campaign builder product selection screen Moteefe campaign builder artwork placement editor Moteefe campaign builder selected products screen
Decisions, process and lessons

Resolve product decisions before polishing the UI

Creators needed to understand VAT, availability, pricing and campaign settings while placing artwork on different products. I used wireframes to bring sales, founders and developers into the same discussion.

Artwork placement guidelines defining canvas limits and editor controls

Build the behaviour, not just the screens

We packaged the components in a private npm library. These recordings show the original interactions.

What I learned

A single profit calculator touched business, sales, design and frontend decisions. Bringing those disciplines together earlier improved how we worked. Clear ownership and realistic staffing mattered as much as the component architecture.

Role, tools & collaborators

Responsibilities

  • User interviews
  • UX/UI design
  • Redesign planning
  • Product management
  • Component breakdown
  • Frontend build

Tools

  • Sketch
  • Asana / Zube / Jira
  • Zeplin
  • VSCode

Tech

  • React
  • Storybook
  • AWS + CI
  • Ruby on Rails

Credits

  • Jason Cianfrone for UI design
  • Lev Kundin for technical leadership
  • Mathijs Eefting for product and business direction
  • Maria Ladusane for product management
  • Henrique Alves for React development
  • Wagner Santos for React development
  • BEAR agency for brand design and discovery
← Back to work

A closer look

Access granted.

You can now explore the private projects alongside the rest of my work. No extra steps between case studies.

Access stays in this tab until the session expires. You can lock it at any time using Private access.