Shomitro Kumar Ghosh

Product Designer · New York

Nuport

One fulfillment platform for online and Facebook sellers — from order to doorstep.

RoleProduct Design AssociateApr 2022 — Jan 2023
ScopeFulfillment SaaSPrototypeDesign system
IndustryE-commerceF-commerce
Worked withFoundersEngineersSellers
Nuport design system
Overview

From order to doorstep, in one place

Bangladesh’s online and Facebook sellers are a fast-growing market: over 300,000 active seller pages, around USD 1 billion a year, and 45–60 million people online. Nuport, known for its warehouse and transport software, wanted to enter it quickly with a fulfillment product built for them.

/02.

Sellers were running their business across scattered tools

Orders arrived in Messenger, stock lived in a spreadsheet and parcels were booked with couriers by phone. Nothing was connected, so orders slipped and stock ran out without warning.

  • Orders in chats
  • Stock in spreadsheets
  • Deliveries tracked by phone
Before Nuport

Messenger for orders, a spreadsheet for stock, phone calls for couriers.

Nuport design system
/03.

One flow, seven steps

Every order follows the same path, so the product follows it too.

Order created → Confirmed → Picked → Packed → Handed to the courier (3PL) → Tracked → Delivered

One status change moves an order along, for a single order or many at once.

Nuport design system
Status tabs
Orders are counted and filtered by status.
One status at a time
Pending, approved, processing, shipped, in transit, delivered.
Flag exceptions
Returned and damaged orders are flagged, not lost.
Bulk update
Select many orders and change their status at once.
/04.

From sketch to handoff

We had to launch fast, so every step fed the next one.

  1. 1SketchPaper flows of the order journey and modules, from the client briefing.
  2. 2Design systemColours, type and components defined once for every module.
  3. 3PrototypeA clickable, end-to-end Figma prototype with every module connected.
  4. 4TestSessions with sellers, plus research into how they run orders today.
  5. 5Hand offStraight to development after testing, with specs and the design system.
Nuport design system
01 Sketch
Nuport design system
03 Prototype
From paper to prototype

It started with a feature list on paper from the client briefing. From there, every order and sales screen was wired into one clickable Figma prototype that went to sellers for testing.

/05.

A design system built to scale

A shared foundation for every module: five semantic colour ramps (primary, success, caution, error and neutral), an Inter type scale from headline to caption, and a component library in four sizes (64, 56, 48 and 40 px).

Design and engineering worked from one source of truth, so new modules stayed consistent and moved from design to build faster.

Nuport design system
Nuport design system
Nuport design system
/06.

Seven modules, one dashboard

Each module owns one part of the job, and all seven share the same order data — so a sale updates stock, the courier and the customer at once.

Dashboard & reportsSales, best-selling products and order status at a glance.Shomitro
OrdersCreate an order and follow it through to delivery.Shomitro
CustomersEvery buyer with their order history and addresses.Shomitro
ProductsAdd products with price, variants and photos.Shomitro
InventoryStock updates as orders are picked and packed.Shomitro
CourierHand parcels to a 3PL courier and track each one.Shomitro
AccessRoles that decide who can see and do what.Shomitro
One source of dataEvery module reads and writes the same records.Summary
Nuport design system
Orders at a glance
Total and cancelled orders for any date range.
Sales
Revenue and cancelled value in BDT.
Order status mix
The share of flagged, pending, approved, shipped, delivered and cancelled orders.
Order cycle
How many orders sit at each step right now.
Top 10 products
What sells most, daily, weekly or monthly.
/07.

The two journeys sellers repeat all day

Creating an order and adding a product happen many times a day, so both are short and guided. Hover the numbers to see how each screen works.

Nuport design system
Find the customer
Type a phone number and the name, address and past orders fill in.
Search products
Find any product by name, or filter by category.
Add to cart
One click puts the product in the cart.
Adjust in place
Change quantities or remove items without leaving the page.
Delivery
Inside or outside Dhaka, plus a courier partner like Pathao.
Nuport design system
SKUs at a glance
Total, new and active SKUs sit on top of the list.
Bulk actions
Update prices or upload a product sheet in one go.
Add a product
Opens the guided add-a-product flow.
Specifications
Weight travels with each product to packing and the courier.
/08.

Everything around the order

Customers, delivery partners and stock sit one click away from any order. A new customer is saved in seconds, each courier can be switched on or off, and every product shows whether it is live.

Nuport design system
Nuport design system
Nuport design system
01 Customers02 Delivery partners03 Inventory
/09.

Tested before it was built

Because sellers and clients used the prototype before development, the team went straight to handoff after testing, with fewer surprises in the build.

Sales▲ 25%
+0%
Launch
BeforeAfter launch
Growth after launching with the tested prototype.
Onboarding efficiency▲ 34%
+0%
BeforeBaseline ┄After launch
Smoother onboarding with flows validated end to end.
Early clients5 total
0+
Week 1Week 6
Onboarded before engineering work began.
/10.

What I learned

Small sellers have no time for training, so every screen has to explain itself. Sketching first and testing a full prototype let us launch fast without guessing, and the design system made each new module quicker than the last.

More work

You might also like

← All work