Procurement Reimagined

Procurement Reimagined

From endless scrolling to instant insights—transforming chaos into clarity on the requisition page.

25% increase in approval process.
30% reduction in cart abandonment
Faster page loads and improved ease of scanning information

Case Details

Project Overview

I led the comprehensive redesign of Coupa’s Requisition Page, modernizing its interface and streamlining workflows to eliminate excessive scrolling and clarify task ownership—driving faster processing times and improved productivity.

Problem Statement

Users were hampered by a cluttered, outdated design that required excessive scrolling and offered limited editing capabilities, making it difficult to quickly access essential information.

Users were hampered by a cluttered, outdated design that required excessive scrolling and offered limited editing capabilities, making it difficult to quickly access essential information.

[Business Spend]

Technology

[My Role]

Lead Designer

[Platforms]

Desktop and Mobile

[Timeline]

January 2024 - Present

[Business Impact]

1M+

View Live Project

End to End Design Process

Persona

Alex Roberts

Procurement Manager

Age: 39

Location: New York City

Tech Proficiency: Moderate

Gender: Male

Role

Quickly complete purchases without interruptions.

Review and approve requests.

Ensure supplier compliance.

Frustrations

Long and confusing checkout processes.

Error messages that don’t explain the issue.

Excessive scrolling and looking for right kind of data.

Strategy and Approach

[01] User Research
[01] User
Research

Conducted user interviews with 15 participants to understand their frustrations and preferences.

Analyzed user behavior data to pinpoint where users dropped off in the process.

Benchmarked against competitors to identify best practices for end to end flows.

[02] Early Ideation and Roadmap Planning
[02] Early
Ideation and
Roadmap
Planning

Conducted workshops with Engineering, Product Managers and Executive Leadership.

Stack ranked feature suggestions from workshop.

Influenced roadmap prioritization and UX contribution.

[03 Design Solution]
[03 Design
Solution]

Provide context for the end users.

Reduce scrolling and improve access of information.

Introduce responsive page layouts and intuitive layouts for end users.

[04] Testing & Iteration
[04] Testing &
Iteration

Personally conducted 10+ direct feedback sessions with our customers and iterated based on their feedback.

Showcased these designs at company wide events to bring in excitement about upcoming features as well as get feedback at a large scale.

Design Stages

How might we enhance the information architecture so that essential data is immediately accessible and actionable?

How might we streamline the requisition process to eliminate excessive scrolling and speed up approval process?

[05] Defining Information Architecture

I revamped the information architecture for the requisition page by reorganizing content into clear, intuitive sections that prioritize key data.

Eliminated redundancies and reduced excessive scrolling, the redesigned structure minimizes cognitive load, enabling users to quickly locate essential information and streamline their decision-making process.

Final Solution

We delivered a responsive, unified interface that consolidates critical tasks into a single view, reducing manual effort and enhancing data visibility, ultimately boosting efficiency across procurement operations.

Improvements & Features

AI Summary Banner

The AI Summary Banner aims to provide approvers with context and focus areas, reducing decision time by 20%.

AI analyses all the important information of this request

AI highlights errors with suitable options

Banner will explain why the request is in pending action state

AI Summary

The AI Summary Banner aims to provide approvers with context and focus areas, reducing decision time by 20%.

AI analyses all the important information of this request

AI highlights errors with suitable options

Banner will explain why the request is in pending action state

AI Summary Banner

The AI Summary Banner aims to provide approvers with context and focus areas, reducing decision time by 20%.

AI analyses all the important information of this request

AI highlights errors with suitable options

Banner will explain why the request is in pending action state

AI Summary Banner

The AI Summary Banner aims to provide approvers with context and focus areas, reducing decision time by 20%.

AI analyses all the important information of this request

AI highlights errors with suitable options

Banner will explain why the request is in pending action state

Responsive page layouts

Modernized layouts and visual styling along with a super screen for side by side view which allows users to have full context.

For full contextual view

Side screen works better than a modal

Improved ease of scanning information

Responsive page layouts

Modernized layouts and visual styling along with a super screen for side by side view which allows users to have full context.

For full contextual view

Side screen works better than a modal

Improved ease of scanning information

Responsive page layouts

Modernized layouts and visual styling along with a super screen for side by side view which allows users to have full context.

For full contextual view

Side screen works better than a modal

Improved ease of scanning information

Guided Experience

Provide end-users with guidance on requisition status, expected next steps, and any blockers.

High level view of request

Guide the user in an end to end flow

Maximize user engagement

Guided Experience

Provide end-users with guidance on requisition status, expected next steps, and any blockers.

High level view of request

Guide the user in an end to end flow

Maximize user engagement

Guided Experience

Provide end-users with guidance on requisition status, expected next steps, and any blockers.

High level view of request

Guide the user in an end to end flow

Maximize user engagement

[06] Next Steps

Leverage AI for smart suggestions, predictive analysis and maintenance.

Continue to test these newer designs for continuous feedback and iterate to improvise.

Eliminated redundancies and reduced excessive scrolling, the redesigned structure minimizes cognitive load, enabling users to quickly locate essential information and streamline their decision-making process.

Key Learnings

Simplification is key

Users value a quick and easy process, especially on mobile.

Simplification is key

Users value a quick and easy process, especially on mobile.

Simplification is key

Users value a quick and easy process, especially on mobile.

Iterative testing pays off

Regular testing uncovered hidden issues and ensured the design met user needs.

Iterative testing pays off

Regular testing uncovered hidden issues and ensured the design met user needs.

Iterative testing pays off

Regular testing uncovered hidden issues and ensured the design met user needs.

Details matter

Small improvements, like error validation and mobile optimization, had a significant impact.

Details matter

Small improvements, like error validation and mobile optimization, had a significant impact.

Details matter

Small improvements, like error validation and mobile optimization, had a significant impact.

Back home

View Next Project

Back home

View Next Project

Back home

View Next Project