UX designer at JeelPay, Riyadh

I turn complex problems into interfaces people understand at a glance. Product design, design systems and research, with Arabic-speaking users at the center of every decision.

See my work Play with my skills

Selected work

Four case studies, one for each kind of problem I love solving: systems, research, websites and apps.

Client work is under NDA, so names and data are left out. The process is real.

Building a design system from zero

Fintech product

Design system
Tokens
Bilingual components

Read the case study 6 min read

Making expert tools make sense

Public-sector platform

UX research
Synthesis
Journey mapping

Read the case study 5 min read

From wireframe to live website

Company website in Framer

Web design
Framer
Responsive

Read the case study 4 min read

Less tapping, more done

Everyday mobile app

Product design
Usability testing
Arabic-first

Read the case study 5 min read

Skills you can touch

Each skill below is a small working piece instead of a bullet point. Drag, toggle and click through them.

Design systems

I built JeelPay’s design system from the ground up and unified AlRiyadh Company’s components. A good system means one token change ripples everywhere, so go ahead and change one.

Accent color

Corner radius 12px

Density

Monthly plan

Renews on 1 December

Active

Payment reminders

Arabic-first, not translated later

Designing for Arabic speakers means more than swapping strings. Flip this screen and watch which parts mirror, and which deliberately stay put.

Same screen, both directions

Send money

Step 2 of 3Review

1,250.00 SAR

To Bana Shabib

From Main account

Mobile +966 5• ••• 4567

MirroredBack arrows, chevrons, progress and the reading order of every row.
Kept as isPhone and card numbers stay left to right, so they read the way people dial them.
AdjustedArabic gets its own typeface and more line height rather than a fallback font squeezed into English spacing.

Responsive, mobile first

I design the small screen first and let layouts earn their extra columns. Drag the blue handle to resize the frame.

Width 390 pxMobile

Good morning, Bana

Balance, SAR4,820

Paid this month3

Upcoming2

Micro-interactions and motion

Motion should explain what just changed. Small, quick and tied to something you did.

128

Feedback that feels earned

One button, three states

Data that moves instead of jumping

Journey mapping and research

At the General Authority for Surveying and Geospatial Data I mapped journeys and turned interviews into fixes. Pick a stage, then compare the experience before and after a redesign.

Illustrative example of a payments app

Accessibility and inclusive design

Pretty isn’t finished until everyone can read it. This checker runs the real WCAG contrast math, so try to break it.

Product design

User-centered design
UI design and visual hierarchy
High-fidelity prototyping
Design systems and component libraries
Responsive, mobile-first design
Micro-interactions and motion

Research and analysis

Problem framing and design critique
Journey mapping and personas
Usability testing, remote and in person
User interviews and surveys
Accessibility and inclusive design

Tools

FigmaFramerSwiftUIXcodeReactnpm

Languages

Arabic, native
English, fluent and professional

Where I’ve worked

Three years across fintech, government and client work. Hover the timeline, then open a role for the details.

Redesigning a fintech app end to end, and building the system that keeps it consistent.
- Own the full redesign of the JeelPay app, reworking every key journey around real user needs.
- Created the company’s first design system, giving design and engineering one scalable source of truth.
- Introduced design workflows that made collaboration smoother and developer handoff cleaner.
- Run usability tests and turn what I learn into concrete accessibility and experience improvements.
- App redesign
- Design system
- Usability testing
- Accessibility
Helping clients ship products their users understand from the first tap.
- Partner directly with clients and developers to find where user needs and business goals meet.
- Validate ideas with lean research and usability tests before anything goes live.
- Design clean, functional interfaces shaped around how Arabic-speaking users read, tap and decide.
- Client work
- Lean research
- Arabic-first UX
Designing and building responsive websites, from first layout to live site.
- Designed and shipped responsive websites in Framer, from page structure down to interactions.
- Built a scalable design system that brought the team’s UI components under one roof.
- Worked side by side with developers so what shipped matched what was designed.
- Framer
- Web design
- Design system
Bringing the user’s voice into national geospatial tools.
- Mapped how people really use complex geospatial tools and pinpointed where they got stuck.
- Turned interviews and behavioral data into clear, actionable UI/UX recommendations.
- Made the case for change through storytelling, presentations and Figma mockups.
- UX research
- Journey mapping
- Interviews

Always learning

Two years at the Apple Developer Academy, a computer science degree and a growing shelf of certificates.

Apple Developer Academy, Tuwaiq

Three programs over two years, from my first SwiftUI screen to mentoring the designers who came after me.

Selected for the second-year track for top graduates

Certifications

Tap a card to flip it and see what it taught me.

20202024

BSc Information Technology and Computing

Arab Open University, computer science track

Human-computer interaction
Design thinking
User-centered design

Have a product that needs a designer?

Banashbib@gmail.com

+966 56 930 3613 banashabib.com Riyadh, Saudi Arabia

Website

From wireframe to live website

A company needed a website that explained what it does in seconds, worked on every screen and could be updated without a developer. I designed it and built it in Framer.

My role: Designer and builder
Scope: Structure, visual design, build
Tools: Figma, Framer
Delivered: Responsive site and component library

The challenge

A clear message, lost in a busy page.

The old site said everything at once. Visitors couldn’t tell what the company offered or what to do next, and on phones the layout simply fell apart.

Structure firstThen the pixels

Settle hierarchy in grey, then add color.

I agreed on structure and content order in wireframes before any visual design, so feedback stayed on what mattered. Drag across the frame to compare the wireframe with the final page.

RayaAboutServicesProjectsContact

Spaces that work as hard as you do

Planning and interior design for workplaces across the Gulf.

See our projects

Planning

Interiors

Delivery

RayaAboutServicesProjectsContact

Spaces that work as hard as you do

Planning and interior design for workplaces across the Gulf.

See our projects

Planning

Interiors

Delivery

WireframeFinal

Every screenOne page, three sizes

Designed once, reflowed everywhere.

Every section was built from responsive Framer components, so the same page adapts cleanly from a wide desktop to a phone, with no separate mobile site to maintain.

RayaAboutServicesProjectsContact

Spaces that work as hard as you do

Planning and interior design for workplaces across the Gulf.

See our projects

Planning

Interiors

Delivery

Desktop1440

RayaAboutServicesProjectsContact

Spaces that work as hard as you do

Planning and interior design for workplaces across the Gulf.

See our projects

Planning

Interiors

Delivery

Tablet768

RayaAboutServicesProjectsContact

Spaces that work as hard as you do

Planning and interior design for workplaces across the Gulf.

See our projects

Planning

Interiors

Delivery

Phone390

Process

DiscoverGoals, audience and what visitors need to do.
StructureSitemap, content order and wireframes.
DesignVisual language and reusable sections.
BuildResponsive pages and interactions in Framer.
LaunchHandoff, publishing and refining after launch.

Outcome

A clear first impressionOne message per section and one obvious next step.

Works on every screenResponsive components instead of separate layouts.

Easy to updateThe team edits content in Framer without waiting on a developer.

Skills touched

Responsive design Micro-interactions Component libraries Visual hierarchyFramer

Linked skills open their live demo on the main page.

Next case studyLess tapping, more done

BanaShabib

Building a design system from zero

Making expert tools make sense

From wireframe to live website

Less tapping, more done

Design systems

Arabic-first, not translated later

Responsive, mobile first

Micro-interactions and motion

Journey mapping and research

Accessibility and inclusive design

Product design

Research and analysis

Tools

Languages

Apple Developer Academy, Tuwaiq

Certifications

BSc Information Technology and Computing

Have a product that needs a designer?

Spaces that work as hard as you do

Spaces that work as hard as you do

Spaces that work as hard as you do