Responsibilities

User research
Implementation + iterations
Ensure cross-platform compatibility

Project context

Role: UX Project Lead, Designer
Team: Alexander Pan, Monica Kawade
This project took 2 weeks to complete the first version.

project Background

Who is Kibo?

Kibo is a global e-commerce SaaS company. It needed to reposition its e-commerce offering to a headless strategy to provide a path to differentiated positioning and to make it easier to attract and enable SIs (System integrators).

What is a Buyer Quote Experience?

A Buy Quote Experience is an experience for the buyer’s B2B account to create/request quotes and negotiate on it.

Who is the Target Audience?

Buyers: Purchasers or buyers who make business purchases for the buying organization.
Sellers: Sales representatives in an organization who are selling B2B.

the why

Kibo made a strategic decision to shift its B2B e-commerce from traditional e-commerce to a headless structure

E-commerce platforms were designed with the modern desktop shopper in mind however over the past several years we’ve seen the modern shopper start to use new devices. Today’s modern consumer has dramatically changed shopping behavior meanwhile retailers are faced with the challenge of adapting their business in order to keep up. Accordingly to McKinsey’s COVID-19 US Consumer Pulse Survey 23% of consumers started using buy online pickup in-store (BOPIS) and 21% of consumers started using buy online pickup at curbside (BOPAC). Additionally, with devices like Amazon Alexa, Google Home, and smart watches buyers can shop online through many channels. Behind the scenes, headless commerce platforms make this all possible.

In a headless architecture, the front-end and back-end layers are decoupled which allows for more flexibility and customization. At the center of headless commerce is the collection of services that power experiences such as Carts, Orders, Fulfillment, Inventory, Products, Catalog, and Promotions. Headless commerce enables businesses to take the simple storefront, cart, and checkout and iterative that towards omni-channeled enabled experiences, delivery and pickup options, integrated micro-services, and more.

3 Key Benefits of Headless Commerce

Headless Commerce Allows for Highly Customized Experiences
Headless Commerce Improves your time to value
Headless Commerce Makes Integrations Faster

Objectives & limitations

Main objectives

Interview and research the current headless B2C system.
Design and ensure consistency with current B2C platform for the new B2B headless platform.

Limitations

Have to be as not disruptive as possible (not affecting current clients).
Don’t introduce new tools.
1 month timeframe.

research

User Interviews

Our main research was conducted through user interviews with existing users - B2B Buyers and Sellers. We hoped to find out more about where the pain points and frustration of the current version lie.

General Insight

UI differences between B2C and B2B storefronts threw them off.
Weird UI behaviors.
Switching between admin UI and storefront UI feels cumbersome.

design

Proposed Solution

From the user interviews, it was obvious that the problem was mostly around UIs.

More aligned with the modern B2C Headless UIs.
More intuitive navigation, UIs, and status components.

Feedback

“This is going to make our clients exciting.”

— Director of Product

“The UI and workflow tweaks are very straightforward for me at least.”

— Buyer Client A

Review

Review & Follow Up

Reviewing work is an important part of any design process to ensure we arrive at decisions collectively and align on details such as component design, documentation, and tools. For this project, we set out to finish in a month and ended up getting it done in two weeks. We took the time to keep testing with users and iterating based on the result and also the technical feasibility feedback from the devs.

Thank you for reading! 🧠

Scroll To Top

B2B