Skip to content
ALI HAITHAM·TECH·responds in <1h
  • Homestart here
  • Workcase studies, projects
  • Serviceswhat I will build for you
  • Writingessays, series
  • Traincourses, labs, cohorts
  • Aboutthe engineer behind this site
Sign inStart a project
ALI HAITHAM · TECH
  • Home↗
  • Work↗
  • Services↗
  • Writing↗
  • Train↗
  • About↗
Sign inStart a project
Online
ALI HAITHAM·TECH

Engineering studio. Damascus, GMT+3.

aliyosef.online

Studio

  • Work
  • Writing
  • Training
  • About
  • Contact me

Portal

  • Sign in
  • Open a ticket
  • Track project
  • My account

Resources

  • Docs
  • Status
  • Changelog
  • Brand kit
  • Privacy
  • Terms

Newsletter

Field notes and tech news. Weekly. No fluff.

Free. Unsubscribe anytime.

Find me elsewhere
© 2026 Ali Haitham Yosef. All rights reserved.Hand-built in React 19. No frameworks of frameworks.Last deployed · 2026-05-08All systems operational
Case 142026Product design, app development and identity

Fadel

An Arabic and English travel experience for buses, flights, hotels, rental cars and ferries, from search to seat selection and a demo ticket.

RoleProduct design, app development and identity
Year2026
StackReact Native, Expo, TypeScript, Expo Router, Zustand, Reanimated, i18next
Overview

About the project.

Fadel combines an interactive five-service traveler app, a complete visual identity and an operating study for a Syrian travel and hospitality ecosystem. This case study covers search, comparison, seats, checkout, tickets, account and support, then separates identity deliverables from a study proposing five role-specific apps and an independent local guide. The current traveler app is a local frontend prototype with demo inventory, payment and authentication; the expanded operating apps are a studied proposal, not released services.

Challenge

What we walked into.

Each travel service needs different information: a bus seat, an airport and cabin class, hotel child ages, car pickup times or ferry vehicle dimensions. The challenge was to unify the experience without forcing those different requirements into one inaccurate search form.

Approach

What we did.

I separated search drafts by service and carried selections into results and checkout. Bus cards expand into trip details and seating in place; one checkout brings together passengers, contact details, itinerary and demo payment choices. Physical cabin positions stay consistent when the interface switches direction.

Outcome

What it became.

Connected deliverables include an Arabic/English traveler prototype, a 57-page public identity guide and a 48-page strategic/operating study with editable assets and templates. Interactive journeys and design/study artifacts are delivered; live inventory, payment, authentication and the proposed operational apps require separate implementation, integration and acceptance.

IndustryTravel and mobility
TypeMobile application with web preview
Timeline2026 · interactive frontend phase
Why this was hard

What was actually broken.

Preserve the differences between travel services while giving users a consistent understanding of their selections and next step.

Engineering challenges

The hard surface area.

  • 01Five services with independent search drafts.
  • 02Distinguishing real airport and port endpoints from ground-only destinations.
  • 03Keeping driver, door and seat positions stable across RTL and LTR.
  • 04A connected checkout with meaningful date and itinerary validation.
  • 05Clearly separating a functional demo from an operational booking service.
Capabilities and workflows

What the project includes

01Traveler app and five services02Comparison, booking and ticket03Account, communication and help04Experience and motion05Identity and design deliverables06Ecosystem study and proposed apps

Traveler app and five services

01

Traveler app: five distinct journeys

Travelers enter one home screen and choose buses, flights, hotels, rental cars or ferries. Each service has its own fields and in-memory draft, so exploring flights does not overwrite a hotel room allocation. Selected criteria follow the traveler into results and checkout. Draft retention covers navigation within the session, not cloud storage or recovery after the process closes.

02

Buses: route search to booking card

Travelers select origin, destination, date and passenger count, then compare operators, departure and arrival times, journey duration and sample fare. Dates can be changed directly in results or through search. Booking expands the cabin inside the selected result, keeping the itinerary visible while seats are chosen before checkout. Schedules, fares and availability are interactive sample data.

03

Flights: airports, passenger types and cabin

Airport-aware search accepts Arabic and English destination names and IATA codes. Travelers choose one-way or return travel, adults, children, infants and cabin class. The criteria remain visible in results and checkout for review. Choosing a cabin is an implemented search control; it neither reprices sample inventory nor confirms that a real airline can supply that cabin.

04

Multi-city flights

Up to four flight legs can be prepared, each with its own airports and date. Dates must follow a chronological sequence. Results let the traveler select a leg for independent comparison and demo checkout. This illustrates multi-stop business or family travel without claiming a combined ticket, protected connection or integrated multi-airline reservation.

05

Hotels: rooms and guest allocation

Users choose a destination and check-in/out dates, then configure up to six rooms with adults and the age of every child assigned to each room. Room and guest totals carry through results and checkout, preserving the needs of families or groups. Checkout must follow check-in by at least one day. Displayed room inventory, pricing and stay conditions remain illustrative.

06

Cars: pickup and return logistics

Drivers provide pickup and return locations, dates, times and age. They can return to the same location or select a different one; same-location mode keeps the return location aligned with pickup. These details appear in results and checkout, and return time must follow pickup. The current app does not reserve a live fleet or perform operational driver-eligibility checks.

07

Ferries: passengers and an accompanying vehicle

Travelers select an available demo port route, one-way or return travel and passenger categories. An optional vehicle has a type, length and height, with positive-dimension validation and a visible request summary. This distinguishes foot passengers from travelers carrying a car. The limited sample port inventory does not establish carrier acceptance, a real timetable or vehicle pricing.

Comparison, booking and ticket

08

Results, sorting and provider filters

Results show the available sample count and offer recommended, cheapest and fastest sorting plus a provider filter. Fastest sorting uses elapsed duration instead of alphabetic duration text. An explicit empty state appears when a destination has no demo inventory. Previous/next-day controls and search editing let users refine a comparison before entering passenger details.

09

Offer details before committing

An offer card exposes provider, itinerary, price, amenities and sample conditions during comparison. Provider names, times and feature text are localized. Icons clarify USB charging, Wi-Fi, water, baggage, air conditioning and seating when present in the offer data. This makes the selection understandable without presenting fixture amenities or policies as verified supplier commitments.

10

Seats: an inline horizontal cabin

The bus cabin displays driver, doors and available, occupied and selected seats with distinct recorded states. Travelers can scroll horizontally, select the required quantity and confirm. Physical positions remain stable between Arabic and English. TV and refrigerator fixtures appear when supplied by the example layout; neither company-specific fleet layouts nor live availability are verified.

11

One connected checkout

Checkout combines offer summary, seats, itinerary, traveler fields, contact details, payment choice and terms acceptance. Traveler forms and sample price quantities depend on service type, including room quantities for hotels. An expandable summary and return-to-booking action keep choices reviewable. Progress indicators connect comparison, seats and checkout, while one clear final action completes the demonstration.

12

Validation that leads users to the problem

Checkout validates names, phone, optional email, seat selection, payment choice, terms and search criteria. Failed submission scrolls to the relevant section, focuses the field and announces the error for assistive technology. Local busy state prevents repeated confirmation. These are input and interaction safeguards, not server-side identity verification or payment processing.

13

Syrian payment choices: a local interaction model

Checkout presents Syriatel Cash, MTN Cash, Sham Cash and Syrian bank options with recognizable identities. Users select one method and continue to demo success. No transfer or provider call occurs and no payment partnership is asserted. The account payment-method screen contains a sample card presentation rather than a wallet or a production card vault.

14

Success and the visual ticket

Completing the form leads to a success state and access to trips. The ticket presents provider, route, times, date, passenger or room count, seats, amenities, total and reference. A QR encodes structured sample booking information to demonstrate presentation at travel time. The example reference and QR are not a valid carrier reservation or boarding authorization.

15

My Trips and booking detail navigation

Upcoming and past tabs separate the trip experience. Upcoming travel uses a compact card that opens the full ticket; the past tab supplies an empty state and a route back to search. Trip details retain the main navigation and a reliable return path. This currently illustrates a sample booking rather than a cloud history or operational cancellation/refund service.

Account, communication and help

16

Account, sign-in and registration

The account supports a guest view and demo session with phone or email sign-in/registration. Syrian numbers are normalized across Arabic digits and local/international forms. Password length and registration confirmation are checked. Credentials are neither transmitted nor persisted; the flow demonstrates account usability ahead of a real authentication integration.

17

Verification and authentication states

The phone flow models a verification code, resend countdown, expiry, attempt limits, errors and a completion state that opens a demo session. Users can return to input, exit the flow and sign out. These interaction states help review a future account experience, but no SMS is sent and phone ownership is not verified.

18

Saved travelers and account navigation

The account brings together travelers, payment methods, notifications, language, help and settings. The traveler screen shows a sample profile and an add-name form with basic validation, illustrating faster family bookings. The current form does not create a persistent traveler directory, and its edit affordance is not a complete profile-management implementation.

19

Campaigns, codes and sharing

Campaign cards present selectable codes that users can copy or share through the device share interface. A fallback message handles unavailable sharing. The flow demonstrates saving and sharing an offer, while explicitly identifying the campaigns as illustrative. No active coupon engine or financial booking discount is implemented.

20

Notifications and communication preferences

The notification center illustrates a promotion, trip reminder and booking confirmation, each with its own icon, time and message. Settings expose session-local switches for price alerts and marketing, plus language and introduction replay. These are modeled UI states rather than a functioning push-delivery service or scheduled reminder engine.

21

Help, searchable FAQs and chat

Travelers can filter frequently asked questions, expand answers or open the chat preview. Chat supplies a greeting and accepts locally rendered messages so the conversation and keyboard layout can be reviewed. Phone and email actions disclose that support is not connected. Messages do not reach an agent, and the sample availability copy does not establish a real service-level commitment.

Experience and motion

22

First-use introduction

Three illustrated screens introduce comparison, seat choice and the five services with previous, next, skip and start actions. Completion is stored locally to avoid repeating the introduction, and settings can replay it. Storage failure does not block entry. Arabic and English copy and descriptive image labels support the same onboarding journey.

23

Ticket-strip opening motion

A crimson opening uses ticket perforations, staggered Fadel letter pivots and the apricot circle before resolving to the original wordmark. Local Reanimated/SVG motion replays after more than five continuous background minutes while keeping the route and forms mounted. Reduced motion uses a static alternative, and asset waiting is bounded. Compilation is not a substitute for final physical-device performance testing.

24

Language, calendar and accessible layouts

Arabic RTL and English LTR include saved language choice, Tajawal typography and system-based light/dark appearance. Destination search uses service-appropriate names/codes; the calendar handles month lengths, leap dates and past-date rejection. Checkout adapts to small widths and enlarged text, with screen-reader labels, safe areas and Android back behavior while preserving the physical cabin orientation.

Identity and design deliverables

25

Identity: a 57-page public brand guide

The work extends beyond app screens into a public guide covering the selected wordmark, crimson/apricot/graphite/ivory palette, typography, voice, spacing and states. Correspondence, print, apparel, environmental and digital applications form one coherent package. Representative scenes demonstrate the identity; they are not evidence of an operating fleet or branches.

26

Digital identity and correspondence deliverables

The package includes Arabic/English correspondence, email and Word templates, visual assets, app-icon exports and designed screen/notification/loading/empty/error/offline states. Hugeicons coverage distinguishes runtime symbols from additional design assets, alongside reusable color and measurement references. Store mockups and designed screens are explicitly distinct from runtime screenshots and implemented software behavior.

Ecosystem study and proposed apps

27

Operating study: five apps and a separate guide — proposed

A 48-page strategic and operating study defines a Syrian ecosystem comprising the traveler app, ticket office, QR validation, hotel reception, room management and an independent local guide. It identifies each audience, workflow, dependencies and data boundaries. The study and design are delivered artifacts; the five operational applications are not a released software suite in the current version.

28

Ticket-office app — proposed study scope

The proposed desktop/tablet workflow serves ticket sellers: choose a departure, inspect seats, capture essential traveler information, price, issue and deliver a paper ticket or link. It covers staff accounts, branches, cash desks, permissions, discount/cancellation approval and shift reconciliation. The study also specifies duplicate-seat prevention and limits on selling without live inventory; these operations are not implemented in the current prototype.

29

Field QR-validation app — proposed

The study specifies a boarding tool for transport staff: scan, read an unambiguous booking state and perform only the authorized action. Validity, cancellation, repeat use and auditability are considered without embedding the full traveler profile in the QR. Offline verification limits and freshness are addressed. This is proposed passenger-booking validation, not cargo tracking or an already connected scanner in the current app.

30

Hotel-reception app — proposed

The proposed reception workflow locates a booking, matches authorized guest/booking data and arrival status, then handles arrival or exceptions according to role. It can connect to an authorized hotel system or controlled reservation source with clear provenance. Its intended value is faster, less ambiguous reception; connected hotel front-desk operations are not part of the current mobile prototype.

31

Room availability and pricing app — proposed

The study describes room calendars, availability, rates and selling restrictions with approval and review permissions. It calls for a single inventory source, night-level reservations and stale-data disclosure to reduce overselling. The unit could operate independently and connect distribution channels under later agreements. This is a proposed operating design, not an implemented channel manager.

32

Independent local discovery guide — proposed

The project proposes discovery of hotels, restaurants and destinations after arrival, supported by place records, verified information, updates and editorial ownership. It can run without booking or mandatory accounts or connect to a journey when useful. The study separates editorial content from traveler identity data and specifies content governance rather than merely listing static places.

33

Product independence and governance — study deliverable

The study separates contracts, pricing, releases, support and data by product so units can be purchased independently or connected gradually. It covers partner onboarding, organization permissions, sensitive-action separation, support escalation, data minimization, retention and recovery. Government identity integration and national hosting remain conditional on legal authority, agreements and acceptance testing; no established official partnership or access is claimed.

34

Launch, economics and field validation — study deliverable

The study covers distribution through offices, stations, hotels and arrival points, geographic priorities and phased launches with decision gates. It distinguishes booking value from platform revenue, contribution margin and operating costs. Traveler, carrier and hotel interview questions and operating-quality measures support evidence-based decisions. Proposed targets and assumptions are not presented as achieved revenue, users or commercial results.

System architecture

How the system is wired.

App and navigation
React Native, Expo, Expo Router and TypeScript connect search, results, seats, checkout and account screens.
Booking state
Zustand keeps service drafts and selections separate from reusable demo fixtures.
Language and themes
i18next, Arabic and English resources, semantic colors and Tajawal typography.
Motion and lists
Reanimated, Gesture Handler and FlashList support transitions, interaction and result lists.
Why this stack

The decisions behind each choice.

Expo + React Native

  • Shared mobile experience across Android and iOS with a web preview.
  • Integrated navigation, fonts, safe areas and linking.

Zustand

  • Independent service drafts carry selections through details and checkout.

i18next + Tajawal

  • Bilingual content and logical interface direction without mirroring physical seat positions.
Security &amp; reliability

How the platform stays trustworthy.

  • ✓Authentication, SMS and payments are frontend simulations rather than real identity or financial services.
  • ✓No credentials or operational records are included in the portfolio.
  • ✓The case study distinguishes sample data from real provider conditions.
Scalability

Built to scale, not just to ship.

Separating screens, booking state and fixtures prepares the frontend for provider integrations; it does not imply those integrations are already implemented.

  • A separate inventory adapter per service.
  • Future server-side authentication, payments and ticket validation.
  • Destination and localization expansion without replacing the main journey.
Lessons learned

What the build taught us.

  • A clear next step matters more than placing every option on one screen.
  • Seat maps represent physical space and should not mirror with language.
  • A complete frontend prototype is distinct from a commercially integrated travel service.
Visuals

From the project.

Trip details and demo QR ticket; not a valid travel document.
Five-service travel search in the frontend preview.
Inline bus-seat selection with an illustrative cabin layout.
Checkout shows the itinerary and selected seat before passenger, identity and contact fields, followed by the total and demo confirmation action. Fields are empty; no real passenger records are shown.
Checkout payment choices show Syrian wallets and banks with an explicit demo-only notice. Selection demonstrates the flow and does not transfer or collect money.
A demo stay detail shows an image, location, check-in/out dates and times, room count and continuation action. The displayed name, rating and price are sample UI content, not a verified commercial offer.
The operating-study ecosystem: traveller, ticket office, field validation, hotel reception and room management, plus an independent discovery guide. These are proposed study components, not proof that all apps launched. Official-looking visual elements do not establish government endorsement.
An overview of Fadel identity-guide pages and brand applications. Scenes illustrate design usage and are not documentation of an operating branch network or commercial fleet.
Continue reading
Previous caseCyberVNext caseHAEIFIN
Build with us

Want something like this?

I take on a small number of engagements each quarter. Tell me what you have in mind.

Start the conversation→