08 · Beeline · Design operations2022

Turned one chaotic Figma file into a system designers and developers could ship from

Shop Beeline sells phones bundled with mobile plans. When I joined, every page lived in one Figma file with no structure and no components. I rebuilt the e-commerce flow on a shared UI kit so the team could find, reuse and hand off work.

My role: Designer: file architecture, UI kit, flow rebuild
Team: Designers, developers
Scope: Main, listing, product, checkout and content pages
Foundation: Initium design system

The rebuilt payment method component in the Shop Beeline checkout

flows rebuilt from the ground up

shared UI kit

master scenario per flow for handoff

Initium

design system as the foundation

Problem

Design porridge

Main page, listings, checkout: everything was in a single Figma file with no hierarchy, no reusable elements and no layout logic. Designers couldn’t find files, and developers couldn’t get specs.

The original Figma file with every page mixed together — Before: every page and version in one canvas.

Approach

Structure first, then components

I studied best practice for Figma file organisation and design-system hierarchy, then split the work into clear files for Main, Product listing, Product detail, Checkout and Content pages, each with a master scenario.

I rebuilt every flow from the ground up on a new UI kit based on the Initium design system, so styles, spacing and components were shared everywhere.

The new file structure with separate files per flow and pages per checkout step

Outcome

A file you can hand to anyone

After several iterations and team reviews, the final layouts went to development. The team got a clean, modular file structure, one design language, faster onboarding for new designers, and easier updates because components were reused instead of redrawn.

The shared component library and product card components

Rebuilding layouts isn’t moving rectangles. It changes how a team thinks: structure, systems and shared understanding.