Case study 04 · B2B e-commerce · 2021
B2B Ordering Portal
One ordering flow for both corner stores and national distributors.
I co-led the design of 84 desktop and mobile screens for a candy manufacturer’s ordering portal, ran two rounds of usability tests and handed off to developers.
Role
Co-lead Designer
Client
US candy manufacturer
Year
2021
Tools
Sketch, InVision, After Effects
Challenge
One of the five largest candy companies in the US needed a single ordering portal for corner-store owners and national distributors, two groups with very different habits.
What I did
Co-led the design with a senior designer, and together we set the visual style and flows. We designed 54 desktop and 30 mobile screens, built four prototypes, ran two usability tests and led client design reviews before handoff.
Outcome
The client asked me to produce an explainer video of the new portal, which ran in internal and customer-facing campaigns.
Skills and tools
Workshop facilitation
Usability testing
Responsive design
Developer handoff
Sketch + InVision
Motion graphics
84
screens: 54 desktop and 30 mobile
4
interactive prototypes
2
rounds of usability testing
1
explainer video for campaigns
Research
Two kinds of buyers, one portal
Corner-store owners and national distributors order in very different ways and with different levels of technical comfort. We mapped each group’s ordering patterns, inventory tracking needs and pain points before designing one flow for both.
Workshops
Design reviews with the client
Review sessions with client leadership kept business goals and user needs aligned at every step.
Segmentation
Distinct buyer profiles
Each profile had its own ordering habits, tracking needs and pain points.
Validation
Two rounds of testing
Usability tests refined navigation, cart management and product discovery.
Ordering
Built for every buyer
Order templates, CSV upload and delivery tracking in one flow, for small business owners and large resellers alike. Every flow was validated in usability tests and refined with stakeholders before handoff.
Create an order: saved order templates, CSV upload and a running total.
Mobile
The full order cycle on a phone
Thirty mobile screens covered the same flow, from order history to reporting a damaged item.
Order history.
Order details and delivery tracking.
Reporting a damaged item.
Outcome
A portal worth explaining
After the design reviews and tests, the client asked me to produce an explainer video of the new portal. I designed and animated it, and it ran in internal and customer-facing campaigns.
Next case study · 05
Storybank
Read case study 05