Summary
Key Problems Identified
Users are relying on memory to find and recommend products
Higher ticket size would mean users would meet their sales target sooner, which is their primary goal.
Upsell & cross sell opportunities are often not discovered at the right time, during client meetings.
Handling multiple buyers, some of those can have designs that are exclusive
A lot of prep-work was needed to be done by the sales rep, before the client meeting.
This involved in manually creating custom collections, specifically curated for their buyers.
Users are on field most of the time
Handy devices like tablets and mobiles were suitable to use.
They needed real-time data on inventory, on individual products and their variants, for which they need to consult the office, leading to delays in order confirmation.
Objective
Key features include :
Similar products - Enabling users to show products that are of similar design, enhancing product discovery
AI-Powered Recommendations - Provide sales analytics dashboard and real-time product & buyer recommendations, for identifying right opportunities at the right time
Real-Time Inventory Insights - for users to confidently take orders, with the right stock values.
My Role
The sprint was conducted for a period of 4 months, and during this time, I also collaborated with the frontend engineering team to establish our design system - "The Source"
Following agile development framework, we shipped this complex software with robust features in six months.
I implemented a parallel design framework for myself and my team, ensuring efficiency and consistency throughout the process. While I have showcased the solutions and designs for the modules I contributed to end-to-end, the framework played a pivotal role in maintaining platform uniformity and establishing clear guidelines for the team. This approach enabled my team to work simultaneously on other modules without discrepancies in design patterns, layouts, or UI components. By aligning on a shared system, we minimized rework, streamlined collaboration, and upheld a cohesive user experience across the platform.
Building components
Its a primary component that is reused on majority of screens in the app, as well as the most interacted one. Apart from showcasing the details of a product, it also enables users to explore variants, and also 'view similar' products. Note that the product card is configurable by the user, to showcase whatever details are deemed necessary.
Product Card
What makes product card more complex compared to B2C E-commerce website, is the dynamic volume pricing, availability of many product variants, and rule sets that are applied on quantities. Therefore creating reusable component for the product card with variant & state management, was crucial.
Key Design Decisions
Add to cart button was added right on the product card, rather than product detail page, including cases where variants are present, is that users have clients with repeat orders along side exploring new products. This is the use case for majority of the bulk orders users get. In some situations, where users want to quickly add products on client's behalf, in rush situations like trade fairs, and showrooms, it reduces the overall clicks, and increasing efficiency of the user.
Layouts
Defining the grid system, and the placement of elements like headers, sidebars, interaction of the nested screens, search & filters, data tables, side / bottom drawers & pop-ups, that made up the base for the entire platform for both web & tablet.
Created reusable components, for screens, that made the designing high fidelity screens much faster, while also ensuring design consistency, among the team.
View Similar Suggestions - Product Card
Its a primary component that is reused on majority of screens in the app, as well as the most interacted one. Apart from showcasing the details of a product, it also enables the user to explore the variants, and also 'view similar' products. 'View Similar' feature is identified as one of the most important and necessary interaction by the users, helping them suggest the right kind of products to their clients, without any delay.
Buyer specific listing page
Sales reps no longer required to do prep work, or worry about showing exclusive designs of other buyers. They can simply switch the buyer name on top right of the header.
Products are suggested based on their purchase history and trends, which reduced the time to discover the right products. They can horizontally scroll for more products to show their buyer.
Frequently bought together
On the product detail page, recommended products are shown, as a horizontal rail, after the product details. This placement is ideal for cross selling products across categories.
In the cart page, more products are shown for sales rep, to help them increase the revenue of the order.
When the cart has multiple products, occupying the entire first fold, the "Add More" button on top helps the user to scroll to that section.
Dashboard
If showing the right products to the buyers is one part, reaching out to them at the right time is another aspect of getting a successful deal. The dashboard is designed, to keep the user informed of their ongoing deals, recent activities and potential opportunities.
For admin users, the dashboard also provides the overview of the entire sales team, which they can systematically filter to drill down on specific details.
Results & Impact
~20% Growth in Sales Revenue
Measured the increase in sales revenue, which was achieved within the first 4 months of implementation
Marvelous Ms Designer