Oriental Merchant is one of the largest FMCG importers of Asian groceries in the world, supplying independent stores and major chains like Coles and Woolworths. Before SalesIQ, almost all wholesale orders ran through phone calls, paper catalogues, and email. Reps manually keyed in every order.
Store owners had no real-time view of stock, pricing, or promotions. Tiered discounts depended on how well a rep could explain them. Every order was a chance for miscommunication.
I needed to help the business shift from a high-touch, analogue process to a self-serve digital platform that could grow across regions without losing the relationships that made the business successful.
How I Framed the Problem
I anchored the experience around two principles. First, mirror mental models that store owners already trusted from mainstream grocery sites. Second, hide the complexity of pricing and promotions so the interface stayed simple while the logic stayed powerful.
Thinking AloudWhen I mapped how many steps a rep took to place a single order, it was obvious the first release had one job. Remove friction, not introduce a clever new pattern.
Before and After Flow
Side by side diagram. Left shows the old flow from phone call and handwritten notes through to manual entry in back-office systems. Right shows the new flow from customer login to order confirmation in SalesIQ.
SalesIQ is a global B2B ordering platform for wholesale customers. It exposes live stock, customer specific pricing, and complex promotional tiers in a layout that feels familiar to anyone who has shopped online.
I led UX from discovery through to front-end delivery. That included research, information architecture, interaction design, UI design, and implementation of the key screens and components.
My Responsibilities
- Stakeholder and user interviews
- Mapping current and future order workflows
- Wireframes and high fidelity UI design
- Designing the promotional UX and visuals
- Responsive layouts for desktop, tablet, and mobile
- Front-end implementation with the dev team
- Ongoing iteration based on analytics and feedback
Who I Worked With
- 3 front-end developers (including myself)
- 3 back-end developers
- Product manager
- Regional stakeholders across multiple countries
Thinking AloudOwning both UX and front-end meant every design decision had to survive code. It kept me honest about what the team could actually ship.
Primary Users
- Independent grocery owners: often ordering on the shop floor between customers.
- Buyers for major chains: large baskets, high expectations for speed and accuracy.
- Specialty store operators: care about niche products and promotions.
Supporting Users
- Sales reps: placing orders on behalf of customers, often under time pressure.
Key Context
- Time poor and often multitasking on the shop floor.
- Heavy repeat ordering rather than discovery.
- Many users with English as a second language.
- Familiar with consumer grocery sites like Coles and Woolworths.
In HindsightThe regions that treated SalesIQ as a focused ordering tool saw the fastest adoption. Where it drifted toward being a full marketing site, the extra visual work added noise without much value.
User Types Snapshot
Simple personas or tiles for three key user groups. Each tile shows a photo, a short description, and one primary need such as speed, clarity, or promo visibility.
I combined interviews, store visits, and workflow audits to understand how orders were really placed across regions.
- Interviews with store owners and operators
- Shadowing orders placed on the shop floor
- Sessions with sales reps and regional managers
- Review of legacy order forms and spreadsheets
- Sandbox testing with key customers pre-launch
What Stood Out
The strongest pattern was simple. Users did not want a beautiful new way to shop. They wanted a tool that felt familiar, loaded quickly, and made promotions obvious.
Key Insights
Familiar flows reduce training. Users expected patterns similar to consumer grocery sites.
Promotions drive behaviour. When users could see how close they were to a discount, they added more to the cart.
Speed beats polish. Dense layouts with clear labels beat spacious designs that required scrolling.
Repeat orders dominate. Saved orders and fast reordering were more valuable than advanced product discovery.
Research Highlights
One visual panel showing 3–4 key insights with simple icons. Each insight can be paired with a short quote from a user to connect the research to real voices.
I used the research to shape two simple pillars for the experience.
1. Follow Existing Mental Models
I based the navigation and page structure on common e-commerce patterns. Home, browse, search, product, cart, and checkout all follow a flow that feels obvious to anyone who has shopped online before.
2. Hide the Complexity, Not the Value
Pricing rules, promotions, and regional variation sit behind the scenes. On the surface, users see clear promotional tags, progress toward discounts, and accurate totals. The heavy logic stays in the background.
This balance let me keep the interface simple and predictable while still supporting complex business rules behind it.
Thinking AloudOnce I watched store owners serve customers while placing orders, it was clear that familiarity was a feature. My job was not to reinvent shopping. It was to speed up something they already knew how to do.
Experience Pillars
Simple two column visual. Left column shows users moving through familiar steps like browse and cart. Right column reveals the hidden system layer such as dynamic pricing and promotional rules.
Catalog and Product Experience
- Region-specific product availability
- Customer-specific pricing and discounts
- Live stock visibility across warehouses
- Support for multiple languages
Ordering Flows
- High-density cart to see many line items at once
- Saved orders and repeat ordering from history
- Clear edit and cancel flows for existing orders
- Homepage shortcuts for favourites and promos
Promotional System
- Custom selector that lets users mix SKUs in a promo family to hit thresholds.
- Visual progress indicators that show how close the user is to the next discount tier.
- Clear tags across the catalog so promo items stand out.
Multi-device Support
- Responsive layouts for desktop, tablet, and mobile
- Flows optimised for on-the-floor ordering with one hand
Why I Prioritised Promos
Promotions were the fastest lever for revenue. By making them visible and interactive, I helped customers understand how to build baskets that worked for them and the business without needing a rep to step in.
Key Screens
A small grid of 3–4 screens. For example, the catalog with promo tags, the promo selector showing tier progress, the dense cart view, and the order history with quick reorder. Each screen can have a short annotation.
Design Principles
I aimed for a visual style that felt like a commercial storefront, not a back-office tool. It needed to look professional for national buyers and still feel simple for independent stores.
I used Ng Zorro as a base library and layered custom styles on top for promotional tags, dense cart layouts, and key components.
Intentional Density
I chose a more compact layout than typical consumer e-commerce. Buyers can see many SKUs in one view, which cuts down on scrolling and makes it easier to compare products.
This came directly from research. When I showed users early spacious versions, they described them as slow, even when performance was fine. Dense but clear screens felt faster.
Thinking AloudThe palette and components are simple on purpose. I let layout and spacing do most of the work so the interface stayed calm even when there were hundreds of SKUs on screen.
Design System Snapshot
A board that shows the core colours, typography, buttons, tags, and cards used in SalesIQ. Include a zoom into the promo tag and tier indicator to show how they stand out.
SalesIQ needed to behave differently across regions but still look and feel like one product. I worked closely with back-end engineers to understand data structures, response times, and what could be configured without breaking the experience.
Key Challenges
- Different promo rules and pricing models per region.
- Evolving data structures as new requirements appeared.
- Multiple languages and content needs.
- Large catalogs that could easily impact performance.
How I Handled Them
- I treated shared components and data contracts as fixed points so regions could configure within guardrails.
- I designed patterns that could stretch for local needs instead of building one-off screens.
- I pushed for small performance wins such as loading skeletons and tighter payloads for key views.
In HindsightI learned that flexibility is only useful if I can maintain it. Next time I would lock regional guardrails earlier so edge cases do not slow every decision.
Shared vs Local
Diagram that shows which parts of the experience are shared across all regions, such as core components, and which parts are configurable, such as promotions or content.
Business Outcomes
- Online revenue growth: for example, the Netherlands grew from around 400k to 1.9m in one year through SalesIQ orders.
- Rep workload shifted: reps spent less time keying orders and more time on relationships and growth.
- Higher promo uptake: clear progress made promotions easier to understand and use.
- Improved accuracy: fewer manual steps meant fewer mistakes and less rework.
Team Confidence
External QA and stakeholder feedback highlighted the UI as professional and reliable. For a young internal team, that validation mattered. It gave us the confidence to take on more ambitious internal products.
Thinking AloudWatching online orders move from zero to multi-million revenue was a clear signal that the design decisions were working in the real world, not just on a Figma board.
Impact Overview
A simple dashboard style visual showing revenue growth, share of orders placed online, and a couple of key operational metrics such as reduced rep entered orders.
What Worked Well
- Leaning on familiar shopping patterns cut training time and made launch smoother.
- Making promotions visible and interactive directly influenced cart size and engagement.
- Designing with high density and clear hierarchy suited wholesale buyers better than airy layouts.
- Treating back-end constraints as part of the UX brief stopped the design from drifting into fantasy.
What I Would Change
- Lock promo data structures earlier to avoid long term maintenance debt.
- Cut low usage features faster based on analytics rather than gut feel or loud requests.
- Bias even harder toward repeat order workflows since that is where most value sits.
- Build design documentation earlier so future regions can scale with less hands-on support.
In HindsightI spent time polishing a few features that users barely touched. The data was clear, but I was more interested in the design problem than the impact. Now I treat analytics as the source of truth, not a nice to have.
Lessons at a Glance
A simple two column list graphic. Left shows what worked, such as mental models and promo visibility. Right shows what I would do differently, such as cutting features sooner and standardising data earlier.
Interested in working together?
I am open to new roles, collaborations, and projects where I can bring both UX thinking and front-end delivery.