Hypercommute Case Study


The challenge

HyperCommute is building next-generation transportation systems with a focus on high-speed, luxury commuter railways. Design a personal infotainment experience, which passengers can control from their mobile device.

The experience should support the ability to adjust their cabin experience (e.g., lighting, temperature), request service items (e.g., beverages, pillows, headphones), and stay informed about their journey.

 

The process

For all projects, I employ design thinking to solve problems and build a visual solution. I first look to establish a clear picture in the discovery stage, then proceed to defining a problem and goal, ideate and explore then finally create a solution and test this solution iteratively. Due to the time constraints for this specific challenge, I adopted a high level approach to the design thinking model as I wasn't able to test extensively. However, I focused heavily on research and understanding the core problems, as well as outlining possible next steps beyond what's been done so far.

 
 

Stage 1: Discovery

The discovery stage is the most important stage of the process, as it involves deep-diving into the user needs, the current state of the market for this product, and understanding how people experience similar products and services in this vertical. The key intent is to uncover the key needs and insights from these users and to leverage that information to provide a solution to the core problem.


Research

In order to crystallise the user experience, I started my discovery process with extensive research. My intention was to form a clear picture of the problem I was trying to solve. By gathering insights from the London Travel Report 2017 and the Transport Focus Passenger Survey as well as conducting informal interviews with friends & family, I started building out an experience map. The experience map was the perfect model to map the key stages of the journey against user pain points and potential opportunities to solve those.

Another important element of the research phase was competitor benchmarking. After analysing the infotainment market and exploring other products like Virgin Beam, the Eurostar app or the Transpenine Express app, I discovered these products placed a lot of emphasis on the media consumption aspect of the experience, offering access to movies and news, for example. However, there was not enough focus on showing relevant information regarding the user's actual journey, which in itself can be the source of unwanted stress.

Looking at all the information gathered in the experience map, I discovered that some of the main pain points when travelling by train occurred due to the lack of up-to-date information about the journey and access to personalisation options to make the journey more comfortable.

 

Experience map creation - Domingo Widen

Experience map - Domingo Widen

 

Personas

Creating an experience map in the research phase allowed me to have a clear view of the user goals and pain points experienced by different types of users across different stages of the journey. Using this information, I proceeded to create a target persona and, that way, form a clear picture of the problem I was trying to solve.

Assumptions:

  • Users will use their mobile phone to control the experience.

  • Users are logged in and have already purchased a ticket.

Constraints:

  • The train journey might be delayed, before or during travel.

 

Persona - Domingo Widen

 

Stage 2: Definition

With all the information collated from the discovery stage (research, competitors, experience map and personas), I moved onto the next stage of the process. This was now about defining the problem I was aiming to solve and creating a clear solution hypothesis that could be tested, as well as specific design goals that needed to be achieved with my final designs.


The problem

The current state of infotainment experiences aboard trains has focused primarily on showing generalised entertainment options and basic live updates for passengers. These services fail to create a personalised experience based on user preferences. How might we address this gap and offer future HyperCommute passengers a tailored, luxury experience that makes their journey both comfortable and enjoyable, while also giving them peace of mind?

 

Solution hypothesis

We believe that an increase in customer satisfaction and retention will be achieved if our users have the latest information at their fingertips and are able to control their cabin experience before and during travel using the HyperCommute app.

Design goal 1

Give users clear and up-to-date information about the status of their journey.

Design goals 2

Offer users pertinent information and personalisation options, depending on the stage of their journey.

 

Stage 3: Ideation

Once I had identified the design goals as well as the problem to solve, I moved into the Ideation stage of the process. Here, I started playing around with potential solutions and user journeys, as well as different features that could solve the defined problem.


 

Sketches & wireframes

Sketching is a very important tool in my design process and I tend to start all my work on a piece of paper. I find it the best way to get ideas down without getting caught up in moving pixels, particularly when it comes to mapping journeys and variations.

Diving into sketching, I started to form this concept of a dynamic dashboard that could change depending on the stage of your journey, and this dashboard could serve as the single entry point for users to understand more about their trip status or accessing relevant information like train facilities, cabin options and onboard food & drink menu options. Having a single entry point allows us to serve a consistent experience and educate returning users on where to find the relevant information.

The dashboard allows us to address the problem of personalisation using a modular approach. This makes it possible to offer dynamic content and controls depending on the stage of the journey, rendering the experience more personalised while still being consistent and easy to use.

Though the challenge was to design just two screens, I wanted to form a clear picture of the whole product experience. I therefore created a high level wireframe journey showing how people can access the dashboard whether they have a ticket or not, and a journey showing both the pre-travel and during-travel options for the dashboard, including cabin controls and food orders.

 

High level journey - Domingo Widen

Dashboard journey (pre-travel & during travel) - Domingo Widen

Dashboard journey (During travel) - Domingo Widen

 

Design foundations

Once I had a clear idea of some of the screens and features I wanted to design for the final experience, it was time to move to the visual design. My approach to visual design is systematic and starts with building a set of foundations or systems that allow me to easily scale, depending on the needs of the project. In this instance, I wanted the interface to be unintrusive while also giving a sense of luxury and high spec technology.

I dedicated a significant amount of time to testing different typefaces in different sizes, colours and scenarios. After various explorations, I chose Lato as the final typeface, due to its sense of transparency and ease of legibility across all sizes and formats, without losing its elegance and strength, key traits I wanted to transmit with the Hypercommute brand and experience.

Regarding shape and colour, I wanted to use a limited colour palette with darker tones that reflected a feeling of premium and luxury experiences. I therefore spent some time testing component cards with varying tones of gray. I chose two of the foundations to build all dashboard component and their variations.

For the brand's look and feel, I wanted to capture the essence of travel, incorporating visual elements that are both practical and reassuring within every train passenger's experience. I therefore played with the Network Railway Map as a reference to create a system of lines and shapes that would serve as brand elements and building blocks for illustrations.

 

Typography exploration - Domingo Widen

Typography & colour exploration - Domingo Widen

Visual explorations - Domingo Widen

Visual explorations - Domingo Widen

 

Stage 4: Solution

The next stage of the process was about slotting all of the pieces together into a final product that could be tested and refined. Using the journeys and visual foundations established in the previous stages, I focused on designing a compelling product experience that showed future users the value of using the Hypercommute app for their luxury train commutes.


Hypercommute - Domingo Widen

 

Dashboard

The dashboard is the single entry point for users and can be accessed in different stages of the journey (Booking, Pre-travel, During travel and Post-travel).

When it comes to hierarchy of messaging, we have a clear greeting message, weather and "live journey" component at the top of the screen. My intention behind this component was to have a single element showing the latest up-to-date information to users. Leveraging the insights gathered in the Experience Map during the Discovery stage, I was able to map this component to different stages of the journey and show expected behavior for different scenarios.

One of the biggest painpoints when it comes to train journeys is delays. I therefore set myself a constraint early on in the process: "The train journey might be delayed, before or during travel". Given the need to address this constraint as well as address the main user problem of having access to relevant information at all times of the journey, I created variations for the live journey component, showing intended messaging for delayed journeys.

A further aspect of the dashboard was to display the additional services offered as part of the infotainment experience. Depending on the user's preferences and behaviour, users might want to customise their cabin prior to travel, and some might want to customise their cabin during travel. Depending on user behaviour, the dashboard should show the relevant information and preference settings at the right time. My intended solution was therefore centred around providing a truly dynamic experience, putting the user and their needs first by understanding the user journey and information or services required at each stage, and amending the dashboard accordingly.

 

Dashboard - Domingo Widen

Dashboard components - Domingo Widen

Train services & illustrations - Domingo Widen

 

Cabin control & live map

The dashboard allows you to access different services aboard the train. One of
these services is the ability to control your cabin experience, including air conditioning, lights and speakers. During the research phase, the surveys and experience map illuminated a key painpoint around Wifi access. "Connectivity" therefore forms a significant part of the cabin control experience, allowing the user to quickly and easily connect to the train network, while also seeing the connection status and strength of the network at all times.

The live journey component not only displays information at a dashboard level. Users can also access the map by tapping on it, which surfaces a more detailed screen with a live interactive map displaying trip details (e.g. speed, distance traveled, arrival time) as well as popular sites to see along the journey.

 

Dashboard -> Cabin control -> trip details - Domingo Widen

Possible interaction trip details - Domingo Widen

Possible interaction trip details - Domingo Widen

 

Branding

In order to show a more compelling story for the solution, I created brand guidelines using some of the explorations in the Discovery stage. I wanted to ensure the Hypercommute experience reflected that of a high tech luxury brand. I therefore chose a simpler, darker colour palette using teal as the accent colour.

I designed a typographic logo which reflected the premium quality of the brand without being intrusive or overly busy and expressive. For the logo typography, I wanted a font that was sharp and structured, but complementary to Lato which is used as the UI font.

(See explorations above under “Stage 3: Ideation”)

 
Branding - Domingo Widen

Branding - Domingo Widen

Branding - Domingo Widen

Branding - Domingo Widen

 

Next steps & conclusions


For a project like this, my next step would be to stress-test these screens and interactions with extensive user testing, and therefore complete the design cycle. Having relevant user feedback is crucial for making the necessary tweaks and refinements to optimise the experience.

If given more time, I would look to refine the designs even further by exploring the user purchase journey in more depth. Given the nature of a travel app and the immediacy of train timetable updates, I’d want to explore the opportunities for push notifications as well as cross-selling of different services (e.g. discount codes for partners as a result of delays), which would require further collaboration with a wider product and marketing team.

This is of course a cyclical process because a product's design is never done. There's always more to improve.