01 / Overview
Connecting the buying journey with the system behind it.
myB2Bcloud is a responsive B2B commerce platform for an electrical wholesaler. It supports trade customers buying products as well as internal teams managing the commerce operation.
The experience brings product discovery, technical information, stock, purchasing, quoting, checkout, orders, accounts, and operational management into one connected system.
How can a B2B commerce platform make complex purchasing flexible for trade customers while giving internal teams the tools they need to manage products, stock, pricing, and sales?
02 / My role
Designing across customer and operational workflows.
Product Designer / UX/UI Designer.
I worked across information architecture, end-to-end customer journeys, responsive design, back-office workflows, data-heavy screens, forms, filters, operational states, quoting, product management, and trade-account requirements.
- Information architecture and navigation
- Desktop and mobile purchasing journeys
- B2B quoting and trade-account workflows
- Product, stock, customer, and pricing management
- Complex tables, forms, filters, and states
- Customer-facing and administrative experiences
03 / Customer experience
Giving trade customers more than one way to buy.
The customer experience covers the journey from discovering a product to purchasing, requesting a quote, managing an order, and returning to buy again.
Find the right product
Homepage campaigns, categories, search, recommendations, favourites, and technical product information help customers navigate a large electrical catalogue.
Buy directly or request a quote
Customers can add products to the basket for direct purchasing or add products to an existing quote or create a new one.
Keep the ongoing relationship in one place
Orders, payments, addresses, favourites, messages, quotes, login, security, and account information are brought together inside the member area.
04 / Back office
Designing the operational layer behind the storefront.
The back office supports the teams responsible for keeping the commerce experience running.
Manage commercial and technical product data
Product management combines SKUs, technical information, images, files, tags, categories, and product states in one workflow.
Make operational information actionable
Teams can manage stock, inspect stock history, handle orders and quotes, and view sales and revenue information.
Support different B2B customer needs
Trade pricing bands, customer-specific pricing, and separate web-only, app-only, and cross-channel visibility give the business control over how products are presented and sold.
05 / Key decisions
Designing around the realities of B2B purchasing.
Quotes sit alongside direct purchasing
B2B customers do not always follow a simple add-to-cart journey. The interface supports both direct basket purchasing and quote-led ordering.
Show stock early
Availability is surfaced during the purchase journey so customers can understand whether a product can be ordered before reaching the later stages of checkout.
Design for repeat purchasing
Favourites, recommendations, and “Buy again” support customers who repeatedly purchase the same products.
Keep operational states explicit
Available, unavailable, and obsolete products require different treatments, while editing, viewing, filtering, and dropdown states keep administrative workflows predictable.
06 / Responsive design
Keeping the essential B2B journey intact across devices.
The customer experience was designed across desktop and mobile, adapting the major purchasing and account journeys rather than simply shrinking the desktop layouts.
Product discovery, product detail, quotes, basket, checkout, orders, payments, addresses, messaging, and account functionality remain part of the responsive experience.
07 / Reflection
Designing a B2B platform means designing the system around the transaction.
The main lesson from myB2Bcloud was that B2B commerce is not just an online shop. The customer journey and the operational system behind it have to work together.
The product connects purchasing with quoting, stock, pricing, customer accounts, product management, CMS controls, and internal operations. Designing these experiences together helped create consistency between what customers see and what teams manage behind the scenes.
63 unique screens across customer-facing desktop and mobile experiences and the back office, after excluding three repeated frames. The file also contains supporting branding assets, category illustrations, labels, and background elements.