DeutschBahn

Making DB Website

Intuitively Simple

Streamlined booking inputs and glanceable journey

Responsive Layout

Mobile-first structure optimized for all screen sizes

Project

Type

Solo Case Study

Scope

UX/UI Design

Platform

Responsive Web

Timeline

4 Weeks

Tool

Figma

My Role

Responsive Design

Website

Product design

UX/UI desgin

Overview

Reducing Cognitive Load through Information Layering

I simplified the initial search by showing only essential options and moving detailed filters to the next steps. To make information easier to catch, I replaced heavy text with images and icons while using a clear text hierarchy, ensuring users can process key data without feeling overwhelmed.

Mobile-First Layout for Effortless Scanning

I replaced the wide, cluttered horizontal layout with a compact vertical design that works perfectly on all screen sizes. This change creates a natural reading path from top to bottom, allowing mobile users to check their journey and pricing without constant side-to-side scrolling.

Layout Grid

1200px Content Grid for Scalable Layouts

To support devices between 1280 and 1920px, I added balanced left and right margins to keep the layout comfortable on wide screens. With responsiveness in mind, all content stays within a 1200px container and snaps into consistent column widths, so the structure remains stable across breakpoints.

Breakpoints

Adaptive Layout & Breakpoints

I arranged the content in a 4-column layout that naturally transitions into a vertical alignment on mobile devices. This structure ensures a consistent experience as it adapts across different breakpoints.

Revamp 01

Simplifying the First Step: Minimalist Booking Widget

The Problem: Forcing users to fill out numerous filters from the start creates a high hurdle, leading to decision fatigue and drop-offs.

The Solution: I redesigned the initial search widget to focus only on essential criteria. By delaying advanced filters to the secondary search results page, I lowered the entry barrier and allowed users to start their journey instantly.

Mobile-First & Responsive Layout

The Problem: The legacy horizontal layout, cluttered with multiple columns and rows, suffered from poor readability. This was especially problematic on mobile devices, where most train bookings occur.

The Solution: I redesigned the widget into a narrow, vertical alignment. This streamlined structure naturally adapts to any screen size and ensures a clean, single-column scanning pattern that improves focus and speed for mobile users.

As-Is

To-Be

Revamp 02

Visual Cues for Faster Recognition

The Problem: A text-heavy interface and lack of visual variety made it difficult for users to distinguish between different travel options and countries at a glance.

The Solution: a "Visual-First" approach to accelerate the user’s decision-making process

Destination Imagery: Added photos for each listing to provide immediate context and make the options more engaging.

Intuitive Icons: Integrated country-specific icons into the filters, allowing users to identify destinations through visual shorthand rather than reading every label.

Refined Information Hierarchy & Interaction

The Problem: Essential details were hidden behind "Further Information" links, while repetitive, oversized red buttons created visual noise.

The Solution: I restructured the card layout to make key information, such as pricing and essential trip details, immediately visible. I also applied distinct font weights and refined the button styles to eliminate unnecessary clicks and improve overall scannability.

Revamp 03

Simplifying Itinerary Visualization

The Problem: The original design used simple bars that failed to clearly communicate transfer points and durations, making it difficult to grasp the full journey at a glance.

The Solution: I redesigned the itinerary into a unified timeline with intuitive icons and an integrated map. This approach provides immediate geographic context and makes complex journey data easier to digest.

Optimized Eye Path & Responsive Layout

The Problem: In the original layout, critical information like price and time were placed at opposite ends of the screen, causing an inefficient scanning path and poor mobile responsiveness.

The Solution: I unified all vital details into a compact, vertical-first layout. This creates a natural top-to-bottom reading flow and ensures a seamless experience across all screen sizes.