How do you redesign a national train schedule website used by millions—while enhancing the user journey?
Here’s my approach.
Overview
pkp-rozklad.pl, Poland’s official train schedule site, is widely used but suffers from outdated design and poor usability. This redesign modernizes the interface, improves usability, and enhances accessibility while preserving essential features.
Challenge
The main challenge was to modernize rozklad-pkp.pl and improve usability.
Key issues included:
Poor adaptation to modern screens
Lack of clarity when redirected to ticket sites
Hidden features like delay tracking
Inconsistent mobile experience
Outdated visual design
Goals
01 Simplify navigation and search
02 Refresh layout and visual style
03 Ensure a consistent experience across all platforms
04 Highlight valuable features
Role
UX/UI designer, researcher
Duration
150+ Hours
Key skills
UX design, UI design, research, UX writing
Tools
Figma, Chat GPT
Solution
The redesigned pkp-rozklad.pl website features:
01. Clear information about redirection to carrier websites for ticket purchases
02. Easy connection search
03. The site now displays the minimum ticket price
Research
Exploring the current pkp-rozklad.pl website
The desktop version appears to have been designed with smaller or outdated screen resolutions in mind.
Lack of language consistency – despite setting the interface to English, a key stop like the airport is still shown in Polish. Also, the “Important Information” section appears in Polish.
Overwhelming number of ads – visual clutter negatively impacts the user experience.
Search issues – no suggestions appear while typing, there’s no clear indication of the main (central) station, and the label “WARSZAWA-” in mobile results is confusing and unclear.
Inconsistent stop naming – in a three-leg trip example, station names vary in format. Additionally, the “Buy ticket” button appears only for the full trip, not for individual segments.
Mobile UI issue – in the mobile version, the stations entered by the user are displayed in grey text, which gives the impression that the fields are empty or still require input.
The user is redirected to a different website without any prior warning or clear indication.
Searching for a train on the original rozklad-pkp.pl website
Competitor analysis
Research Goals & Objectives
I want to understand the most frustrating or challenging moments in users’ journey so I can design solutions that directly address those pain points.
01. Identify Primary User Groups
02. Understand User Goals and Pain Points Across the Booking Journey
03. Understand user expectations for mobile train booking and the reasons behind mobile search behavior
Details:
6 interviewed
Age: 30-35
Different reasons and frequency for choosing trains as a means of transport
Key Takeaways from User Interviews
01 Clear Priorities
Users expect to see available seats early, and they value fast booking, transparent pricing, and a visual seat selector.
02 Booking Frustrations
Key problems include a lack of seat information, unclear train layouts, search flow errors, and app crashes.
03 Mobile Over Desktop
Most users avoid downloading apps. BLIK payment convenience makes mobile web their preferred choice.
04 Desired Extras
Users value Wi-Fi, real-time delay info, a multilingual UI, and a consistent experience across all devices.
05 User Segments
Research identified 3 key user segments: "Existing User," "New to the City," and "Travel Agent."
🚧 Obstacle for my project
Unfortunately, rozklad-pkp.pl redirects users to external carrier websites for ticket purchases, which means that seat selection is not available within the main booking flow. This option becomes accessible only after being redirected.
Define
User persona
Based on insights gathered during interviews, I was able to identify three distinct user groups: Existing User, New User to the City, and Travel Agent. In my project, I focused on the first two groups, as Travel Agents have different needs and, as professionals, typically do not use mobile devices to search for train schedules for their clients.
How might we enhance the mobile experience to enable users to quickly and easily find clear, comprehensive train schedule information supporting a seamless transition from planning to travel?
Ideate
Features Overview
The selection of features was limited by the capabilities of the system in which PKP operates; that is, the inability to purchase tickets directly on the PKP main website, which redirects users to the carriers’ sites to complete the purchase.
Must have
Clear and Concise Timetable View- Simple steps for renting a toy out, including selecting rental duration, pricing, and terms.
Filters- Easy-to-read results with departure, arrival, duration, and transfer details.
Real-Time Delays Status Updates
Third-Party Booking Integration with Clear CTAs- Direct users to relevant carrier ticket platforms with clearly labeled buttons.
Nice to have
Intelligent Suggestions- Show faster or cheaper alternative routes.
Multilingual Interface-Polish, English, and potentially German for international travelers.
CO₂ Savings or Eco Impact Info- Compare emissions vs. driving or flying.
User flow. How would the users navigate through main workflow?
Design
LOW FIDELITY WIREFRAMES
Defining the layout during early-stage exploration
-
Most voted for ver 1
Feedback: Version 1 offers a much clearer visual hierarchy.
-
Most voted for ver 2
Feedback: It’s more readable and has a layout similar to a flight booking page.
-
Most voted for ver 1
Feedback: Everything is visible right away, but where is the delay information?
#1 Usability Test: Key Findings
“Trip Details” and “CO2” don’t clearly communicate what info is inside.”
“ There’s no information about price.”
💡
Hold on!
And what about responsiveness?
Since this was my first experience with responsive design, I initially focused solely on low-fidelity wireframes for the mobile version, as interview feedback indicated that users accessed the mobile website much more frequently to search for trains. After consulting with my mentor, I recognized the importance of also incorporating desktop responsiveness into the project.
Since I was lacking low-fidelity wireframes for desktop screens, I developed both mobile and desktop wireframes for hi-fidelity stage and ensured the screens are responsive.
Redesign: UI Components & PKP Brand Adaptation
In this project, I developed a comprehensive design system tailored to the PKP brand identity. While maintaining the original PKP logo to preserve brand recognition, I adapted the color palette to reflect the company’s official colors more effectively. Additionally, I redesigned key UI components such as buttons, forms, and navigation elements to improve usability.
Evolving the Design: From Wireframes to Visual Identity
In the initial versions of the high-fidelity designs, I aimed to stay as close as possible to the original visual style of the PKP website. This approach helped ensure visual continuity and user familiarity, especially for returning users accustomed to PKP’s current interface.
💡Idea
Upfront Pricing: I introduced "from" pricing because interviews revealed it was a key factor in user decision-making, helping them quickly evaluate the attractiveness of a connection.
Dynamic Pricing: The price adjusts based on the number of passengers (adults, children, students) to provide a more accurate estimate.
Managing Expectations: The pricing is labeled "from" to set clear user expectations, as the final purchase is completed on the carrier's website where the price may still vary.
#2 Testing: High-Fidelity Wireframes in Action
Overview:
Ensure users can easily understand searching for a train connection, using filters and checking for delays.
For the purposes of the project and due to limited time, I only tested the mobile version.
Key Iterations
The Problem: My initial wireframes were missing a crucial feature—the ability to search by arrival time. The original website's "arrival by" option was also unclear to many users.
The Process: I decided to make this feature more visible and intuitive. After creating three different versions, I learned that having two separate input fields was confusing for users.
The Outcome: The final design (Version 3) successfully solved this problem by simplifying the search process. This project taught me a key lesson: great design comes from creating simple, clear solutions based on direct user and developer feedback.
Simplifying Search: I improved the search experience by only suggesting main stations, which simplifies the UI, reduces errors, and reflects common travel patterns.
Improving Readability: To increase scannability, I increased the font weight and size in the input fields, making key information easier to read.
Streamlined Layout: I redesigned the layout for a cleaner, more scannable feel. Visually separating promotions and footers reduces clutter, helping users focus on the most important content.
Essential Information: A yellow "Important Information" banner was added to quickly convey crucial updates, a feature essential to the original PKP site's functionality.
Improving Price Sorting: I added a sorting icon next to the price column, which made it easier for users to find the cheapest connections and reduced confusion from the default sorting.
Simplified Navigation: I replaced the date scroll bar with "Earlier trains" and "Later trains" buttons to better reflect how users browse for connections.
Enhanced Layout: I improved the layout so that long station names no longer break or shift, creating a cleaner and more stable interface.
Simpler UI: I removed the "Edit" button from the train details screen after seeing that users didn't interact with it. They preferred to just go back to the previous page to make changes, which taught me the value of simplifying the design.
Final Design
Reflections
This project was like a box of chocolates – every time I discovered something new. Sometimes it was interesting, and other times it required me to dedicate more time to properly 'chew' and 'digest' it. I learned a lot while preparing this project, primarily that good initial research is fundamental.
Also, designing responsive wireframes for both desktop and mobile so that everything was cohesive, aesthetic, and at the same time user-friendly, while also considering the specifics of the industry and remembering that I was only redesigning an existing website, not building it from scratch according to my own preferences.
Trade-offs I had to make
Functionality vs. Simplicity/Time: Initially, I wanted to add many new features, but I had to forgo some to maintain interface simplicity and meet the set timeframe.
Ideal Solution vs. Existing System Limitations: I had to adapt the design to local specifics and the capabilities of the existing website, instead of implementing ideal but unfeasible solutions.
All User Groups vs. Priority Groups: I decided to focus on "Existing User" and "New User to the City," so I did not delve deeply into addressing the needs of "Travel Agents."
What I liked about this project
I appreciated that this project allowed me to visit various travel websites as part of my research. I searched for exotic train connections and observed how different railway websites reflected the specific travel characteristics of various countries. I noticed that certain solutions, despite appealing to me on the original sites, on the original sites couldn’t be directly adapted to the Polish context, and the design had to adapt accordingly. (An example of this is the way hours or dates are recorded in English-speaking countries, or the abbreviations for cities where stations are located in the USA—in Poland, we don't use such abbreviations, which directly impacts the design of longer input fields.).
If I can do it again
Definitely, if I'm tasked with designing for both desktop and mobile,.I will approach both desktop and mobile more simultaneously in the future. In this project, I primarily focused on mobile because that's what the project mainly required of me, somewhat neglecting desktop. I later realized thatthis approach turned out to be less efficient.