Breadstack
CRM
01. Project brief
#UX/UI design
#SaaS Product Design
#Customer Relations Management
#Responsive Web Design
Timeline:
Since Dec 2018 (ongoing)
My Role:
UX/UI Designer
Team:
Project Manager x1; Onshore Devs x3;
Offshore Devs x10; QA Tester x1
02. What is Breadstack?
Breadstack is an all-in-one CRM platform for WooCommerce stores. With Breadstack, business owners can manage products, orders, customers and inventory of multiple stores within clicks. It is also the data center of the Advesa e-commerce ecosystem and can be used on top of other Advesa e-commerce software.
03. Challenges
How to create a SaaS
service from scratch?
01
Who is it for?
02
What does it do?
03
How does it look?
Tech-savvy
WooCommerce users
Our main target audience is people who have substantial knowledge of the WooCommerce platform. They know how to deal with the entire flow to create complicated products, all the functions related to orders, and how to set up customer profiles, etc.
Is it enough?
How about beginners?
Since COVID, we have onboarded quite a number of customers who are new to WooCommerce. They found it hard to follow the steps and wish to have a more straightforward user flow to create products and orders.
This has led to a big discussion within the team. In the end, we have decided to add another target audience - WooCommerce beginners. We will have a separate view with easier but less customizable functions for key modules.
03. Challenges
How to create a SaaS
service from scratch?
01
Who is it for?
02
What does it do?
03
How does it look?
Research
My experience told me that, to design for an existing product, we should target user’s pain points. However, to design a product from scratch, we must learn from the competitors to find what are the industry standards and to come up with our USP (Unique Selling Point). I looked into all of the CRM products in the market, from big industry leaders like Salesforce, SAP, Oracle and Microsoft to small startups like Zoho and Keela.
Base on my research, I made a conclusion that to make a successful CRM product, it has to be a cloud-based SaaS product, with either small to medium business or large enterprise as the target audience, and focuses on one or multiple aspects of marketing, sales, business intelligence (BI) and customer service.
For our product, we decided to go with a B2B model focused on improving sales for small to medium-sized online business owners. Our USP is that we are the first CRM product that supports multiple WooCommerce stores syncing.
Function design and MVP prioritization
The project manager, stakeholder and I had several intense discussions based on user survey results and then came up with a list of 18 features. We narrowed them down to these 4 core features for MVP release because, with these 4 features, we can already fulfill potential customers' basic needs.
Customers
Inventory
Products
Orders
Product
The core of the entire platform.
Users can create new products or edit existing products. Also, they can create and edit coupons to be applied to orders. To differentiate between each product, users can add categories, tags and attributes.
Orders - Fulfilment
Orders bring cashflows into the business, thus it is vitally important to our users. With Breadstack, not only all orders will be automatically synced. We also came up with a more streamlined order management interface so our users can manage at ease.
Moreover, we aim to provide all resources needed to fulfill every order, from generating shipment waybills to printing order packing lists. For users in Greater Vancouver, we also provide same-day delivery services with the integration of Cantec Couriers - our proprietary logistics network.
Customer
Breadstack has a module dedicated to customer management. Here our users can view purchase records, reward points logs, rich statistics of customers’ purchasing behaviours and preferences. If combined with Chatso - our proprietary live chat client service platform, we can also send personalized product recommendations to store registered customers.
Inventory
We also provide advanced inventory management features. Each store product is tied to an inventory product via a SKU, and all product quantities are synced in real-time across multiple stores.
On top of that, we provide sales statistics for each product and keep logs of every change in product quantity.
Journey of an order
Here is a video demo showcasing how our e-commerce ecosystem works seamlessly together featuring WooCommerce store front, Breadstack CRM and Cantec Driver App.
01
Who is it for?
02
What does it do?
03
How does it look?
03. Challenges
How to create a SaaS
service from scratch?
Custom Ver 0.5
At the very beginning, I came up with a 100% custom UI to cover all fundamental functions of the platform. This version is Illustrative and fun. However, our devs underestimated the time it would need to develop this version. Thus we have decided to switch to a customized interface based on Material UI for faster development.
Material UI V1.0
This is the current UI of our CRM. I came up with a lightweight and analytics-rich interface in order to benefit small-medium online business owners and boost development speed.
Custom V2.0
Since we have more functions planned out for the future, the team has decided to upgrade our current UI gradually to create a brand new look.
Here is my concept featuring clean aesthetics, flexible customization, and more fun for users.
04. Latest update
Breadstack CRM is now already live. You can visit breadstack.io to learn more details. V2 version also coming soon, stay tuned!
