Mashreq Customer Care Web & Mobile Design UX Research Fintech Dubai

great help,
one click away.

It started with a customer stranded at the airport, cards failing, unable to reach the bank. The help he needed existed, it was just buried four clicks deep. I redesigned Mashreq's customer-care experience so urgent help is the first thing you find, not the last.

35%
Fewer support-related phone calls within the first quarter after launch.
Deflection
4+  1
Clicks to reach customer care, surfaced from deep in the site to the home screen.
Discoverability
42%
Less design-to-development time by building the component library alongside the design.
Velocity
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

Dec 2022 – Mar 2023 · Mashreq Bank, Dubai

Tools

Figma · Google Analytics · mailbox analytics

What I did

Redesigned Mashreq's self-service and customer-care experience across web and mobile — analytics, research, IA, self-service flows, UI, and a component library.

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

Urgent, high-stakes moments where retail and corporate customers in distress have low patience.

the shipped product

don't read it. try it.

The Customer Care page I designed and shipped at Mashreq — rebuilt here so you can actually use it.

↓ interactive type a problem in the search, or tap a card
mashreq.com/en/uae/customer-care ↗ live · click anything
Sign InContact Us
Customer Care

Hi, how can we help you?

    Corporate or SME customer? Switch to Business help →
    Most asked questions
    Sign in for faster helpAnswers tailored to your accounts & cards.
    Track a request or complaintAlready raised something? Check its status.
    Service request number…
    Browse help topics

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

    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.

    Platform Mashreq.com · web & mobile Users Retail & corporate customers in distress Constraint urgent moments · low patience · high stakes
    02 · Problem

    why people kept
    picking up the phone.

    01

    Care was buried

    Reaching customer care took 4+ clicks through menus, an eternity when your card just failed abroad.

    02

    No self-assistance

    Customers were never empowered to solve problems themselves and gain a little independence.

    03

    Lack of user education

    Too little guidance meant people couldn't make the most of resources and services already on offer.

    04

    No timely communication

    Delays in responding to calls aggravated already-frustrated users, and every detour eroded trust.

    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

    before solving it,
    i looked at the numbers.

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

    voices from research

    My card stopped working overseas and I couldn't find a way to reach anyone — so I just kept calling.
    Retail customer · card declined abroad
    I'd happily sort it out myself, but the page never actually showed me how.
    Customer · self-service expectation
    When something breaks I want to see the steps, or watch a quick video — not read a wall of text.
    Customer interview · learning preference
    theme 01

    Users want an immediate response

    theme 02

    FAQs must be simple and easy to use

    theme 03

    Users like to watch and learn

    theme 04

    Users prefer live chat to solve issues

    validated no self-assistance provided validated lack of user education validated no timely communication
    04 · Competitive analysis

    what the best
    help pages do.

    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
    PatternAmazonNetflixPatagoniaSpotifyBanks
    Search bar in help menu·
    Categories in help pages
    Links embedded in answers··
    Video on the homepage···
    Expandable answers / FAQ

    Borrow proven self-service patterns

    Search in the help menu, categorised help, and links embedded in answers, the three takeaways the interviews and the benchmark both pointed to.

    reinvent a bespoke help UI

    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.

    ↳ Before - hunt, then call
    1
    Dig through menus to even find "customer care"
    2
    4+ clicks later, land on a thin help page
    3
    No search, no categories, no guidance
    4
    Give up and call, or email and wait
    5
    Channel-switch, repeat the problem to a human
    support as the default
    ↳ After - find it yourself
    "Hi, how can we help?" search leads the page
    Predictive results before you finish typing
    Categorised FAQs & how-to videos to self-serve
    "Did this help?" closes the loop
    a call only if all else fails
    06 · The design

    three jobs the
    page had to do.

    I broke the experience into three tasks, each mapped to a research theme, then designed the UI for every step.

    Self-service first, escalate last

    Lead with search, FAQs and videos so people resolve issues independently, and only route to a human when they truly can't.

    just add a phone number up top

    Making the call easier would have lowered call volume's symptom while leaving the buried, un-helpful page untouched.

    find the right answer with keywords

    A search box at the very top with predictive suggestions, drawing on frequently-used and protected data, so the right answer appears before you finish typing.

    theme immediate responsepattern search in help menu

    self-assist & educate

    The most-asked questions, identified from the mailbox data, surfaced up front, paired with short how-to videos for people who'd rather watch and learn.

    theme watch and learnbuilt most-asked + videos

    browse FAQs by category

    "Browse more topics" opens a full FAQ page organised into clear categories, with collapsible answers and a "Did you find what you needed?" check on every one.

    theme simple, easy FAQsloop yes / no feedback
    ↓ 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 ↗

    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

    better for users,
    better for the team.

    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.

    09 · Reflection

    what I'd do next.

    Add live chat, deliberately. Users asked for it, and the data backs it. Next I'd design chat as the bridge between self-serve and a call, with clear handoff so context never gets repeated.

    Instrument the "Did this help?" loop. The yes/no feedback is a goldmine, I'd wire it to continuously re-rank FAQs and flag the answers that quietly fail people.

    Personalise the predictions. The search already uses protected data; the obvious next step is tailoring the very first suggestions to the customer's recent activity.

    "The best customer-service design is the call the customer never has to make."
    - The principle behind the redesign
    10 · Beyond the Figma file

    I shipped a component library, not just a page.

    By building the components alongside the design instead of after it, engineering had production-ready pieces from day one, which is where that 42% cut in design-to-development time came from, and what kept the experience consistent as it scaled across web and mobile.

    The components shipped with accessibility built in — semantic structure, keyboard-reachable controls and AA-contrast color tokens — so the experience stayed usable for everyone as it scaled.