Using a mobile first, responsive approach, the goal was to redesign the eurotunnelfreight.com website, being sympathetic to the design of the recently updated eurotunnel.com (passenger) site. This redesigned site would need to function and look the same for users viewing in both English, French and eventually German, meaning that all aspects of the design would need to be considered in terms of translation.
Another huge element of this project was to create a bookings form, that would look good and provide users with an easy experience when arranging their freight transportation.
From the offset it was agreed with the client that mso would design the site only. The website designs where to be based on the popular bootstrap framework breakpoints, design mockups for desktop, tablet, and mobile were to be produced. This would mean a wide variety of elements such as buttons, page widgets and tables would need to be created, considered responsively, and styled consistently. Due to this we were also required to provide a style guidelines and behaviour document to the development team to ensure all elements would be handled in the same way when moving forward with the website.
To aid the design process we were provided with a set of existing style guidelines for the eurotunnel.com site. Using these we could collectively decide on points of consistency to unite both the passenger and freight site, plus work out where improvements, or alterations could be made, for example introducing different animations to make the new site feel more dynamic and in keeping with the latest web design practices.
For inspiration we referred to other travel booking websites, and particular liked the friendly tone of the Air BnB, and the more corporate tone of network rail, in terms of form UX we loved the stepped process and easy editability Compare the Market provided, so we aspired to strike a balance between these three sites, ensuring we focused on good functionality and strong call to actions, to help the user navigate with ease.
We felt the user interface for mobile should be kept simple, and clearly present important information to users with minimum scrolling wherever possible, to make browsing quick and easy to suit users wanting info on the go. To achieve this imagery was stripped back, and content was often stacked into accordions which could be expanded or minimised dependending on the user's preference. To get more ‘actual page content’ into the viewport it was a must to condense all levels of navigation into a burger menu for narrower devices.
For tablet and desktop it was decided to put more focus on the client's nice imagery. To do this we ensured each page had a large ‘relevant to content’ image panel at the top; this space could also hold video footage or a map, and be used as a tool to help engage users more.
The scale of this project has shown us how important design specs, brand guidelines, content style guides, and functionality documents really are. Even when we work with smaller clients now we will always send out functional specs for sign off so our designs can be better visualised by the client, and interpreted by developers with much more ease.