Coupa: BSM Platform Before & After

Key Takeaways

• Users & Administrators often have divergent goals, but white label platforms have to meet both groups’ needs

• Wide generative research and expansive first round design boundaries speed the design process along by focusing at each stage of iterative design.

• Visual attractiveness can be measured if the right criteria are defined and that initial impression can make or break adoption rates.

Software & Skills

• Figma, Adobe Creative Suite, Pendo, Invision

• Icon Design & Systems, Illustrations & Illustration Systems, Color Systems, WCAG 2.1 Accessibility Guidelines, User Centered Design, Atomic UX Design, Semantic UX Design, Scaling Platform Design

Step 1 - Define the Problem

Enterprise software is notorious for clunky, feature-rotten complexity and user-unfriendly experiences that are driven by business needs rather than user needs.

Because Coupa’s value proposition is - If you make it easy for your employees to get the things they need to do their job with your own procurement site, you will save money - they rely on increased user adoption to achieve their proposed value for businesses. We decided then that our ultimate metric for success on this project was overall user adoption and the way I could affect that most effectively was through initial likeability.

Step 2 - Generative Research

Working along with our UX Research Team, I generated comparative research that gave us a fuller understanding of our space in the market along with research on visual trends in SASS & Retail Web Design that would inform later design phases. We also directly engaged with end user groups via Pendo through a series of likeability studies to generate directional research for visual approaches and usability studies of our existing platform default view.

Stakeholders on our client side also communicated new requirements as they came in. The tool had to eventually look like our client’s brand and not our own. Whatever solutions we created had to be flexible visually.

It’s crucial to know what the competitive environment is when working on white label software products; you have to accomplish many goals at once for a wide variety of stakeholders in addition to the user.

Our most important finding was that users often had real difficulty using the application’s “default” view to both source items and perform work functions. We had to establish quickly that this tool was built for these two tasks first and we wanted to group their work in ways that provided a clearer hierarchy of information and work-to-be-done.

We needed to make a better first impression, first.

Step 3 - Design Iteration

Working with such a large team of UX designers and researchers at Coupa, I knew that everyone would have opinions about our ultimate visual direction, so I made sure to perform an exhaustive survey of current and coming visual trends. Among them were parametric design solutions, hand made illustration systems, 2D / 3D Interplay and much more.

We also identified a need to provide starter assets for Enterprise customers who were essentially creating their own DIY icon systems to accomplish a UX goal they had. The scope of the project continued to expand at this point and we split off the effort to redesign the default view from new atomic level element design work.

I like to create lots of big, bold ideas at the beginning of the design process when we’re all unsure of what the best solution is and evaluate them emotionally with stakeholders first to get buy-in.

I produced a first crop of default view explorations focused on pushing the definition of what Enterprise software might look like in an effort to make space for everyone’s ultimate design preferences. We would later cull these options to a handful of approaches that were consistent with Coupa’s internal visual systems in other iterative phases.

Step 4 - Test It (Again and Again)

Design is an iterative process. You work, you test, you work, you test again. After culling our wider design array down to three approaches to present to stakeholders, we iterated on those three approaches and eventually landed at our best options. Ultimately broad usability & likeability testing led to choosing our final candidate.

Work, test, work, test, work, test, and… when in doubt, work again until that deadline.

These designs incorporate several ways to modify the default view to represent any brand identity along with several different collections of starter UX packs for client platform administrators to kick off their implementations. I provided a mix and match system with multiple systemic design languages.

We’re Done, Right? Wrong.

While we had decided on a new approach to default view, there were so many child products that needed updates like Travel, Spend Guard, Risk Assessment and the like that our next challenge was unifying Coupa’s many-headed product under one creative vision.