It’s been pretty well known that employees hate filling out purchase requests.  Why?  Because companies make their employees fill out tedious forms or they have an antiquated system that takes employees way too long to do a process that should be so simple.  I hear about it all the time from companies looking to make the switch to Coupa.  And I read about it on Twitter.  Because if people are going to gripe, no place better than the Twittersphere.  On any given day, you might read tweets like these.

Since my #1 job at Coupa is to design and manage our product, my goal is to never hear those kind of words from any Coupa customer.  And to date, we’re on target.  I often get questions about our design process and how usability plays a part, so I’ll take you through the product development of one of the recent big projects, Coupa Quickstart.

Phase 1 – Design Goal. It usually starts in the car, shower, lying in bed, shopping for groceries.  Almost anywhere but the office.  You’ve had an idea about what you want to do.  With Quickstart, it was to allow a company to self-configure a purchasing system in under 90 minutes.  And then your mind races with ideas of how to do it.  TurboTax inspired many elements of Quickstart.

Phase 2 – High-Level Mockup. This is where we start putting ideas on paper/whiteboard.  We’ll set the flow, organization, and a general concept UI. Here’s the general concept UI for Quickstart.

We start our process with a high-level mockup, like this one for Quickstart.

Phase 3 – The Full Design. It’s the nitty-gritty phase.  This is when we design every page from a functional and business rule perspective.   We’ll sweat every detail.  Our typical mockup tool is Omnigraffle and we usually post it on our internal wiki for developers and others to review.  But a project of this magnitude called for “the wall”.  We put every page of the design up on the office whiteboard wall.  This gave everyone a great feel of the user flow, allowed us to easily swap things in and out, measure progress and more.  Again, it’s the little details that matter.  Here’s a picture of our wall.

Posting the user flow on "the wall"

Phase 4 – Feedback and Sizzle. The last design phase might occur before or after our development team codes the project.  Quickstart was great from a functional perspective, but only “good enough” from a user’s eye.  We knew it, and we also got feedback from others in the office, some customers and some friends.  That’s when Kyle, a product guy with incredible design skills, and I brainstormed about how to make Quickstart fun.  Kyle came up with a bunch of different themes.  We settled on a map theme which guides the user from start to finish.  Kyle drew it out and Quickstart came to life.  You’ll see the difference from our initial mockup to how the finished product looks.

The finished product for Coupa Quickstart

Smaller projects go through the same phases, even if the time periods are significantly shorter.  There’s no shortcutting at Coupa, even as we continue to deliver releases every 2-3 months.