All projects

SOPHADDO – E-COMMERCE

One platform for two very different buyers: agro wholesale, artisan jewelry and the back office that runs both.

Client
Sophaddo
Service provided
Storefront & admin portal – Two stores, one back office
Duration
1 month
Year
2026
Tools
Figma, Next.js
Platform
Responsive web – desktop & phone
Visit website
The Sophaddo storefront on a laptop: the split home page offering agro wholesale and handcrafted jewelry

BACKGROUND & CONTEXT

  • Sophaddo sells raw agro goods (shea butter, cocoa butter, cashews and oils) to manufacturers by the kilo, and handcrafted jewelry to individual shoppers.
  • Orders arrived by phone, WhatsApp and email, and prices were negotiated by hand.
  • Stock lived in spreadsheets, with no single view of shipments coming in by sea or going out to buyers.

TARGET USERS

  • Agro buyers: procurement managers ordering by the tonne, deciding on price per kg, documents and terms

  • Jewelry buyers: shoppers on their phones, deciding on look, story and delivery date

  • The operations team: running orders, stock and shipments from a desk or a phone in the warehouse

THE GOAL

Let a procurement manager in Antwerp and a shopper in Accra both buy without help, and give a small team one place to run the business.

Sophaddo on desktop and phone: the split home page leads straight into the agro and jewelry stores

MY PROCESS

  1. Design inventory
  2. Heuristic & UX-copy audit
  3. Accessibility audit
  4. Flow walkthroughs
  5. Domain analysis
  6. IA
  7. UI & design system
  8. QA

KEY DECISIONS

  1. Two bags and checkouts where buying differs; one account, search and order history where identity matters
  2. Price logic made visible: the live tier, the saving and the next price break
  3. Plain words first, trade terms second: "Delivered to your door (DAP)", not a bare "DAP"
  4. Never overpromise: international freight reads "Quoted later", not "Free"
  5. An admin built around one question: "What needs me right now?"

THE SOLUTION

  • Storefront: a split home page sends each buyer to the right store within seconds.
  • Pricing: agro pages highlight the buyer's price tier as they type, and bags nudge towards the next price break or free delivery.
  • Checkout: three steps with Mobile Money first; large orders get a plain-language quote request.
  • Admin: opens on a ranked "Needs attention" queue, with orders, quotes, a stock ledger and a stage tracker for every shipment.

KEY FEATURES

  1. Split-hero home for two stores
  2. Live bulk-tier pricing
  3. Three-step checkout, Mobile Money first
  4. Plain-language quote requests
  5. "Needs attention" admin queue
  6. Shipment tracker & stock ledger

DESIGN SYSTEM & ACCESSIBILITY

  • One token-based component system shared by the storefront and the admin, in light and dark themes.
  • Contrast re-tuned from 2.87:1 to WCAG 2.2 AA, and touch targets raised to 44px.
  • Dialogs, drawers and tabs given proper roles and focus handling; axe reports 0 violations on the audited pages in both themes.
View gallery (13 images)Hide gallery
Four proto-personas: two agro buyers who order by the tonne, a jewelry shopper and the operations team(opens full size in a new tab)
Proto-personas. Two buy by the tonne, one by the piece, and one keeps it all running.
Sitemap: one account leading to the agro and jewelry stores, and a separate admin portal(opens full size in a new tab)
One account, two stores, one back office. Agro comes first because it is the core business.
Desktop home page with a split hero: agro goods on the left, jewelry on the right(opens full size in a new tab)
Two doors, one brand: each store gets a full-height panel on the home page.
Agro product page at 25 kg with the first price tier highlighted(opens full size in a new tab)
At 25 kg the first tier is highlighted…
Agro product page at 1,000 kg with the best price tier highlighted and a 35% saving(opens full size in a new tab)
…and at 1,000 kg the best price shows, with the saving.
Bag drawer suggesting 20 kg more of refined shea butter to reach a lower price per kg(opens full size in a new tab)
The agro bag nudges towards the next price break.
Checkout delivery step where international freight is marked "Quoted later"(opens full size in a new tab)
International freight now reads "Quoted later" instead of "Free".
Admin overview with headline numbers, a sales chart, today's counts and a ranked "Needs attention" queue(opens full size in a new tab)
A queue of urgent work, not a wall of charts. Every item has a button that does the job in place.
Shipment detail with a five-stage tracker from booked to received, showing it is 11 days late(opens full size in a new tab)
Every container gets a five-stage tracker and a document checklist.
Adjust stock dialog that requires a reason for every change(opens full size in a new tab)
Stock is never edited directly: every change needs a reason and lands in a ledger.
Before and after contrast and touch-target fixes, keeping the warm visual style(opens full size in a new tab)
Contrast and touch-target fixes that kept the warm look.
The dark theme across the storefront and the admin portal(opens full size in a new tab)
Every screen in both interfaces has a matching dark theme.
Before and after examples of the product's copy rewritten in plain, specific language(opens full size in a new tab)
Plain, sentence case, specific, never cute: the copy changes with the biggest effect.

BY THE NUMBERS

From design to a shipped platform
1 month
Phone calls needed to order, request a quote or track
0
Stores, agro wholesale and jewelry, on one platform
2 in 1

OUTCOME

  • Buyers order, request quotes and track deliveries without phoning the company.
  • Staff enter phone and WhatsApp orders into the same system.
  • The audit's high-severity themes (naming, units, freight and payment honesty, mobile errors, touch targets) were fixed first, most within 48 hours.

What I learned

Rolling a bolder visual round back the same day showed what the client valued: consistency between the two stores over novelty.

Visit website