What is Proc360?
Proc360 is a China-to-Africa procurement platform built by Checkit Technologies. It gives African businesses — from first-time importers to high-volume retailers — a single platform to source, inspect, store, and ship goods from China, eliminating the language barriers, unreliable middlemen, and opaque costs that have historically made cross-border trade painful for African SMEs.
The platform operates across four deeply integrated modules: Buy For Me (product sourcing from Chinese marketplaces like 1688 and Taobao), Wallet (multi-currency payments with instant local-to-RMB conversion and supplier payment insurance), Store (China-based warehousing, quality inspection, and consolidation), and Ship (air and sea freight with customs clearance and last-mile doorstep delivery). Today, over 5,000 African businesses trust Proc360 with their import operations.
I joined Checkit as a product designer and solo-designed the entire V2 of this platform — every screen, every flow, every micro-interaction across all four modules. The work contributed to the company securing seed funding. I no longer work there, but the product I designed is live, scaled, and still serving thousands of importers.
Importing from China was a system designed to fail African businesses.
Before platforms like Proc360, sourcing goods from China as an African importer meant: navigating Chinese-language marketplaces alone, finding suppliers through WhatsApp groups and word-of-mouth, wiring money to strangers with no recourse if goods didn't arrive, waiting weeks with zero shipment visibility, and having no way to inspect quality before goods left China. Every step was a trust fall with real money at stake.
The problem I faced as a designer wasn't just "make this look better." The V1 of the platform had real usability debt — users didn't understand which feature to use when, the ordering flow was fragmented across multiple disconnected pages, the wallet experience created anxiety rather than confidence, and the status of an active order was nearly impossible to read at a glance. It was a product that technically worked but emotionally failed its users at every turn.
My job was to fix that — to design a system where trust is built through transparency, complexity is absorbed by the interface (not the user), and every feature tells the user: "You are in control."
Fragmented mental model
Users didn't understand the relationship between Buy For Me, Store, Wallet, and Ship. Each felt like a separate product. The biggest design challenge was unifying four complex systems into one coherent experience.
Trust deficit by design
Moving large sums of money across borders to pay foreign suppliers is inherently anxiety-inducing. The old interface offered no reassurance — no payment status clarity, no confirmation states, no visible protection signals.
Language and literacy barriers
Proc360's users range from seasoned importers to first-time buyers in Gombe. The interface needed to work for users with varying levels of digital literacy, in a context where the stakes of a mistake are high.
Order complexity with no visibility
An import order moves through sourcing → payment → quality check → warehouse → consolidation → customs → delivery. Users had no way to see where they were in this chain. Every question became a support ticket.
Four features. One coherent system.
The core design thesis for Proc360 V2: each feature had to work brilliantly on its own, but feel even more powerful when used together. Here are the actual screens — with the decisions behind them.
Buy For Me · Order Management Dashboard
-
1
Status cards as a command centre
The five stat cards (Pending Quote, Payment Pending, Ongoing, Completed, Cancelled) aren't just metrics — they're navigation shortcuts. Each links directly to the filtered list. A user who has 10 orders awaiting payment taps once to see exactly those. No hunting.
-
2
Quick Actions: surfacing the most urgent next step
The three Quick Action cards are dynamically prioritised — they surface items that need the user's attention right now: an order with an invalid item, a cart left open, a status change. This eliminated the most common support ticket: "I don't know what to do next."
-
3
Colour-coded status pills in the activity table
Pending Quote (amber), Completed (green), Payment Pending (red), Archived (grey) — the same colour vocabulary repeats across every module. A user who learns what "Payment Pending" looks like in Buy For Me recognises it immediately in Ship. Consistency as a trust signal.
-
1
Empty state as an onboarding moment
Most products treat empty states as failures. I designed this one as the real entry point. Three distinct input methods — Link, Picture, Text — are presented equally, because African importers arrive with different materials: some have a 1688 URL, some have a WhatsApp photo, some just have a description. No method is buried.
-
2
"Learn More" on every input type
New importers don't always know what a product link is, or how to add a picture item. The Learn More links are not afterthoughts — they're designed for the first-timer who is nervous about getting it wrong. Reducing fear of mistakes directly increases completion rates.
-
3
Bulk import surfaced at the right moment
High-volume importers who have lists of 40+ products in spreadsheets or WhatsApp chats get bulk import options presented here — not hidden in settings. One screen serves both the casual buyer and the serious retailer without requiring either to navigate away.
Cart empty state · Multi-mode item input
Order detail · Payment required state
-
1
The 4-step progress tracker
In Review → Payment → Processing → Completed. This single component answers the question users were constantly asking support: "where is my order?" The current stage is highlighted; past stages are checked; future stages are greyed. Users know exactly where they are and how far they have to go.
-
2
Contextual payment banner — not a modal
The payment request banner lives inline on the order page, not as a disruptive modal. It explains why payment is needed ("The admin has reviewed your order"), states the exact amount, and surfaces Make Payment and Edit Order in the same place. Context + action in one view. No jumping between screens.
-
3
Four data points, one row
Total Amount, Estimated Weight, Payment Status, Last Updated — the four things an importer needs to know at a glance before making a payment decision. Laid out as a scannable row at the top of the order, not buried in a scrollable form. Decision-critical information gets prime real estate.
-
1
Completion state that doesn't dead-end
"Your order purchase is completed" could have been a dead end. Instead, the completed banner immediately offers "Continue to ship your order" — a direct handoff from the Buy For Me module into Ship. The user's next logical action is surfaced at the exact moment they need it.
-
2
Same progress tracker — now fully resolved
All four steps check off in sequence. This visual resolution matters psychologically — users who've been tracking a pending order feel genuine closure when every node fills in. Small detail, significant emotional impact for someone who's spent money and been anxious about it.
-
3
Payment Status turns green — trust confirmed
"Paid" in green is not just a status label. For an importer who transferred money across borders and waited for confirmation, seeing that word in that colour is the product delivering on its core promise: your transaction was safe, it completed, you can trust this platform again next time.
Order detail · Completed & handoff to Ship
Store · Add Parcel modal
-
1
Transparency before commitment — fee disclosure
The amber info banner "You will be charged for requesting Quality Check" appears before the checkbox, not after. This is intentional: users must see the cost implication before they make the choice, not discover it later on an invoice. The same progressive disclosure principle that runs through the entire product.
-
2
"How to get tracking code" — reducing support contact
New importers regularly don't know where to find their supplier's tracking code. This inline help link — right below the tracking field — answers the question before it becomes a support ticket. Every inline help element in Proc360 V2 was placed based on where the old design generated the most support messages.
-
3
Minimal modal — focused task
Three fields. One action. Adding a parcel to the warehouse is a narrow, specific task — and the modal reflects that. There's nothing here that doesn't need to be here. Keeping high-frequency operational tasks frictionless was a core principle of the Store module redesign.
-
1
Seven status cards covering the full journey
All Shipments → Shipment Request → Processing → Forwarded → In-Transit → Ready for Pick-up → Delivered. Every stage of a shipment's life is a tappable filter. Users can see at a glance that 34 shipments are in-transit and navigate directly to that list — no searching, no scrolling. Volume visibility as navigation.
-
2
Quick Actions — status-aware CTAs
The three Quick Action cards carry different CTAs depending on shipment status: "Track Shipment" for in-transit orders, "See Details" for completed ones, "Track Delivery" for last-mile. The card knows what the user needs to do next for that specific shipment — context-aware actions, not generic buttons.
-
3
Consistent status vocabulary across modules
Forwarded (blue), Delivered (green), Ready for Pickup (orange), In-transit (teal) — the same colour-to-status mapping used in Buy For Me appears here. A user who knows these colours from managing orders doesn't need to relearn them in Ship. Visual consistency is a form of respect for the user's time.
Ship · Shipment Management Dashboard
How I approached a system this complex — alone.
Designing all four modules of a supply chain platform solo is an exercise in system thinking. I couldn't optimise each feature in isolation — every decision in Buy For Me had downstream implications for Store and Ship. The work demanded a consistent mental model that I maintained across hundreds of design decisions.
Mapping the full import journey — not just the screens
Before touching Figma, I mapped the entire lifecycle of an import order: from the moment a user identifies a product they want to buy, all the way to delivery at their door. This gave me a bird's-eye view of where the platform touched the user's life — and where it currently failed them. The journey map became my north star for every design decision that followed.
Establishing a unified design language across four modules
Because four features were being redesigned in parallel, the biggest consistency risk was visual and behavioural fragmentation — each module feeling like a different product. I established a design system early: shared components, a consistent status vocabulary (for orders, payments, shipments), and a single navigation architecture that made movement between modules feel natural rather than jarring.
Designing for trust at every touch point
Trust was the meta-problem across all four features. I treated it as a design variable, not a marketing goal. Every key moment where users were about to commit money or time had to answer the question: "why should I trust this?" The answer was always the same: transparency, confirmation, and control. Progressive pricing disclosure, explicit payment protection labels, real-time status tracking, and quality inspection photos all served this goal.
Designing for the diversity of African users
Proc360's users include boutique owners, Gombe gas dealers, student entrepreneurs, and established retail directors — a massive spread of digital literacy, context, and urgency. I designed with this range in mind: flows that guide first-timers with zero assumptions, power features accessible (not buried) for experienced importers, and notification copy written in plain, warm, human language rather than logistics jargon.
Prioritising business impact in every design decision
Design at this level isn't just about user experience — it's about business outcomes. I consistently asked: which design decisions reduce support volume? Which ones increase conversion from quote to order? Which ones increase repeat usage? The consolidation recommendation prompt, the transparent pricing reveal, and the proactive shipment notifications were all designed with explicit business value in mind — not just usability scores.
Design as a business asset — not just an artefact.
The result of this work was a V2 platform that was cited in Checkit's seed fundraising process. That's the clearest possible signal that design had business value here — investors saw the product and saw a scalable, trustworthy platform that matched the ambition of the company.
I no longer work at Checkit. But the product I designed is live at proc360.app, serving over 5,000 businesses across Africa, handling real money and real shipments every day. That's the measure I care about. Design that outlasts your tenure is design that was built right.
What this project taught me above everything else: complexity isn't a reason for a confusing interface. The more complex the underlying system, the more responsibility the designer has to absorb that complexity on the user's behalf. Every feature I designed on Proc360 was built on one principle — the user should always feel more informed and more in control after using it than before.
Contributed to seed funding
The V2 design work was explicitly referenced in Checkit's fundraising — one of the clearest examples I have of design influencing business outcomes at the company level.
Live at scale, across Africa
The design ships daily to 5,000+ businesses across Africa. The work I did isn't in a portfolio PDF — it's a live product that real people use to build their livelihoods.
Complex system, one designer
Designing four interconnected feature modules solo — each with its own logic, user states, and edge cases — proved my capacity for end-to-end product ownership on enterprise-grade complexity.
Trust architecture as craft
Proc360 sharpened my ability to design for trust in high-stakes contexts — a skill that transfers directly to fintech, where I now design payment products at a similar level of emotional and financial sensitivity.