OrderCast – Merchant

Overview

OrderCast is a B2B ordering solution for wholesalers, suppliers, distributors, and manufacturers. It transforms the excel sheet filled by wholesalers, with their product listings, into a private sale site. This innovative platform allows professional customers to place orders with personalised pricing, eliminating the manual re-entry of orders. OrderCast is the go-to solution for wholesalers seeking to digitise their B2B operations, making it easier than ever for their clients to place online orders efficiently.

Website:

ordercast.io

My Role:

Product Designer
UX Reseacher

Duration:

Sept, 2022 - Sept, 2023

Challenge:

I was the solo designer working on a redesign of a merchant application, moving from an outdated Django framework to a new build. My challenge was to create a solution that was modular, scalable, user-friendly, and enriched with new features. On of the key feature was Quick search mode.

I partnered closely with the Product Manager with an extensive UX/UI design background.
‍
Additionally, I collaborated with the engineering team, creating prototypes to test our proof of concept and ensure the application was adaptive across various devices.

Ideal Design Process

Design is never a linear process, and it's rarely ideal. There were moments when I had to skip the research phase or didn't have time for wireframes. Sometimes, I explored multiple solutions to please everyone but ended up returning to my initial one after implementation. That's how it looked in the harsh reality of a startup 😅

Real design process in start-up reality.

01

❊

Discover

OrderCast's journey began with its predecessor: a functional yet basic Django application. Our ambition was clear – to evolve this foundation, enhancing scalability and user-friendliness, to better meet our clients' needs and expand our market reach.

Do people need this product?

My first step was a deep dive into market trends and user expectations. This was about ensuring our product not only meets current needs but also has the potential to be a market game-changer.
‍
Research revealed a compelling trend: a whopping 90% of B2B companies are embracing digital solutions, while only a slim 10% haven't yet considered e-commerce, highlighting a significant shift in the market.
Moreover, B2B decision-makers still engage in in-person interactions with suppliers 20-30% of the time, presenting a ripe opportunity for impactful digitalisation solutions.
‍
Let's seize this opportunity!👊

The digitalization of the industry, b2b customer survey.

––––––––––––––– /// –––––––––––––––

More industry specific features and intuitive interface...

Next, I focused on understanding our competitors, and closely examining their strengths and weaknesses. Below, I've included a general overview of both our direct and indirect competitors. I've also gone into detail on crucial aspects like search functionality, catalog management, and product cards, among others, to really get a grip on where we stand.

––––––––––––––– /// –––––––––––––––

Interview highlights

In a series of insightful interviews with five key users, I delved into their real-world challenges and expectations from a digital B2B ordering solution, ensuring our development is driven by genuine user needs.

––––––––––––––– /// –––––––––––––––

Field study or users in their natural environment

For the field studies, though I couldn’t be there in person, it was as if I was right in the thick of it at our client's warehouse in Brussels. Thanks to video recordings, detailed notes, and interactive Zoom calls from my colleagues, I gained an immersive understanding of our users' interactions with features like barcode scanning and in-house ordering. It was a unique blend of remote observation and direct feedback, offering invaluable insights from the field right to my desk.

02

❊

Define

I establish the essential design goals & key features based on the research data gathered from my interviews & competitor analyses. These will become my focus points when planning the designs for this project.

Key features

✷ Needs

Discovery mode
Quick search
Adding variants in bulk
Barcode search mode
Editable orders
Recurring purchases
Customizable products
Product sets and bundles
Price rates
Conditional pricing

❉ Motivation

Explore new products
Save users' time and effort
Simplify the process of ordering
Streamline repetitive ordering tasks

✦ Pains

Too cumbersome
Unclear order completion
Limited feature visibility
Restricted search options

03

❊

Ideate

I gathered and structured key data, which helped me craft a clear site map and user flow diagrams. This step was all about transforming raw insights into a cohesive, practical design plan.

Let's make it structured

I outlined the primary categories and their subcategories within the application, detailing how they should be interconnected.

“Most users using the Merchant app know exactly what they want. So, why not figure out a way to speed up the ordering process? Quick search feature could be a game changer here, saving them loads of time.”

Quick search workflow & User testing

It was one of the most challenging parts of my work: making a user-friendly interface that works great for both experienced and less tech-savvy users, especially when adding loads of product variants in different amounts to the cart. This involved creating over 20 prototypes, considering various factors such as the number of product variants, the number of attributes, and their values, whether represented by text, images, or hex codes.
‍
To bring these ideas to life, I wrote a detailed script for user testing. Watching users interact with my prototypes in real-time over Zoom was an eye-opener; their reactions – from moments of frustration to those of seamless navigation – were invaluable. It wasn't just about observing; it was about understanding the user experience at a deeper level, adjusting and iterating based on real human interactions.

04

❊

Design

To speed up our design process, we decided to purchase the ready-to-use Mantis design template, built with the MUI React library. Was this a wise choice? While it provided a solid starting point, many of the components required customisation to fit our specific needs, and we encountered some minor accessibility issues with the template. The real win was the template’s adaptability, especially with colour themes. For instance, with Assabban, our main client, we seamlessly integrated their signature orange – a nod to their brand identity – into the design.

Ready for the final result? 👇

––––––––––––––– /// –––––––––––––––

Discovery mode

Discovery mode (or Order via catalogue) melds familiar B2C interface and essential B2B features, serving new and loyal users who want to explore our client's diverse assortment. With structured search results organised by product family, category, and product variants, plus user-friendly filters, sorting options, grid & list views, clear product descriptions, real-time availability, per-unit pricing, and conditional pricing simplify the exploration process, making it easy to find what users are looking for. After implementation, we observed a 40% increase in customer satisfaction score (CSAT).

––––––––––––––– /// –––––––––––––––

Quick search

In contrast, the Quick search mode is critical for experienced buyers and sales representatives who know the assortment. Users can search for products by typing reference, product name, or using a barcode. The product family is highlighted in bold; a simple click opens the range of all variants within a family. This functionality is designed for efficiency, allowing the addition of multiple product variants with 2 + attributes and different quantities in just a few clicks. The redesign led to a 50% decrease in Time on task.

––––––––––––––– /// –––––––––––––––

Orders

Tables can be difficult to read and navigate, especially in the B2B industry. Keeping that in mind, we designed an Order table that allows users to effortlessly scan crucial information, including order status, payment status, and tracking numbers, at a glance. On the order page, we use tabs to organise details logically, which leads to minimising clutter and preventing overwhelm for B2B customers. Furthermore, the design is flexible, allowing changes such as adding or deleting items and editing billing or shipping information based on the order's status.

Reflection

My experience at OrderCast not only honed my design skills but also taught me to articulate and defend my design decisions effectively and collaborate with a team. Insights into B2B user behaviour came directly from the co-founder, a crucial link between end-users and our product team. Understanding the application from the developers' perspective was enlightening; I learned about the factors influencing its performance and how UI choices impact costs. Conversations with the marketing team deepened my understanding of our customers' needs and desires. Product managers highlighted the importance of strategic flexibility, teaching me to adapt when outcomes don't meet expectations. The brand manager showed me how to make our product stand out to customers and demonstrate its value. I am particularly grateful to my design mentor at OrderCast, who guided me to see my design flaws subtly and taught me to take responsibility for my design decisions. Could we have improved the product further? Possibly, as there are always opportunities for enhancement. However, one thing is clear: we were fully committed, giving 600% to our efforts.