SSCN
SSCN: designed to make buying from China simple for customers and keep every shipment and wallet in balance for the team
- Industry
- Logistics & Commerce
- Project timeline
- February to May 2026Ongoing maintenance
- What we did
- Research, Brand Identity, UI/UX Design, Design System, Prototype, Development, Ops
- Design deliverables
- Brand Identity, Website UI, Mobile Web UI, Back Office UI, Design System, Icon Set
- Engineering deliverables
- Company Website, Shipment Tracking, Back Office, Warehouse Management (WMS), Inventory and Fulfillment Automation, Wallet Ledger, Data Export, SEO, Analytics
We gave SSCN, a buy-and-ship service from China to Indonesia, a website that explains the service in plain Indonesian and an admin that keeps every rupiah in balance.
Customers asked where their parcel was over WhatsApp, rates were converted by hand and margins only showed up at month end.
Now customers track their own order with an invoice number, and the team sees the margin the day a shipment is created.
Objective
Build a brand and website that make buying from China feel as clear as shopping at home, then an admin for invoices, shipments, wallets and the team.
The Challenge
Three marketplaces, two currencies
Orders come from 1688, Taobao and Tmall, are priced in RMB and paid in rupiah, then shipped by air or sea.
Where is my parcel?
The most common question arrived on WhatsApp, again and again, and the team answered each one by hand.
Money in spreadsheets
A wrong rate or a missed top-up could sit unnoticed for weeks, and margins only appeared at month end.
The Solution
A crate made of letters
S, S, C and N stack into a shipping crate, set in one bold freight orange against near-black.
Tracking customers check themselves
An invoice number plus the last four digits of a phone, so the status stays private and the chat stays free.
Rules that live in the admin
The rate locks when an invoice is paid, boxes are priced by chargeable weight, and a withdrawal never exceeds the wallet.
Our development process.
Five phases in four months, from reading months of chat logs to a website, back office and warehouse running on the same records.
A crate made of letters.
The full Shop Solution China lockup, a short SSCN lockup and a vertical version for narrow spaces.
One brand, two moods.
One crate mark and one orange carry both: a dark, warehouse-lit site and a light admin in ink and orange.
Inter
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 & * @ ? ! / + ( , . : ; )
- Regular
- Medium
- Semibold
Tables, forms and every amount, with tabular figures.
Poppins
0 1 2 3 4 5 6 7 8 9 & * @ ? ! / + ( , . : ; )
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
The wordmark, page titles and headline totals.
SSCN orange
- HEX
- #FF3F08
- RGB
- 255 | 63 | 8
- CMYK
- 0 | 75 | 97 | 0
Success
- HEX
- #067647
- RGB
- 6 | 118 | 71
- CMYK
- 95 | 0 | 40 | 54
Orange tint
- HEX
- #FFF1EC
- RGB
- 255 | 241 | 236
- CMYK
- 0 | 5 | 7 | 0
Espresso
- HEX
- #180100
- RGB
- 24 | 1 | 0
- CMYK
- 0 | 96 | 100 | 91
Ink
- HEX
- #101828
- RGB
- 16 | 24 | 40
- CMYK
- 60 | 40 | 0 | 84
Body
- HEX
- #475467
- RGB
- 71 | 84 | 103
- CMYK
- 31 | 18 | 0 | 60
Muted
- HEX
- #667085
- RGB
- 102 | 112 | 133
- CMYK
- 23 | 16 | 0 | 48
Line
- HEX
- #F2F4F7
- RGB
- 242 | 244 | 247
- CMYK
- 2 | 1 | 0 | 3
Surface
- HEX
- #F9FAFB
- RGB
- 249 | 250 | 251
- CMYK
- 1 | 0 | 0 | 2
/Icons · 18 from the product, Remix line
Part 1 · Website and tracking
A site that explains buying from China in plain Indonesian, and a tracking flow customers run on their own.
A homepage that explains buying from China.
Here you see the full homepage on desktop and phone. It answers in the order new customers ask: what SSCN does, how it works, what it costs by air or sea and how to track a parcel, all in plain Indonesian.
Tracking that protects the order.
Customers used to ask on WhatsApp where their goods were. Now they check it themselves with the invoice number and the last four digits of the phone number on the order.
Status first, then every step.
Once verified, the page shows where the parcel is right now at the top, and its full history below: bought, checked at the China warehouse, shipped, arrived in Indonesia and out with the courier.
Errors that say what to do next.
A wrong invoice number and wrong digits each get their own message and a next step, instead of one vague error. After three wrong tries the form pauses for 15 minutes.
One source of truth.
The status customers see comes straight from what the team records in the admin. Weight, courier and tracking number are entered once.
- 01 Admin · Shipments Team records the weight and the courier tracking number
- 02 Courier Status updates come back into the shipment
- 03 Website · Lacak Pengiriman Customer sees the same timeline after verifying
Built for the phone in the chat.
Visitors arrive from a WhatsApp link, so every step fits one screen with large digit fields.
Part 2 · Admin
Behind the website, the SSCN team buys goods in China for customers and ships them home. This is the tool they use to bill customers, track every box and keep each customer’s balance right.
First, how an order and its money move.
Before any screen we mapped the journey of one order, from a marketplace link to the customer’s door, and of every rupiah, from top-up to profit.
Order lifecycle
Every status an order passes through, from link to doorstep.
Money flow
Where each rupiah goes, and the checks that stop mistakes.
Sign in
Only staff the owner has invited can get in, because this is where customer money lives.
Overview: the first screen every morning.
The top row shows money collected, still unpaid and held in customer wallets. On the right sit today’s RMB rate and a short list of things to fix before the shipping cut-off.
Notifications
A payment arrives, an item runs out or a courier picks up a box. Each alert opens the record it is about.
Invoices: billing customers in two currencies.
Goods are bought in RMB but customers pay in rupiah. Staff type the RMB price and the invoice shows rupiah, so there is no manual conversion.
New invoice
Items priced in RMB, with the rupiah total at today’s rate.
Invoice detail
What was bought, what was paid and when.
Recording a payment
Once paid, the exchange rate on that invoice is locked, so the amount the customer agreed to never changes later.
Shipments: every box from China to the door.
Staff log each box with its weight and courier. Shipping is charged on real or volume weight, whichever is higher, so the profit on a shipment is known on day one.
New shipment
Each box with its weight, and the margin before it ships.
Shipment detail
Courier, tracking number and every status update.
Wallets: money customers keep with SSCN.
Many customers top up in advance. New invoices are paid from that balance first, and a withdrawal can never be more than what is left.
Wallet
Every top-up, payment and withdrawal for one customer.
Withdraw
Blocked if the amount is more than the balance.
Customers and admins.
Each customer shows their balance and unpaid invoices at a glance. New staff are invited by email, and the invite expires after 48 hours.
Customers
Balance and unpaid invoices on every row.
Add customer
A duplicate email is caught before saving.
Admins
Who has access to the admin.
Invite an admin
By email, with a link that expires after 48 hours.
The Result
First-time buyers can read how SSCN works, compare air and sea and check their own parcel at any hour, so the team spends its WhatsApp time on new orders instead of explaining the basics or giving status updates.
On the admin, margins are visible the day a shipment is created instead of at month end, the exchange rate is applied once then locked, and the team checks invoices, shipments and wallets in one place, and it all matches what customers see on the tracking page.
-
UX Research
- Chat log review
- Stakeholder interview
- Spreadsheet audit
-
UX Design
- Site map
- Tracking flow
- Order lifecycle
- Money flow
- Wireframe
-
UI Design
- Brand identity
- UI design
- Responsive web
- Design system
- Icon set
- Back office and WMS UI
-
Prototyping
- Interactive prototype
-
Development
- Website and tracking
- Back office
- Warehouse management
- Fulfillment automation
- Wallet ledger
- Data export
- QA, launch and ops
