Developing an Automative and Customizable B2B eCommerce Experience

Product Design • Prototyping • Research • Workflow Optimization

Project:

Responsive Web App

Timeline:

6 Months

My Role:

Lead UX/UI Designer

Tasks:

1.  Discovery sessions with solution consultants

2.  Planning and developing MVP’s

3.  Market research of current offerings

4.  Research current user pain points

5.  Wireframe user journey’s

6.  Prototype micro-interactions

7.  Facilitating an atomic design process

8.  Leading an offshore production team

Overview and Project Goals

Skava, a leader in providing Omni-Commerce solutions for brands and retailers, wanted to leverage the success of its new B2C platform and apply it to B2B. This new offering would need to be executed as a minimum viable product and done quickly to ensure continued success in what was already a very competitive market.

What Users Expect in an eCommerce Experience

Although B2C and B2B work in contrast to each other, there’re some commonalities with what users expect to see. All of the B2C features listed (above) and quite a few more were leveraged when considering what will go in the B2B product. One of the key differentiators for B2B is its emphasis on building and retaining partnerships. It was important to compare and contrast the two to better reframe the problem being addressed, which was as important solving for our client's needs as it was for their end-user needs. 

Reframing the Problem

How might we build a flexible eCommerce experience for our business customers so that they can continue to foster a long-term partnership with their customers?  

User Types

Identifying the Users and Their Role Within the System

The role types are ultimately defined by the Business Owner [BO] but by default (and what we found to be most common) was organizing the roles by Admin (BO), Manager (approver), and the Employees (end-user).

In a way to minimize purchasing friction, a lot of consideration went into alerting the End-User when an approval was needed. Taking this one step further, the system was designed to have alternative product suggestions so as not to trigger an approval event. Finally, whenever an approval was triggered, the system would give the approver the ability to automate their response with machine-learning rules.

The Buyer’s Journey

Building in the Approval Workflow

The Approver’s Journey

Request for Quote Journey

Integrating Wholesale Negotiating Tools

RFQ Response Flow

Prototyping Microinteractions

Testing Ways to Simplify the Ordering Process

One of the fun parts of product design is being able to quickly prototype and test whether an idea is working or worth pursuing.

 

As a proponent for personalized feedback when interacting with a product, I wanted to see how far I could push this with reorders and search.

Atomic Design Process Integration

Onboarding the Offshore Team for Design Production

When it came to production time I knew onboarding our offshore team would require a lot of time that the project was not afforded. To help minimize this, I took the wireframes to high fidelity, focusing solely on the three basic building block for components (Atoms, Molecules, and Organisms) and having the team build out the templates and pages. 

Key Takeaways

Developing from a minimum viable product (MVP) perspective helped me stay focused on what really mattered.

 

It’s common to want to try out new future-thinking ideas that will benefit the user even further but reality crept in when deadlines were looming and the level of effort involved determined them to be out of the MVP scope.

 

Business and enterprise users avoid integrating new products into their workflow. 

 

In the beginning, we thought we were building a product that users would want to use throughout their workday. We quickly learned that the opposite was usually true. To address this we started adding functionality outside of the app via emails and push notifications. Users could now approve orders via a one-click email button. 

© 2019 Richie Brumfield, R2works. All rights reserved.