About Breadstack
Breadstack is an eCommerce Saas platform that seamlessly integrates sales, operations, marketing, and customer service to streamline functions and boost revenue. As a CXM for eCommerce, it provides essential features such as Product Information Management, Inventory Management, and Order Management, ensuring seamless operations and sustained success for users.
Discovery
As a CXM specialized in eCommerce retail management, Breadstack primarily centered its features around product, order, and customer management functionalities. However, recognizing the evolving needs of our users, we embarked on a journey to introduce enhancements aimed at boosting sales performance and facilitating seamless business management within a single platform.
Noticing problem area
Our initiative stemmed from a realization that many businesses faced challenges in optimizing their sales strategies and managing their operations efficiently. This awareness was further fueled by the feedback of stakeholders who recognized the importance of addressing these challenges. We hypothesized that by incorporating features tailored to these needs, we could provide significant value and differentiation in the market. To validate this assumption and ensure our efforts aligned with the actual pain points of our users, we undertook thorough research and analysis.
Competitor research and user interviews
We initiated the project with a comprehensive exploration of the eCommerce industry landscape, studying market trends, competitor offerings, and user feedback. By conducting a series of interviews with users who are working on promotion planning we tried to understand their current work flow and paint points.
Build mental model and user journey
Based on interview findings, we built user mental model and user journey map related to promotion management flow.
Design Strategy
Understanding user needs
Through our user research, we gained valuable insights into the pain points and aspirations. One recurring theme that emerged was the desire for a unified interface that seamlessly integrates product management, promotion planning, and storefront management functionalities. Users expressed frustration with the need to navigate between multiple platforms such as WooCommerce, Breadstack, and Asana, as well as the manual effort required to coordinate tasks and take notes across disparate systems.
Goal
Create a user-friendly promotion management module for eCommerce owners to streamline their operations by unifying product, promotion planner, and storefront management, reducing manual work and enhancing efficiency.
Ideating potential features
Based on users' pain points, we could define potential features that would enhance their activities and streamline workflow:
Calendar view to easily notice the amount of promotions for each day and their status
Promotion performance for ongoing and previous promotions to refer when creating or adjusting promotions
Data-driven promotion suggestions
Ability to forecast result
Easier way to put up and take down promotion as scheduled
Alert when promoting product is low in stock
Lightweight cross-functional communication method
Ability to easily link products to promotions
Ability to select promotion banner format and position on storefront
Individual product data such as stock and revenue
Promotion report data
Scope: Minimum Viable Product (MVP)
For our Minimum Viable Product (MVP), we will prioritize the following key components:
Promotion Planner:
Users will have access to a promotion planner where they can schedule, create, and manage promotions seamlessly. The planner will provide a calendar view for users to visualize upcoming promotions, ensuring effective planning and scheduling.Promotion Details:
The MVP will include the capability for users to input and manage essential details of each promotion, such as promotion title, description, start and end dates, and applicable products. This feature will empower users to customize and tailor promotions to their specific business needs.Promotion Performance Data:
Users will have access to basic performance data for each promotion, including metrics such as conversion rates, and revenue generated. This data will enable users to evaluate the effectiveness of their promotions and make informed decisions for future campaigns.
Constraints
Existing Design System:
Our design process must align with Breadstack's existing design system, ensuring consistency in visual elements and interaction patterns.Data Utilization:
We'll utilize available data within Breadstack, including product and sales data, for features like promotion performance tracking.WooCommerce Integration:
Seamless integration with WooCommerce's API and data structures is essential, despite inherent constraints.Limited Storefront Control:
Recognizing our lack of full control over users' storefront websites, we'll design the module with flexibility to adapt to varying platform configurations.
Solution
Be creative! Let’s brainstorm!
While considering scope and constraints, we had brainstorming sketch session to share most possible creative solutions.
During our brainstorming sessions, we discovered overlapping ideas among team members, many of which were innovative and held significant potential to benefit our users. To further explore these promising concepts, we visualized them as high-fidelity concept mockups. These mockups served as a tangible representation of our ideas, which we then presented to stakeholders and the product manager for feedback and validation.
Down-to-earth solutions
Taking into account the resources, time, and effort required, we opted to set aside some of the more ambitious features and instead decided to prioritize the following functionalities:
Calendar view
With quick view of promotion performance
Interaction: easy drag & drop, click to add, quickly change promotion status, duplicate promotion
List view
List view of all the promotions on calendar
Promotion creation form
Graph of past product performance data
Forecast promotion performance: revenue, profit, and units sold
Diverse promotion types
Possible format: Popup, stand-alone page, or right panel
Promotion details
Information from the creation form in a more static format
Include statistics and analytics of promotion performance
Different contents for Previous, Ongoing, and Future promotions
Possible format: Popup, stand-alone page, or right panel
Delivery
Introducing Promotion module
Going through lots of team feedback sessions and iterations, we landed on the final high-fidelity designs with detailed flows.
Let’s take a step forward
During our design review sessions with stakeholders, we identified an opportunity to enhance the promotion management capabilities. We propose the addition of an 'Advanced Promotion' feature, allowing users to create promotions with more sophisticated formats beyond simple discounts. Examples include Buy One Get One X% off and Cart value more than $X Get $X off. Integrating this feature required adjustments to the promotion creation form design, yet we still wanted to explore further.
New challenge appeared
Around the same time as this project, we were concurrently engaged in a new integration project, which introduced additional constraints to the overall platform. As a result, new elements needed to be incorporated into the promotion module:
Take a step back and iterate
We evaluated both the advanced and simple promotion flows and eventually chose not to include advanced promotions in this phase.
However, we updated the design for simple promotions by reducing steps to set sale prices for promotional products, making it clear which products are included in the promotion, and simplifying the process of adding more promotional items while creating new promotions. This update received positive feedback, greatly improving the intuitiveness and simplicity of the promotion creation flow.
Project outcome
Following the release of new promotion module, we received positive feedback from stakeholders and users. They praised its user-friendly interface, noting its efficacy in daily operations for planning and setting promotions. Leveraging the module's capabilities, users have already initiated hundreds of promotions and continue to do so daily, effectively driving business growth.
100% adoption rate
100+ promotions created by users
What happened next?
Extending to another platform
Our team redirected focus towards redefining the role and functionality of promotions within our live chat support platform. This involved exploring avenues to integrate and enhance the promotional experience for clients utilizing both products.
Takeaways
Importance of understanding user journey and mental model
By deeply understanding user needs and behaviors, we crafted intuitive interfaces that aligned seamlessly with user workflows and mental models. This user-centric approach enhanced usability, driving stronger user engagement and satisfaction, emphasizing the critical role of empathy and user-centered design in creating impactful solutions.
Focus on building an MVP
Throughout the design process, we encountered the temptation to incorporate advanced features prematurely, even before completing the first phase. However, given the constraints of time and resources, we quickly recognized the necessity of prioritizing the Minimum Viable Product (MVP). This experience underscored the importance of strategic decision-making and discipline in focusing on essential functionalities to deliver value to users efficiently.
Power of collaboration
Collaboration proved to be an indispensable asset at every stage of the project. From ideation to implementation, every step involved collective efforts and continuous feedback from team members. This collaborative approach fostered creativity, innovation, and a shared understanding of project goals. Leveraging diverse perspectives and expertise within the team enabled us to address challenges effectively, uncover insights, and deliver a cohesive, user-centric solution.