National Rail redesign

UI design UX  Figma
Full case on Behance

This concept was made as a part of my UX/UI course. The task was to analyse the existing website of the Russian National Rail, outline the main visual issues and try to solve them by offering an alternative design concept according to good UX/UI practices. The overall bloc structure has to be preserved.

Current website visual analysis

After the visual analysys the following problems were identified: low readability, dull uninviting colour palette, redundant information, unclear visual hierarchy, colour coding is not very consistent.

Similar websites overview

Positives compared to rzd.ru: 

  • Cleaner structure: more air around the elements
  • Less heavy colours and solid dark colour blocks, more reserved and consistent colour use
  • Brand colours are mainly only used to highlight active elements, in buttons, menus, links, icons etc
  • Even though all the pages are grid-based, the grids are more diverse
  • Better quality imagery – photos at daytime, with good clear sky, vivid enticing fresh colours, good postproduction. If the photos are used, they are nor darkened to the point of being unrecognisaible, neither mostly covered by text

Redesign & improvement plan

Worth preserving:
  • Convenient way of splitting relevant information into “before the trip – in the trip – after the trip”
  • Not only passenger, but other types of railway services are available from the main page
  • Customer service info right on the top of the page, easily visible and accessible, which is important in a hurry
  • Accessibility: link to version for people with visual impairments on the top of the main page
Suggested improvements:
  • Break the grid layout a bit in order to create more space and to improve readability
  • More consistent and enticing colour scheme
  • Use of icons to enable the user quickly recognise relevant information blocks
  • Combine the blocks with similar information, like booking new and checking existing tickets
  • Login/ registration area combined and made clearer
Have to be preserved:
  • Bloc structure
  • All the relevant info on the page
  • Brand colours

Fonts & brand colours

Assets creation for the new design

  • According to one of the suggestions, icons will be used to make specific blocks instantly recognisable
  • Assets are to use current corporate colours
  • All the categories, that are to be be marked, decided
  • Since the website is going to be based on graphical solutions and not show photos, an illustration of a train is made for the footer, based on the most popular train model photos.

Finalising the design

  • According to the task, grid structure was preserved:
    • Columns: 14 x 72px
    • Gutter: 20
    • Module: 4px
  • However, to break up the repetetivness the central column is narrower.
  • Ticket purchase, special offers and “before – during – after the trip” sections, while following the grid, diversify the structure.
  • Accent colour is used on key buttons (search, register, login), inverted outlined buttons are made for secondary actions (see discounts, download the app).
  • The footer has been structured following the new grid.
  • Mininimalistic, clean pastel colour graphics in the header, using the national railway trains and logo.
  • Key customer service info and crucial updates in the top of the page.
  • In this version bloc “before – during – after the trip” goes before special offers and cards with more general info, as it is relevant for each customer, while special needs assistance or business options are used by less customers.
  • In this version each special info card has a clear readable title, supported by a visible icon in order to simplify the navigation and search for particular features.
  • Mobile app section is also marked by a phone with the use of the company’s branding as wallpaper.

Final outcome