top of page
  • Writer's pictureselinov

Coupa Widget Refactor


Fig. 1

“Coupa’s cloud procurement software application is a powerful procure-to-pay system that brings consumer e-commerce shopping ease and bottleneck-busting functionality to the procurement workflow.” – Coupa Web Site

Basically, the system lets you buy stuff in bulk for your business. Items like computers, staplers, etc are offered at a discount using an interface that’s more pleasant than most terminal looking systems installed in most traditional businesses. An added value of using Coupa is that you can easily have access to items that are not already inside your company “stock”. For instance, if I add a Lenovo laptop to my cart the system let’s me know that there are related items found on partner sites. These sites are not inside of the Coupa framework but they are affiliates. When you click on one of these items you are leaving the Coupa site with a token to associate the impending purchase. It’s a clever system but it has some issues.

The screen grab (Fig. 1) is an approximation of the initial screen I was shown by the product owner. It shows a widget with related items when you add something to your cart. It list the raw item name and the price. I was asked if I had any ideas to make it “less sucky”.


1. If the product owner had not explained what that section at the bottom of the page was I would not have known what that section was intended for or even made a connection between the action I had just completed. A clearly defined section name would allow me to determine relevance quickly.

2. I tend to lean toward establishing relationships with users through “conversation”. This is an established UX method geared toward building a rapport which keeps people comfortable while using the interface. Plain language helps users feel like they understand what’s going on.

3. The text list of items with the prices on the right did contain all of the pertinent information but how scalable and effective is it? Let’s show the user a picture of the item which increases the speed of cognitive recognition. People recognize shapes much faster than words. Putting the list into a carousel uses an established pattern (people see these all the time), allows for an infinite list of items in a finite space, and invites interaction which  increases the likelihood of clicking a listed item.

4. Any time you send someone away from your site it’s difficult to get them to return. Even if they do, it’s rarely in context of why they left. They usually return with a new context. It’s a good thing to let people get what they need but let’s make sure that they understand why we’re doing it and the benefit of the trip. I threw out the idea of comparing the price listed (show in red if higher, green if lower) in an effort to show the value of staying in Coupa. Not sure if that would really work given the situation but perhaps we could show the “savings” in this way. The point is to convey a value for the information listed.


bottom of page