Tejaswini Khedkar

Enterprise data visualization for B2B2C sales

E-commerce

Customer management

Data analytics

Shipped

Solution

Solution

We designed a highly customizable enterprise application for Sales team that integrate all essential tools to streamline their workflows.

Context

Context

The sales team faced challenges to achieve their sales target as they relied on multiple tools for different tasks, causing delayed operations.

how might we

how might we

Streamline the sales team's workflow by consolidating essential tools to eliminate unnecessary steps to fulfill their tasks?

My role

My role

  • Contributed to design an enterprise dashboard for sales team

  • Rapid prototyping

  • A/B testing

Team

Team

  • Product Design Lead (me)

  • Product Manager

  • Front-end and back-end Engineers

  • Sales team(users)

impact

impact

23% to 56%

Business deal conversion

30%

Faster sales cycle

34% to 56%

Post launch user engagement

340M

Revenue (increased by 20%)

The metrics was gained using Mix Panel Analytics in tenure of 6 months from our internal tool and a B2B marketplace.

highlights of my role

highlights of my role

Analyze sales data

I designed data visualization dashboard for retail sales team to create sales proposals using one application to increase efficiency in cracking sales deals.

Manage sales proposals directly with retail partners

I color coded call to action buttons to prioritize the tasks. I added KPIs on the top in each page to summarize the page information which also acts as a sorting filter.

Manage conversations using AI chat assistant

We designed an AI powered chat assistant to reply to retail customer queries. We provided bot training options to customize text without code to reduce wait times.

Customize widgets as per use case

Highly customizable options in dashboard and data tables helped user to get information as per different use cases and user roles.

Intro

Intro

FirstCry.com is an e-commerce company. It is Asia's largest online store for baby and kids products. The platform combines e-commerce with omnichannel retail.

I got the opportunity to work with the retail sales team to design an internal tool that increased their efficiency and improved client retention.

Intro

Intro

1073+

Retail stores across Asia

98%

Stores retention

25M

Global customers

Intro

Intro

the roadmap

the roadmap

User Interviews

User Flows

Design workshops

Wireframes

Usability testing

Developer Handoff

Critique sessions with product managers, sales team, and engineers was important at every stage for the seamless implementation of the product.

The Challenges faced

The Challenges faced

  1. Technical constraints

Retaining 15 years of legacy flows was critical to maintain our 98% user retention. Challenge was to Increase the task efficiency.

  • Overcoming the challenge

  • Identifying and eliminating outdated flows in the existing system

  • Conducting audits to create reusable components to avoid duplicates

  1. Navigating ambiguity

Executives decided to involve more stakeholders. The challenge was to Integrate new features with established legacy flows.
  • Overcoming the challenge

  • Inform design decisions at all stages

  • Doing possible trade-offs with cross-functional teams

  • Rapid A/B testing

user story

user story

"I as a Sales VP at Firsrtcry.com, I should be able to analyze sales data using one platform so that I can achieve sales target efficiently".

"I as a Sales VP at Firsrtcry.com, I should be able to analyze sales data using one platform so that I can achieve sales target efficiently".

Understanding the users

Understanding the users

  • Why we conducted user interviews?

  1. Identify the daily challenges the sales team faces and what slows down their workflow to achieve sales target.


  2. Connect with the sales context and design a tool that truly supports their success.

  • Learnings

  1. We identified their dependencies on other stakeholders and third-party apps.

  2. The conversion rates of sales deal are lower than the efforts put into it.

Understanding users

Understanding users

Inventory manager

Sales team

Retail partners

Customers

Understanding users

Understanding users

What are the day-to-day activities?

How sucess is measured?

What hinders the progress?

Understanding users

Understanding users

"We are making millions. Its our responsibility to keep our sales running and secure".

"We are making millions. Its our responsibility to keep our sales running and secure".

-VP of Sales team at Firstcry.com

Understanding users

Understanding users

What worked out? We conducted 20+ interviews with sales team and retail partners by collaborating with UX researchers. We gathered metrics from existing applications they use.

A day in life of a Sales team

A day in life of a Sales team

25

Hrs

~Weekly time spent

Analyzing sales data

  • Identifying potential business opportunities to pitch new products.

  • Tracking stock levels to make marketing decisions.

23%

Conversion

Customer relationship management

  • Provide personalized services to maintain over 95% retention.

  • Negotiating deals with retail partners.

A day in a life of clerks

A day in a life of clerks

Opportunity: Map out user journeys to identify root cause.

User Flows

Product Proposal

Sales VP

Create sales report

Propose quotation

Win the deal

Quotation

Get approval

Retail partner

Negotiate

New Orders

Retail partner

Inventory manager

Place order

Ask questions

Check availability

Ship

Sales VP

User flow of how sales team reached to the retail partners.

key observations

key observations

Pain points + Identifying root cause

  1. Relying on third party apps

  • Raised security concerns

  • Increased dependency on other teams

  • Limited customization to analyze the data which increased manual errors

  1. Repetitive tasks

  • Communication gaps with teams

  • Delays in maintaining relationships with retail partners

  • Increased lead time to deliver orders

How might we

How might we

Streamline the workflows for sales optimization?

Streamline the workflows for sales optimization?

workshop facilitation

workshop facilitation

Hybrid Card Sorting + Internal Reviews

  • Why card sorting workshops?

  1. Foster cross-functional collaboration between design, product, tech, and sales teams.


  2. Validate the task flows and identify gaps in the ecosystem we were about to build.

  • Learnings

  1. Defined MVP scope based on tasks for retail and sales team.

  2. Foundation of information architecture.

workshop facilitation

workshop facilitation

Presentation to discuss the results from the workshops. Data from the images is confidential

workshop facilitation

workshop facilitation

What worked out? Hybrid card sorting enabled participants to categorize cards into predefined groups while also giving them the freedom to create new categories if they felt necessary.

Information Architecture

Information Architecture

Navigation audits + Feedback loops with internal design team

  • Challenges faced in information architecture

  1. Sales proposals and order management were previously handled across disconnected tools.


  2. There were inconsistencies in navigation of order page and product page tables.

Overcoming the challenge

We validated the navigation of multiple pages with assigned designers and managed trade-offs to maintain cohesive user experience across our platform.

workshop facilitation

workshop facilitation

Screenshot of information architecture for filters used in the dashboard

workshop facilitation

workshop facilitation

What worked out? Running audits with the team helped us understand the duplicate flows to identify consistent design patterns.

Critique sessions with cross-functional teams

Critique sessions with cross-functional teams

Wireframes + Feedback loops

  • Why at this stage?

  1. Early decisions with PMs on layout structure and grouping of KPIs and order actions.


  2. To validate interaction patterns in sorting filters, edit buttons, and status updates in dashboard with engineers to understand backend constraints.

  • The results

  1. Engineers flagged edge cases early in loading states during large data pulls.


  1. The cross-functional team caught duplicate patterns in dashboards.

Low-fidelity wireframes and conflicting feedback

Wireframes + Feedback loops

What worked out? We did rapid iterations based on constructive feedback. We constantly validated our ideas with engineers to iterate based on technical constraints. We involved PMs to inform design direction.

Design systems

Design systems

Phase 1

We had our own established design system. We started with auditing our design systems to create reusable patterns.

Soon we realized that this existing design system is not compliant with our features. These were our primary blockers:

Problem in existing design system

Problem in existing design system

  1. Inherited Design System

Existing design system originally built for the marketing website and the Firstcry.com mobile application.

  1. Inconsistency

Mobile-first styles caused visual inconsistencies across desktop screens. We couldn't adapt these into our design.

Problem in existing design system

Problem in existing design system

  1. Scalability Issues

Components broke across breakpoints and weren’t optimized for scalability, They were incompatible for our user needs.

  1. Misalignment with Internal Tool Needs

Existing components didn’t support complex B2B enterprise workflows or data-heavy dashboards, bulk actions, tabular views, etc.

Problem in existing design system

Problem in existing design system

Atomic design systems

Atomic design systems

Phase 2

  • Why Atomic Design System?

  1. Designers can focus on solving user problems rather than redesigning basic UI elements.


  2. Easier to document usage, behavior, and accessibility standards of each component.


  3. To create shared design vocabulary with dev for team efficiency.


  4. Ensures design elements like buttons, inputs, cards behave and appear the same across the product.

  • The process

  1. We worked closely with engineers to define token naming, states, spacing rules, and variant behaviors to ensure consistency, scalability, and speed in development process.

  1. This time we had flexibility to create design system that is suitable for user needs.


  2. We used the existing design systems as our foundation of design guidelines.

Problem in existing design system

Problem in existing design system

Screenshot of one component; its guidelines and anatomy

Problem in existing design system

Problem in existing design system

  • New Design system is scalable

  1. Design tokens allowed us to scale quickly with minimum friction in developer handoff.


  2. New features could be designed and developed quickly using existing blocks.

  • Components are consistent

  1. The same elements appeared the same and behaved the same across the platform that improved usability.


  2. Reduced design QA loops and increased the adoption of design systems.

Personalized dashboards catering multiple user needs.

Personalized dashboards catering multiple user needs.

30%

Increase in task efficiency

User relied on multiple third party apps to visualize different types of statistics. I consolidated those statistics in one page. I provided flexibility to customize dashboard with seasonal changes.

0

Manual calculation errors

Because of limited customization in third-party apps, users had to put together sales reports manually. We automated those workflows for the users to reduce the friction and manual errors.

5

New stores opened in India and UAE within 6 months post launch

Due to faster sales cycles and automated workflows, the sales team could focus marketing decisions.

Manage quick actions for multiple orders together

Manage quick actions for multiple orders together

From this

To this

Before this application

After cracking the deal, retail partners would put order with sales team. Sales team used to pass it to the inventory managers. This increased wait times due to lot of back and forth tasks.

After introducing this internal tool

Retail partners placed order through the application. It directly went to the inventory managers. We created a shared order list so that sales team can monitor the progress.

What changed?

We reduced the steps by creating shared database. This reduced wait times in approvals and manually sharing order status as the data became accessible for sales team.

Challenges in order screen

  1. The stakeholders wanted to increase the task efficiency to manage business deals.


  1. The Product Team wanted to achieve the desired KPIs.

Unmoderated usability testing

With collective efforts from Product Managers and the design teams, we evaluated task completion time , number of clicks, and error clicks with our users to understand where we can improve our user interface.

Moderated usability testing

  1. User were using same sorting filters whenever they open this page to complete a task.


  1. We decided to replace sorting filters on the top with KPIs.

The pivot

The pivot

After validating our new enterprise tool with the stakeholders and executive leadership, a new stakeholder customer support team was added.


Goal was to improve sales team efficiency by automating responses to retail partner queries.

Stakeholder expectations-

Create an AI assistant that will generate automatic responses for retail partner queries related to order status, product quality, and product training.

Phase 2 roadmap for ai assistant

Phase 2 roadmap for ai assistant

Continuous Improvement

Iterations

Internal feedback loops

Usability testing

Metrics

User need

Design systems

AI Chat assistant to manage automatic replies

AI Chat assistant to manage automatic replies

The Challenge

The Challenge

  • Challenges faced in initial stages of pivot

  1. How might we integrate it with existing workflows without hindering the KPIs?


  1. Do we introduce new patterns in design systems?


  2. How to show multi-modal of AI assistance without user going back and forth?

  • Overcoming the challenge

  1. We focused on evaluative research with customer support to adapt quickly.


  1. We studied the competitors like existing desktop version of chatbots for feature prioritization.

The Challenge

The Challenge

  • Challenges faced in continuous improvement

  1. How might we increase user adoption of AI chat assistant?


  1. Is it possible to reduce the dependency on engineering team to personalize responses?


  1. Does the bot stops responding after a human intervention?

Overcoming the challenge

  1. We only prioritized high-volume, low-risk messages for customer support.


  1. We added a 'Bot Setting' page to automate customer support workflows for the team to edit and test the type of responses as per keywords.

Overcoming the challenge

  1. We only prioritized high-volume, low-risk messages for customer support.


  1. We added a 'Bot Setting' page to automate customer support workflows for the team to edit and test the type of responses as per keywords.

Overcoming the challenge

  1. We only prioritized high-volume, low-risk messages for customer support.


  1. We added a 'Bot Setting' page to automate customer support workflows for the team to edit and test the type of responses as per keywords.

Overcoming the challenge

  1. We only prioritized high-volume, low-risk messages for customer support.


  1. We added a 'Bot Setting' page to automate customer support workflows for the team to edit and test the type of responses as per keywords.

What we achieved

What we achieved

User Centric

Approach

Reduced Number

of Clicks

Consistency in

Design Language

Improved

Efficiency

key takeaways`from what worked out

key takeaways`from what worked out

  • Functionality over glorification in enterprise internal tools.

  • Empathizing with the team as much as with users leads to better outcomes.

  • Paper sketches and scribbled thoughts will never go out of style but not everything needs to be started from sketch.

  • Learned to prioritize generative vs. evaluative research; exploratory research for dashboards; usability testing for chat assistant.

  • It’s okay not to know everything; incremental changes compound into big impact.

how i could do things differently today

  • Not hesitate to seek feedback from cross-functional teams and mentors even if my designs are not fully polished.

  • Design interactive interfaces for PDF to increase its efficiency and readability.

  • Inform stakeholders periodically rather than waiting until the meeting so things can be flagged early.

  • Document changes more effectively to show the impact of my design.

  • Set clear milestones for research to allow more time for refinement.

  • I will try to design interactive interfaces for PDF to increase its efficiency and readability.

  • I will inform stakeholders periodically rather than waiting until the end.

  • I will document changes more effectively so they can be flagged early.

  • I will set clear milestones for research to allow more time for refinement.

  • I will not hesitate to seek feedback from cross-functional teams and mentors even if my designs are not fully polished.


  • I will try to design interactive interfaces for PDF to increase its efficiency and readability.

  • I will inform stakeholders periodically rather than waiting until the end.

  • I will document changes more effectively so they can be flagged early.

  • I will set clear milestones for research to allow more time for refinement.

  • I will not hesitate to seek feedback from cross-functional teams and mentors even if my designs are not fully polished.


  • I will try to design interactive interfaces for PDF to increase its efficiency and readability.

  • I will inform stakeholders periodically rather than waiting until the end.

  • I will document changes more effectively so they can be flagged early.

  • I will set clear milestones for research to allow more time for refinement.

  • I will not hesitate to seek feedback from cross-functional teams and mentors even if my designs are not fully polished.


Click to copy

Click to copy

Waiting for a team to call home…

Waiting for a team to call home…

For Networking

For Networking

LinkedIn

For more Projects

For more Projects

Behance

For Cool Contet

For Cool Contet

Instagram

Made with continuous feedback learnings and ambitions.

Made with continuous feedback learnings and ambitions.