Ux Ui Case Study

Home

Editing Public Comments in B2B Quote Management

UI recreated for portfolio due to NDA restrictions. Feature is currently live in production.

Overview

Designed and implemented an edit functionality for public comments in a live B2B quote management system to remove the need for requoting when comment changes were required.

The feature was created without a dedicated UX designer, while maintaining consistency with the existing design system and ensuring smooth integration with the current workflow.

Duration :

14 days

Contribution:

Requirement analysis, UX flow design, UI design, development, release

Role :

UX/UI Designer, Full Stack Developer

UX research

E-commerce

B2B

Quotes

Problem Statement

In the existing quote management system, users could not edit public comments once a quote was created.

If a comment needed to be changed, the user had to create a new quote, which caused:

Extra work for sales representatives
Confusion for customers
Duplicate quotes in the system
Time loss during revisions

Additionally, the delete action for comments was present but not functioning correctly.

The system needed a way to edit comments without breaking the existing workflow.

In the existing quote management system, users could not edit public comments once a quote was created.

If a comment needed to be changed, the user had to create a new quote, which caused:

Extra work for sales representatives
Confusion for customers
Duplicate quotes in the system
Time loss during revisions

Additionally, the delete action for comments was present but not functioning correctly.

The system needed a way to edit comments without breaking the existing workflow.

Goal

Enable users to edit public comments directly from Quote Edit and Quote Details pages without requiring requote, while keeping the UI consistent with the existing product.

Objectives

Allow comment editing without creating new quote
Maintain design system consistency
Keep interaction simple
Track edit history
Avoid breaking current UI layout

Enable users to edit public comments directly from Quote Edit and Quote Details pages without requiring requote, while keeping the UI consistent with the existing product.

Objectives

Allow comment editing without creating new quote
Maintain design system consistency
Keep interaction simple
Track edit history
Avoid breaking current UI layout

Constraints

This feature had multiple product constraints:

Existing design system had to be followed
Layout of quote page could not change
Popups and tables had predefined styles
No dedicated UX designer assigned
Feature had to fit current workflow
Must not affect existing quote logic

Because of these constraints, the solution had to extend the current UI instead of redesigning it.

This feature had multiple product constraints:

Existing design system had to be followed
Layout of quote page could not change
Popups and tables had predefined styles
No dedicated UX designer assigned
Feature had to fit current workflow
Must not affect existing quote logic

Because of these constraints, the solution had to extend the current UI instead of redesigning it.

Pain Points

Cannot edit comment after quote creation

Must requote to change text
Existing delete button not working
No edit history tracking
Extra steps in workflow
Confusing for customers

Cannot edit comment after quote creation

Must requote to change text
Existing delete button not working
No edit history tracking
Extra steps in workflow
Confusing for customers

User Persona

Richard

Age:

Occupation:

B2B Sales Representative

Behaviour

- Active in 8–10 WhatsApp groups. - Receives 200+ messages daily. - Uses Starred Messages but forgets to revisit.

Goals

- Active in 8–10 WhatsApp groups. - Receives 200+ messages daily. - Uses Starred Messages but forgets to revisit.

Frustrations

- Active in 8–10 WhatsApp groups. - Receives 200+ messages daily. - Uses Starred Messages but forgets to revisit.

Rahul needs reminders inside chat because he never leaves WhatsApp during work.

Selena

Age:

Occupation:

Business owner

Behaviour

- Uses WhatsApp for assignment updates - Important messages get buried quickly - Often takes screenshots to remember

Goals

- Never miss deadlines shared in chats - Easily revisit important messages

Frustrations

- Relies on memory - Screenshots messages to remember - Uses external reminders

Ananya need a reminder to meet her deadlines that's shared in groups.

Empathy Map

Feels

- Overwhelmed - Anxious about missing something - Frustrated scrolling endlessly

Thinks

- “I’ll remember this later.” - “Where was that message?” - “I saw this somewhere…”

Does

- Screenshots messages - Stars messages - Forwards to self - Sets reminders in other apps

Says

- “Can someone resend the link?” - “Sorry, I missed that message.” - “Wait, what was the deadline?”

Feels

- Overwhelmed - Anxious about missing something - Frustrated scrolling endlessly

Thinks

- “I’ll remember this later.” - “Where was that message?” - “I saw this somewhere…”

Does

- Screenshots messages - Stars messages - Forwards to self - Sets reminders in other apps

Says

- “Can someone resend the link?” - “Sorry, I missed that message.” - “Wait, what was the deadline?”

Process Flow

Design decisions

Why use popup instead of new page?

- Existing system uses popup pattern - Avoid layout change - Faster interaction

Why prepopulate comment?

- User should not rewrite full comment - Reduces effort

Why add "Edited" indicator?

- User should know comment changed - Maintain transparency

Why add edit history popup?

- Required for tracking - To view the difference in comments.

Why follow existing design system?

- Maintain product consistency - Reduce learning time - Avoid breaking UI

Impact

Removed need for requoting

Reduced user effort
Improved workflow speed
Maintained design consistency
Added edit tracking
Improved usability in quote management

This feature is now used in production by sales and customers.

Removed need for requoting

Reduced user effort
Improved workflow speed
Maintained design consistency
Added edit tracking
Improved usability in quote management

This feature is now used in production by sales and customers.

Similar case studies

Remind Me — WhatsApp Feature Design
Designed a smart reminder feature that allows users to revisit important WhatsApp messages at the right time without adding interface complexity.
Problem Statement
Starred messages don’t remind users, forcing them to scroll, search, or use external reminder apps.
Impact
Improved productivity by keeping reminders inside WhatsApp instead of external apps.
Role
UX Research, UI Redesign
Figma
UX/UI
New Feature
View case studies
IRCTC Website Redesign
This project reimagines the booking experience by simplifying the interface, improving accessibility, and reducing friction in the ticket booking process.
Problem Statement
Users struggle with a cluttered interface, confusing navigation, and slow task completion during ticket booking.
Impact
Reduced user confusion by 40%
Role
UX Research, UI Redesign
UX / UI
UX / UI
UX / UI
View case studies
IRCTC Website Redesign
This project reimagines the booking experience by simplifying the interface, improving accessibility, and reducing friction in the ticket booking process.
Problem Statement
Users struggle with a cluttered interface, confusing navigation, and slow task completion during ticket booking.
Impact
Reduced user confusion by 40%
Role
UX Research, UI Redesign
UX / UI
UX / UI
UX / UI
View case studies