CIB Bank

A New Banking Era

A self-initiated UX audit for CIB, Egypt’s leading private bank. I reviewed the website and mobile app, then redesigned key flows to create a more intuitive and accessible user experience.

My role

UX Auditor & Designer

Timeline

1 Month (5/2022)

The story behind

The Spark That Started It All

How Did The Idea Comes?

A few months ago, I opened a new account with CIB and started using their mobile app. As I explored it, several UX and UI issues stood out, ranging from visual inconsistencies to interaction flaws and confusing flows. So, as a product designer, I decided to dive in, studying the experience end-to-end, identifying the core usability problems, and reimagining a more accessible, intuitive version grounded in design logic.

Project summary

A focused look at the problem, process, solution, and results.

Usability Problem

The audit found friction across interaction feedback, navigation, visual hierarchy, and UX writing. Core banking tasks, such as browsing services, transferring money, checking statements, or applying for products, required more interpretation than they should. The problem was task confidence: users needed clearer paths, clearer states, and fewer moments of uncertainty.

Visual Friction

The app’s visual design had a few things getting in the way. The background image clashed with the UI, making it hard to focus. Icons weren’t always clear, which made scanning and interacting harder. The layout didn’t follow a clear grid, so spacing and hierarchy felt off. On top of that, the text contrast was low, and the font sizes weren’t consistent—making it tough to read, especially for accessibility.

Interaction Feedback

The app doesn’t give clear feedback when users interact with it—whether it’s tapping a button, filling a form, or swiping through content. Things feel a bit unresponsive. Some error messages don’t really help or tell you what to do next, which adds to the confusion. Even standard elements like pickers and sliders don’t behave the way mobile users in the age of technology expect, which makes the experience feel a bit off.

Navigation Clarity

The app’s flow felt complicated. Onboarding didn’t offer much guidance, which left users unsure of where to start. The design language wasn’t consistent, which made things feel disconnected. Some key actions were hidden or hard to find, and the content layout was too dense to scan easily. All of this combined to create a scattered experience that made simple tasks, like settling credit card debt, more difficult than it should be.

Audit Decisions

I ran the redesign as a structured UX audit, reviewing navigation, visual hierarchy, interaction feedback, accessibility, and microcopy. The redesign decisions focused on making everyday banking tasks easier to predict and complete, especially for users who may not be comfortable with complex financial interfaces.

Tools & Practices

Blending design and product management, I led with vision and strategy, gaining confidence to explore, experiment, and learn fast.

Tools

Each tool supported a specific part of the redesign process. I used Miro to map out the original experience and highlight key friction points. X-Mind helped structure navigation logic and screen hierarchy. With Notion, I documented UX gaps, flows, and improvement ideas. And finally, Figma was where everything came together—building the redesigned UI with a focus on clarity, usability, and implementation feasibility.

Miro

Figma

Notion

X-Mind

Practices

I kicked off with user interviews to surface pain points from real usage, then conducted a detailed UX audit to uncover interaction and accessibility issues. Using HMW framing, I translated key problems into design opportunities. Finally, I restructured the experience using clear information architecture principles to create a smoother and more scalable flow.

User interviews

UX Audit

Information Architecture

HMW

Old Design

A snapshot of the original design and its core flaws.

Visual Audit

Now It’s Time For The Visual Audit—What I Like To Call A “Spider Analysis,” Where Each Visual Issue Is Mapped With A Card That Explains The Problem.

Visuals Mobile

A showcase of the final UI—refined layouts, improved hierarchy, and cleaner interactions—crafted to deliver a more accessible, modern banking experience.

Onboarding

First impressions matter—this section covers the entry screens and how they guide (or confuse) new users.

Main app sections

A look at the core flows—Home, Transactions, Products, and Profile—and how they shape the everyday banking experience.

A look at the core flows, as home, Transactions, Products, and Profile, and how they shape the everyday banking experience.

Other screens

A look at the core flows—Home, Transactions, Products, and Profile—and how they shape the everyday banking experience.

Visuals Web

A showcase of the final UI—refined layouts, improved hierarchy, and cleaner interactions—crafted to deliver a more accessible, modern banking experience.

Home

A quick overview of account balances, recent activity, and shortcuts to key banking actions—all in one place.

Money transfer

A simple yet efficient screen for transferring money between accounts. I used a custom tab component to handle multiple transfer types with more flexibility and speed.

Statements

The Statements page offers a clear view of all transactions across accounts and cards. While it may exceed current banking limitations, I chose to prioritize a better customer experience over strict constraints.

Other screens

Learnings

Reflections, takeaways, and what I’d do differently.

Learnings

Reflections, takeaways, and what I’d do differently.

What did I learn?

This project sharpened how I audit an existing product without treating it as a visual makeover. I learned to connect small usability issues, unclear states, weak contrast, dense layouts, and vague microcopy to the larger question: can users complete important banking tasks with confidence?

What went well?

The strongest part was turning the audit into clear design decisions. The redesign improved navigation predictability, reduced visual competition, clarified task entry points, and made key flows easier to scan. The work felt stronger when every visual change had a usability reason behind it.

What could be improved?

If I revisited it, I would ground the audit in more local banking constraints from the beginning: regulatory limits, common support issues, accessibility requirements, and the real frequency of key tasks. That would make the recommendations easier to prioritize and less dependent on assumptions.

Keep Exploring

More projects, more perspective—see what else is shaping the way I design.

Keep Exploring

More projects, more perspective—see what else is shaping the way I design.