CIB Bank
CIB Bank
CIB Bank
A new Banking Era
A new Banking era
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.
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.
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.
Fin-Tech
Mobile & Web
Un-Official
My role
My role
UX Auditor & Designer
UX Auditor & Designer
Timeline
Timeline
1 Month (5/2022)
1 Month (5/2022)
The story behind
The story behind
The story behind
The Spark That Started It All
The Spark That Started It All
The Spark That Started It All
How did the idea comes?
How did the idea comes?
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, identified the core usability problems, and reimagined a more accessible, intuitive version grounded in design logic.
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, identified the core usability problems, and reimagined a more accessible, intuitive version grounded in design logic.
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, identified the core usability problems, and reimagined a more accessible, intuitive version grounded in design logic.
Project summary
Project summary
Project summary
A brief snapshot of the problem, challenge, and solution
A brief snapshot of the problem, challenge, and solution
User’s Problem
User’s Problem
The main issues were in the interactions, layout, visual design, and microcopy, especially when it came to UX writing. On top of that, some core flows felt clunky and hard to follow. Things like browsing essential services, transferring money, or applying for products weren’t as clear or smooth as they should be, which made the whole experience feel a bit confusing and harder than it needed to be.
The main issues were in the interactions, layout, visual design, and microcopy, especially when it came to UX writing. On top of that, some core flows felt clunky and hard to follow. Things like browsing essential services, transferring money, or applying for products weren’t as clear or smooth as they should be, which made the whole experience feel a bit confusing and harder than it needed to be.
Visual design
Visual design
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.
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.
Interactions
Interactions
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.
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.
Navigations
Navigations
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.
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.
Problem Solved!
Problem Solved!
Using a mix of discovery methods, design best practices, and accessibility standards—especially considering the bank’s non-tech-savvy audience—I ran a full UX audit of the app. I reviewed everything from navigation and visuals to microcopy. The result? A much smoother, more intuitive experience that feels cleaner, easier to use, and more modern.
Using a mix of discovery methods, design best practices, and accessibility standards—especially considering the bank’s non-tech-savvy audience—I ran a full UX audit of the app. I reviewed everything from navigation and visuals to microcopy. The result? A much smoother, more intuitive experience that feels cleaner, easier to use, and more modern.
Tools & Practices
Tools & Practices
Tools & Practices
Blended design intuition with structured audits and design best practices
Blended design intuition with structured audits and design best practices
Blended design intuition with structured audits and design best practices
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
Notion
Figma
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
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
Notion
Figma
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 screens
Old screens
Old screens
A snapshot of the original design and its core usability flaws.
A snapshot of the original design and its core usability flaws.
A snapshot of the original design and its core usability flaws.
Visual Audit
Visual Audit
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.
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.
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.
And more …
And more …
And more …
Visuals (Mobile)
Visuals (Mobile)
Visuals (Mobile)
A showcase of the final UI—refined layouts, improved hierarchy, and cleaner interactions—crafted to deliver a more accessible, modern banking experience.
A showcase of the final UI—refined layouts, improved hierarchy, and cleaner interactions—crafted to deliver a more accessible, modern banking experience.
A showcase of the final UI—refined layouts, improved hierarchy, and cleaner interactions—crafted to deliver a more accessible, modern banking experience.
Onboarding
Onboarding
First impressions matter—this section covers the entry screens and how they guide (or confuse) new users.
First impressions matter—this section covers the entry screens and how they guide (or confuse) new users.
Main app sections
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—Home, Transactions, Products, and Profile—and how they shape the everyday banking experience.
other screens
other screens
Visuals (Web)
Visuals (Web)
Visuals (Web)
A showcase of the final UI—refined layouts, improved hierarchy, and cleaner interactions—crafted to deliver a more accessible, modern banking experience.
A showcase of the final UI—refined layouts, improved hierarchy, and cleaner interactions—crafted to deliver a more accessible, modern banking experience.
A showcase of the final UI—refined layouts, improved hierarchy, and cleaner interactions—crafted to deliver a more accessible, modern banking experience.
Home
Home
A quick overview of account balances, recent activity, and shortcuts to key banking actions—all in one place.
A quick overview of account balances, recent activity, and shortcuts to key banking actions—all in one place.
Money transfer
Expense
request
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
Expense
record
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.
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
Other screens
Learnings
Learnings
Reflections, takeaways, and what I’d do differently.
Reflections, takeaways, and what I’d do differently.
What did I learn?
What did I learn?
This project helped me grow in redesigning an existing, well-known product. I got better at running UX audits, spotting usability issues, and applying accessibility standards to make the experience more intuitive.
This project helped me grow in redesigning an existing, well-known product. I got better at running UX audits, spotting usability issues, and applying accessibility standards to make the experience more intuitive.
What went well?
The iterative design process led to a more user-friendly interface, with improved navigation and clearer visual hierarchy. Some user feedback rounds confirmed that the redesigned app was more accessible and aligned with user expectations.
What went well?
The iterative design process led to a more user-friendly interface, with improved navigation and clearer visual hierarchy. Some user feedback rounds confirmed that the redesigned app was more accessible and aligned with user expectations.
What could be improved?
Some flows could’ve been better aligned with local fintech regulations from the start. I also could have pushed for deeper desk research and more accurate assumptions early on to frame the experience with stronger context and fewer unknowns.
What could be improved?
Some flows could’ve been better aligned with local fintech regulations from the start. I also could have pushed for deeper desk research and more accurate assumptions early on to frame the experience with stronger context and fewer unknowns.
Keep Exploring
Keep Exploring
Keep Exploring
More projects, more perspective—see what else is shaping the way I design.
More projects, more perspective—see what else is shaping the way I design.
More projects, more perspective—see what else is shaping the way I design.
Lets Talk!
Send me a message describe what is in your mind, I'll get back to you ASAP. See you soon!
Lets Talk!
Send me a message describe what is in your mind, I'll get back to you ASAP. See you soon!
LET'S CONNECT
I collaborate with ambitious teams and founders around the world to craft digital experiences that connect, engage, and drive real impact.
Let’s talk if you’re building something meaningful.
LET'S CONNECT
I collaborate with ambitious teams and founders around the world to craft digital experiences that connect, engage, and drive real impact.
Let’s talk if you’re building something meaningful.
LET'S CONNECT
I collaborate with ambitious teams and founders around the world to craft digital experiences that connect, engage, and drive real impact.
Let’s talk if you’re building something meaningful.
