Led UI design execution across Boubyan Bank's corporate banking ecosystem app, website, RM portal, chatbot, and a design system adopted across the entire bank.
Client
Boubyan Bank, Kuwait
Leading Islamic bank, established 2004
Engagement
6 months on-site · 2019 · Fractal Ink
Scale
Best Islamic Digital Bank - Global, 5 years running · Play Store 4.6 · App Store 4.5
Role
Lead UI Designer
Corporate banking app, website, RM portal, Mas3ed chatbot, design system
Team
The Problem
Boubyan Bank is Kuwait's leading Islamic bank a financial institution whose products, contracts, and customer relationships operate under Sharia principles that are fundamentally different from conventional banking. Profit-sharing contracts instead of interest-bearing loans. Sales-based financing structures instead of credit facilities. A prohibition on riba interest that changes the language, logic, and presentation of every financial product on screen.
The brief was to redesign Boubyan's corporate digital ecosystem: the corporate banking app, the public website, the Relationship Manager portal, and the Mas3ed chatbot. Improve usability, establish a scalable design system, modernize the visual language, and align everything with the bank's brand identity.
The real challenge wasn't the redesign. It was that the entire team including the designers was encountering Islamic banking products for the first time. You can't design a Murabaha journey if you don't understand what a Murabaha contract is. You can't make a Mudarabah product feel intuitive if you're still learning the profit-sharing logic yourself.
The 14-month engagement required a simultaneous learning process: understanding the domain well enough to make defensible design decisions, while delivering live screens against an agile release schedule.
Hard Contraints
• Sharia compliance was non-negotiable every product presentation, contract flow, and financial term had to accurately reflect Islamic finance principles
• Small design team: 1 Principal Designer, 1 UX Designer, 2 UI Designers executing across corporate app, website, RM portal, chatbot, and design system simultaneously
• No existing scalable design system one had to be built from scratch and adopted across the entire bank
• Bilingual Arabic/English across all surfaces with Arabic as the primary language for a Kuwaiti banking audience
• Agile delivery with sprint releases design had to stay ahead of development while domain understanding was being built
My Role
I led UI design execution across the full corporate banking ecosystem responsible for design direction, visual consistency, and component quality across the corporate app, website, RM portal, and chatbot. The UX Designer led the thinking and flow architecture; I translated that thinking into high-fidelity execution, maintained design consistency across all surfaces, contributed to design system development, and participated in planning and grooming sessions to build the domain understanding the execution required. I was not a passive executor I was an active participant in shaping what was built.
The Reframe
The brief was to redesign a banking app. Real challenge was designing a financial model none of us had worked with before.
"You can't design a product you don't understand. Understanding Murabaha wasn't a prerequisite for the design it was part of the design process."
Every designer on the team had experience with conventional banking products: interest-bearing loans, credit facilities, overdraft structures. The mental models were familiar. The terminology was known. The UX patterns were established.
Boubyan Bank used none of those. A Murabaha contract is not a loan it's a sales agreement where the bank purchases an asset and sells it to the customer at a fixed profit margin, transparently disclosed. A Mudarabah is not an investment account it's a profit-sharing arrangement where the bank and customer agree in advance on the split. These aren't semantic differences. They change what needs to be shown on screen, what needs to be explained, what the customer is confirming when they accept a product.
This meant every grooming session, every product walkthrough, and every design review required the team to simultaneously understand the Islamic finance logic and the UX implications of that logic. What does 'profit rate' look like on screen when you can't call it 'interest rate'? How do you explain a Murabaha sales contract to a corporate customer in a way that's accurate, compliant, and still scannable? How do you design a product application journey when the product itself operates on principles most of your users have never encountered in a digital format?
That learning investment was the work underneath the work. The design execution was only as good as the domain understanding that informed it. This case study is about both.
Why This Was Hard
Domain complexity, delivery pressure, and design system establishment running simultaneously.
Three distinct challenges ran in parallel throughout the 14-month engagement none of which could wait for the others to resolve. Ran parallel all the same time.
Challenge 1
Learning Islamic finance while delivering against the same
What it required : Grooming sessions, product walkthroughs, and stakeholder reviews were used as domain education building the understanding required to make defensible design decisions in parallel with making them
Challenge 2
Design system from scratch under sprint pressure
What it required : The system had to be built while live screens were being delivered every new component had to be both immediately useful and architecturally sound enough to scale across the entire bank
Challenge 3
Consistency across four distinct surfaces
What it required : Corporate app, website, RM portal, and chatbot had different interaction models, devices, and user types maintaining a coherent visual and interaction language across all four required constant discipline
Challenge 4
Bilingual Arabic RTL /English LTR
at component level
What it required : Arabic wasn't a translation layer it was the primary language for a Kuwaiti banking audience. Component-level RTL solutions, Arabic typography, and financial terminology required parallel design decisions throughout
Challenge 5
Small team, large scope
What it required : Four designers across corporate app, website, RM portal, chatbot, and design system scope management and prioritization were design infrastructure decisions, not just delivery planning
Process & Decisions
Three decisions that defined the engagement.
Decision 1 : Domain understanding as a design input
The standard design process assumes the designer understands the domain before they start designing. On this project, that assumption didn't hold and the team made a deliberate choice to treat domain learning as part of the design process rather than a prerequisite to it.
I participated in every grooming session and product planning discussion, not just the design reviews. This wasn't process overhead it was necessary input. When the UX Designer mapped the Murabaha application journey, I needed to understand the contract structure well enough to know whether the screen sequence accurately represented what the customer was agreeing to. When we designed the profit-sharing disclosure for a Mudarabah product, I needed to know what the Sharia compliance board required to be visible, not just what looked clean.
The discipline was refusing to treat Islamic banking principles as a constraint to work around. They were a design material to work with. Products that looked modern but misrepresented the contract logic would have failed compliance review. Products that were compliant but incomprehensible would have failed users. Both failures had to be designed against simultaneously.
"Profit margin disclosed as a fixed amount, not a rate. The distinction is Sharia-significant and it shapes the entire pricing display pattern across Islamic finance products."
Decision 2 : Design system as the consistency infrastructure
With four surfaces, two languages, and a small team, the design system wasn't a deliverable it was the mechanism that made consistent delivery possible at all. Without a shared component library, every surface would have diverged, every sprint would have required rework, and the visual coherence that a bank-grade product requires would have collapsed under delivery pressure.
The system was built on Atomic Design methodology: foundation file containing colors, typography, icons, shadows, and spacing then English and Arabic toolkits built on that foundation. Components were named consistently across both languages so that the system could be maintained by designers working primarily in either. All design files linked to the toolkits, meaning updates to the foundation propagated automatically.
The scale of adoption was the validation: the design system was adopted not just for the corporate app and website, but across the entire Boubyan Bank brand retail banking, corporate banking, branch materials, and events. A component library designed for a corporate app becoming the design standard for the whole institution is a systems-thinking outcome, not a delivery outcome.
"Foundation → toolkits → design files. Changes propagate automatically. The system designed for corporate banking became the design standard across the entire bank."
Decision 3 : Visual Language that balanced modernity with cultural anchoring
Boubyan Bank's brand identity had to be translated into a digital visual language for the first time. The existing brand had equity in Kuwait's market it communicated trust, Islamic values, and institutional credibility. The redesign needed to modernize without abandoning any of that.
The moodboard exploration phase produced three directions: clean and minimal, vibrant and futuristic, and region-and-culture-anchored. The team chose a direction that drew from the surrounding environment design elements that referenced Kuwaiti and Gulf cultural aesthetics while using the clean, light interface patterns that modern corporate banking users expected.
The color strategy was deliberate: white space at 90%, brand color at 10%. This ratio ensured the interface felt premium and uncluttered important for corporate banking users who work in the platform daily — while maintaining strong brand presence at the moments that mattered. The brand color appeared on primary actions, key financial data, and product identifiers never as background or decoration.
The Arabic-first approach shaped component decisions throughout. For a Kuwaiti corporate banking audience, Arabic was the primary language not a translation of the English interface. Typography choices, hierarchy patterns, and reading flow were designed for Arabic first and adapted for English, rather than the reverse.
"White space 90%, brand color 10%. Premium restraint for daily-use corporate banking. Arabic-first hierarchy not a mirrored translation."
The Solution
A coherent Islamic banking digital ecosystem built on a design system adopted across the entire bank.
Corporate Banking App : Streamlined and Compliant
Account management, national and international transfers, credit and debit card management, and Sharia-compliant financial products including Murabaha and Mudarabah journeys. Clean layouts with clear font hierarchy for domestic and foreign account navigation. Financial product applications designed to accurately represent Islamic contract structures while remaining intuitive for corporate users.
"Sharia compliance embedded in the journey architecture, not bolted on. The contract structure is visible, accurate, and still scannable for a corporate user reviewing it under time pressure."
Flexible Murabaha Product : Transparent by design
The Murabaha product was one of the most significant design challenges: a sales contract where the bank purchases an asset and sells it to the customer at a disclosed fixed profit margin. The design had to make the contract structure visible and accurate without overwhelming users with regulatory language. Profit margin displayed as a fixed amount. Contract terms surfaced at the confirmation step. Sharia compliance acknowledgment integrated into the acceptance flow not as a checkbox, but as a meaningful review moment.
Corporate Website : Brand and Conversion
Public-facing corporate banking website aligned with the redesigned visual language. Product pages explaining Islamic banking products in terms accessible to businesses encountering Sharia-compliant banking for the first time. Contact and inquiry flows optimized for corporate prospect conversion.
RM Portal : Relationship Manager Workbench
Internal-facing portal for Boubyan Bank's Relationship Managers. Account visibility, client management, and action workflows designed for the specific operational needs of RMs serving corporate clients consistent with the corporate app's visual language but adapted for internal workflow requirements.
Msa3ed Digital Assistant
Visual redesign of Boubyan Bank's Mas3ed chatbot interface. The redesign covered the chat UI, conversation state presentation, and multilingual display patterns for Arabic and English interactions. The UX and conversation flows were not changed the engagement covered visual and interaction execution only.
Design System : Bank-wide adoption
Atomic Design system built for corporate banking, adopted across the entire Boubyan Bank brand. Foundation file covering colors, typography, icons, illustrations, shadows, and spacing. English and Arabic toolkits with consistent component naming across both. All design files linked to toolkits for automatic propagation of updates. The system's adoption extending beyond the digital product to retail banking, branch materials, and events is the outcome that defines its success: it became institutional infrastructure, not just a product asset.
"Built for corporate banking. Adopted across the institution. The design system became Boubyan Bank's digital design standard."
Impact
Best Islamic Digital Bank Global · 5 consecutive years · award active during engagement
Play Store: 4.6 · App Store: 4.5
Design system adopted bank-wide corporate banking, retail banking, branch materials, events
14-month engagement · corporate app, website, RM portal, chatbot redesigned cohesively
Sharia-compliant product journeys designed for a domain the team encountered for the first time
The Best Islamic Digital Bank award sustained over five consecutive years, active during this engagement reflects an institution whose digital experience was consistently recognized as the benchmark in Islamic banking globally. The design work contributed to maintaining that standard through a major redesign cycle, modernizing the visual language and expanding the digital ecosystem without losing the institutional credibility the award recognized.
The design system outcome exceeded the original scope. A component library built for corporate banking becoming the design standard across the entire bank retail, branches, events is the kind of systems impact that Principal-level design work is measured by. It was adopted not because it was mandated but because it was good enough to generalize.
Reflection
What this project taught me about designing in unfamiliar domains
Domain understanding is not a prerequisite for design. It's an input that has to be built in parallel with the work itself. The Murabaha and Mudarabah learning curve on this project was the design challenge not just background context. Designers who treat domain learning as something to do before the design starts miss the fact that understanding and designing are often the same process. The discipline is staying in the grooming sessions and product walkthroughs, not just the design reviews.
What the design system taught me
A design system succeeds when other teams adopt it voluntarily not when it's enforced. The Boubyan Bank system was adopted by retail, branches, and events teams who had no obligation to use it. That adoption happened because the system was architecturally sound enough to generalize and practically useful enough to be worth the migration. Building for adoption rather than compliance is a different design target, and it's the more demanding one.
What I'd do differently
Start the bilingual system validation earlier. Arabic typography, RTL hierarchy, and financial terminology conventions were handled at component level throughout but the validation of Arabic-first decisions with native Arabic speakers happened later in the engagement than it should have. For a Kuwaiti banking audience where Arabic is the primary language, that validation should begin at the moodboard stage, not after high-fidelity screens are in progress.
What this engagement taught me about senior design work
Senior design work is not just execution quality. It's the investment in understanding what you're executing against. The Islamic banking domain required that investment explicitly there was no way to fake it. Every screen that touched a Sharia-compliant product had to be grounded in an understanding of the contract structure. That grounding was the difference between UI execution and design leadership, and it's a discipline I carry into every domain I haven't worked in before.