ZENPURCHACE CASE STUDY

Redesign: Onboarding and Deal Setup Flow

ZenPurchase is an e-procurement platform serving Fortune 500 companies (now owned by Coupa).

 

The Problem

Usability issues during the onboarding and deal setup process were leading to abandonment.

 

The Solution

A new deal setup flow that helped users understand the process, a fully rearchitected deal page, and requirements templates.

My Role

2-week design sprint partnering with one other UX designer in all phases of the design process.

Clickable prototype

DESIGN PROCESS

Mapping out the task flow using card sorting

The procurement process involves initiating a "deal", preparing an RFQ, broadcasting the deal to stakeholders and vendors, tracking responses, selecting a vendor, and finalizing the deal. To understand how users think about executing these steps, we used a card-sorting exercise to see how users organized the activities. This helped inform the deal setup workflow.

Heuristic analysis & usability testing of the current flow

Once we understood the steps and requirements in the workflow, we wanted to evaluate where the application was falling short. To figure out the most obvious areas of weakness we did a heuristic analysis and conducted two live user testing sessions.

 

What we found:

  • The deal setup process lacked feedback and direction, and didn't inspire confidence in the application

  • The interface lacked consistency and cohesion

  • There was no contextual help

  • Users had no indication of how many steps there were during setup, so they felt trapped in the process

Developing proto-personas
Once the primary issues were identified, we wanted to make sure we understood the users. We didn't have access to actual users, so we interviewed the business owner and created three proto-personas with different backgrounds, viewpoints and experience levels.

The common thread across persona types was the need to keep interactions quick and simple.

Sketching solutions

Now that we felt we understood the process, the problem, and user needs, we started sketching out some ideas. To keep the project in scope we limited our design focus to:

 

  • Deal setup flow

  • Deal page

  • Dashboard page

 

The client provided us with mockups from an in-progress UI redesign.  We used these to underpin our solution, which evolved over multiple iterations through user testing and client meetings.

User flow models and iterations

Our first design iteration consisted of a "funnel" - a series of steps that were required before the user sees the deal page. We shifted strategy after meeting with the client, who felt the deal page was still too hidden and wanted to see a different approach.

 

The user flows illustrate the original and final redesigned flow through the setup process.

Final design and prototype
The final design concept consists of an overlay on the deal page that highlights the steps users take to set up a deal, while allowing them to see page details and exit at any point.

 

We also rearchitected and optimized the deal page by:

  • Placing the requirements tab first since this is the most important information for team members

  • Combining public and private discussions under one tab to eliminate confusion and free up screen real estate

  • Displaying the activity monitor separate from the tabbed area

  • Adding action "cards" to the dashboard and activity monitor to allow users to take actions in-line

 

When the design was finalized, we delivered an interactive prototype using Axure.

 

Clickable Prototype

  • Twitter - Grey Circle
  • LinkedIn - Grey Circle
Deal page with action card

Action cards allow users to take actions independently. Cards on each deal page are exclusive to the deal, whereas cards on the dashboard are global.