Role
Primary designer
Duration
2024–2025
Company
Sahl
Skills
#
UX strategy
#
design system
#
fintech
Overview
Sahl helps people manage all their household payments in one place. The goal was to turn a fragmented payment landscape into one seamless experience that saves time and reduces anxiety.
The problem: Inconsistent service flows and overwhelming navigation caused high drop-off and confusion. The existing system couldn’t scale with Sahl’s growing list of services.
My role: I designed a consistent navigation pattern and a set of reusable components the team could scale with, working with one other designer, and a PM.
About Sahl
5M+ active users ·
200+ services ·
#1 fintech app in Egypt
Process
DISCOVER
Usability observations and alignment sessions with Customer Success
DEFINE
Strategy board and core obstacles
IDEATE
Unified UX patterns and scalable systems
DESIGN
Standardized UI components and a bilingual experience
TEST
Validated with Customer Success alignment and available funnel data
Strategy Board
These were the targets we set going in — not results we claim.
Problem
Fragmented dropdowns and inconsistent first screens across 200+ service flows created confusion and high drop-off.
Objective
Standardize the user journey and unify navigation logic for all household payments, while supporting rapid service expansion.
Customer Segment
Existing Sahl users and new digital adopters in Egypt looking for simpler payment experiences.
Success Measure
Less first-screen drop-off and faster time-to-action for top services.
Goals
Fewer user errors, fewer Customer Success tickets, faster implementation cycles, more user confidence.
Research
I worked from three sources: ongoing collaboration with Customer Success (recurring complaints, edge cases, friction moments), competitor analysis, and usability observations.
Key finding — navigation and provider identification: Services used inconsistent first-screen logic and long text-only dropdowns. Without visual cues like logos, users struggled to identify providers, leading to wrong selections and early exits.
The resulting pattern: logo-first selection, alphabetical ordering, searchable lists — one navigation pattern across 200+ services, fewer selection errors.
Sitemap
The map covered every entry point into the app: sign in/sign up, and every service category beneath it — mobile, internet, landline, gaming, education, donations, and general bills. For each, I traced the full payment path down to the final screen, and kept a separate log of error states and edge cases alongside a running notes sheet of insights worth solving systemically rather than fixing one flow at a time.
Wireframes & Early Concepts
I sketched three core patterns before touching high fidelity:
Bundle purchase: mobile → operator → service → choose bundle
Top-up: mobile → operator → top-up type → amount → pay
Bill enquiry: mobile → operator → bills → bill info → select bill(s) → pay
I also explored a separate donations flow (search/recents/full list → selected cause → pay) and tested an alternate NFC-based top-up path for smart meters, flagging open questions directly on the sketches — like whether to auto-select a service when there was only one option, or drop unnecessary fields depending on the entry point.
Scaling the pattern: Donations, Education & Gaming
Donations, Education, and Gaming vouchers all suffered from the same core problem as telecom — long text-only dropdowns, no visual cues, and anxiety at the payment step. So all three got the same treatment, built from the same components:
Giving meant a phone-number field and one long text dropdown of charities — no logos, no search, no discovery.
Three ways in. Recents — "Donate Again" repeats a frequent contribution in a single tap, removing friction from habit-based giving. Spotlight — prominent placement for urgent and seasonal causes, like Ramadan Iftar campaigns, that adapts to what the moment needs. All — every charity, logo-first, searchable, alphabetical.
Education Services: New
Gaming Vouchers: New
Telecom Services
The Problem
Telecom covers mobile, landline, and internet. Each has up to 5 providers (Vodafone, Orange, e& (Etisalat), WE, Nour), and each provider offers different payment types. Every service started on a different first screen.
Every step needed its own screen, with noticeable loading in between
Internet used a different structure than mobile
Landline asked users to pick an operator when only one existed
The Solution
Logo-first selection: Searchable, alphabetical, logo-based provider lists.
Dynamic content: Payment types appear based on the selected provider.
Consistent UX: The same interaction pattern across all telecom services.
The Impact
Fewer re-entries during provider selection
Fewer steps to complete a payment
Less confusion through instant provider recognition
Faster provider lookup through search
Telecom Services: Old
Telecom Services: New
Giving meant a phone-number field and one long text dropdown of charities — no logos, no search, no discovery.
Design System & Scalability
I moved the team from ad-hoc UI to a structured design language, so new services could launch using standard components.
Long-list navigation: Alphabetical, searchable, logo-first lists for large provider directories.
Recall Card: A verification component used across most services to prevent errors at the final step.
Info cards: In-flow guidance that helps users find IDs and meter numbers.
Data collection rules: Unified input validation and formatting across all service types.
The Recall Card
It reduces refund and reversal requests by catching errors before payment is confirmed, and it's used across telecom, utilities, education, and donations.
01
Real-Time Validation
Distinguishes ambiguous characters (1/l, 0/O) in vouchers and requires regional store selection to prevent redemption errors.
02
Identity Confirmation
Info cards guide users to their student ID, and searchable lists replace complex dropdowns for 15+ institutions.
03
Friction as a Feature
An intentional pause for verification that prevents costly reversals and builds user confidence.
Recall Card: present in every flow
Outcome
Scalability: Rigid, hard-coded flows became dynamic, searchable structures ready for rapid growth.
Trust: Anxiety-inducing inputs became verified transactions with fewer errors, through the Recall Card.
Efficiency: Clear self-serve navigation helped reduce the load on support.
By the numbers: 1 navigation pattern and 4 standardized user flows across 200+ services, 80+ providers, 15+ institutions.
A note on measurement: As an early-stage startup, we had limited analytics in place, so impact reflects Customer Success feedback and the funnel signals we could gather.
Go deeper
Information architecture — Structuring 200+ services for intuitive discovery.
Wireframes and early concepts — Hand-sketched flows to test consistent patterns.
Donations — Spotlight campaigns and one-tap repeat giving.
Education — Clearer guidance, fewer wrong entries.
Gaming vouchers — Preventing redemption errors.
Internet and landline — Same problem, same pattern.