Imagine that you start designing your B2B eCommerce with a comprehensive template instead of with a blank sheet of virtual paper. The template is filled with full-page designs and components based on over 15 in-depth interviews with B2B clients and experts. It’s also thoroughly user-tested.
The above scenario is actually a reality now and not just a dream. It’s called CommerceBooster, and it will save months of work when starting your next project. Let’s dive into the first open-source, user interface (UI) template for B2B eCommerce. It gives you an instant understanding on how your product might look and work.
The idea behind CommerceBooster
There are many UI projects and templates for eCommerce, but most of them are created for B2C customers. B2C and B2B buyers are totally different groups in terms of needs and the whole customer journey. For sure you can adapt a “regular” design for a B2B platform, but we believe that you get much better results by using a dedicated one.
Features of CommerceBooster
Quick order form
Most B2B buyers know exactly what they want. For example, they have a list of items to order for engineering. They often know the SKU number or the exact name of the product. With this solution, the user can quickly add an entire order by entering the SKU and quantity. They can also upload an order file and buy everything with a few clicks.
Technical details and attachments visible directly from the listing page
Engineers and buyers can check certain product details or whether a product includes certificates, brochures, or blueprints directly from the listing page. This way of displaying details helps the user to skip one page and make the necessary purchases quicker.
Adding products to different carts from the home page or listing page
Thanks to this feature, users can speed up the purchasing process and create a list to order even from the first page they see.
Possibility to arrange the meeting with Sales Manager by Meetsales
Users can make an appointment with an expert to find out more about a product or offer using Meetsales, a special tool for setting up business meetings. If they want information about a product while they are shopping or researching, they can also call or use live chat to contact a person representing the company.
Multiple carts
Users can easily switch between carts, name specific carts, or assign delivery addresses to carts. They can also pay for all carts in a single transaction.
Credit limits
With this functionality, companies can make purchases on their account up to the credit limit that is granted to the company. When enabled, users can check the status of their company’s credit from their account dashboard.
Order approvals
Order approval allows companies to track and control spending. The workflow for a purchase order can vary in a few ways, and company administrators can set up the approval rules.
Roles, permissions, and company hierarchies
A manager or administrator can define roles for company users with different levels of permission in order to access information and sales resources. After the necessary roles are defined, the store admin can assign a role to each company user.
The process
We started with a product discovery process and customer-centric approach to be sure that we’re focusing on the real challenges and requirements for B2B platforms. This process includes:
- Checking 30+ B2B platforms.
- 15+ in-depth interviews with B2B clients.
- Testing performed by 10 users.
- Interviews with experienced leaders in tech.
- Creating a list of unnecessary functionalities.
- Analyzing hundreds of pages with user data.
- Workshops with clients to define the main goals of B2B eCommerce platforms.
Our goal was to design a template that shows an edge case scenario with a full list of features that will help your B2B platform. Of course, it won’t fit every product on the market and segment. However, we thought of this as a kind of showreel of possibilities based on our discovery work, experience, interviews, trends, and best practices. It took more than four months for our product design team to build it.
Personas
We built personas based on conversations with specific types of users that use B2B platforms. Defining personas helped us find the different pain points that customers of B2B platforms face on a daily basis. This allowed us to plan functionalities that would help us mitigate the day-to-day problems of our users.
Low-fidelity wireframes
The next step was to prepare low-fidelity wireframes. In the wireframes, we included the most basic content and visualizations for ideas gathered during research and when creating personas. These helped us to map the initial assumptions and basic information for the architecture. The low-fidelity mockups helped us visualize early concepts, incorporate suggestions from business stakeholders and analysts, and check design assumptions.
High-fidelity designs
Our next step was to prepare high quality designs. They contain all branding elements, texts, colors, logotypes, fonts, and graphics that will be part of the final product. Below, you’ll find screenshots showing the most important B2B eCommerce functionalities.
Style guide
To help save development time and reduce time to market, we created a collection of components and rules for the implementation. This style guide allows users to swap out basic parameters, such as colors, fonts, graphics, or element styles, making it easy to customize the CommerceBooster template to suit any brand.
How to get started
As we mentioned before, it’s an open-source project that can be downloaded from the Figma Community. We would just like to know what your industry or company is and why you want to download it. Both fields are optional, so you can just skip the fields and simply download it.
You can find it here.
Published January 17, 2022
