Sayr

Overview

Product

Transit companion app

Client

Personal / freelance product

Role

Product Designer — solo, with a contract developer

Timeline

4 months, Aug – Dec 2024

Responsibilities

Concept & research, Information architecture, Bilingual UI design (Arabic RTL + English), Interaction design, Usability testing

Problem

Doha's metro and bus network had no companion app worth trusting

Riders were stitching together trip plans from a mix of the operator's own app, screenshots shared in group chats, and guesswork at the platform. Live arrival times existed as raw data but nowhere legible, and switching between metro and connecting bus routes meant leaving one app and opening another.

This was also a personal frustration — I rely on the network myself, and the gap between what the data could show and what riders could actually see was the whole reason to build this.

Challenge

One interface, two directions of reading

Qatar's transit riders move fluidly between Arabic and English, and the app needed to feel native in both — not a translated English app, and not an Arabic app with English as an afterthought. Every layout had to work mirrored, including asymmetric elements like the route timeline and the live-arrival countdown.

As a solo project with one contract developer, the design also had to be disciplined enough to build fast: no component that couldn't earn its complexity against the timeline.

Approach

Research

Rode the network at different times of day logging every point of friction, and interviewed regular riders in both languages about how they currently plan trips.

User flows

Designed around three core jobs — plan a trip, check live arrivals, save a regular route — resisting the urge to add features the research didn't ask for.

Bilingual UI

Built the entire layout system mirror-safe from the first wireframe, so RTL was never a retrofit applied to an LTR design.

Prototype & testing

Tested with Arabic-first and English-first riders separately, catching a route-timeline reading-direction issue neither language group would have surfaced alone.

Anatomy

A bilingual layout system, mirrored layer by layer

Scroll to take the screen apart ↓

01Surface
02Imagery
03Cards & containers
04Typography
05Controls
06Navigation

01Surface
02Imagery
03Cards & containers
04Typography
05Controls
06Navigation

Process

Research

Rider interviews at stations narrowed the product to three jobs: plan, track, pay.

01
Research
Rider interviews at stations narrowed the product to three jobs: plan, track, pay.
02
Wireframe
Every wireframe drawn twice — left-to-right and right-to-left — from the very first sketch.
03
Prototype
Plan → track → ride flows prototyped and tested on the move, one-handed.
04
UI
High-contrast live states legible in bright sun, in Arabic and English.
05
Final
A calm companion for Doha's metro and buses, equally at home in either language.