Breadstack
CRM
#UX/UI design
#SaaS Product
#Customer Relations Management
#Responsive Web Design
OVERVIEW
This is the first and still ongoing project I undertook after joining Advesa Digital Solutions.
My team and I are aiming to create a SaaS platform that helps E-commerce business owners to manage a full spectrum of aspects including products, orders, customers and inventory, as well as providing rich analytics features for business insights.
FACT SHEET
Timeline: 27 months (ongoing)
My Role: UX/UI Designer, Product Designer
Team: Project Manager x1; UX/UI Designer x1; Onshore Devs x6; Offshore Devs x10; QA Tester x1
PROJECT ATTRIBUTES
– SaaS Product Design
– MVP Function Prioritization
– Logo Design
– Responsive UI Design
THE IDEA OF AN E-COMMERCE SUITE
The stakeholder - CEO of Advesa Digital solution has a grand vision of creating an E-Commerce Suite that provides all-in-one solutions to online store owners.
CRM (Customer Relations Management) platform is the centre of this E-commerce Suite. It is actually a CRM-ERP-SCM hybrid platform that covers every aspect of online business. It is also the data and analytics centre for the entire suite.
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 competitors and find 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 on a B2B model focused on improving sales for small to medium-sized online business owners. Our USP is that we are the first CRM service for the WooCommerce platform that has multiple store support.
FUNCTION DESIGN AND MVP PRIORITIZATION
Project Manager, Stakeholder and I had several intense discussions and then came up with a list of 18 features. We narrowed down to these 8 core features for MVP release. Because with these 8 features, we can already market it to potential customers.
DESIGN ITERATIONS
The wireframing and prototyping stage came after all user flows and information architecture were confirmed. From black and white mid-fidelity prototypes to high fidelity mock-ups, I accumulated 1000+ screens under management over time. I used blue and white as the theme colour and did a lot of illustrations, which conveyed a sense of business but at the same time keeping it chill. This style appealed to small and medium business owners a lot.
Black and white mid-fidelity prototypes
High-fidelity prototypes
I managed all of the screens by creating a design system. I set clear standards down to every single element so that it not only helps me with my efficiency but also makes it more clear for developers to implement my design.
However, it was not always rainbows and butterflies. Recently I came across a very big design iteration – adapting to Material UI.
In the beginning, my developers wanted to challenge themselves by building a custom UI system. But later they found out it was too time-consuming to do HTML and CSS from scratch, hence they would like to adapt to Material UI instead.
This meant that I had to redo all of my 1000+ screens.
In this case, I had to find a very efficient way to reproduce all of the screens. I figured out that, since I have a design system already, I only need to translate every element into material UI language by redefining typography and colour palette, and then reassemble all elements together.
During the same time, my CEO came up with the name for our platform - Breadstack. I volunteered to design a logo that fits the Material UI theme. Now, our CRM platform has a cleaner and modern look.
Customized Material UI Design
LATEST UPDATE
Breadstack CRM beta version is already released for internal testing. You can visit www.breadstack.io to have a sneak peek.
