STC Bank · Design Platform

Moving forward
with design.

The home of design at STC Bank — where we share the craft behind the product: our stories, case studies, resources, rituals, and the people moving it all forward.

4 content tracks Figma community assets Live events & workshops
ArticlesCase StudiesStoriesNewsDesign TokensAccessibilityUX Writing
Explore the platform

One place for everything we make.

Five pillars, one mission — make our craft visible and our team stronger.

01 — BLOG

Stories from the work

Articles, case studies, stories and release news from the people building STC Bank.

02 — RESOURCES

Assets you can use

Download-ready logos, guidelines and standards from our Figma Community.

03 — EVENTS

Come learn with us

Talks, workshops and meetups for designers, students and the wider community.

04 — TEAM

Meet the people

Our culture, traditions, and the way we give feedback and grow together.

05 — ONBOARDING

New here? Start now

The kit that gets a new designer from day one to first ship, hidden gems included.

06 — CALENDAR

Rituals & dates

Thursday challenges, feedback jams, releases and events — all in one view.

Latest

What's new this cycle.

Design System

Tokens 2.4 — semantic colors shipped

New semantic color layer, dark-mode parity, and 12 refreshed components now live in Figma and code.

Updated this week
UX Team

Rewards flow reduced steps by 40%

The savings experience shipped to 100% of users. Read the full team update for metrics and next bets.

Monthly update
News

Release notes: the big features

International transfers refresh, biller logo pack, and a faster onboarding — all in the latest notes.

Just published
Event

Leaders in Design — registration open

Designers from leading companies share challenges & success stories, with our UX community partner.

Coming soon

Design is how we move the bank forward.

Read the thinking behind the product, grab what you need, and join us at the next session.

The Blog

Stories from the work.

Articles, case studies, stories and news from the STC Bank design team. Filter by what you're into.

All Articles Case Studies Stories News
Migration
Article

The Role of Design in the STC Bank Migration

Moving millions of customers to a new bank is a trust exercise as much as a technical one. Here's how design carried the weight.

AM Aya & Mousa · 8 min read
Fawazeer
Story

Fawazeer: A Ramadan Success Story

We turned a beloved Ramadan tradition into a daily in-app moment. The story of shipping delight on a deadline.

A Aya · 6 min read
Release
Notes
News

Release Notes: The Big Changes & Features

A round-up of the biggest shipped changes this cycle — what's new, what's better, and what's coming next.

F Firas · 4 min read
Rewards
Case Study

The UX of Rewards: Building a Seamless Savings Experience

How we turned a confusing savings flow into something people actually finish — research, principles and results.

H Hossam · 9 min read
Global
Transfers
Case Study

International Transfers: Pain Points & Improvements

We audited the whole remittance journey, found where people dropped off, and rebuilt the moments that mattered.

M Mishari · 7 min read
Inclusive
Design
Article · Coming next

Inclusive Design: How to Focus on Accessibility

Building for everyone from the first frame — practical accessibility habits for our team.

R Raneem · Upcoming
Design
System
Case Study · Coming next

Building a Design System: Scaling & Empowering the Team

From scattered components to a shared language that makes everyone faster.

A Abdulaziz · Upcoming
Merchant
Portal
Case Study · Coming next

Merchant Portal Redesign

Rethinking the tools our merchants rely on every day.

M Mishari · Upcoming
Motion
Case Study · Coming next

How Animation Increased App Engagement

The measurable impact of motion done with intent.

A Aljohrah · Upcoming
UX
Writing
Article · Coming next

Why UX Writing Matters

Words are interface. A case for treating copy as design material.

A Aya · Upcoming
Payments
KSA
Case Study · Coming next

How We Changed the Payment Experience in KSA

Rebuilding the everyday moment of paying, for a whole market.

F Firas · Upcoming
← Back to blog
Article

The Role of Design in the STC Bank Migration

Migrating customers from one banking product to another is one of the highest-stakes things a team can do. People are trusting you with their money, their salary, their standing orders and their sense of security. When we set out to move customers into STC Bank, we knew the migration would be judged less on the database cutover and more on a single human question: did it feel safe?

Design's job in a migration is not to make screens look good. It is to make an unfamiliar change feel like continuity. This is the story of how we approached that.

A migration succeeds the moment a customer stops noticing it happened.

Start from fear, not features

Our first research sessions weren't about flows — they were about worry. We asked people what they were afraid would go wrong when a bank they use changes underneath them. The answers were consistent: “Will my money still be there?”, “Will my card stop working?”, “Will I have to set everything up again?” Those fears became our real requirements. Every screen in the migration had to answer at least one of them before it asked the customer to do anything.

Design the seams, not just the destination

It's tempting to pour energy into the shiny new home screen. But customers don't experience a migration as a destination — they experience it as a sequence of seams: the notification that it's coming, the moment they open the app mid-change, the first login, the first transaction. We mapped every one of those seams and treated each as a designed moment with its own copy, its own reassurance and its own clear exit.

What we prioritised

  • Continuity of identity — familiar names, card art and balances carried across so nothing felt “reset”.
  • Progressive disclosure — we never showed the whole migration at once; we revealed one confident step at a time.
  • Always a status — the customer could always see where they were: what had moved, what was in progress, what needed them.
  • Reversible confidence — clear support and “what happens if” answers within reach at every step.

Words did the heavy lifting

In a migration, copy is the product. A single vague sentence can undo months of engineering trust. We wrote in plain, calm, active language — “Your salary will arrive here from next month”, not “Beneficiary routing has been updated.” We removed apology from error states and replaced it with direction: what happened, and the one thing to do next.

If the customer has to ask “is this normal?”, the design has already failed.

Test the scary path, not the happy path

Happy-path demos are easy to love and dangerous to trust. We deliberately usability-tested the anxious paths: what a customer sees if they open the app halfway through the move, if a transfer is pending during cutover, if they log in on a new device the same week. Designing those edges is where migration trust is actually won or lost.

Rolling out in waves

We phased the migration in controlled waves rather than a single overnight switch. Each wave gave us live signal — support tickets, drop-off points, confused screens — that we fed straight back into copy and flow tweaks before the next wave. Design stayed in the loop the whole way through; the work didn't end at handoff, it ended when the numbers said people felt fine.

What we'd tell the next team

  1. Treat trust as the primary metric. Everything else is secondary.
  2. Design the transition, not just the arrival.
  3. Write every sentence as if a worried person is reading it at midnight.
  4. Ship in waves and let real behaviour edit your design.

A great migration is invisible. If customers barely remember it happening, that quiet is the highest compliment our craft can earn.

← Back to blog

← Back to blog
Story

Fawazeer: A Ramadan Success Story

Fawazeer — the playful riddles families have shared during Ramadan for generations — is one of those traditions everyone in the region grows up with. So when we asked how STC Bank could show up during Ramadan in a way that felt genuinely ours, the answer wasn't a banner or a discount. It was a riddle a day.

The best seasonal features don't interrupt the season — they belong to it.

The idea

The concept was simple enough to explain in a sentence: every day of Ramadan, open the app, solve a Fawazeer, and unlock a small reward. But simple concepts hide hard design problems. A daily ritual has to be effortless to return to, delightful enough to share, and fair enough that everyone can play — including customers using a screen reader or playing one-handed while cooking iftar.

Designing a daily loop

The heart of Fawazeer is the return visit. We designed the loop to be frictionless: a warm entry point on the home screen, a single riddle, an answer, an instant reward, and a gentle nudge that tomorrow's riddle is waiting. No dead ends, no “come back later” without a reason to.

What made it work

  • One tap in. The day's riddle was never more than a tap from the home screen.
  • Instant payoff. Rewards resolved immediately — celebration, not a loading spinner.
  • Streaks with heart. We rewarded consistency without punishing the day someone missed.
  • Arabic-first. Every riddle, animation and celebration was designed in Arabic first, then adapted — not the other way around.

Delight, on a deadline

Ramadan doesn't move for anyone's roadmap. We had a hard, immovable launch date, which forced a healthy discipline: decide early what makes Fawazeer feel like Fawazeer, and protect only that. We spent our animation budget on the two moments that mattered most — the reveal of the riddle and the burst of a correct answer — and kept everything else calm.

We didn't build more. We built the two moments people would remember, and made them sing.

What happened

Fawazeer became a daily habit for a meaningful share of active customers, with strong return rates across the month and a spike in organic sharing as people compared streaks. But the number we were proudest of wasn't in a dashboard — it was the messages from customers saying it made the app feel like part of their Ramadan.

What we kept

Fawazeer taught the team a lasting lesson about seasonal design: cultural resonance beats novelty every time. A feature rooted in something people already love needs less convincing, less onboarding and less marketing. It simply feels right. That's a template we'll reach for again.

← Back to blog

← Back to blog
News

Release Notes: The Big Changes & Features

A round-up of the biggest things the design and product teams shipped this cycle. We publish these so the whole company can see the craft moving forward — and so anyone can point a stakeholder to “what actually changed.”

✦ Headline changes

  • International transfers, rebuilt. A clearer journey with upfront fees, live exchange rates and a status you can actually follow. (See Mishari's case study.)
  • Rewards & savings, seamless. The savings experience dropped several steps and now guides people to finish. (See Hossam's case study.)
  • Faster onboarding. Fewer screens between “download” and “done”, with continuity carried over from migration.

✦ Improvements

  • Refreshed home screen hierarchy — the things people do most are now the easiest to reach.
  • New semantic color tokens rolled out across the app for consistent, accessible contrast.
  • Clearer, calmer error and empty states in plain language.
  • Motion pass on key transitions to make the app feel quicker and more responsive.

✦ For designers & developers

  • Design Tokens 2.4 published to Figma and code — see the Design System Update.
  • SADAD biller logos and “Pay with STC Bank” button standards added to Resources.
  • 12 components refreshed with dark-mode parity.

✦ Coming next

  • Merchant portal redesign entering design review.
  • Accessibility pass on transfers and rewards.
  • A shared icon library to speed up handoff between design, engineering and marketing.

Spotted something in the wild worth celebrating — or fixing? Drop it in the team channel and we'll fold it into the next notes.

← Back to blog

← Back to blog
Case Study

The UX of Rewards: Building a Seamless Savings Experience

Saving money is something almost everyone wants to do and almost no one finds easy. Our rewards-linked savings experience was supposed to make it effortless — but the first version did the opposite. This is how we found the friction and designed it out.

-40%
steps to start saving
completion rate
100%
rollout to users

The problem

The original flow treated saving like opening a product: forms, choices, and financial jargon before any reward was visible. People started with intent and quietly gave up. Our analytics showed a steep drop right where the flow asked for a decision it hadn't yet earned. The reward — the reason to save — appeared far too late.

People didn't lack motivation. The flow spent it before giving anything back.

What research told us

  • Customers wanted to see the benefit first, then the mechanics.
  • The word “savings” carried baggage — it felt like commitment and paperwork.
  • People abandoned when asked to make more than one decision at a time.
  • Trust dipped whenever a number appeared without explanation.

The principles we designed to

1. Reward before effort

We flipped the order. The very first screen now shows what you'll earn, in concrete terms, before asking anything. Motivation arrives before the work.

2. One decision per screen

Every step asks for exactly one thing. No screen makes the customer hold two open questions in their head at once.

3. Sensible defaults

Where a choice could be pre-made safely, we made it — with an obvious way to change it. Most people accepted the default and finished in seconds.

4. Show the money working

After setup, a simple, honest visual shows the reward accruing. The feedback loop that was missing became the most-loved part of the feature.

The result

We cut the steps to start saving by roughly 40%, and completion roughly doubled. More importantly, the feature stopped feeling like a financial product and started feeling like a small, satisfying habit. When we rolled it out to everyone, support questions about “how do I start saving?” all but disappeared.

Seamless isn't the absence of steps. It's the absence of doubt.

What we're carrying forward

The biggest lesson wasn't about savings at all. It was about sequence. Most “complicated” flows aren't too long — they're in the wrong order, asking for effort before they've shown value. We now audit every new flow with one question first: does the reward come before the work?

← Back to blog

← Back to blog
Case Study

International Transfers: Pain Points & Improvements

For many of our customers, sending money abroad isn't a feature — it's a lifeline to family. When a transfer feels uncertain, the anxiety is real and immediate. We audited the entire international transfer journey to find exactly where that uncertainty crept in, and rebuilt the moments that mattered most.

Every unclear screen in a transfer is a customer wondering if their family will receive the money.

How we audited it

We walked the whole journey the way a customer does — from first tap to the moment money lands — and marked every point where a real person paused, hesitated, or reached for support. We paired that walk with support tickets and drop-off data, so intuition and evidence pointed at the same places.

The pain points we found

  • Hidden costs. Fees and exchange rates appeared late, so the amount received was a surprise — the worst kind in a transfer.
  • Silent status. After sending, customers had no honest sense of where their money was, so they assumed the worst and contacted support.
  • Beneficiary friction. Adding and reusing recipients was fiddly, especially for the people customers send to most often.
  • Jargon. Banking and compliance language made a stressful task feel more foreign than it needed to.

The improvements we shipped

Show the real numbers, upfront

Fees and the live exchange rate now appear before the customer commits, alongside a clear “amount they'll receive.” No surprises at the end.

A status you can follow

We replaced silence with a simple, truthful progress view — sent, processing, on its way, received — so customers can reassure themselves without contacting anyone.

Recipients that remember

Frequent beneficiaries are now front and centre, so a repeat transfer to family takes seconds, not a fresh form.

Plain human language

We rewrote the journey in the words customers actually use, and moved compliance requirements into moments where they make sense instead of blocking the start.

We didn't make transfers faster by cutting steps. We made them calmer by removing doubt.

What changed

Drop-off at the moments we targeted fell, repeat transfers got quicker, and support contacts asking “where is my money?” went down noticeably. The journey went from a source of anxiety to something customers could trust — which, for money going to the people they love, is the whole point.

What's next

An accessibility pass across the flow, clearer first-time education for new corridors, and continued tightening of the beneficiary experience. Sending money home should feel as certain as handing it over in person.

← Back to blog

Resources

Assets you can actually use.

Download-ready files and standards, published through our Figma Community. Grab what you need and keep the work consistent.

SADAD

SADAD Biller Logos

The full set of SADAD biller logos, cleaned and export-ready for product and marketing use.

SVGPNGFIGMA
Download pack
Pay

“Pay with STC Bank” Guidelines

Button standards, spacing, states and do's & don'ts for integrating the pay button correctly.

PDFFIGMA
View guidelines
Coming next

On the resource roadmap.

What we're preparing to publish for the team and partners next.

🎁

Gift Card Logos

Standardised gift card logos with consistent design specs.

🔬

Research Template

A ready-to-use project research template on Figma Community.

🧷

Icon Library

A shared icon set to speed up handoff between design, dev and marketing.

🏳️

Flags Library

A complete flags library, ready to drop into any Figma file.

🎨

Design Tokens

Our published tokens for color, type, spacing and elevation.

🔤

Brand Colors & Type

STC brand colors & typography, documented for internal use.

🔁

IPS & Local Transfer Journeys

Reference journeys for instant and local transfers.

Events

Come learn with us.

We run different sessions for different audiences — designers, students, and the wider community. Registration is usually a quick link away.

Session01Phase 1
Talk · By invitation

Leaders in Design

We invite designers from leading companies to share their real challenges and success stories — the messy middle, not just the highlight reel.

✦ In collaboration with a UX community
Session02Phase 1
Workshop · Students

UX Workshop for High School Students

A hands-on introduction to UX for high schoolers — what it is, why it matters, and a taste of designing for real people.

✦ In collaboration with a local high school
Coming next

Events we're planning.

💡

Ideation Game

Give people a scenario, invite ideas, and the best one wins — run through social media.

🎙️

Banking UX Webinar

Overcoming challenges in banking UX with local and international experts.

🏢

Internal UX Series

Sessions for different stakeholders and departments to raise UX literacy across the bank.

🤝

Fintech Meetup

A UX-in-fintech meetup bringing together designers from across the ecosystem.

Team & Culture

How we work, and who we are.

This page is about our culture — the traditions, the way we give feedback, and how we grow the people around us.

🎯

Our Traditions

Rituals that keep the craft sharp and the team close — like our regular design challenges where we tackle a shared problem together, no stakes, all learning.

🔁

How We Give Feedback

Feedback is a habit, not an event. We critique the work not the person, come with specifics, and always leave with a clear next step.

🌱

Mentoring Juniors

Every design lead and senior mentors junior designers — from our team and beyond. Growing others is part of the job, not extra to it.

The people

Faces behind the work.

A

Aya

Product Designer
M

Mousa

Product Designer
F

Firas

Product Designer
H

Hossam

UX Designer
M

Mishari

UX Designer
R

Raneem

Accessibility
A

Abdulaziz

Design Systems
A

Aljohrah

Motion Design
Coming next

Culture we're building.

🗓️

Thursday Design Challenge

A weekly shared design challenge to keep the craft playful.

🎬

Day in the Life

A behind-the-scenes designer series, made with marketing.

Member Spotlights

Team spotlights featuring the quirky interests that make us us.

🏆

Achievements Board

An end-of-year board summarising everyone's wins.

🧠

How We Brainstorm

Documenting our brainstorming rituals so they scale.

Onboarding Kit

Welcome. Let's get you moving forward.

Everything a new designer needs to go from day one to first ship — the structure, the tools, and the hidden gems nobody tells you on the first week.

1

Meet the team & the structure

Who does what, who to ask, and how the design team fits into product, engineering and marketing. Start with a coffee chat with your buddy.

2

Set up your tools

Get access to Figma and our libraries, the design system, the research repo, and the team channels. Bookmark the Resources page.

3

Learn how we work

Read up on our feedback rituals and traditions on the Team page. Sit in on a design challenge and a critique before you present your own work.

4

Ship something small

Pick a small, real improvement and take it end to end. Nothing builds context faster than shipping.

Hidden gems

The stuff nobody tells you.

🧩
The design system is your friend — check it before building anything from scratch. It's probably already there.
🔎
Search the research repo first — someone has likely already talked to the user you're about to recruit.
🗂️
Figma Community account — our shared assets, templates and libraries all live here.
💬
Ask early, ask loudly — no question is too small in your first month. It's expected.
📝
Write it down — decisions live in docs, not heads. Capture the “why” as you go.
🤝
You get a mentor — a senior is assigned to you. Use them; that's the whole point.
Design System Update

Tokens 2.4 is live.

The latest from the design system — what shipped, what changed, and what's next. Published to Figma and code.

New

Semantic color layer

Colors now map to meaning (surface, on-surface, accent, danger) for consistent, accessible theming.

v2.4
New

Dark-mode parity

Every core component now ships light and dark out of the box.

v2.4
Updated

12 components refreshed

Buttons, inputs, sheets and cards updated to the new token layer.

v2.4
Docs

Usage guidance rewritten

Clearer do's & don'ts and copy guidance baked into each component.

v2.4
On the roadmap

Next for the system.

🧷

Shared icon library

One icon source across design, dev and marketing.

📐

Layout & spacing tokens

Formalising grid and spacing into named tokens.

Accessibility audit

Contrast and focus states verified across all components.

UX Team Update

What the team shipped & learned.

Our regular pulse on the work — the wins, the numbers, and the bets we're making next.

Shipped

Rewards & savings — seamless flow

Steps to start saving cut ~40%, completion roughly doubled, rolled out to 100% of users.

Read the case study →
Shipped

International transfers refresh

Upfront fees, a followable status, and faster repeat sends. Support “where's my money?” contacts down.

Read the case study →
Learned

Migration = trust design

Design the seams, not the destination. Write for the worried customer at midnight.

Read the article →
Next bet

Merchant portal redesign

Rethinking the everyday tools merchants rely on. Entering design review.

In progress
40%
fewer steps to save
rewards completion
transfer support tickets
Calendar

Rituals, events & deadlines.

Our recurring rituals and upcoming moments in one view. Colour tells you the type at a glance.

Ritual Event Release
Every Thu

Thursday Design Challenge

Team ritual
Weekly

Design Critique & Feedback Jam

Team ritual
This cycle

Design Tokens 2.4 release

Design system
Phase 1

Leaders in Design (talk)

Event · registration open
Phase 1

UX Workshop for High School Students

Event · community
Monthly

UX Team Update

Team ritual
Ongoing

Mentor sessions (junior designers)

Team ritual