For the best experience, I collect usage information as per the guidelines in the privacy policy

Case Study

Flying Scotsman — present an engaging online experience

The flying scotsman travelling under a bridge with smoke coming out from the engine
Skills
  • Interface Design
  • UX Design
The challenge

Create an engaging online experience for the new generation of Scotsman fans

The Flying Scotsman is an express passenger train that has been running up and down the UK respectively—since 1862. The challenge was to design a responsive website which featured a historic timeline, GPS journey tracker and enable end users to purchase a ticket–via a third party payment channel.

the-flying-scotsman
Creative Direction

Design a memorable experience across channels

The initial kick-off meeting was aimed to define the goals of the project and get an understanding of the target audience. I was responsible for the creative direction, user experience design and content strategy.

Throughout the project, I was challenged with designing something that will benefit the users but with a creative edge that will appeal to the new generation of Scotsman’s fans.

I set down four main objectives to achieve this:

✔️ Create something striking that will stand out
✔️ Capture the interests of the audience
✔️ Define the goals of the individual pages
✔️ Seek to add value

iMac mockup of the "Flying Scotsman" homepage
Design

User-centric creativity results in outcomes that are original & of value.

After designing numerous iterations, I reached a point where all the assets were ready to be passed over to the development team.

The product included some key features which challenged me to juggle being creative and establish an emotional connection with the users.

 

Graphic user interface (GUI)

Throughout the website, there is a lot of fantastic historical information on The Flying Scotsman— facts, dates and achievements. I designed some simplistically animated infographics which were designed to engage existing/new users into learning more fun facts, interact with the content and to be inspired by the locomotive.

 

The Flying Scotsman tours

The locomotive goes on trips around the country and scheduled to different locations throughout the year. The website required an ‘events’ page to showcase the next stops, which allow users to book their slots with external parties. The events can be filtered by month to see its scheduled journey in advance.

iPhone design of the "Flying Scotsman" awards
iPhone design of the "Flying Scotsman" tour 2016
Old engine record of the Flying Scotsman
Desktop designs of "The Flying Scotsman" timeline from 1860's - 2000's

Timeline

The Flying Scotsman has decades of rich content from the 1860s which needed displaying in bite-sized chunks throughout the website. As a solution, I designed a simple timeline which showcases images, quotes and information about the locomotive in that era.

 

Interactive locomotive features

The locomotive had some incredibly detailed facts which were stored within lines and lines of copy. I decided to create an interactive way for users to engage and read all this information — ‘click and learn’. I designed hotspots on the vertical image which would reveal historical facts about the locomotive.

Desktop designs displaying interactive hotspots which give facts about the "Flying Scotsman"
iPhone design of the "Flying Scotsman" restoration
iPhone design of the "Flying Scotsman" navigation structure
Content

Premium historic photography

Throughout the website, I carefully selected sharp images that complement the story, aim for a more personalised, human connection with the users. The use of great photography was to help users stimulate their imagination and re-create the historical experience.

"Black and White" image of workmen shaking hands by The Flying Scotsman
Old "Black and White" Photograph of a lady on the Flying Scotsman