New B2B wholesale platform · Vendor web admin · Buyer mobile store

Shopcord Linesheet

Designing a connected B2B wholesale platform,
from vendor setup to buyer ordering.

Role: UX Designer
Team: 5 designers, PMs & engineers
Timeline: Feb–May 2026
Status: Launched June 2026

Image slot 1 Hero: vendor pack setup next to the buyer product page shopcord-hero.png

Vendor admin and buyer store prototypes.

My role & contributions

What I worked on

Shopcord was a new platform built from scratch. Five designers shared the work across connected workflows, led by a senior designer.

Image role-vendor.png
Vendor item upload Designed most of the flow, including pack and option structures.
Image role-buyer.png
Buyer pack experience Designed how packs are shown and ordered on the PDP and bag.
Dashboard onboarding Restructured the flow based on a senior designer's initial version.
UX support Wrote microcopy, supported UX QA, and followed up on SMS onboarding.

Ecosystem and UX challenge

How vendors, items, and buyers connect

Vendors use the web admin to create linesheets (catalogs of selected items) and share them by link. Buyers open the link on mobile to browse and order.

Vendor · web Connect Admin Uploads items and sets pack options.
Linesheet link Selected items, shared by link.
Buyer · mobile Buyer Store Browses items, selects quantities, and places orders.

The UX challenge

Vendor setup shaped what buyers could select and order. As requirements changed, we had to keep these connected workflows consistent across the platform.

One pack logic, two sides

Making pack rules clear for vendors and buyers

The same pack rules had to make sense twice: when a vendor set up an item, and when a buyer placed an order. The PM defined the rules, and even our team found them hard to follow.

Pre-Pack: Buyers order fixed bundles by the pack.
Open Pack: Buyers choose quantities by size, color, or other options.

One example: Pre-Pack with color and size

Image slot 7a Vendor setup 07a-vendor.png

Vendor pack setup · Prototype

Pack configuration. The prototype shows a shared size breakdown above the color rows, separating what each pack contains from color-specific settings.
Content length and volume. I checked short and long names, along with different numbers of option values, to see how the layout held up.

Image slot 7b Buyer PDP 07b-buyer.png

Buyer Pre-Pack PDP · Prototype

Fixed contents, editable quantity. I placed the pack breakdown above the inputs to distinguish pack contents from order quantities.
Reused pattern. I adapted the pack selection pattern from my previous FashionGo PDP work.

ExampleOne pack = 1 XS + 2 S + 2 M + 2 L + 1 XL (8 pieces).Two Navy packs = 16 pieces in Navy.

The other method: Open Pack

For Open Pack, buyers choose quantities for individual option combinations rather than fixed packs.

Image slot 4 PDP, Open Pack 04-pdp-open.png

Buyer Open Pack PDP · Prototype

Quantities by size and color. I placed size-level quantity inputs under the selected color, so buyers could specify each combination separately.

Example2 Small + 3 Medium in Navy = 5 pieces.

Across the option structures I worked on, I compared vendor settings with the corresponding buyer screens.

Why it mattered. A mismatch between vendor setup and buyer ordering could leave buyers unsure whether a quantity referred to individual pieces or whole packs.

Prototyping and handoff

Designing in code, as a team

I built interactive prototypes with Claude Code. Our team used GitHub to bring our pages into a shared prototype. After about three months of design work, I handed off my work through the prototype and annotated Figma files.

Image slot 9 Prototype in motion 09-prototype.mp4 or 09-prototype.gif

Vendor admin prototype.

What worked

I could see changes immediately in the interactive prototype as requirements evolved. Shared components helped the team maintain consistency across pages.

What was hard

I maintained both Figma designs and code prototypes. Moving work between them took extra effort. Figma MCP later made that transfer easier.

Status and reflection

What I learned

Shopcord launched in June 2026. My contribution ended at design handoff, and post-launch outcome data was not available to me.

One page is never just one page.Designing my part meant understanding what my teammates were building. Decisions on their pages shaped how mine needed to work.
Design for the extremes.A layout that works for “Small, Medium, Large” can break with longer names or more values. I checked content length and the number of option values before considering a layout complete.
Check every variation on both sides.Each option structure needed to work in both vendor setup and buyer ordering. I learned to check them together, rather than reviewing each screen independently.

Next project Item Creation Revamp