My Framer Site

CASE STUDY

1. Vision

2. Catalyst

3. Competitive Landscape

4. Scenarios

5. Legacy vs Redesign

6. Design System (in progress)

7. Handoff

OASA RedesignAthens Transit AppRedesigning Public Transport Navigation for Seamless Urban Mobility
Συγκοινωνίες Αθηνών ΟΑΣΑ Α.Ε.

Current State

App functionality problems

“The map function often fails to load or shows incorrect routes.”

Unreliable Real-Time Tracking

“No real-time bus locations… this is the one feature that you should have already fixed.”

Outdated and old UI

“Needs improvement and alignment with the current OASA system.”

Lack of communication

“There is no way to submit a request or get information about route issues.

Vision

Creating a user-friendly, accurate, and efficient public transportation app.

What

Predictive, minimal, live-first experience.

How

Auto-detect nearby stops on launch

2–3 optimal route options (Time / Changes / Walk)

Live map with delay alerts + vehicle proximity

Clean UI: large touch targets, color-coded lines

Seamless ATH.ENA ticket loading

Impact Goals

Route Planning Time60s36s-40%

Route Adoption60%80%+33%

False Vehicle ReportsBaseline-30%-30%

App Store Rating2.5 stars3.5 stars+1.0

Research & Wireframes

Prototyping & Testing

Polish & Launch

Sources: Google Play¹ App Store² Reddit³ Online Articles⁴

1 User reviews, Google Play Store, 20252 User reviews, App Store, 20253 r/athens, r/greece, r/publictransit, 2024–20254 Transit app benchmarks, UX case studies, 2024–2025

THE CATALYST

Why 2025 demands a new OASA

Athens urban mobility is accelerating; the app must keep pace.

Tap2Ride launched in Jan 2025 — users can pay and validate rides via NFC, but current app lacks a smooth flow for this feature.
1.3 stars to user revolt

A redesign is no longer optional — it is essential for modernizing public transport and improving user trust.

GOALS & KPIs

LABEL

METRIC

BEFORE

AFTER

ABANDONMENT

users fleeing route flow

62%

<20%

SPEED

open to route selected

60s

36s

STABILITY

crashes + rating

1.3 stars

greater than or equal to 4.0 stars

TRUST

accurate ETAs reported

60%

greater than or equal to 85%

ADOPTION

Tap2Ride usage

20%

greater than or equal to 50%

ROLE & TIMELINE

Solo Designer + AI Co-Pilot | 10-Week Sprint

RESEARCH

1–2

DEFINE

3–4

DESIGN

5–7

TEST

8–9

DELIVER

Human + Data

AI Prototyping

Agile Loops

OASA¹ App Store²

1 Official 2025 announcements2 User reviews, 2025

Live Tracking

Multi-Modal

Ticketing

Personalization

Ads

Offline Fail

Location Lag

Paywalls

Opportunity: No ads. Free core. Instant GPS.

Real-Time

Multi-City

Eco Stats

Customization

Clutter

Overload

Niche Stats

Premium

Opportunity: Clean UI. Top routes only. Free + optional pro.

Official

Local Data

ATH.ENA

Free

Ghost Buses

Crashes

Outdated UI

No Feedback

Opportunity: Fix reliability. Modernize. Add reporting.

Sources: Google Play Reviews¹, App Store², Moovit/Citymapper Article pages³

1User reviews, 20252App Store, 20253Article pages, 2025

REAL-TIME TRACKING

See bus. Know ETA. Trust it.

1. Open to Map

2. Search stop

3. Live bus + ETA

4. Save route

No ghost buses. Full visibility.

TRIP PLANNING

Best route. No Google.

1. Search destination

2. Immediate routes

3. In-app nav

4. Reverse swap

5. Rate accuracy

Native. Fast. Athens-first.

ISSUE REPORTING

Report. Be heard. See fix.

1. Tap settings

2. Rate and write comment

3. Submit

4. Get response

Accountability. Trust built.

ALERTS

Know before you go.

1. Info about problematic routes

2. Alternative suggestions

3. List of news

4. Push notifications

Proactive. Zero wait.

SAVED ROUTES

Daily commute = 1 tap.

1. Search to Save

2. Home favorites

3. Tap to Live

4. Auto-update

5. Go

Smooth. Personal.

TAP2RIDE

Top up digitally

1. Tap tickets tab

2. Purchase ticket online

3. NFC arrow load up physical card

4. Tap2Ride easily

Seamless. Cashless.

STAGE

EMOTION

OPPORTUNITY

TOUCHPOINT

IMPACT

AWARENESS

Curiosity

Rebranding and modernizing OASA design language

Offline / App / UI

Engagement

TRACKING

Relief / Trust

Live bus movement

Live Map

Trust

PLANNING

Satisfaction

2 input fields

Route Planner

Speed

ON-ROUTE

Empowered

Route alert + live map

App / Map / Alerts

Control

ARRIVAL

Loyalty

Live map + feedback input

Post-Ride

Retention

LEGACY vs. REDESIGN

Comparing Athens public transit flows pre-2025 and after redesign.

The original OASA app, despite being functional, struggled with outdated UI, unstable real-time tracking, and poor accessibility for tourists. The 2025 redesign introduces a modernized, predictive system that focuses on live-first usability, Tap2Ride integration, and simplified navigation.

BEFORE

AFTER

Features scattered on homescreen

REAL-TIME GPS FIX

Structured IA; first view shows map + nearby buses + route planning

Route planner opens externally in Google Maps

SIMPLIFIED FLOW

Route planner in-app + live map + reduced taps

News option isn’t working

LIVE UPDATES

News always updated in dedicated screen + push notifications

No topping-up system

NFC TOP-UP

Dedicated flow for topping up NFC balance

Have to go into menu to find nearby stops; no map to confirm

ACCESSIBLE TYPE

Dynamic modal updating based on location and input

No editable favorite routes; no history of searched routes

PERSONALIZED SHORTCUTS

Both supported

UI DESIGN SYSTEM EVOLUTION

1 Unified System to 13-Page Deck

A scalable library for the redesign of Athens transit app that acts as the single source of truth, ensuring consistency across the system.

Tokens & Palette

Color Tokens

Page Background

Card Start

Card End

Modal

Pill

Accent

Metro M2

Metro M3

Typography

32px – Inter 700

24px – Inter 600

16px – Inter 500

14px – Inter 500

12px – Inter 600

10px – Inter 600

Spacing
4px to 8px to 12px to 16px to 20px to 24px to 32px

Radius
8px to 12px to 16px to 20px

Elevation
0 6px 12px rgba(0,0,0,0.3)

Light Mode (Future)

Background: #F8FAFC
Text: #1A1A1A

Dark Mode (Default)

Background: #0E131F
Text: #FFFFFF

Component Vault

Εισιτήριο 90 Λεπτών

Έτοιμο για Φόρτιση

Λήγει: 25 Οκτ 2025

Ticket Card

3 states

Σημαντική Ειδοποίηση

Τύπος: Απεργία

Ώρα: 12:30

Επηρεαζόμενες διαδρομές: Γραμμή 1, Γραμμή 2

Υπάρχει απεργία στις μεταφορές σήμερα. Αναμένεται καθυστέρηση σε όλες τις γραμμές.

Δείτε περισσότερα

News Card

2 states

891

Πάρε το 891

Pill

4 states

Modal Sheet

3 states

Button

3 states

Βρίσκεσαι στην Πλατεία Ομόνοιας

Input

3 states

Radio

1 state

Brand Guidelines Deck

OASAAthens Urban Transport Organization S.A.
Tokens, Components, and Motion

Page 1 / 13

OverviewPURPOSE
A sustainable, adaptive, and scalable UI system for Athens public transit — built to evolve with real-world usage, dark mode by default, and 100% token-driven.
SCOPE
Colors • Typography • Spacing • Elevation • Components • Motion • Accessibility • Export Formats
USAGE
Web: CSS Variables
Mobile: React Native + Tokens
Figma: Design Tokens Plugin
Dev: design-tokens.json
Tokens
Components
Motion
Usage
Token-driven flow

Page 2 / 13

Core ValuesReliability
Systems that work. Every time. No excuses.
Speed
Fast decisions. Fast loading. Fast transit.
Clarity
No confusion. Clear routes. Clear UI.
Every decision, every pixel, every line of code must serve these three values.

Page 3 / 13

Color Palette
Primary
#4A90E2
CTA, Links, Active States
Metro M2
#FE373A
Line M2, Alerts, Warnings
Metro M3
#4BB58A
Line M3, Success, Go
Success
#E3811D
Validation, Positive Feedback
Error
#FF6B6B
Errors, Validation, Critical

                            Usage Rules:

                            • Primary (#4A90E2) for all CTAs and interactive elements

                            • Metro M2/M3 only for line-specific branding

                            • Success/Error for form feedback only

                            • Never use for text on dark backgrounds without contrast check
                        

Page 4 / 13

Border Radius8 / 12 / 16 / 20 only
No 6px, 10px, 18px, or arbitrary values.
8
8px
--radius-sm
8px
12
12px
--radius-md
12px
16
16px
--radius-lg
16px
20
20px
--radius-xl
20px

                            FORBIDDEN

                            • 6px, 10px, 18px, 22px, etc.

                            • Arbitrary values in code

                            • Use only: var(--radius-lg)
                        

                            Usage:

                            • 8px → Pills, Tags

                            • 12px → Cards, Inputs

                            • 16px → Modals, Sheets

                            • 20px → Full Containers
                        

Page 5 / 13

Border Radius8 / 12 / 16 / 20 only
No 6px, 10px, 18px, or arbitrary values.
8
8px
--radius-sm
8px
12
12px
--radius-md
12px
16
16px
--radius-lg
16px
20
20px
--radius-xl
20px

                            FORBIDDEN

                            • 6px, 10px, 18px, 22px, etc.

                            • Arbitrary values in code

                            • Use only: var(--radius-lg)
                        

                            Usage:

                            • 8px → Pills, Tags

                            • 12px → Cards, Inputs

                            • 16px → Modals, Sheets

                            • 20px → Full Containers
                        

Page 6 / 13

Elevation3 Levels Only
sm: 0 2px 4px • md: 0 6px 12px • lg: 0 12px 24px
sm
Small
0 2px 4px
Hover, Focus, Cards
--shadow-sm
md
Medium
0 6px 12px
Floating Panels, Sheets
--shadow-md
lg
Large
0 12px 24px
Modals, Overlays, Popups
--shadow-lg

                            Usage:

                            • sm → Interactive states (hover, focus)

                            • md → Floating content (cards, drawers)

                            • lg → Modal dialogs, full-screen overlays

                            • Use var(--shadow-md) in CSS
                        

                            NO:

                            • Custom shadows (e.g. 0 4px 8px)

                            • Multiple shadows

                            • Arbitrary blur values
                        

Page 7 / 13

Dark ModeDEFAULT THEME • Always Dark
Background
#0E131F
Page, Screen
--color-background
Surface
#1B2232
Cards, Panels
--color-surface
Surface (Alt)
#181D2A
Inputs, Subtle Layers
--color-surface-alt
T
Text Primary
#FFFFFF
Headings, Body
--color-text-primary
Text Secondary
#A0A6B2
Labels, Captions
--color-text-secondary
Text Tertiary
#B0C4DE
Disabled, Hints
--color-text-tertiary
Primary Text – #FFFFFF
Secondary Text – #A0A6B2
Tertiary / Disabled – #B0C4DE

                            Rules:

                            • Dark Mode Only – No light mode

                            • Contrast ≥ 4.5:1 for all text

                            • Background = #0E131F on all screens

                            • Use var(--color-text-primary)
                        

                            NO LIGHT MODE

                            • Do not design or code light themes

                            • All apps must use dark mode

                            • Accessibility via contrast only
                        

Page 8 / 13

Light ModeFUTURE • Not Default
Background
#F8FAFC
Page, Screen
--color-background
S
Surface
#FFFFFF
Cards, Panels
--color-surface
Text Primary
#1A1A1A
Headings, Body
--color-text-primary
Text Secondary
#666666
Labels, Captions
--color-text-secondary
Primary Text – #1A1A1A
Secondary Text – #666666

                            Future Rules:

                            • Not active – Dark mode is default

                            • Planned for 2026

                            • Contrast ≥ 4.5:1 required

                            • Use var(--color-text-primary)
                        

                            NOT NOW

                            • Do not implement light mode

                            • All current apps must remain dark

                            • Light mode = future phase
                        

Page 9 / 13

TypographyPRIMARY
Inter – Google Fonts
Weights: 400, 500, 600, 700
SCALE
Aa
32px – Inter 700 • LH: 1.1
Aa
24px – Inter 600 • LH: 1.2
Aa
16px – Inter 500 • LH: 1.5
Aa
14px – Inter 500 • LH: 1.45
Aa
12px – Inter 600 • LH: 1.4
Aa
10px – Inter 600 • LH: 1.3

                            Use: Inter for all text.

                            Headings: 32–24px (600–700)

                            Body: 16–14px (500)

                            Captions: 12–10px (600)
                        

Page 10 / 13

Button StatesReal Button • 5 States
From MyTickets → "Φόρτιση στην Κάρτα" • Loading = Spinner
Default
bg: #1B2232
border: #2A3245
text: #FFF
sm
Hover
bg: #252C3F
border: #3A4358
text: #FFF
md
Pressed
bg: #151A28
border: #1F2535
text: #CCC
none
Disabled
bg: #111
border: #222
text: #666
none
Loading
bg: #1B2232
border: #2A3245
text: #FFF
spinner

                            Rules:

                            • Real component – From MyTickets

                            • Loading – Spinning ring (1s), #4A90E2

                            • Hover – Lighter bg + glow

                            • Pressed – Darker + scale down

                            • Disabled – #666 text, no interaction
                        

Page 11 / 13

Do’s & Don’tsTypography • Grid • Tokens
Consistency = Clarity
DO
Use Inter
Inter – Clean, modern
DON’T
Use Arial or system fonts
Arial – Outdated
DO
Follow 8px grid system
DON’T
Use random spacing
DO
Use token colors only
DON’T
Use random hex values
NO EXCEPTIONS
All apps must follow these rules.

Page 12 / 13

Thank YouOASA Design System v1.0
Built for clarity, speed, and reliability.
Solo Designer
stigna12@outlook.com
© 2025 • OASA • All Rights Reserved

Page 13 / 13

Motion Primer

Fill Toggle
duration: 0.3s • fps: 30
Path fill color transition on tap

Διαδρομές

Ζωντανός χάρτης

Εισιτήρια

Spring Glide
duration: ~0.5s • fps: 30
Active tab indicator with natural motion

Opacity Wave
duration: 1s • fps: 30
Sequential dot fade with group pulse

Το εισιτήριο μεταφέρθηκε επιτυχώς!

Το Εισιτήριο 90 Λεπτών είναι τώρα διαθέσιμο στην Ath.ena Κάρτα σου.

Draw + Bounce
duration: 0.8s • fps: 30
Circle pop + SVG stroke animation

823

Breathing Scale
duration: 1.1s • fps: 30
Subtle live indicator on moving bus

Height + Drag
duration: 0.25s • fps: 30
Resizable sheet with smooth collapse

Design System Handoff

All components, tokens, and motion guidelines delivered in a ready-to-use system for developers and the OASA team. Includes component variants, adaptive layouts, and exportable assets.

Figma

PDF

JSON Tokens

A

B

Legacy

Redesign

A/B Testing with Real Users

Planned A/B testing with real users to evaluate improvements in navigation, route planning, and live tracking. Tests will include multiple demographics: tourists, local commuters, students, and elderly riders.

8.5

Accessibility First

My next steps would be to run Axe and Lighthouse audits to catch contrast and focus issues, ensure all labels are clear, and verify that all elements — especially pills and buttons — meet the 4.5:1 contrast ratio. I’d continue testing and adjusting until the app is fully accessible for everyone.

Screen Reader

Axe + Lighthouse

Upcoming Desired Features

Traffic/Weather UI

Dynamic real-time indicators for route planning

English Version

Accessible interface for tourists

Eco-Optimized Motion

Smooth 30fps animations to reduce battery consumption

Scalability & Modular Growth

Architecture ready for future cities, new components, and new services

This design system sets a foundation for sustainable, user-centered public transit experiences. Continuous iterations, testing, and scaling will ensure OASA’s digital services remain adaptive, inclusive, and forward-looking.

OASA RedesignAthens Transit App

What

How

THE CATALYST

Why 2025 demands a new OASA

GOALS & KPIs

ROLE & TIMELINE

COMPETITIVE LANDSCAPE

MOOVIT

CITYMAPPER

OASA

USER JOURNEY FLOW

REAL-TIME TRACKING

TRIP PLANNING

ISSUE REPORTING

ALERTS

SAVED ROUTES

TAP2RIDE

LEGACY vs. REDESIGN

Tokens & Palette

Component Vault

Εισιτήριο 90 Λεπτών

Brand Guidelines Deck

OASA

Overview

Core Values

Color Palette

Border Radius

Border Radius

Elevation

Dark Mode

Light Mode

Typography

Button States

Do’s & Don’ts

Thank You

Motion Primer

Το εισιτήριο μεταφέρθηκε επιτυχώς!

LOOKING AHEAD

Design System Handoff

A/B Testing with Real Users

Accessibility First

Upcoming Desired Features

Traffic/Weather UI

English Version

Eco-Optimized Motion

Scalability & Modular Growth