Hermes

What if a high-speed railway system existed in America?

Overview

Hermes is a kiosk prototype designed for viewing routes, reserving seats, and purchasing tickets for a hypothetical high-speed train system in America . This prototype was created as part of our Senior Capstone class taken at Kennesaw State University. Our team loosely employed the Goal-Directed Design methodology detailed in the book About Face by Alan Cooper to create this prototype.

The Pitch

During a recent trip to Japan, our team leader, Christine, was struck by the efficiency and accessibility of their public transportation system. At every station, easy-to-use digital kiosks allowed people to navigate complex systems, purchase tickets, and plan journeys – all with a user interface that, while dated, served millions of passengers daily. Inspired by this experience, Christine envisioned creating a similar solution for a potential high-speed rail system in the United States and pitched the idea of Hermes to our team.

Role

UI Design, UX Research, Branding

Timeline

Feb - Apr 2024

Approach

Goal-Directed Design (GDD)

Tools

Figma, FigJam, Microsoft Teams, Affinity Designer

Role

UI Design, UX Research, Branding

Timeline

Feb - Apr 2024

Approach

Goal-Directed Design (GDD)

Tools

Figma, FigJam, Microsoft Teams, Affinity Designer

What if A high-speed railway system existed in America?

Overview

During a recent trip to Japan, our team leader, Christine, was struck by the efficiency and accessibility of their public transportation system. At every station, easy-to-use digital kiosks allowed people to navigate complex systems, purchase tickets, and plan journeys – all with a user interface that, while dated, served millions of passengers daily. Inspired by this experience, Christine envisioned creating a similar solution for a potential high-speed rail system in the United States and pitched the idea of Hermes to our team.

The Pitch

The team

Meet the Ones Who Made It Happen

Click on the pictures to visit my teammate’s portfolios!

Spoilers!

A Sneak Peak of Our Solution

Our Hermes prototype kiosk is designed for simplicity. Users can either scan and print a pre-purchased ticket or buy a new one directly.

For ticket purchases, the kiosk guides users through selecting their route type (one-way or round-trip) followed by a screen where they can pick their outbound and/or inbound routes. Seat reservation is then available, with the option for premium seats offering enhanced comfort and amenities. Finally, a review screen summarizes all chosen options before payment and ticket printing.

Interact with the prototype here

→

Prototype

Hold on. How did we get here? Let’s go over the process...

Click on a number to jump to the section.

The Approach

Explaining Goal-Directed Design

Research

Learning about our domain, competitors, and potential users

Modeling

Synthesizing research and making our personas

Requirements

Determining which features will be implemented

Frameworks

Designing our lo-fi and hi-fi mockups

Refinement

Finishing and polishing our prototype

Getting Started

Kickoff Meeting

In a typical project setting, the initial stage of Goal-Directed Design often involves a kickoff meeting, a crucial gathering where stakeholders and designers come together to establish shared goals and solidify the project's purpose. This meeting serves as a platform for open communication, allowing different perspectives to be heard and integrated. It's during this collaborative process that a clear vision and roadmap are established, ensuring everyone involved is aligned towards a common objective.

However, the project we undertook differed from this traditional approach due to its academic setting. Since this project was completed within the framework of a class, the concept of external stakeholders was not applicable. Instead, our professor provided a pre-defined template to guide our initial meeting. Through this simulated setting, we, as a team, were able to establish a shared understanding of the project's objectives and define our own internal goals as a team.

During this kickoff meeting, we created the following product problem statement:

Product Problem Statement

The current state of the U.S. public transportation system has focused primarily on building a transportation system of buses, subways, trams, and small trains. What this system fails to address is the need for an extensive high-speed railway system and less of a personal reliance on cars. If a high-speed railway was developed, a way for people to easily purchase tickets would be necessary. Our product/service will address this by creating a sleek and intuitive interface that allows users to buy train tickets, reserve seats, view timetables, and more.

Literature Review

Our lit review involved examining relevant scholarly articles, industry reports, and internal documents related to the state of the domestic and global public transportation industry, and the state of the self-service kiosk industry. This exploration aimed to provide a deeper understanding of the context surrounding Hermes, allowing us to ask more informed questions during stakeholder interviews.

What we found:

The kiosk market is projected to grow by 12.3% from 2021 to 2028.
Self-service kiosks are gaining popularity due to reduced need for physical staff post-COVID pandemic.
Various high-speed rail projects are underway, with Amtrak leading Acela train development.
These projects aim to significantly reduce road congestion and traffic accidents in busy cities.

Competitive Analysis

Since high-speed rail isn't yet widespread in the U.S., we analyzed both kiosk and passenger train markets. Our selected competitors included Amtrak, the largest U.S. passenger train service with nationwide coverage; Central Japan Railway Company, the main railway company operating in the Nagoya region of central Japan; and KIOSK, a global company representing the general kiosk market. We analyzed each company with the following discovery goals in mind:

Explore strengths, weaknesses, user preferences, and dislikes related to self-service kiosks.
Understand how high-speed train tickets are purchased globally, potentially informing future U.S. practices.

Our findings for each company included the following:

Amtrak

Positive: There are multiple options for different types of experiences based on different price ranges.
Negative: It takes a very long time to get from city to city due to the lack of high-speed (185mph+) trains. Routes from city to city are multiple times longer than their flying counterpart, and can be uncomfortable for passengers to endure such long travel times.

Central Japan Railway Company

Positive: JR trains run notoriously on-time, and delays are recorded consistently. Delays are shown on apps such as Google Maps, instantly alerting travelers of wait times.
Negative: JR Passes must be purchased at specific JR Centers, which only a handful exist in a few stations. This can be burdensome if a traveler doesn’t have time to get to one of these stations.

KIOSK

Positive: Self-service kiosks have shown a 30% reduce in queues and wait-times across “a variety of transit operation”. This shows that KIOSK is proficient in making the ux intuitive and economic.
Negative: Kiosks do not seem to have modifications or adjustments available for any disabled users.

Who are our users?

Persona Hypothesis

To gain deeper insights and tailor our interview process, we began by crafting a persona hypothesis. This involved asking and answering the following three questions:

01. What different sorts of people might use this product? People commuting daily for work, long-distance commuters, people traveling domestically or internationally, anyone looking to travel.

02. How might their needs and behaviors vary? Those who commute to work might follow a similar route every single day, while tourists might branch out more and purchase tickets from varying locations/cities.

03. What ranges of behavior and types of environments need to be explored? Those who commute for work or always buy similar ticket routes may want it to be as quick and intuitive as possible, while tourists and other travelers may be looking for more features, find out more information. We will need to be conscious on how many types of people will use this and if their #1 goals differ.

By answering these questions, we developed a clear understanding of our ideal user, allowing us to strategically select interviewees most representative of our target audience.

Time to Interview!

Due to time constraints, our team contacted five individuals between the ages 20 and 25 within our network of friends who closely aligned with our persona hypothesis to take part in the interviews. Each participant had the following characteristics: frequently travels (both domestically and internationally), has experience with public transportation (specifically with trains), and has experience going through a process of purchasing a ticket for traveling. These interviews took place over one week on Microsoft Teams.

During the interviews, we aimed to uncover the most important factors our participants considered when purchasing transportation tickets,

Interview with Participant #2

Interview with Participant #3

Mapping Our Findings

To streamline the information collected from each interview, our team utilized a method called Affinity Mapping. This approach involved allocating 5-10 minutes for us to jot down our individual insights from the interviews onto sticky notes. Once the time limit was reached, the information was consolidated, and related insights were categorized into groups.

Affinity Map from Participant #1’s interview

What We Observed

Our user interviews revealed a strong preference for intuitive kiosks. Transportation is essential for many, so participants desired a kiosk experience that was both efficient and user-friendly. Interestingly, frequent flyers highlighted the positive aspects of airplane ticket kiosks, praising their speed, ease of use, and logical design. A few of our participants suggested we look at Delta’s ticket purchasing interface when designing Hermes.

Creating Our persona

Identifying Behavior Variables

Creating our personas involved taking the raw data collected during the research stage and transforming it into tangible representations of users and their interactions with our product. This helped us as designers gain a deeper understanding of user needs, goals, and behaviors, ultimately leading to better design decisions.

The first step in this process was to analyze interview data, user observations, and other research findings to identify common patterns and trends in user behavior, motivations, and goals. From the research, we were able to identify 23 distinct behavior variables that emerged as key themes in our participants' responses.

Each interviewee was assigned a color and their responses were then mapped onto scales corresponding to each behavior variable. This allowed us to quantify their responses and identify patterns. The identified patterns were visually clustered together, and these clusters became the foundation for developing our persona, embodying different user types with shared needs and characteristics.

Behavior variables

Behavior variables grouped into clusters

Meet Artemis!

Analysis of our interviews revealed a distinct user segment: frequent travelers. These participants prioritized cost-comparison tools, ease-of-use, and overall efficiency when purchasing tickets. Inspired by their needs, we developed our primary persona, Artemis Hunter. This persona serves as a guiding force throughout the design process, ensuring we constantly consider the user's perspective.

What features does Hermes need?

Learning From Our Persona

In the Requirements phase, one of the shortest stages of the GDD process, we took on the perspective of our persona. We asked ourselves: If Artemis were using a Hermes kiosk, how would it integrate into her daily life? What specific features would best support her in achieving her goals?

To address these questions, our team created a "context scenario” for our persona. This narrative functioned as a detailed story, depicting the everyday life of our persona, with a particular focus on situations where they would interact with a Hermes kiosk. By crafting this scenario, we were able to demonstrate how Hermes could effectively address Artemis’s needs.

Leveraging this context scenario, the team then identified a comprehensive list of feature requirements. We believed these features would be essential in delivering an optimal user experience for Hermes, based on the insights gleaned from our persona. This defined list of requirements subsequently served as the foundation for developing the framework of our prototype.

Primary Persona Requirements List

Select a navigational option from the kiosk home page.
View timetables for different routes.
Compare prices when looking at route options.
Reserve seats when booking a ticket.
Input payment information at the end of the ticket process.
View maps for geographic context.

General Requirements List

Buy ticket option.
Select different cities to go to.
See price comparisons.
Picking seats.
Luggage accommodation.
Accessibility options.
Help button.
Scan QR code to print or edit trip detail.

designing the layout

Sketching

With our requirements list in hand, we picked up some expo markers and began drawing Hermes’ screens on a whiteboard! This helped us explore the overall layout, estimate the number of screens needed, and determine what information should be displayed on each screen.

My task for this phase mainly revolved around determining the layout for the passenger information and order review screens.

Lo-Fi Wireframing

After solidifying our vision for Hermes' functionality, we used Figma to transform our initial sketches into low-fidelity wireframes. With these low-fi screens in place, we drew out our key path scenario (the most commonly used path) and validation scenarios (the paths that are used less frequently). Looking at the image below, the orange lines represent the path our users take when purchasing a ticket – our key path scenario. The blue lines – our validation scenarios – represent other paths our users might take when using or product, such as scanning a QR code to print their pre-purchased ticket, or changing their seat reservation.

Keeping things Consistent

Hermes’ Brand

With the goal of capturing a sense of high-speed in our brand name, I proposed Hermes, inspired by the Greek god of travel and swiftness, which resonated well with the rest of the team.

Next, I jumped into Affinity Designer, a graphic design software similar to Adobe Illustrator, and started creating our brand’s logo. My vision was to combine the imagery of a train with Hermes' legendary winged sandals.

Colored and uncolored versions of our logo lockup that I designed

Style Guide

With the logo finalized, I turned my attention to crafting a brand style guide. This comprehensive foundation would provide us with the ability to maintain a cohesive visual language during the transition from lo-fi to hi-fi wireframes.

To determine the ideal color scheme, I presented the team with a range of options – vibrant combinations of blues, purples, greens, and oranges. We experimented, weighing each palette against the logo. Ultimately, we landed on a dynamic duo: a bold orange as our primary color, symbolizing energy and movement, perfectly complemented by a sleek violet as our secondary color.

For typography, I followed a similar process. I displayed several sans serif fonts alongside the logo to find the perfect fit. Sans serif fonts, with their clean lines and lack of decorative flourishes, aligned perfectly with our brand identity. They embodied the simplicity and modernity we were aiming for, seamlessly integrating with today's minimalist design aesthetic. After careful consideration, our team eventually settled on Avenir as our brand’s font.

Components

It was time to work on the building blocks of our design with components! Components are like reusable building blocks for your interface. Imagine creating a button once, with specific colors, fonts, and paddings. Every time you need a button elsewhere in your design, you can simply drag and drop this "button component" instead of recreating it from scratch.

Below is a screenshot of the interactive input field components I created.

Testing and Polishing

Conducting Usability Tests

With the first iteration of our prototype completed, we recruited three participants to complete in-person usability sessions. During these sessions, the participants were asked to complete items on a provided task list while verbalizing their thought process. This helped us pinpoint areas of our prototype that were causing confusion or frustration with our users.

Key insights from these tests were:

Some animations were too fast for users to understand the action taking place.
After selecting routes or payment methods, participants were unsure how to proceed.
Certain buttons lacked visual cues indicating their interactivity.
Users didn't realize they had transitioned between outbound/inbound routes or passenger selection screens due to subtle one-word differentiations.

Fixing Issues and Making Things Pretty!

Based on user feedback and usability issues encountered during the usability tests, we made the following changes to our prototype:

Routes and payment methods now highlight upon selection, followed by a brief delay before automatically transitioning to the next page.
Introduced confirmation pop-ups for seat reservations and visual cues like "Moving to Passenger 2..." when purchasing tickets for multiple passengers.

Before Testing: Users did not know that pressing “Confirm Selection” took them to a separate page due to the next screen looking nearly identical to the one prior.

After Testing: Added an extra pop-up letting users know that clicking “Confirm Selection” was progressing them to a new screen.

The Final Product

Introducing Hermes

Hermes is a user-friendly kiosk designed for a hypothetical high-speed train system in America. It simplifies the process of viewing routes, reserving seats, and purchasing tickets. Whether you have a pre-purchased ticket or need to buy one on the spot, Hermes makes it easy, guiding users step-by-step.

You can interact with the full prototype in the window below – best experienced on a non-mobile device ↓

Reflections, Reflections

What Did I Learn?

Collaboration is key. Having sessions of open communication helps to establish a shared vision, making it easier for everyone to align on project goals.
User-centric design is a continuous process. Engaging with users throughout the design process (via interviews, surveys, usability tests) provides invaluable insights that shaped the final product.
Sometimes, sacrifices are necessary. Due to time constraints, some features we had initially hoped to include didn’t make it into the final iteration. When working under a deadline, it’s essential to prioritize features that offer the most value to the user, rather than those that simply seem exciting from a design perspective.