What was my contribution?
Startup process
When the device was turned on, instead of a blank screen, a step-by-step guide was displayed showing the steps involved. Update and synchronization processes were clarified, ensuring the driver could start working safely.Payment scenarios
To ensure the system provides a clear, immediate response when a passenger swipes their card, all statuses are categorized using color and large typography. Scenario categories such as full, discounted, free, or insufficient funds are designed for passengers to understand at a glance.Shift & tour flow
From shift start to lap finish, every step of the process is supported by a progress bar and confirmation screens. License checks, route selection, and lap summaries are organized to provide step-by-step guidance.Errors & exceptions
Uncertainty was eliminated during critical moments such as out of service, invalid card, or insufficient funds. Clear, reassuring displays were designed for both passengers and drivers, featuring large icons and simple messages.
Home Screen
The screen is split in two: the top for device settings and the bottom for card/balance transactions. This arrangement allows field personnel to see at a glance which action to initiate and where during peak usage periods.
Home Screen & Trip Tracking
Users can see their balance, active card, and remaining stops/times during their journey at a glance. Transparency and speed are at the heart of the app.
The home screen isn't uniform; it's diversified based on workplace preferences and user scenarios. In addition to the simple badge-based version, alternatives have also been designed that include interactive gamification elements and allow login without creating an account. Furthermore, illustrations can vary by city; for example, for Ankara, the screen displays city landmarks.
Transition to Hi-Fi Prototypes
Following the wireframing phase, I designed high-fidelity prototypes of the mobile app. At this stage, the design system, typography, and iconography decisions were also finalized.
How did I contribute?
As the process progressed, these wireframes were revised with UX-focused comments from me.
Balance information has been made more visible.
Favorites and alarms have been added to provide quick access to frequently used lines.
The payment and balance loading flow has been simplified and made more understandable.
Separate screens were defined for success/failure scenarios .
The wireframe examples I have today are updated intermediate versions based on my comments.
Mobile App: From Wireframe to Hi-Fi
Where Did We Start?
The first wireframes for the mobile app were created by business analysts. These drawings accurately represented the system's business logic but were missing details critical to the user experience. For example:
Transactions were only configured through the happy path; scenarios such as failed payment or validation errors were not handled.
The visual hierarchy and flows lacked the guidance the user needed at critical moments.
From this point on, I started to develop the design by making user-focused comments on the wireframes.
Onboarding & Account Management
In the early streams, the registration process was very long and complicated. I simplified the steps and made the verification screens clearer to prevent users from getting lost.
Process steps have been shortened.
Splash screen
Onboarding screens
(brief information)
Registration / Login selection
Create an account
(name, surname, TR ID/telephone, e-mail)
SMS verification
Redirect to home screen
Looking for Design Language
Early Concept Studies
After determining my priorities from research and comments, I prepared early visual concepts of the application at the client's request.
Aim:
Letting stakeholders imagine early on what the implementation will look like
Testing the color palette, typography, iconography and illustration language,
To prepare the groundwork for the UI Kit and final designs that I will create in the future by collecting feedback.
At this stage, in particular:
I tried out home screen variants with different color and typography combinations.
I worked on different layouts for card & balance screens.
I developed an illustration-heavy concept for the map/line display.
Among the concepts, accessible versions with higher contrast and supported by illustrations stood out. These outcomes later shaped the visual identity of the gamification scenario and CO₂ tracking displays.
How did I map the user journey?
In the first phase of the project, basic flows were developed by business analysts. These flows primarily described the system's business logic. I revisited these flows and added a user experience perspective.
I simplified the complex steps, added the missing experiences, and designed the motivation layer.
This transformed analyst flows focused on business logic into comprehensive journeys that prioritized user experience, addressed errors, and boosted motivation. These flows became a common reference for the design and software teams throughout the project.
*To examine the flow diagram at the back in detail:
Based on these comments, I determined my own design priorities:
Speed at critical moments
People were complaining most about the delays in the upload and validation steps while trying to get to work or school. That's why I thought the design should make these processes as fast and simple as possible .
Open and trustworthy communication
Comments like "The money was deducted from the account but not transferred to the card" indicated that the user wasn't receiving clear feedback. Therefore, I assumed I needed to add clear error messages that clearly indicated the transaction results.
Increasing user motivation
The app's sole use as a top-up tool was a barrier to regular use. Therefore, I thought that trip history, a badge/points system, and campaign screens could make the app more appealing.
Making sustainability visible
Making the environmental impact of choosing public transport over private vehicles visible could provide extra motivation for users. Therefore, I designed scenarios that would demonstrate CO₂ savings at the end of the journey .
The application brings all the functions together in one place, but knowing that speed and clarity are more important at critical moments, I always proceeded with these priorities in mind in the design.
Insights from User Reviews
I scoured Google Play, the App Store, and Ekşi Sözlük for reviews of public transportation apps. The most common complaints arose during critical moments in daily life: rushing to work, taking the subway, waiting at the bus stop. These were precisely the moments when users expected a fast and reliable experience from the app.
Loading & Payment Problems
I loaded money onto my card, it was deducted from my account but not transferred to my card.” (Istanbulkart)
Slowness of Validation
Scanning my QR code at the turnstile takes too long, and the people behind me are grumbling. (Istanbulkart)
Offline Scenarios
There's no internet connection in the metro, and the QR code won't open. This makes the app useless. (Istanbulkart)
Line & Voyage Information
It's very difficult to find the stops, the search doesn't give correct results. (On EGO Mobile)
Lack of Motivation
I only open the app to top up my balance, it doesn't do anything else. (Istanbulkart)
What can we learn from other applications?
No comprehensive user research was conducted at the beginning of the project. I benchmarked competing applications (local and international public transportation solutions) on my own initiative.
With this study, I took the strengths of different applications as a reference for my own solution and identified the points I saw as lacking as areas for development.
Moovit
The approach of presenting multiple transportation options (bus, metro, bike) on a single screen made me think of map + stop integration.
Belbim / İstanbulkart
The simplicity of the card balance and loading screens was noteworthy, but gamification was lacking. I saw this as an opportunity for improvement.
Martı
The quick QR verification experience was quite successful. I aimed to provide similar speed and simplicity on the validation screen.
Google Maps Transit
Stop and line search was powerful, but payment integration was lacking. I felt it was critical to combine these two functions into one app.
Ekoşehir
In public transport; a holistic fare collection system for passengers, drivers and operations
Summary
Ekoşehir was designed as an end-to-end ecosystem for public transportation — covering ticketing, balance management, and validation in one holistic experience. I was involved at every stage of the process, from research and benchmarking to user flows, wireframes, high-fidelity designs, prototyping, and the development of a design system (colors, typography, components).
Beyond the passenger mobile app, I also designed the POS and validator device interfaces, the card management dashboard, and the web-based administration tools. I contributed to illustrations, animations, and promotional materials to ensure a consistent visual language across the entire ecosystem.
I began the project as the sole designer, later taking on the role of design team lead, guiding a team of three. My focus throughout was on simplifying complex workflows, enhancing accessibility, and motivating users through gamification. Unlike many other city transport apps, Ekoşehir introduced a gamification framework that made trip tracking and CO₂ reduction both visible and rewarding.
Project Type
Mobile passenger application, POS & validator device interfaces, Card Processing Center (web dashboard), Core Management Application (web dashboard)
Role
UX / UI Designer @Ekinoks Software
Timeline
2022 - 2023
End-to-end design · Design system · Team leadership
Why was there a need for a new experience in public transport?
Context
Card payments and traditional validation methods are still common in public transportation in Türkiye. However, digital solutions such as mobile wallets, QR codes, and contactless payments are rapidly gaining ground. Municipalities and private operators are adopting electronic fare collection systems to improve user experience and speed up transactions. Yet most existing applications focused solely on balance top-ups and validation; they lacked features that motivated users or made public transport more appealing than private cars.
Restrictions
Because there was no investment in comprehensive UX research, user needs weren’t captured through formal studies. I addressed the gap with desk research and competitive benchmarking, and synthesized public user feedback (e.g., app-store reviews, forums) into prioritized design hypotheses.
Problem
For passengers
There is a waste of time and confusion during ticket purchase, balance viewing and validation.
For the driver/operator:
Complex screens and lack of error management on POS and validator devices slow down operations.
For the back office:
Process density is high; filtering, reporting and error tracking are insufficient in existing dashboards.
What did we want to change in this project?
-
Increasing transaction speed → Making the passenger's ticket/QR creation and validation process as short and hassle-free as possible.
-
Reducing the error rate → Designing screen flows that will minimize misreading, offline status, and user errors that frequently occur in POS and validator devices.
-
Promoting sustainability → Making public transport more attractive with trip tracking, points and carbon footprint visibility.
-
Increasing usage frequency → Encouraging passengers to use the app more regularly through gamification and campaign screens.
-
Strengthening accessibility → Ensuring that different user groups can use devices comfortably with high contrast, large typography, and single action-focused designs.
-
Supporting operational efficiency → Facilitating transaction filtering, reporting, and error tracking through the Card Transaction Center dashboard.
Card Management & Loading
In the early streams, the registration process was very long and complicated. I simplified the steps and made the verification screens clearer to prevent users from getting lost.
I eliminated any post-processing uncertainties.
Home screen → “Add card”
Entering card information
(card number, name)
Card list
(seeing more than one card)
Balance display
Select “Load balance”
Amount selection
Payment method selection (card etc.)
Transaction confirmation screen
Success → balance update
Success → balance update
Validation & Journey Experience
The slowness of QR scanning at the turnstile was the most frustrating aspect. I reduced the validation process to a single action in the flow and clearly separated pass/fail scenarios.
“The QR code at the turnstile is reading very slowly, the people behind me are grumbling.”
Create QR/NFC from home screen
Have the validator read it
Successful validation → green confirmation screen
Failed validation → error message (e.g. insufficient balance)
Failed validation → error message (e.g. insufficient balance)
Line & Voyage Information
Searching for stops was superficial in the first feeds. I added a search bar, favorites, and a map view to make it easier for users to access them quickly.
Favorites → one-click access to frequently used stops.
Home screen → “Search Stop/Line”
Access the search bar
Search result: stop list
Option to add a favorite stop
Line detail screen:
stop list + departure times
Map view
(line/stop location)
Gamification & Notifications
The biggest problem was opening the app just to top up your balance. I added screens to the feeds that showcased trip history, the badge/points system, and CO₂ reductions. This turned the app into a daily motivator.
Added motivation and sustainability layer.
Ana ekran → “Görevler / Kampanyalar”
Points and badge screen
Daily/weekly tasks list
Campaign/reward screen
CO₂ reduction display in trip history
Notifications: campaigns, announcements, alerts
Adding Cards & Loading Balance
Balance loading steps have been simplified. Clear feedback is provided after the transaction with success/failure screens, ensuring trust.
QR / NFC Payment
At critical moments at the turnstile, the user was left with a single action. Large typography and contrasting colors made validation results instantly understandable.
Line & Stop Search
One of the most critical and complex parts of the app was the search flow. Users can search not only for bus routes, but also for subway lines, stops, and even top-up vendors. Filtering options allow users to quickly narrow down their results. Detailed screens provide live information: how many minutes before the next bus arrives, the distance to the stop, and occupancy information.
When using this feature for the first time, the user is guided through a short onboarding flow. Quick tips step by step explain the functionality of the search bar, filters, and live information fields, allowing the user to quickly become familiar with a complex function.
Favorites
Frequently used stops can be added to favorites for quick access. This feature simplifies the user's daily journey.
Alarms
Users can set an alarm for their favorite stops and receive notifications before the bus arrives, enabling them to plan their journey stress-free. This feature makes the app a proactive travel companion.
Gamification / Use-Earn
You earn points and badges for your trips, and CO₂ reductions become visible through your choice of public transport. The app is not only functional but also motivating.
Screens that complement the main flows
These screens cover the application's complementary scenarios. Features like instructed balance loading and alarms provide proactive support to the user, while edge case screens (error, empty state, loading) are designed to provide clear feedback. Design system components are designed for reusability in POS/validator and dashboard interfaces, as well as mobile.
Hamburger Menu & Profile → information architecture and layout.
Popups → success/failure, error, empty state, loading.
Payment Method Selection → manual and automatic payment with instructions.
Balance Loading with Instructions → the solution that prevents surprise balance runs out.
Component System
I started the project with a Material Design-based structure, but I customized all components to align with the brand's visual identity and usage scenarios. The color palette, typography, button variants, input fields, card structures, and status components (success, error, empty state) were redefined.
This approach ensured consistent design language across the mobile app, POS/validator, and dashboard interfaces. Furthermore, documenting the component system in Figma facilitated team collaboration and increased design speed in subsequent iterations.
POS Device: Dealer & Operator Interface
Context
The POS device is a critical tool for vendors, operators, and drivers in the public transportation infrastructure. The goal was to provide not only balance loading but also operational functions such as subscriptions, visa processing, card activation, transaction cancellations, and end-of-day reports in a simple and reliable manner.
Where did we start?
In early versions, the device interface was largely function-focused, with screen density and unclear error/feedback flows. Users (whether dealership employees or field personnel) needed clear, at-a-glance screens and consistent button behaviors to quickly perform these operations.
What was my contribution?
During my time working there, I made the following improvements to POS device interfaces:
Balance Loading & Payment
I've consolidated credit card, cash, and automatic top-up flows into a single process. At the end of the transaction, the user is presented with success/failure feedback screens. This eliminates uncertainty and significantly shortens processing time.
Automatic Loading
I simplified the automatic top-up instruction, a common mistake among users, with icon buttons and explanatory text on the limit and amount selection screens. This way, users clearly understand the limit and amount they've selected, eliminating the risk of error.
Card Activation & Visa
I designed step-by-step guidance screens for new card activation and subscription verification processes. At the end of the process, the user is presented with separate "success" and "failure" screens. This allows field workers to immediately and without any doubt know whether the transaction has been completed or if an error has occurred.
Validator Device Interface
Validator devices manage various scenarios, from the driver starting their shift to the moment a passenger swipes their card. My design goal was to make these moments as clear, fast, and understandable for both driver and passenger. From splash screens and payment scenarios to shift flow and error situations, I simplified and visualized all critical steps.
Card Processing Center
One of the most critical components of the public transportation infrastructure was the back-end management of user card applications and transactions. From student or discount card applications to replacements for lost cards, from fee collection to card printing and activation, the entire process was tracked through a single system.
However, because this process was both multi-step and high-volume, employees were struggling with complex forms, messy document uploads, and unclear process flows.
My goal was to transform this hectic process into a more transparent and user-friendly experience. By breaking down the workflow into steps, simplifying forms, and adding clear feedback screens at critical points (fee, document, printing, activation), I reduced staff workload and increased process traceability.
What was my contribution?
Step by step flow editing
I've divided the entire application process (application → ID → documents → fee → printing → activation) into separate screens so the user can clearly see which stage they are in.Simplification of forms
I grouped ID and card information fields to speed up data entry. I removed unnecessary fields and added autofill options.Document approval
I made it possible to check documents (student certificate, ID, passport photo) faster with preview and one-click approval/rejection buttons.Fee process
I designed clear screens so that the process automatically stops or is rejected in the scenario where the service fee is not paid.Printing and activation
I added error screens during card printing and activation with the POS device; I arranged the retry flows to guide the user.Logging & traceability
I added transaction history for all applications, allowing for retrospective tracking of the process.
Management Application (Dashboard)
The public transportation system required a dashboard that would streamline the daily work of not only passengers but also municipal and company managers. This panel would track, manage, and report POS, validator, line, stop, vehicle, and driver data.
What was my contribution?
I made the metric cards on the home page more readable and with a stronger visual hierarchy (active/passive device separation, ticket usage graphs).
I made location-based tracking easier by matching the lists with the map on the stop management screen.
I reduced the daily workload of managers by simplifying route drawings and update flows in line management.
In the general design, I aligned the color, typography and iconography with the Ekoşehir design system.
Key Takeaways
The Ekoşehir project was not only a process of designing for different devices, but also a process that provided a multidimensional experience.
From solo designer to team leader
I started the project as the sole designer. As the process progressed, I managed a team of three and ensured a consistent design language was established.Multi-device experience
By designing for four different interfaces, from the mobile application to the POS device, from the bus validator to the management dashboard, I experienced how the same system should be reflected on different user types.Design system development
Thanks to the component system I established by customizing the material base, I provided a flexible and consistent experience on every device.User-centered approach
I prioritized speed and clarity for passengers, ease of operation for drivers, transaction transparency for corporate staff, and traceability for managers.End-to-end process experience
I took an active role in all stages such as research, wireframe interpretation, hi-fi design, prototyping and testing.