Mashreq Customer Care, Gauravi Linjara

the shipped product

from four clicks deep to the first screen.

The shipped Customer Care landing, urgent help on the first screen, search-led instead of buried four clicks deep.

Case snapshot

Role

Sr. UX / UI Designer · website squad

Team

12 people, product, architect, Azure dev, dev lead, frontend, agile coach, me on design

Timeline

2022, 2024 · Mashreq Bank, Dubai

Tools

Figma · Google Analytics · mailbox analytics

What I did

Owned the experience end to end: analytics review, user research, IA, search, self-service journeys, interface design, and the component library used across web and mobile. The bet: fix it upstream so most people never need support.

Impact

35% fewer support calls in the first quarter, customer care surfaced from 4+ clicks to 1, and 42% less design-to-development time.

Constraints

Customers often arrived in urgent, high-stress moments, with little patience for navigation, unfamiliar terminology, or unclear next steps.

01 · Context

the help was there. nobody could find it.

A customer stranded at the airport, cards failing, couldn't reach the bank. The help existed, it was just buried deep in the site, impossible to find in the moment that mattered. That one complaint triggered a full rethink of customer care across web and mobile.

02 · Problem

why people kept picking up the phone.

Every answer needed an agent

Whatever the question, the only path to an answer ran through a human, so people reached for the phone by default.

Guidance was scattered

Useful help existed, but it was spread across the site, so customers rarely found it when it mattered.

No clear next step

While they waited, customers had no obvious next move, so the frustration, and the calls, kept building.

Common questions, hardest to find

The questions people asked most weren't the easiest answers to reach, so the highest-volume needs went unmet.

“

the reframe · user interviews

Every call to support was a small confession
that the experience had already failed.

Failed CXUnnecessary touchpointsChannel switching

So the goal wasn't a better call centre, it was removing the reasons to call at all.

03 · Research

the data already knew what people needed.

I pulled Google Analytics and mailbox volumes to see what customers actually asked, then interviewed users to pressure-test it. Four themes came back.

in their own words

“My card stopped working overseas and I couldn't find a way to reach anyone, so I just kept calling.”

Sara A.Retail Customer

“I'd happily sort it out myself, but the page never actually showed me how.”

Yousef H.Customer

“When something breaks I want to see the steps, or watch a quick video, not read a wall of text.”

Nadia F.Customer · Interview

04 · Competitive analysis

great help starts with search, not a call.

I benchmarked help experiences across banks and best-in-class products, Amazon, Netflix, Patagonia, Spotify, Emirates NBD and more, to borrow the patterns worth keeping.

Show the benchmark & the call ⌄

Pattern	Amazon	Netflix	Patagonia	Spotify	Banks
Search bar in help menu	✓	✓	✓	✓	·
Categories in help pages	✓	✓	✓	✓	✓
Links embedded in answers	✓	✓	·	✓	·
Video on the homepage	·	✓	✓	·	·
Expandable answers / FAQ	✓	✓	✓	✓	✓

the takeaway

The winning patterns weren't novel: search-in-help, categorised answers, links inside answers. So I borrowed what already worked. Novelty wasn't the job. People in distress want the pattern they already know, working perfectly.

05 · The shift

from last resort to first stop.

The same goal, get an answer, before and after the redesign. The call centre moves from the only door to the last door.

The bet behind it. The obvious fix for too many calls is easier-to-reach support, more agents, a live-chat widget. But improving the call path still assumes the call. So I put the leverage upstream, search-led self-service first, and treated chat as a later layer. That's the difference between calls getting shorter and calls not happening.

support as the default→

help, found before you call.

4+ clicks and 5 steps to reach a human, now one search, and often no call at all.

06 · The design

three jobs the page had to do.

Interviews surfaced three help-seeking modes: find, self-serve, browse. Each became one job the page had to do.

the bet

An easier phone number only eases the symptom. So I designed customer care as a self-service product, not a contact page, self-service first, human help last.

↓ interactive pick a category, expand any answer

mashreq.com/en/uae/customer-care ↗ live · expand any answer

Pick a category, tap a question to expand, then tell us if it helped.

Task 2 & 3, categorised FAQs with a “did this help?” loop on every answer.

Faithful recreation · not the live site · view the live page ↗

the real screens

what actually shipped.

The production UI, live at Mashreq, each screen mapped to the job it does. Click any to zoom in.

Predictive search at the top of the Customer Care page, suggesting answers as the user types

Most-asked questions surfaced up front, paired with short how-to videos

Categorised FAQ page with collapsible answers and a did-this-help feedback check on each

Help topics presented as scannable cards on the Customer Care page

01 · find

answers before you finish typing

Predictive search sits at the very top and surfaces the right answer as you type. No menu-digging.

02 · self-serve

the questions people actually ask

The highest-volume questions, pulled from real mailbox data, surface first, paired with short how-to videos.

03 · browse

a full FAQ, organised

Everything categorised, with collapsible answers and a “did this help?” loop on every one.

04 · scan

help, scannable at a glance

Topics laid out as clean cards, so the right path is obvious without reading a wall of text.

Real production UI · view the live page ↗

07 · The flow

a ladder that ends at "call us."

I crafted the journey so every rung gives the customer a chance to solve it themselves. A human call sits at the very bottom, where it belongs.

step 01

Search the issue

Predictive results at the top

→

step 02

Smart questions

Narrow to the real problem

→

step 03

FAQs & videos

Read or watch the fix

→

step 04

Browse categories

Result page by topic

→

last resort

Call us

Only if self-serve fails

self-service first, escalation last

08 · Impact

35% fewer calls, 42% faster to ship.

Deflection

35% ↓

Fewer support-related phone calls in the first quarter after launch, more users resolved issues on their own.

Discoverability

4+ → 1

Key complaint and support options, once buried, brought to the surface.

Velocity

42% ↓

Less design-to-development time by building the component library alongside.

Mobile

28% ↑

Responsive, mobile-first enhancements let users resolve issues on the go.

first-quarter figures, post-launch · website & mailbox analytics

09 · Reflection

we made help feel found, not hunted.

This wasn't a new help page. It was a shift in where care lives, moving support from somewhere people dig for to something that meets them on the home screen.

Every decision started from a real moment of friction, a card declined abroad, a question at midnight, and worked back to the calmest possible answer. We surfaced self-service without hiding the human when it's truly needed.

Some of the best calls were the unglamorous ones: cutting clicks, re-ranking FAQs, predicting the question before it's typed. None of it shows off, all of it adds up.

And the work isn't finished, it just keeps getting sharper. Live chat, smarter predictions, a feedback loop that keeps learning, the page should keep improving long after launch.

10 · Beyond the Figma file

I shipped a component library, not just a page.

Built alongside the design, so engineering shipped from day one. That's where the 42% cut in design-to-development time came from, and what kept it consistent across web and mobile.

Accessible by default: semantic structure, keyboard-reachable controls, and AA-contrast tokens.