Lukhman PProduct DesignerProcureEdge · Personal project · 2024
ProcureEdge is a concept for a B2B vendor management platform: one place for enterprises to discover vendors, run RFQs, compare bids and keep the institutional memory that today lives in spreadsheets and inboxes. A six-week, end-to-end design project from research to high-fidelity UI.
The problem
Procurement managers across IT, manufacturing, steel, aviation and healthcare manage multi-lakh vendor decisions with Excel sheets, email threads and phone calls. There is no system, no data and no institutional memory.
Impact
What I did
Five interviews with procurement leads in steel, aviation and IT, with workflows mapped from both the buyer's and the vendor's side.
An affinity map of 30+ observations, three evidence-based personas and competitive SWOTs of SAP Ariba and Jaggaer, distilled into one precise problem statement.
A nine-stage journey map with emotion layers, 18 how-might-we statements tied to pain points, and six design directions with clear feature links.
Information architecture of nine modules and 40+ sub-pages, the core end-to-end user flow, and eight high-fidelity screens.
In the product
Committing to not touch any visual design until the problem was clearly defined and the opportunity clearly framed.
User Research
I recruited procurement professionals across verticals to understand not just what they do, but why they do it that way, and where the system is working against them.
What roles do procurement managers hold, how many vendors do they manage, and what does their daily workflow look like?
What tools do they rely on? How do they discover vendors, evaluate proposals, and get sign-off from finance and leadership?
What causes delays, what information is missing, and where do they feel the most friction, risk, and loss of control?
Analysing all five interviews against both buyer and vendor perspectives revealed eight cross-cutting pain themes that appeared in every conversation, regardless of industry.
Requirements, outreach, proposals, comparison: all done in separate tools with no connection between them.
All users found vendors via Google or word-of-mouth. No structured, reliable source of pre-vetted vendor intelligence.
After each order completes, vendor performance is never recorded. Every new cycle starts from zero.
Getting finance and leadership sign-off through email chains with no visibility into status, causing multi-day delays.
No structured way to assess vendor compliance, certification status, or financial risk before shortlisting.
Monitoring order status requires daily phone calls to vendors. No system alerts, no milestone visibility.
Physical bill handoffs to finance teams disconnect billing data from procurement data entirely.
Synthesis
Research only becomes useful when it's synthesised into decisions. I used three methods (affinity mapping, persona development, and competitive analysis) to turn raw observations into actionable design principles.
Three personas, grounded entirely in interview data, not assumptions. Each represents a different usage context and risk profile, ensuring the design doesn't over-index on a single archetype.
SWOT analyses on SAP Ariba and Jaggaer revealed where the market had gaps and where ProcuraEdge could build a meaningful differentiated position.
| STAGE | HOW MIGHT WE… | WHAT WE BUILT |
|---|---|---|
| Vendor discovery | …help procurement managers discover pre-vetted vendors without starting from a blank Google search? | AI Vendor Recommendation Engine |
| RFQ outreach | …replace 10 separate copy-pasted emails with a single action that still reaches every vendor effectively? | Centralised RFQ System |
| Evaluation | …make vendor comparison feel like a confident, data-backed decision rather than a gut feeling? | Comparison Dashboard + Risk Indicators |
| Approval | …make approval workflows transparent and accountable, without adding bureaucratic overhead? | Collaboration Hub + Approval Workflow |
| Delivery | …give procurement managers live delivery visibility without requiring daily phone calls to vendors? | Delivery Tracking Dashboard + Alerts |
| Post-order | …ensure every completed order makes the next procurement cycle meaningfully smarter? | Vendor Performance History + Quick Reorder |
The IA reflects the mental model of a procurement manager, not a product manager. Modules are ordered by the natural cadence of procurement work (discover → source → evaluate → approve → execute → learn), so the navigation feels intuitive from day one.
| Module | Contents |
|---|---|
| Authentication | Login · Register Organisation · Forgot Password |
| Dashboard | Active RFQ summary · Pending approvals · AI insights feed · Delivery alerts |
| Vendor Discovery | AI recommendations · Search & filter · Vendor profile view · Save to shortlist |
| RFQ Management | Create new RFQ · Bulk send to vendors · Proposal inbox · Status tracker |
| Comparison | Side-by-side table · Risk indicators · Scoring weights · Shortlist finaliser |
| Collaboration Hub | Share evaluation · Comment thread · Approval workflow · Approval status |
| Contracts | Draft contract · Digital signature · Payment schedule · Contract repository |
| Order Tracking | Live delivery status · Milestone alerts · Issue raising · Delivery confirmation |
| Performance | Performance scorecard · Trend graphs · Reviews & ratings · Quick Reorder |
| Settings | Team & roles · Notifications · ERP integration · Audit logs |
8 production-ready screens built in IBM Carbon Design System (G100 dark theme). Every screen maps directly to a journey stage and a HMW brief.
Reflection
This case study covers Discovery through Hi-fi Design. The following work remains to bring the product to a validated, shippable state.
| PRIORITY | NEXT STEP | WHAT IT COVERS |
|---|---|---|
| High | Moderated usability testing | 5 to 8 sessions with procurement managers on the hi-fi prototype. Measure task completion for vendor discovery, RFQ creation, and approval workflows. |
| High | Accessibility audit (WCAG 2.1 AA) | Dedicated audit of contrast ratios in the G100 dark theme, focus state visibility, and screen-reader compatibility before any engineering handoff. |
| Medium | Vendor-side interface | The current design covers the buyer's view fully. Vendors receiving RFQs and submitting proposals need a separate, simplified interface. |
| Medium | Mobile responsive flows | Key use cases (approval nudging, delivery alerts, and Quick Reorder) would benefit significantly from a mobile-optimised view for on-the-go managers. |
| Medium | Dev handoff documentation | Component specifications including all Carbon token overrides, interaction states, error handling patterns, and edge case behaviours. |
| Future | ERP integration design | Multiple users mentioned disconnected billing systems (Tally, SAP). Designing the integration surface, with import/export flows and sync indicators, would complete the full operational loop. |
What this project taught me
The biggest UX risk with AI-powered products is that users don't understand why the system is making a recommendation, and therefore don't trust it. Building explainability directly into the UI (scoring weight breakdown, AI reason chip on every vendor card) was the core answer to the product's central design challenge. Trust is earned through visibility, not just accuracy.
