B2B · Order Placement · Asian Paints | MyAwaaz

Boosting adoption
in online ordering.

Turning fragmented, support-assisted ordering habit into fast, scalable, self-confident digital workflow — for the 80,000+ dealers who run their business on MyAwaaz.

Lead Product Designer Desktop Web Mobile
SAP ERP MDG Salesforce Azure
+0%surge in portal adoption
−0%order-placement time
0×online order volume
My role

Lead Product Designer.

Owned the journey end-to-end.

Research synthesis Problem framing Solution direction Wireframes UI design Validation Developer handoff

4 weeks explorations 2 weeks design alignment
Context · What is MyAwaaz?

A digital channel
dealers didn't default to.

MyAwaaz is a dedicated business platform built for Asian Paints dealers — a centralized place to manage their orders, sales and inventory. Online ordering sits at the centre of the experience, yet it still hadn't become the dealer's default way to work.

0K+
Total Asian Paints dealers
across the network
0%
Dealers ordering online
DAU across network
0%
Dealers ordering offline
via TSE/Awaaz Helpline
Setting the context

Default support-assisted habit,
not self-serve digital behaviour.

Two dealers back to back — one on a support call, one ordering on a glowing laptop

  • This project sat within the larger MyAwaaz revamp, aimed at reducing dealer dependence on physical support channels and growing online ordering by both value and volume.

  • Online ordering was a critical workflow because it sat at the center of dealer adoption, revenue, and operational efficiency.

  • However, the existing ordering journey had not become the dealer's default workflow.

The problem, as a story

When the portal felt slower,
dealers gave up.

The same loop, every order — until the dealer abandoned the portal and reached for the phone. That abandonment was the habit the revamp had to break.— Primary source: Heat maps & Fallout charts from Adobe Analytics

Dealer opens the portal to place an order1
Starts

A dealer opens the portal to place a routine order.

33.5K
-24.7K-73.8%
Repeating the flow for each shade2
Repeats

Looks around, adds to cart, repeats same act for multiple items.

8.7K26.2%
Frustration — errors surface late3
Stalls

Stops engaging/interacting. Cursor wanders away from "Checkout".

-5.8K-66.4%
Dealer gives up and calls the TSE4
Abandons

Abandons cart. They are placing orders offline over call.

2.9K33.5%
↳ And it wasn't just one dealer — the same pattern held across the base.
Large dealer on a call letting the TSE handle the order
Large dealers

Often called TSEs for routine order placement.

Small dealer stuck on hold on the helpline
Small dealers

Relied on Awaaz helpline, often with waiting time and low visibility.

Neglected ordering portal, used as a last resort
Portal

Became the last resort.

Ordering through the portal felt slower than support channels.

The real shift

From a support-assisted habit
to self-serve digital behaviour.

Why this was a problem
3D model — small-business dealer
For dealers
  • Greater independence
  • Faster ordering
  • Better visibility over their business
3D model — sales representative
For TSEs
  • Less routine order-entry workload
  • More bandwidth for higher-value dealer relationship & sales work
3D model — growth chart
For business
  • Higher digital adoption
  • Lower support dependency
  • Growth in online ordering value & volume
Initial design brief

"How might we enhance the online ordering experience, empowering dealers to order independently, not relying on others and making it their default workflow"

— and increase adoption of the MyAwaaz portal
Customer feedback

Five years of signal.

32K+ complaints and sub-3★ ratings collected over the past 5 years, through quarterly TSE-driven holistic dealer surveys. Ordering was one of the largest sources of pain.

0K+
complaints / <3★ ratings
over the past 5 years
Share of complaints by module — not mutually exclusive
45%
Order Tracking
40%
Order Placing (this case study)
38%
Complaints
36%
Dashboard
Heuristic evaluation

What was breaking,
screen by screen.

A walkthrough of the legacy ordering screens — the heuristic issues that kept dealers off the portal, pinned to where they actually happened.

01 · Ordering Landing Page
my awaaz · ordering landing page (legacy)
Legacy my awaaz dashboard / landing screen
No product search upfrontEntry point to product search was buried on a second page. CTA not placed appropriately
02 · Add Products Page
my awaaz · add products page (legacy)
Legacy ordering page with cart
Single shade at a timeDealers prefer ordering multiple shades at once. Overcrowded cart panel(High cognitive load) causing longer checkout audits. Key values hidden below the foldTotal SKUs, volume & Place Order CTA fell out of view.
02 (Contd.) · Add Products Page
my awaaz · add products page (legacy)
Legacy ordering page with cart
Match between System & Real WorldAmbiguous '+' icon for 'Add to Cart' DiscoverabilityPoor visual distinction in cart: Items vs. Schemes User Control | Recognition over RecallSubdued hierarchy (Hiding critical CTAs) Visually obscure target for 'Edit Cart' flow
Research

How we heard
our users.

Two pathways, deliberately different: structured field interviews to watch behaviour, and a year of unfiltered feedback to hear it at scale.

Pathway 1 — 1:1 interviews
80
Dealers
5
Cities

Mumbai · Delhi · Bangalore · Hyderabad · Kolkata. Aged 25 – 50, medium–high tech literacy — real ordering tasks on their own accounts.

Pathway 2 — 1 year of feedback
32K+
Complaints with ★ ratings

Captured across channels, with ratings out of 5★ and verbatim commentary — surfaced through in-portal feedback.

01 · In their words

Feedback
Verbatims

32K+ complaints, distilled to the patterns that kept repeating.

02 · In their words

Field
Interviews

80 dealers across five cities, completing real ordering tasks.

03 · What we watched

Field
Observations

Behaviour we saw on screen, beyond what dealers told us.

“For the same product I search again and again to add different shades. If I could select multiple shades together, ordering would be much faster.”

Can't bulk-add multiple shades
◍ New Delhi★★★★★

“In the cart, regular items and scheme items get mixed. It takes time to understand what I ordered and what got added through a scheme.”

No distinction: cart items vs schemes
◍ Mumbai★★★★★

“I want my staff to prepare the order, but final submission should stay with me. The portal doesn't clearly give that control.”

No role-based access for delegation
◍ Kolkata★★★★★

“Too much repeat work placing one order. Select product, shade, quantity — then the same thing again for another shade.”

Can't bulk-add multiple shades
◍ Hyderabad★★★★★

“Schemes are not clearly separate. Normal material and offer material appear together, so final order checking becomes confusing.”

No distinction: cart items vs schemes
◍ Bengaluru★★★★★

“My shop boys can do order entry, but full access feels risky. If permissions were role-wise, we could divide the work safely.”

No role-based access for delegation
◍ Kolkata★★★★★

“I don't understand why category is needed every time. I already know the product, but the portal makes me do extra steps before search.”

Mismatched IA — redundant steps in discovery
◍ New Delhi

“Payment term is already filled, so we don't notice it sometimes. Later we realise the wrong payment term was selected, then correction becomes difficult.”

Obscured payment-term default
◍ Mumbai

“If quantity is wrong, I get to know very late. By then I have already moved ahead. The error should show while entering the quantity itself.”

Delayed error validation
◍ Kolkata

“In the cart, scheme items and normal items look almost the same. During final checking, offer material is not clearly separate.”

No distinction: cart items vs schemes
◍ Hyderabad

“My staff can make the order, but final submit should be with me only. Right now, giving access feels risky.”

No role-based access for delegation
◍ Bengaluru

“If I know the shade code, why should I first go category, product, then shade? I should be able to search directly and add.”

Excessive click-path depth
◍ Kolkata

“Scheme added or regular item added — it is not quickly clear in cart. Everything looks mixed, so cart checking takes extra time.”

No distinction: cart items vs schemes
◍ Mumbai
1

Repeated the same product-selection flow for every shade variant — even when the product stayed the same.

Bulk-add shades
2

Skipped the category dropdown entirely and moved straight to product search.

Category-first IA redundancy
3

Product discovery needed multiple sequential clicks — disproportionate for a known code.

Excessive click-path depth
4

Pre-filled payment term sat away from the decision area; dealers moved ahead without reviewing it.

Obscured payment terms
5

Quantity errors appeared only after moving ahead — forcing a back-track that broke the rhythm.

Delayed error validation
6

In cart review, scheme items and regular items looked alike — extra time to tell them apart.

Cart items vs schemes
7

Relied on Tab-driven keyboard flow from Excel & Tally — the portal forced repeated mouse use.

No keyboard optimization
Personas

Three dealers,
three mental models.

PriyaThe Project Player
38Med–high literacy₹80L – 2Cr8 – 15 orders/mo

Places large project orders spanning many shades of the same product — forced through category→product→shade→quantity, then repeats. Knows codes; never uses the taxonomy.

Needs
  • Add all shades of a product in one pass
  • Schemes clearly separated in cart
  • Search by code / name directly
VikramThe Volume Contractor
44High literacy₹3Cr+20 – 40 orders/mo

High-volume entry; lives in Excel & Tally, moves field-to-field on Tab. The portal breaks that rhythm — wrong payment terms slip through, quantity errors surface too late.

Needs
  • Keyboard-first flow, search → quantity grid
  • Visible payment terms
  • Field-level validation
Rajesh & AaravThe Veteran Counter
56 & 26Low literacy₹25 – 60L retail

Rajesh runs on relationships & the phone; son Aarav builds orders on the counter laptop. Defaults to a TSE call the moment the portal feels slow — the habit the revamp must replace.

Needs
  • An obvious place to start an order
  • Search that takes a code directly
  • Guardrails that catch mistakes before submit
Consolidating the insights

Many signals,
one set of challenges.

Heuristics, feedback, observations and interviews — clustered into the challenges to be solved

01The signals — four research streams 02Affinitised into Key User Challenges 03Grouped into Clusters
Heuristics
Low Discoverability of ordering entry points and lack of instant product search
Subdued visual hierarchy hiding critical ordering information and primary CTAs.
Overcrowded cart side-panel causing high cognitive load and prolonged checkout audits.
Poor visual separation and weak architecture for promotional schemes.
Ambiguous, unlabeled '+' icon fails to match the user's mental model for an 'Add to Cart' action.
Lack of visual distinction between regular cart items and schemes creates inconsistency and visual noise.
Unintuitive and visually disruptive 'Replace Order' modal flow.
Customer Feedback
Inability to bulk-add multiple product variants/shades simultaneously.
Lack of visual distinction between regular cart items and schemes creates inconsistency and visual noise.
Absence of role-based access control preventing secure task delegation.
Field Visit - Observations
Inability to bulk-add multiple product variants/shades simultaneously.
Mismatched information architecture forcing redundant steps in product discovery.
Excessive click-path depth for standard SKU and variant selection.
Obscured payment terms placement leading to accidental default selections.
Delayed error validation that disrupts ordering momentum late in the flow.
Lack of visual distinction between regular cart items and schemes creates inconsistency and visual noise.
Lack of keyboard-optimized navigation disrupting high-speed user flow.
Field Visit - Interviews
Mismatched information architecture forcing redundant steps in product discovery.
Obscured payment terms placement leading to accidental default selections.
Delayed error validation that disrupts ordering momentum late in the flow.
Lack of visual distinction between regular cart items and schemes creates inconsistency and visual noise.
Absence of role-based access control preventing secure task delegation.
Search & Item-selection

Mismatched information architecture forcing redundant steps in product discovery.

Search & Select Product

Excessive click-path depth for standard SKU and variant selection.

Search & Select Shades

Inability to bulk-add multiple product variants/shades simultaneously.

Enter Quantities & Add to Cart

Ambiguous, unlabeled '+' icon fails to match the user's mental model for an 'Add to Cart' action.

Enter Quantities & Add to Cart

Delayed error validation that disrupts ordering momentum late in the flow.

Enter Quantities & Add to Cart

Unintuitive and visually disruptive 'Replace Order' modal flow.

Enter Quantities & Add to Cart
Discovery

Low Discoverability of ordering entry points and lack of instant product search

Proceed to Order
Behavioural

Lack of keyboard-optimized navigation disrupting high-speed user flow.

Enter Quantities & Add to Cart
Cart & Checkout

Subdued visual hierarchy hiding critical ordering information and primary CTAs.

Review & Place Order

Obscured payment terms placement leading to accidental default selections.

Review & Place Order

Overcrowded cart side-panel causing high cognitive load and prolonged checkout audits.

Review & Place Order
Schemes

Low discoverability of active promotions and schemes.

Check & Add Schemes

Poor visual separation and weak architecture for promotional schemes.

Check & Add Schemes

Lack of visual distinction between regular cart items and schemes creates inconsistency and visual noise.

Review & Place Order
Role & Access Management

Absence of role-based access control preventing secure task delegation.

Not Present
Heuristics Customer Feedback Field Visit - Observations Field Visit - Interviews
Journey map

Pain points,
by stage.

Schemes can be added here and revisited during cart review.
1
Proceed to
Order
  • Opens ordering
  • Searches a product
  • Entry points hard to find
(add instant entry point via product search)
2
Select Products
& Shades
  • Searches products + shades
  • Picks product
  • Picks shades
  • Mismatched IA → redundant steps
  • Deep click-path for SKUs & Shades
  • No bulk-add for variants
  • No keyboard-speed flow
(flatten IA & click-path, UI enables bulk ordering, keyboard navigation friendly layout)
3
Select quantities &
Add to Cart
  • Sets quantities
  • Adds to cart
  • Replaces an order
  • Ambiguous '+' action
  • Late error validation
  • Intrusive "Replace Order" intimation
(prominent Add to Cart CTA, self explanatory error states, non intrusive "replace order" intimation)
4
Check & Add
Schemes
  • Decides & browses scheme products
  • Select and add scheme Products + Shades to cart
  • Promotions hard to find
  • Weak visual separation
(surface schemes contextually)
5
Review &
Place Order
  • Audits / Edits cart items
  • Confirms payment terms
  • Places order
  • Hidden hierarchy & CTAs
  • Obscured payment terms
  • Overcrowded cart panel
  • Items vs schemes blur
(clarify cart hierarchy & terms, clean, minimal layout, make schemes prominent)
Confident Frustrated
Hesitant —
where do I start? Tedium —
clicks pile up Momentum
breaks Relief —
if schemes are found Anxious
final audit
dealer can-dos pain points ( fixes ) Discovery Search & item-selection Behavioural Cart & checkout Schemes
The updated brief

How might we create a faster, intuitive, bulk-friendly ordering experience for metro dealers — that reflect their mental model of ordering?

Benchmarking & opportunities

Learning from
the neighbours.

I benchmarked the ordering journey against four competitor dealer portals — auditing user activities and content attributes across every stage to spot the features worth borrowing.

MyAwaaz Berger Shakti Nerolac Saathi Birla Opus Dealer Connect JSW (Dulux) Saathi
DiscoverStatus & readiness

Benchmarked how portals surface system status, real-time credit, overdue ledgers and slab-target progress before ordering begins.

Opportunity
  • Show real-time credit & overdue status before order start
  • Surface slab-target progress as a nudge
  • Let dealers reinitiate a saved draft or failed order
Search & selectFind & add

Compared SKU-code search, category filtering, multi-variant grid add, depot stock checks and MOQ visibility.

Opportunity
  • Direct SKU / shade-code search & multi-variant grid add
  • Real-time depot stock check at point of selection
  • Show MOQ & case-pack constraints upfront
SchemesPromotions

Audited on-list discount visibility, slab-trigger simulation, combo-bundle rules and FOC / loyalty rewards.

Opportunity
  • Simulate quantity to preview the next scheme slab
  • Make active discounts visible on the item list
  • Clarify FOC items & combo-bundle rules
Cart & checkoutReview & place

Looked at inline keyboard edits, order-weight vs vehicle-capacity checks and delivery scheduling.

Opportunity
  • Inline keyboard quantity edits in the cart
  • Order weight vs transport-capacity guidance
  • Scheduled delivery-date window picker

Full competitive feature-coverage matrix is a work in progress — shown here as the dimensions audited & the opportunities they surfaced.

Prioritised scope

What we'd fix now
— and what comes next.

Current scopeBuild now
Discovery Search & item-selection Behavioural Cart & checkout Schemes
55% of dealers drop off the search page.
98%+ of metro dealers prefer ordering via TSE — address immediately.
Plus AI-assisted features in Search & Schemes for a faster journey.
Future scopeNeeds system first
Role & access management
45% of place-order feedback involves roles, access & delegation.
Requires the underlying permissions system to be built & engineered first.
Design process

Solving the journey,
not the screen.

Four clusters, untangled together — because fixing search, cart and schemes in isolation kept breaking each other.

Discovery

An ordering entry point
you can't miss.

DiscoveryDiscovery — 2 directions explored
Option 1
MyAwaaz portal homepage with a global header search bar — SKUs, Shades, Variants
Option 2
MyAwaaz portal homepage with a prominent New order CTA in the header
Version Shipped
Why this design?
Omnipresent, state-driven Header CTA

Going back to the CTA option — but a much more prominent one.

Features & states of the CTA
  1. High Priority Placement
  2. Click to Ordering page
  3. Inside-modal contextual freeze
  4. Intentionally signifies a new transaction
Final Design
The legacy MyAwaaz dashboard — purple UI with Top Schemes, Region Specials and Proceed to Order
The redesigned portal homepage with the omnipresent New order header CTA
Before After
High-priority placementClick → ordering pageInside-modal contextual freezeIntentionally signifies a new transaction
Before proceeding to Search & Item Selection

Major layout
decisions.

Here, problems couldn't be solved in silos. It was a revamp of the flow, so the layout had to be imagined considering all the elements together.

These foundational decisions — and their pros & cons — were mapped in the 'Major Layout Decisions' tab of the Affinity Mapping sheet. They shape the design calls across Clusters B, C & D. Once the layout was finalised, the cluster-level explorations below follow.

01

Should the cart stay on the same page, or move to the next?

Existing structure & core tension

Search + Quantity + Schemes + Cart all placed in one long page. One page was trying to do too much.

Design question

Should cart review remain on the same page, or become a separate step?

Search
Quantity
Schemes
fold
Cart
Cart is present, but not actively visible

Cart on the same page, visible after scrolling

Considered

Fewer visible steps and a familiar flow — the dealer reviews added items on the same page.

Pros
  • No extra page transition
  • Familiar to existing users
  • Cart stays within ordering context
  • Quick correction possible
Cons
  • Cart not actually visible unless scrolled
  • Page becomes too long
  • Quantity grid gets cramped
  • Dealer keeps switching mental modes
Key issueBuilding the order and reviewing the order are different tasks.
Search
Quantity
Schemes
Cart drawer
Drawer slides in over the page on “View cart”

Cart as an on-click side panel

Considered

Balanced both needs — the cart shouldn't consume permanent space, but should stay quickly accessible without moving to the next step.

Pros
  • Cart stays hidden when not needed
  • Main page gets more working space
  • Dealer can quickly check added items
  • Avoids long-page scrolling
  • Feels lighter than a permanent side cart
  • Useful for quick reassurance
  • Keeps user in the same ordering context
Cons
  • Still interrupts the ordering flow
  • Side panel covers part of the workspace
  • Shifts dealer from adding to reviewing mode
  • Schemes or quantity grid may get hidden
  • Editing inside the drawer can feel cramped
  • Creates two review moments — drawer & final cart
  • Risks making the final cart step feel repetitive
Key issueThe side panel solves access, but not task separation.
Step 1 · Build order & Add to Cart Page
Search
Quantity
Schemes
↓
Step 2 · Review & Checkout Page
Cart
A deliberate, separate review checkpoint

Move cart to the next step

Selected

Build the order, then review it — two distinct tasks, two distinct moments.

Pros
  • Search gets focus
  • Quantity grid gets enough space
  • Schemes can stay contextual
  • Page becomes lighter
  • Review becomes a clear checkpoint
  • Better for future scalability
Cons
  • Adds one extra step
Determining factorCleaner task separation, more room for quantity entry, proper scheme visibility, and a deliberate cart review.
Why this decision

The cart was removed from the item-selection page not to hide it, but to protect the dealer's primary task — finding products, entering quantities, and evaluating schemes without distraction.

02

How should Search, Quantity & Schemes co-exist on one page?

Existing structure & core tension

All three were important — but not equally. Search starts the task, quantity entry is the main work, schemes support the decision.

Design question

How do we keep schemes visible without interrupting quantity entry?

Search
Quantity
Schemes
Schemes land at the bottom — after quantities are set

Full vertical layout

Considered

Simple, linear and easy to implement — everything stacked top to bottom.

Pros
  • Clear top-to-bottom flow
  • Familiar page structure
  • Works well responsively
  • Low layout complexity
Cons
  • Schemes appear too late
  • High scroll dependency
  • Quantity grid pushes schemes down
  • Dealer may miss relevant schemes
  • Schemes become informational, not actionable
Key issueSchemes needed to influence quantity decisions — but this layout showed them too late.
Search
Quantity
Schemes
Search initiates · Quantity dominates · Schemes support

Search on top, Quantity as the main area, Schemes as a side panel

Selected

The right hierarchy — search initiates, quantity dominates the workspace, schemes stay visible alongside.

Pros
  • Search remains prominent
  • Quantity grid gets primary space
  • Schemes stay visible
  • No interruption in flow
  • Better use of desktop width
  • Supports contextual nudges
  • Scales for future recommendations
Cons
  • Needs careful width balance
  • Side panel can become noisy
  • Smaller screens need responsive stacking
  • Schemes need strong relevance logic
Determining factorIt created the right hierarchy — search initiates, quantity dominates, schemes support.
Why this decision

Keep the main task central. Keep decision support visible, but secondary.

Search & item-selection

From taxonomy-led
to intent-led.

Search & item-selectionReimagining product & shade search — 3 flow iterations

Dealers weren't browsing — they were searching with intent, in bulk. The flow had to match that.

Flow 1 · Earlier Flow
Taxonomy-led Starting Point
The flowSelect category → Select product → Select shade → Enter SKU quantities → Add to cart ↻ repeat for next shade

The flow assumed that dealers were browsing. In fact, they were searching with intent.

Key research insights
  • Dealers were not using category selection at all. They knew product names and codes — keeping the category at 'All categories', they would directly start typing the name/code.
  • Dealers place orders in bulk, often having multiple shades of the same product.
Intermediate flow — single search bar with a multi-select shade dropdown (2 shades selected)
Flow 2 · Intermediate Flow
Single search bar, multi-select shades Explored Shipped
The flowSelect product → Select shades → Enter SKU quantities → Add to cart ↻ repeat for next product
2 key changes
  • Removed category selection as the first step — removed extra visual noise, an extra decision point, extra space consumption and redundancy from the search experience.
  • Introduced the multi-select dropdown for shades — dealers can now select multiple shades of a product together.
Still restricted: dealers had to start with a product to reach a shade. Redundancy and repetition were solved, but entry-point flexibility was still missing.
Version Shipped - Flow 2 + 3
Product First
Shade First
Flow 3 · Final Flow
Product- or shade-first Enhanced
If user searches by productSelect product → Select shades → Enter quantities → Add to cart
If user searches by shadesSelect shade, product gets auto-selected → add more shades of the same product if required → Enter quantities → Add to cart
The re-imagined search accomplished:
  • Removed an unused decision.
  • Matched dealers' mental model of searching for items.
  • Supported bulk-shade ordering.
  • Made shade-first ordering possible.
  • Kept the flow compact.
Search & item-selectionRemodelling quantity layouts — 2 options

Key Tension: the original layout had volume-only labels — more prone to quantity-entry errors. Design assumption: some SKUs ship only in fixed-count cartons (4 / 8 / 12 tins) and can't be sold loose — so spelling that out on the label, and switching the input from a count of tins to a count of cartons, would cut errors and speed bulk ordering.

ADescriptive packaging labelsDidn't Work
Option A — each field shows the full volume (20 Liters, 500 ml …), a carton description (1 carton of 16 tins), a quantity stepper, and a computed total (Total Tins: 16)
01 What it did
  • Made each SKU's carton make-up explicit.
  • Helped explain why some SKUs can't be ordered loose.
  • Counted in cartons to speed bulk entry.
  • Reduced dependency on memory. Wrong assumption
02 Where it broke
  • Intermediate usability testing disproved that assumption — dealers think in tins and already remember how many tins each carton holds.
  • So the carton description was redundant — and counting in cartons (not tins) caused entry errors.
  • Labels got long; visual scanning slowed down.
  • The field started feeling like a carton calculator.
03 Verdict

The label was accurate, but interaction-wise it created doubt — entering 1 means what? 1 carton? 1 tin? 4 tins? It explained the packaging system instead of simply guiding quantity entry.

BOperational labels with unit typesSelected
Option B — compact input fields, each with a unit-type label on the top border (20L Drums, 4L Tins, 500ml Tins) and a QTY stepper
✓ What it solved
  • Reverted the count back to tins/cans — the unit dealers already think in.
  • Clarified tins vs drums.
  • Shorter than the carton-description label; faster to scan.
  • Avoided over-explaining known packaging rules.
  • Preserved dealer familiarity.
Version Shipped

Key Opportunity: compact, operational input fields could do more than prevent errors — being easy to stack in a grid, they opened the door to a true bulk-ordering flow and made keyboard-driven entry even faster.

Shipped — New order page: a shade selected (0025 Royale Basecoat), each shade row exposing the compact unit-type quantity fields (20L Drums, 4L Tins, 500ml Tins …) stacked in a grid for bulk entry, with a running total and a Schemes panel
Why this design?
Operational labels with unit types

The default label identifies the input — the system explains constraints only when dealers need them, as error states & helper texts.

What did it solve?
  1. Reverted the count back to tins/cans — the unit dealers think in
  2. Clarified tins vs drums
  3. Shorter than the carton-description label; faster to scan
  4. Avoided over-explaining known packaging rules
  5. Preserved dealer familiarity
Catering to behavioural issues
  1. This compact input field design made it easier for them to be stacked in a grid.
  2. Stack-ability enabled bulk ordering flow.
  3. It further enhanced keyboard based navigation, making bulk ordering faster.
Final Design
The legacy MyAwaaz Top Schemes / Place Order screen — purple UI with scheme cards, Region Specials and a Sales Tracker panel
Shipped — New order page with single product/shade search bar and top schemes
Before After
Before After
Search & item-selectionSeverity, corrected.
Error States
Option 1 — inline error-state explorations: quantity-autocorrect, on-hover highlight, dialogue box, and inline contextual error, each with its pros/cons; the selected contextual inline state ('4L Tins' field outlined red with 'eg: 4, 8, 12…') is marked in a green rectangle
Contextual inline error
Reasons for finalisation
  • Message stays close to the field — reduced guessing; easy to identify which quantity needs attention.
  • Non-blocking; high-visibility.
Exceptions

A pending unfulfilled SKU means a new order replaces it. The old modal screamed red — as if blocked. The new one is blue: "you can proceed, but this replaces something." Tied to the exact SKU, with an explicit next action, scaling to multiple pending SKUs.

Option 2 — the old replace-order UI: a red 'You have a pending order for the same product' warning with a product-level message, the pending quantities (20 LT, 4 LT) shown as clickable numbers, and a tooltip 'Click on quantity to view order details'
Replace-order — the old UI The Problem

The exception: a dealer cannot place an order for a specific SKU of a specific shade if there's already a pending/unfulfilled order for the same — the new order replaces the pending one.

Issues with the old UI
  • Warning was too visually heavy.
  • Misleading product-level message.
  • Order impact not tied to input fields.
  • Details hidden behind weak affordance (click on a number).
  • Modal felt disconnected from the context.
Option 3 — the new replace-order UI: a calm blue notification 'You have a pending order for the SKUs highlighted in blue. Changing the quantity will replace your pending order' with a 'View pending order' action, and the affected SKU quantity fields highlighted in blue, tied to the exact SKUs
Notification + order-details modal Final
Reasons for finalisation
  • Corrected the severity by making it blue from red — it conveys "you can proceed but it will replace something", rather than "you cannot proceed".
  • Connected the rule to the exact SKU.
  • Made the next action explicit.
  • It scaled for multiple pending SKUs.
Search & item-selectionSelected-total + Add-to-cart CTA — 5 layouts tested
Explorations
Option 1 — Hierarchy based stacking: total + Clear all on top, a full-width Add to cart below
Option 2 — Contrasting Background Layout: total + Clear all on a tinted panel beside a solid Add to cart
Option 3 — Grouping by info/action: total on the left, Clear all and Add to cart grouped on the right
Option 4 — Grouping by context (Floating): a compact total chip with a floating Add to cart
Version Shipped
Final Design
Final design — grouping by context (sticky footer)
Why this design?
Lightweight total + sticky CTA Selected
Reasons for finalisation
  1. Strong CTA prominence
  2. Clear primary vs secondary actions
  3. Selected total remains lightweight & readable
  4. Works well as a persistent sticky footer
What the reimagined flow also unlocked

Keyboard optimization.

This complete reimagining of the search & item-selection process also solved for keyboard optimization.

“In Excel and Tally, I can move very fast. I just keep pressing Tab and go field by field without using the mouse again and again. That makes entries and checking records much easier. Here it is bit difficult.”
— a dealer, during interview.
See the design pass usability test
Quantity fields arranged in predictable rows.
Pack sizes kept in consistent positions.
Tab navigation supported across quantity inputs.
Keyboard progression supported from search to quantity entry.
Enter/right-arrow used to move the flow forward.
Inline validation shown without breaking input rhythm.
Cart & checkout

A clear moment to say
"now I'll review."

With the cart given a page of its own, the cluster came down to two decisions — settle these and the rest of checkout falls into place.

  1. 1The linkHow item-selection hands off to the cart — keeping search fast while the cart stays in view.
  2. 2The layoutHow the cart & checkout page is organised — its summary, its details and where schemes sit.
1
Decision 1 · The link

Linking the search page to the cart.

Key constraints: the search page must stay fast and focused, and the cart summary must stay visible to the user during the search process.

Cart as a FAB
Cart & checkout
Where the cart lives
Cart as a FAB
New-order screen with the cart summary as a floating action button
2
Decision 2 · The layout

One arrangement, held across both pages.

Schemes can be availed in either step — add-items and cart — so their position has to stay identical on both pages to keep the experience consistent. That fixed the skeleton; the two sections below are built inside it.

Top — cart summaryLeft — cart detailsRight — schemes
Cart summary & metadata | Cart details
Cart & checkout
Cart, impact & payment, upfront, clean.

Pinned to the top of the layout: order impact and the checkout actions read before anything needs scrolling. Cleaner layout for easier review, familiar UI for editing.

Cart Summary & Metadata
Schemes

Rewards that motivate, not clutter.

The sidewise positioning of the schemes section improves the discoverability by a lot and also solves for the visual adjacency. What remains is to solve the information hierarchy & layout of the schemes card.

SchemesScheme card — 4 explorations
Explorations
1
Compact progress cardDense; the reward was under-sold.
2
Tier / milestone cardMilestone steps crowd the side panel.
3
Reward + progress + urgencyStrong reward visibility; least cognitive effort.
4
Exploration 4To be added.
Version Shipped
Achieved state
Schemes
Where the schemes go
Top Schemes
Related Schemes
Cart offers
The journey

The reimagined flow — end to end.

Result & impact

Habit, shifted.

~1.5 min
Earlier method
more steps, more repetition
~35 sec
Reimagined flow
faster bulk ordering
~0% faster
55 seconds saved per order, in early bulk-ordering tests
Metrics from the system
Orders placed through MyAwaaz / month
800k+
1.5L+
↑ shift online
Orders placed through TSEs / month
1.8L+
900k+
↓ ~50% load
Orders initiated through MyAwaaz / month
2.3L+
2.9L+
↑ initiation
Drop-off at item-selection page
95%
35%
↓ 60 pts
Usability testing — before → after
3.8
Usability
from 3.2
4.3
Information
from 3.9
4.9
Usefulness
from 3.5
usability study · footage
0:00 / 0:00
This is from a validation round of the MVP, where it is demonstrated that the dealer takes approximately 33 seconds to add 5 SKUs of various quantities to the cart using the new design vs. the old one where it took him close to 2 minutes for the same task. A 75% reduction in time taken.
What we learned watching
Add-to-cart time reduced by 66%, making the process 3× faster — average add-to-cart time for 50 – 100 SKUs dropped to ~33 seconds, from 2+ minutes earlier.
Orders placed successfully, with only minor friction.
Cart discoverability dropped when collapsed.
Hard to close the shade multi-select after adding.
Dealers wanted a side "basket" reference while ordering.
Long-term data showed more dealers checked out after adding items to cart — rather than abandoning — compared to the old portal.
Most called the cart "basket" — a rename could help.
Mobile

Quick orders,
on the move.

Mobile wasn't a copy of desktop — dealers use the app for quick, smaller orders. Research here was lighter and app-specific, anchored in Playstore reviews (2.9★) and on-app observation.

The revamped mobile flow
A · Discovery

One tap to start an order.

Key design decision: a single, thumb-reachable “Place order” entry on the app home — replacing the buried menu path — so dealers can begin an order the moment they open the app.

B · Product & shade search

Product and shade, split in two.

Key design decision: product and shade selection broken into two separate steps and entities — reducing clutter and increasing clarity on the small screen.

C · Setting Quantity

Quantities, bucketed by shade.

Key design decision: accordions for quantity input, bucketed by shade, create distinct visual segregation — enhancing clarity, accelerating steps and minimising cognitive load while handling large amounts of information.

D · Cart & checkout

A cart built for quick orders.

Key design decision: the cart review was intentionally compressed. Since dealers usually place smaller orders on mobile, the design prioritises order summary and checkout decisions upfront — keeping detailed SKU review accessible through expandable shade-wise accordions.

Learnings

What stuck
with me.

01Watch first, design second+
The biggest unlock wasn't a clever idea — it was watching dealers skip the category dropdown and type a code they already knew. Design for the intent they carry, not the flow you inherited.
02Solve the journey, not the screen+
Fixing search, cart and schemes one at a time, each fix silently broke another. The flow only worked once I treated it as one connected decision.
03Ship the scary part early+
We tested bulk ordering on a rough POC before polishing anything. Watching dealers fly through it told us what to build — and what not to waste time on.
04Show the screen, not the slide+
A concept in a doc invited ten interpretations; a "worked vs. didn't" comparison on screen ended the debate in seconds.
05Design for muscle memory+
Dealers brought years of Excel, Tally and "basket" habits to the screen. Honouring that did more for adoption than any visual polish.
Future scope
Needs system first

Role & access management

Role-based permissions so staff can prepare an order while the owner keeps final submit — ~45% of feedback.

Power users

Bulk-upload & reorder

Repeat or import past orders, and export clean records for audit.

AI

Voice & conversational ordering

"6 drums of Royale Basecoat, Butterscotch and Blue Sky" — and AI assembles the basket.

Next
Order Tracking
Colour with Asian Paints
Fluid Design System

Let's make it
transcend.

✦ soumyajyotihalder2021@iitkalumni.org
Resume