Redesigning Fintech App UI

MisPay, a Saudi-based fintech company, approached me to redesign their “Shop now, pay later” mobile application. The app allows users to split payments with 0% interest and no hidden fees. My task involved implementing new brand guidelines, fixing broken user flows, and creating a seamless experience in both English and Arabic. This case study explores how I tackled cross-cultural design challenges while enhancing the app’s functionality.

{ The Challenge }

The roadblock revealed:

The existing MisPay app faced several critical issues that impacted user experience:

  • Fragmented User Journeys: Key flows were broken, particularly in payment scheduling and account management
  • Inconsistent Brand Application: Visual language lacked cohesion across the app
  • Cultural Context Gaps: The interface didn’t fully address local UAE user expectations and behaviors
  • Bilingual Interface Problems: The Arabic version suffered from poor translation implementation and inconsistent RTL (Right-to-Left) layouts.

 

The dual language requirement presented unique challenges for information hierarchy, navigation patterns, and visual balance while maintaining the same functionality across both language versions.

Discovery and Approach

I began with a comprehensive assessment of the existing application, documenting pain points and opportunities and my approach centered on three principles: Create a consistent experience across both languages, Respect cultural context while maintaining usability and, Establish clear visual hierarchy that works bidirectionally

Flow Analysis
I mapped the current user journeys, identifying critical breakpoints in the payment selection, checkout, and account management processes.
Cultural Research
I studied UAE-specific user behaviors and expectations for financial applications, noting important cultural nuances around payment preferences and financial terminology.
Bilingual UX Audit
I conducted a detailed comparison between English and Arabic versions, documenting inconsistencies in translation, layout, and functionality.

{ Solution Design }

Flow Restructuring

I redesigned key user flows with particular focus on:

  1. Simplified Onboarding: Reduced steps from 7 to 4 while maintaining security requirements.

  2. Intuitive Payment Selection: Created a visual payment scheduler that clearly communicated installment dates.

  3. Account Management: Redesigned the dashboard to prioritize payment status and upcoming obligations.

Edge Case Solutions

I identified and addressed several edge cases previously overlooked:

  1. Payment Failures: Designed clear recovery paths for declined transactions.

  2. Partial Payments: Created interface for managing partial payment scenarios.

  3. Multiple Active Plans: Developed a consolidated view for users managing multiple payment plans.

Cultural Adaptations

To better serve UAE users, I implemented:

Local Calendar Integration
Support for both Gregorian and Hijri calendars
Cultural Visual Cues
Used culturally resonant imagery and metaphors
Regional Payment Methods
Prioritized locally preferred payment options

Bilingual Design Solutions

For the Arabic version, I went beyond mere translation to create a truly localized experience:

  1. True RTL Design: Completely mirrored navigation, interaction patterns, and visual elements.

  2. Typography Hierarchy: Selected appropriate Arabic typefaces with proper size relationships.

  3. Iconography Review: Ensured all icons were culturally appropriate and functionally clear in both languages.

  4. Contextual Adaptations: Adjusted content layout to accommodate Arabic’s typically longer text strings.

Results and Learnings

Enhanced User Experience

Clearer payment schedules and account management

Cultural Relevance

Better alignment with UAE users’ expectations and preferences

Cohesive Brand Image

Consistent application of new brand guidelines across both language versions

Beyond Translation

True localization requires rethinking interaction models, not just translating text

Cultural Context

Financial applications require special attention to local attitudes about money and payment

Design Flexibility

Creating systems that work across languages requires anticipating layout challenges early