thalys_thumbnail.jpg

Thalys webshop redesign

UX/UI design
 

Redesigning a popular train webshop based on visual analyses

WEBDESIGN

Time frame: 5 weeks | 1 day a week | 2015
Team: 2 students

Thalys is popular rail service which offers high quality high-speed train rides throughout Europe. However, its webshop is neither high quality nor high speed. So we redesigned it. Check out this page to find out how.

Currently the design of the Thalys webshop is quite outdated. Navigation through the webshop is entirely menu-based, meaning that the visitor must subsequently click through different menu-levels to find a specific item. Each page is built up of blocks of many different types of visual information.

For the redesign of the Thalys webshop we set the goal to align visual priority with content priority. The layout of the functional redesign is structured in order to create clear hierarchy levels in the types of information. The aesthetical redesign enhances this structure with use of:

  1. A grid throughout both pages;
  2. A limited colour scheme, consistently throughout both pages;
  3. Typography within one font family;
  4. A clear distinction between dynamic and static elements;

VIEW PROCESS

In this project we used visual analyses to understand how the current design was perceived by users. We used 3 different techniques: eyetracking, change blindness and visual search. I was responsible for concept development and wireframing and helped with the motion design.

For the eyetracking test we asked participants to perform a brief task and tracked their eye movements to see where they looked and in what order. This provided insight in which elements visually stood out.

In the change blindness test we showed participants alternating versions of the same page, with 1 element missing. We then asked the participants to click on this missing element and recorded their reaction time. This helped us analyse which elements are visually relevant for the user.

The third test was a visual search in which we asked particpants to find specific elements on the page and recorded their reaction time. This helped us understand how easily people could find certain elements.

The results of all the visual analyses and brief user interviews were used to identify design problems.

 
 These are screenshots of the current Thalys webshop. The homepage on the left and the destinations page on the right. A color coded menubar is used to provide visual structure.

These are screenshots of the current Thalys webshop. The homepage on the left and the destinations page on the right. A color coded menubar is used to provide visual structure.

 The eye tracking tests showed where people looked and in what order. These screenshots show where a participant looked at first glance of the webshop.

The eye tracking tests showed where people looked and in what order. These screenshots show where a participant looked at first glance of the webshop.

 For booking a train ride we differentiated four general types of users.  

For booking a train ride we differentiated four general types of users.  

 Since the current webshop lacked a clear navigation route we wanted to started with a strong functional concept. Based on the four user types and results of the visual analyses.

Since the current webshop lacked a clear navigation route we wanted to started with a strong functional concept. Based on the four user types and results of the visual analyses.

Styleguide_fullwidth-03.jpg
   
  
   
   
  
    
  
   Normal 
   0 
   
   
   
   
   
   false 
   false 
   false 
   
   NL 
   JA 
   X-NONE 
   
    
    
    
    
    
    
    
    
    
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
   
 
 /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
	mso-para-margin-top:0cm;
	mso-para-margin-right:0cm;
	mso-para-margin-bottom:10.0pt;
	mso-para-margin-left:0cm;
	line-height:115%;
	mso-pagination:widow-orphan;
	font-size:11.0pt;
	font-family:Calibri;
	mso-ascii-font-family:Calibri;
	mso-ascii-theme-font:minor-latin;
	mso-hansi-font-family:Calibri;
	mso-hansi-theme-font:minor-latin;
	mso-ansi-language:NL;}
 
  The redesign is based on navigation by scrolling, which fits a more modern webshop. The use of a strict grid ensures unity throughout the design.   
  
   
   
  
    
  
   Normal 
   0 
   
   
   
   
   
   false 
   false 
   false 
   
   NL 
   JA 
   X-NONE 
   
    
    
    
    
    
    
    
    
    
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
   
 
 /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
	mso-para-margin-top:0cm;
	mso-para-margin-right:0cm;
	mso-para-margin-bottom:10.0pt;
	mso-para-margin-left:0cm;
	line-height:115%;
	mso-pagination:widow-orphan;
	font-size:11.0pt;
	font-family:Calibri;
	mso-ascii-font-family:Calibri;
	mso-ascii-theme-font:minor-latin;
	mso-hansi-font-family:Calibri;
	mso-hansi-theme-font:minor-latin;
	mso-ansi-language:NL;}
 
  The landing page breaks through the grid by showing two elements centered on the page. This emphasizes that the user can choose from two opposing navigation routes.

The redesign is based on navigation by scrolling, which fits a more modern webshop. The use of a strict grid ensures unity throughout the design. The landing page breaks through the grid by showing two elements centered on the page. This emphasizes that the user can choose from two opposing navigation routes.

 This is the redesigned destinations page, with a collage of destinations and travel experiences.   
  
   
   
  
    
  
   Normal 
   0 
   
   
   
   
   
   false 
   false 
   false 
   
   NL 
   JA 
   X-NONE 
   
    
    
    
    
    
    
    
    
    
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
   
 
 /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
	mso-para-margin-top:0cm;
	mso-para-margin-right:0cm;
	mso-para-margin-bottom:10.0pt;
	mso-para-margin-left:0cm;
	line-height:115%;
	mso-pagination:widow-orphan;
	font-size:11.0pt;
	font-family:Calibri;
	mso-ascii-font-family:Calibri;
	mso-ascii-theme-font:minor-latin;
	mso-hansi-font-family:Calibri;
	mso-hansi-theme-font:minor-latin;
	mso-ansi-language:NL;}
 
  To allow the user to be able to book at any point, the booking element scrolls with the user.

This is the redesigned destinations page, with a collage of destinations and travel experiences. To allow the user to be able to book at any point, the booking element scrolls with the user.

Redesign_comments-01.png
Redesign_comments-02.png
Redesign_comments-03.png