Railway Travel
Creating a responsive set of flows for a new rail travel company that involves searching, booking, and checking in
Project Date: April 2023
Company: Railway Travel
My role: Research, personas, task flows, sketching, wireframing, visual design/branding, prototyping, user testing
Team: Group Crit Peers, Mentor, Potential Clients
Project Background
The Challenge
Objectives
Overview
Railway Travel, Inc aims to create a new rail travel experience with a responsive web design approach. The website will cater to travelers who prefer using various devices, including desktops, laptops, tablets, and smartphones, to plan, book, and manage their train journeys. The primary focus of the project is to deliver a minimally viable product (MVP) that includes essential functionalities like searching and booking destinations, as well as a simplified check-in process.
How might we differentiate Railway from other travel platform competitors from a user experience point of view ?
Develop a streamlined user experience for a new travel company for the core digital user task flows (searching+booking, and checking-in) with a responsive design that adapts to different screen sizes and devices, ensuring a consistent and optimized experience for users, regardless of the device they use to access the platform.
Competitive Analysis
Research Ramp Up Findings
Interviews
Affinity Map
User Persona
Why
How
Discovery
To conduct a variety of research methods to gain a better understanding of current and potential users by defining their goals, habits, and points when booking travel through rail in order to design a successful product.
Research Ramp-Up: Secondary Research & Competitive Analyses
3 Interviews (Up to 1 hour per interview)
Affinity Map
To begin research for Railway, it was important to understand their direct competitors in order to get a good understanding of how other rail travel companies have set up their sites for searching and booking trips and how they manage the checking-in process.
Beyond looking at rail travel companies in the United States, it was essential to identify other indirect competitors such as overseas rail companies, such as Eurail, in order to learn from their user experience and UI designs.
Why
How
With my persona and affinity map complete, it was time to ideate product for Railway.
1 User Persona
After identifying the strengths and weaknesses of Railway’s direct and indirect competitors, the below points are what I learned
Key Takeaways:
Efficiency: A streamlined check-in process is important, allowing users to quickly complete the required steps and move on to boarding.
Digital Solutions: Many travelers prefer digital check-in options that can be completed online or through mobile apps, eliminating the need for physical documents.
Ease of Use: The check-in process should be user-friendly, with clear instructions and intuitive interfaces that guide users through the steps.
Flexibility: Users appreciate check-in options that accommodate various situations, such as different classes, travel companions, or special needs.Convenience: Users expect a convenient check-in process that saves them time and minimizes any unnecessary hassle.
Mobile Accessibility: As many users rely on mobile devices, a mobile-friendly check-in process or app is essential for their convenience.
Real-Time Information: Users value receiving real-time updates about any changes to departure times, platform assignments, or other relevant details.
After understanding competitors in the industry, it was time to dig into the habits of users and empathize with them through 1-on-1 interviews via in person interviews, each one lasting up to 1 hour. I also used this time to allow users to give me their thoughts and opinions on Railways competitors through asking them to physically complete related tasks ( searching + booking destinations and checking-in) and/or give me thoughts on their past experiences with the sites.
Number of participants: 3
Age: 23-35 years old
Findings:
2/3 users enjoy convenience of utilizing mobile sites versus having to download apps especially if it is a mode of transport they will not use often
Enjoys flexibility when booking trips -multi-city, one-way, round-trip
3/3 users enjoy being about to edit trip details such as date without being required to start search over
All users agree that filtering options prior to actually searching- price lowest to highest, time of day, class of service, etc helps narrow search down thus improving their experience
All users agree that they dislike receiving excessing travel notifications if the details being shared are unchanged since booking
All users value a site that is simplistic in design and user friendly. Keeps from users becoming frustrated when trying to book causing them to prolong booking or find another means of travel all together
After conducting interviews, I used an affinity map to help me further analyze my findings. Through the affinity map I was able to break my findings down into categories ; pain points, ideal product enhancers, and features users enjoyed. This helped me prioritize features that I would design for in the next phase of this project - the ideation phase.
Define
Even though I was only able to interview 3 participants, one distinct personas formed that I would use moving forward as the blueprint for design decisions made for Railway.
The primary persona is Sam, the young professional who travels often for work. Sam has recently found a new love for sight-sight seeing, therefore he has began exploring the use of rail as his primary means of travel whenever he travels domestically. When traveling, Sam prioritizes a user-friendly booking process, real-tme updates regarding any changes to his travel, and digital services. He's extremely excited for the launch of Railway and is hopeful that Railway will become his go-to rail travel company for future trips.
“I enjoy convenience and feeling fully prepared on travel day”
Sitemap
Using Figma, I created a site flow for Railway, imagining what would go into the navigation bar and the main pages needed to search/book a destination and check-in.
Mobile
Why
How
Sketching Wireframes
Digitizing Wireframes
Ideate
With already my persona and must have features defined, it was time to ideate and conceptualize my product for Railway.
Sitemap
Wireframes (Lo-fi sketches, mid-fi)
Using the Figma app on my iPad, I began sketching out my wireframes. The homepage was the most important screen since it is the first thing clients and potential clients would see, I came up with two options and discussed them with my mentor who gave me feedback. I decided that a combination of the first and second screens would make the strongest homepage. I referred to my Site Map and Affinity Map to create these wireframes.
Desktop
I then digitized my screens on Figma. At this stage, I wanted to set up a wireframe that would be ready to be prototyped, so I worked on as many UI elements as I could: working with a grid, determining typography choices, building components and choosing icon sets. The mobile design would focus on the searching+booking flow and the desktop design would focus on the check-in process flow. I decided Doing the work now would speed up the process for creating the Style Guide later. I pulled up screenshots of some competitors to refer to and applied industry-standard design patterns where I could.
Why
How
Mid-fidelity click-through prototype
Prototype
I decided to prototype my wireframe at this stage because I could make any other necessary revisions after testing with users without it requiring too much time. My goal was to test the functionality of Railway as well as some of the visual design. I worked directly in the Figma file to create a click-through prototype.
Why
How
Usability Testing
Feedback Grid
Priority Matrix
Test
With my prototype up and running, it was time to validate and test my product and make any necessary revisions.
Usability Testing
User Feedback Grid
Priority Revisions Matrix
I reached out to three users who are avid travelers. Two were very familiar with rail travel and the other had only traveled via airplane, bus, or car. Interviews lasted between 30min-45min, sessions were in-person. Participants ranged from ages 25-35. The goal was to test my assumptions of how users would navigate the site and if users would find certain features enjoyable.
I created a User Testing Plan and divided the testing into two stages. I gave them three tasks based on the set flows I designed and observed how they would navigate each task in stage 1. In stage 2, I asked them specific questions regarding each page - overall impressions? Are there features you wish existed? Curious about any features? Does this page have everything you need to navigate and complete your tasks? Stage 2 was a chance for me to dig deep into their experience using the product.
With the users permission, I was able record each session and refer back to it when needed.
In order to better organize my notes and identify any patterns in what users enjoyed, what they didn’t enjoy, and questions they may have had, I created a feedback grid.
Feedback Grid Findings
Overall, every user testing participant was able to successfully navigate the prototype in order to complete the tasks of searching+booking a trip and checking-in.
Every user noted how easy and user friendly the product was and found certain features enjoyable, such as being able to add in filters so that results are more representative of their exact needs, not having to completely start over when booking if they have any details they want to modify, not having to do an excessive amount of scrolling or clicking in order to complete a task, and the simplistic design.
Some pain points were:
- Text included in progress tracker when booking was a bit too small for some users to see on their mobile device
- Users not having a way to cancel their trip once they’ve booked
- Some minor refinements like re-organizing payment options, making all overlays dark enough ensuring main text stands out, ensuring color scheme completes one another well and functions appropriately, distinguishing between active and inactive buttons, and ensuring users are able to continually distinguish between inbound + outbound context.
The next step was determining which questions and suggestions to act on. By organizing the stickies that fell under the "Great Additions" and "Questions" sections in my User Feedback Grid into a priority revisions matrix that measured user value against my effort to implement, I was able to quickly prioritize which problems/concerns to immediately address (high value, low effort), which problems I can tackle next (high value, high effort), and which ones not to focus too much effort and time if they were suggestions with lower user value.
UI Kit
Why
How
Design
In this stage I further expanded on Railway’s identity. I decided to work on the UI design of Railway prior to iterating on the final prototype as I new this step would not be too time consuming.
UI Kit
When brainstorming what I wanted Railway’s brand to embody, the keywords that came to mind were:
Simplistic
Scenic
Reliable
Customer-Centric
I used the core meaning of each keyword as a roadmap for Railway’s brand identity.When designing the mid-fidelity wireframes, I had already created components, picked out a type pairing (Nunito & Inter), icon set, and had a good idea of the colors I wanted to use. Knowing that warm colors are thought to evoke feelings of happiness, optimism, and energy, I picked a burnt orange color as the brand's primary and accent color, a pale/green blue as a secondary color, and a light grey as a neutral highlight. By creating a UI Kit, I could further establish branding guidelines for Railway.
Why
How
Based on user testing feedback and mentor feedback, improve the usability of Railway.
See below, changes made to further improve functionality of Railway
Iterate
1.Redesigned the progress tracker to consist of better readability and clear progress as, fitting a lot of information on a small mobile UI can be challenging on users.
2. Making clickable text appear clickable to users involves employing design elements and visual cues that intuitively communicate the interactive nature of the text, encouraging users to click on it. Some techniques I implemented to effectively communicate this action include; underlying text, adding drop down icon next to text, and changing text color blue.
3. Differentiating inbound and outbound trips using different colors simplifies the user interface and reduces cognitive load. Users can quickly identify the active trip, preventing mix-ups and minimizing errors in itinerary planning.
4. By organizing the available payment options, the page is now aesthetically enhanced which makes it easier for users to quickly scan and understand available payment options. This streamlines the decision-making process, allowing users to choose their preferred method without confusion.
5. The content housed within the “Select Your Trip” page was a bit confusing to users as they were unsure if the items on this page were clickable. Users also believed there was not enough distinction between class options. Decided to assign colors to each class as well as show users that when their mouse hovers over a class, it will then highlight. This provides clarity to users and makes for a better visual experience as well.
6. Color palette here was a bit harsh on the eyes. Gave the appearance of a lo-fi wireframe instead of a finished product. Decided on a softer grey tone as well as putting text within a card to brighten page.
7. Included a way for users to cancel their trip, as some users expressed that they would appreciate not having to open their email or call to cancel trip.
8. Within the desktop check-in flow, some users were unsure of what the drop down arrow was for. I included an example of what the reservation number would look like so that it was clearer to users that they can check-in using other options such as phone number or reservation number.
Conclusion
Future Considerations
Next Steps
In conclusion, my prototype was a success because I designed with the user in mind from start to finish. I interviewed and tested with users who were avid travelers and knew exactly what they needed to ensure travel day is as stress free as possible. All of my users were able to successfully navigate through the three tasks I assigned them during the user testing phase and they found a lot of the features I added enjoyable. They also provided me with a plethora of great feedback that helped to further improve their experience with Railway. I was able to share with them the final prototype with the UI design applied and all of them expressed to me how much they enjoyed viewing the final product.
Because this project was created in a 3 week sprint, there are a few things I would do differently if I had the time and resources to do so:
Interview a larger pool of potential users possibly total of 8-10
Test prototype with more people
Conduct another round of user testing after making revisions to continue iterating and improving the product
Expand more on the search for a destination feature. Potentially design a page dedicated to helping users decide where their next adventure will be.