Website redesign · Case study

CP — Comboios de Portugal

A redesign of the CP website, focused on making ticket search and purchase faster, clearer and easier on any device.

Type
Website redesign
Team
Pedro Costa, Rafael Medeiros
Scope
Research, wireframes, UI
Platforms
Desktop & mobile
CP redesign desktop homepage: green header, 'Horários e Preços' search card over a photo of two trains, quick links, a service notice and the Passe Ferroviário Verde banner
CP redesign search results: Braga to Guimarães trains listed as cards with departure and arrival times, service type, price and a Comprar button
CP redesign mobile homepage: 'Horários e Preços' search form, quick-link tiles, a service notice and the 'Todas as viagens no seu bolso' banner
The goal

Modernise the CP digital experience

Make the CP website more intuitive, accessible and user-centred, with a focus on mobility and fast ticket purchase.

Research

What the interviews told us

  1. 01Too much information

    Users described the current site as confusing and badly organised, and said they felt lost while navigating.

  2. 02Paying is the pain point

    Searching for trips works well; the ticket purchase and payment step was called frustrating.

  3. 03Mostly on desktop

    Most interviewees use the site on a computer, so the desktop flow had to be excellent and the mobile one simpler.

  4. 04The basics, up front

    Tickets, destinations, timetables and strike notices on the homepage: the essential pack, without the noise.

  5. 05FlixBus as the benchmark

    FlixBus was mentioned again and again as the transport site people find clear and easy to use.

  6. 06Keep the brand

    The strong green and white contrast was seen as recognisable and worth keeping.

Structure

Wireframes

Style guide

Colour & type

#188239
#3BAA66
#D9F2E3
#F8F9F5
#FFFFFF
#4A4A4A
#1C1C1C

Typeface: Ubuntu — Light, Regular, Medium, Bold

Final design

Desktop

Search results for Braga to Guimarães with train cards, prices and Comprar buttons
Search results
Passenger information form with class selection, ticket and billing details and PayPal, Visa and MB Way
Passenger & payment
Next trains page with departures marked on time in green or delayed in yellow
Next trains
Discounts and advantages page with a Douro train banner and three icon columns
Discounts & advantages
Final design

Mobile

Mobile homepage with the search form and quick links
Homepage
Mobile search results with train cards
Results
Mobile passenger information and payment methods
Passenger & payment
Mobile next trains list with delay status
Next trains
Next case studyGrupo Érre