← All work
2016 · True Adv

Metropolin

Making Israel's metropolitan public transport actually usable

Role
UX & UI Designer
Type
Website
Client
Metropolin
Scope
Research to UI
Platform
Desktop + Mobile
A note, looking back

This was designed in Photoshop. Yes, Photoshop - layers, flat exports, PDFs handed off by email. I'm basically a design dinosaur. A dinosaur who somehow ended up building her own portfolio in a live conversation with an AI. Back then I could only fantasize about a creative-technical partner like that. That partner turned out to be Claude.

Merav Shaked, 2026

Metropolin is Israel's second-largest public transport company, serving the metropolitan area with hundreds of bus lines. The existing website made it genuinely hard to do the one thing users needed: figure out how to get somewhere. I led this project end-to-end at True Adv, from user research and competitive analysis through information architecture, wireframes for both desktop and mobile, and the full visual design.

The Challenge
2nd
Largest metropolitan transport provider in Israel
3
Distinct user types, each needing a different search experience
2
Platforms redesigned from scratch: desktop and mobile
User Research
Omer
Omer, 31
Software developer, Ra'anana
החכמולוג
The Optimizer

Commutes to Tel Aviv daily. Always has three browser tabs open and won't board a bus without comparing his options first.

  • Compare multiple routes side by side
  • Distance, real-time arrival, estimated time, price
  • Maps, route explanations, live updates
40 minutes to Tel Aviv?! Hold on, let me check other options.
Ruth
Ruth, 55
Retired teacher, Herzliya
שאינו יודע לשאול
The First-Timer

Takes the bus a few times a year to visit family. Every trip feels new. She needs to be walked through the whole thing.

  • Full A-to-B route description
  • Step-by-step: stop, walking, continuation
  • Maps, clear explanations, fare info
Excuse me, how do I get to the Intermunicipal Center?
Dana
Dana, 24
Student, Ra'anana
המתעדכן
The Commuter

Line 347, every morning, no exceptions. She knows her route cold, she just needs to know if the bus is actually on time.

  • Real-time arrival for her specific line
  • Weekly timetable at a glance
  • No searching, just live status and times
I hate wasting time waiting for a late bus.

The survey gave us 400 real responses in two weeks. The data made one thing clear: users were arriving at the same site with completely different needs. The Optimizer wants to evaluate options and pick the best. The First-Timer needs to be walked through the whole journey. The Commuter already knows their line and just wants to know if the bus is on time. Each persona shaped a different entry point in the redesigned navigation.

Information Architecture
Route Planner (by origin + destination)
Text autocomplete for stops
Search by departure or arrival time
Compare routes with/without transfers
Real-time arrival at nearest stop
Walking time + map to stop
Breadcrumb navigation throughout
Timetable Search (by line number)
Line number autocomplete with direction
Daily or weekly timetable view
Stop selection along the route
Real-time updates per line
Departure/arrival time table
Previous/next bus navigation
Site Map
Homepage metropolin.co.il Lines and Schedules Line Page Real-time Timetable By day / stop Search Primary entry point Route Planner Origin to Destination By Line Number search Route Options Direct + transfers Line Page Real-time + map Updates and Accessibility Line Updates Accessible Trips Contact and Support Lost and Found Customer Service Primary redesign focus Existing pages
Design System
Color Palette
#f5911e
#eb7d23
#faaf5f
#464646
#a5a5a5
#ebebeb
Typography
H1 / 20px Bold
Page Title
H2 / 18px Regular
Section Heading
H3 / 16px Regular
Subsection
Body / 16px Regular
Open Sans Hebrew
Interactive Elements
Plan a Route Plan a Route (hover)

Buttons: Open Sans Hebrew ExtraBold, 24px, radius 30px, #f5911e. Hover state adds inner shadow at 7px in #eb7d23.

Persona Icons
The Optimizer persona icon
The Optimizer
The Commuter persona icon
The Commuter
The First-Timer persona icon
The First-Timer
UX Process

At first, for budget reasons, interviews with users were not possible. So I demanded to distribute a poll. Everyone was skeptical, but I insisted. The survey was distributed as a simple banner on the old site. The response was high, and within two weeks, about 400 users responded.

Metropolin UX process: survey results and user personas

From there, I began to draw conclusions about the motives and needs of our primary personas.

Search UX Flow
SEARCH Single bar with text autocomplete Search by Line Number LINE PAGE → Real-time arrival → Nearest stop + distance → Route details + map → Line updates → Connects to daily timetable DAILY TIMETABLE → Select day of week → Switch direction → Stop-level schedule Search by Destination No results → Redirect to Moovit GPS available? YES Shows current address (GPS) User can edit if needed NO Asks user for origin Where are you coming from? Route Options Direct routes + with transfers LINE ROUTE → Real-time arrival → Nearest stop → Step-by-step walking directions → Full stop list → Line updates
Metropolin website full design
Dana's User Flow
Dana, 24 Student, Ra'anana D STEP 1 Homepage "Is my bus on time today? Line 347, as always." STEP 2 Search Bar Types "347", autocomplete shows Line 347 clicks Search by Line Number STEP 3 Line 347 Page ✓ Real-time arrival at nearest stop ✓ Walking time to stop → Can tap for full route + map "Next bus in 8 minutes. Perfect, I can still make it." Enough info? YES Goal achieved Heads to the bus stop NO Timetable Checks full schedule by day/stop Goal achieved Plans her morning commute Dana checks her daily commute line Real-time data answers her question Two outcomes, both resolved
Final Design
Metropolin mobile design mockup
Interaction Walkthrough
Metropolin website animation Metropolin website interaction
Outcome

The redesign replaced a confusing tangle of pages with two clear entry points: plan a route by origin and destination, or look up a line directly by number. Every screen answered a real question a real user had. The visual system brought Metropolin's orange identity forward in a way that felt modern and confident, not just corporate.