Travel far and fast with all-electric buses.
Scroll down to learn more.
Project Details
Type
Responsive Website Design + Rebrand
Role
UX Researcher, UX/UI Designer, UX writer
Length
8 Weeks
Tools
Figma, Adobe Illustrator, Google Sheets and Docs, OptimalSort, Pen and Paper
Background
Lightning Transportation is a brand new bus transportation system between cities in the United States that runs on all-electric buses. We aim to help the planet and not emit CO2 emissions into Earth’s atmosphere by strictly offering all-electric transportation. Lightning Transportation also wants to make public transit a norm by offering a more accessible and convenient way of hopping on a bus via real-time tracking. Lightning’s services are about to launch and they would like an online presence for users to navigate and explore.
Problem
There is no current way for users to view or schedule a trip online, thus Lightning is losing potential sales online.
Goal
Understand user frustrations, emotions, and areas of friction when booking a trip online to create an efficient, enjoyable experience online for Lightning’s guests and in turn bring in more revenue for the company.
Understanding the existing market.
Before any design work, I had to understand who Lightning Transportation is competing against and who its target users are.
A series of competitive and comparative analyses were completed to gain insight into the online market as a whole for travel buses.
A few existing companies that I researched included:
Greyhound
Megabus
FlixBus
Amtrak
While not necessarily bus travel, I also looked at other companies that either offered a form of travel, such as:
Delta Air Lines
Virgin Atlantic
American Airlines
Uber
Lyft
& more
User Interviews
Through user interviews, with 8 participants, we learned the following:
Paint points of traveling by bus included: longer commute times, reliability of bus schedules, and horrible WiFi (when available)
Affordability and accessibility were noted as good points by interviewees
All 8 participants would support an all-electric bus company
When traveling far distances, bus riders prefer traveling overnight to sleep comfortably
Booking a trip was intuitive to all participants via familiar elements used in the design of the process
After researching online and conducting some primary research through family, friends, and colleagues who regularly use the bus; I picked up on some patterns.
The checkout process is usually a 3-step process (Enter Info, Select Trip, Payment)
Many of the UI elements were similar across the board (entry fields, CTAs, etc.)
None of the travel companies were fully electric
The checkout process would later prove to be really insightful as it allowed us to envision a smooth, functional user and task flow.
Defining Pain Points Online
Investigating online I found that most user paint points came from similar areas in the process of buying tickets for a trip online via desktop:
Visual Clutter
As seen on Amtraks site, two bottom messages appear once landing on the page and the search functionality hides a bit underneath the header. Ultimately, this slowed the booking process a bit.
The Booking Process Flow
Megabus did not have an option for users to go back and edit selected trips such as departure times. I would go back using the browser but would get an empty screen. The trips were saved when I would restart the process from the homepage but I’d then have to remove the previously selected tickets and start over.
Lack of Visual Hierarchy
Sites that did not prioritize booking a trip on the homepage felt ineffective as the user would have to scroll or find where to begin the process; thus causing friction. As seen on the OCTA desktop site, booking a trip felt out of reach unless you knew were to look. Other similar sites like MUNI were more intuitive and accessible.
Through research, we met David. Lightning’s Persona.
David Gomez
Student and Content Creator
Bio
David is a student who loves to travel and explore new places during his breaks from school. He's all about trying new foods and making memories. He's also eco-friendly and does his best to reduce his impact on the environment, this includes not owning a car, and he often opts for more sustainable transportation options.
Goals
Travel somewhere new every quarter break.
Reduce his carbon footprint, and make sustainable choices in his daily life
Create content to continue funding his travel
Learn in and out of school through immersion
Frustrations
Paying extra for fees that he thinks should be standard, such as Wifi and seats near outlets
Forgetting his phone charger at home or his Airpods dying mid-workout
Finding sustainable travel options online
“Travel is about experiencing new things and making memories.”
A Moment to Define Lightning’s Online Presence
I did some digging on how people book trips online to get an idea of how to make Lightning Transportation stand out. I utilized Pinterest to make a "mood board" of the look and feel I wanted for our website. From there I made a UI kit that resonated with Lightning’s brand:
Click image to enlarge.
Functional User Flow
As we discovered earlier through secondary research, noticeable patterns for booking trips were defined; regardless of transport methods:
The checkout process is usually a 3-step process (Enter Info, Select Trip, Payment)
Many of the UI elements were similar across the board (entry fields, CTAs, etc.)
None of the travel companies were fully electric
The most insightful was that most trips were booked in three main steps. This allowed me to envision the three pages needed for users to complete a booking with as few steps as possible:
Homepage (Where a user can promptly search for trips)
Trip page (Where users can see trips available for selected locations/dates/times)
Payment page (Where the user pays for a trip)
Additionally, the “Trip Page” can be separated into two pages to allow users to view and select a departure trip and a return trip respectively. Lastly, a “Confirmation Page” is always great to have as it gives the user feedback that the trip was booked successfully and creates emotional happiness of something to look forward to.
Click image to enlarge.
Envisioning the Site from a Bird’s-Eye View
Click image to enlarge.
After determining the main task flow for users to book a trip. I proceeded to envision the pages that would complement the site. A few ideas came to mind after exploring existing travel sites:
How does a company establish trust between the company and the user
How can users explore locations at a glance to provoke ideas
To solve these, I opted for focusing on two other pages where users can interact with the site.
An “About Us” page where users can read about the company, see if they qualify for a discount or contact customer service. This page was created to build trust and confidence between a new user and the company. Transparency on the company’s end establishes this bond.
An “Explore” page where users can discover categorized destinations such as “Top Rated”, “New” and more. This page acts as a guide for a user unsure of where to travel.
Thus after establishing the necessity for an “About Us” and “Explore” page, I created a site map to envision the site as a whole.
Back to The Drawing Board
My next step was to take all the information gathered from previous research and begin sketching some rough drafts of Lightning’s homepage.
A few things I considered when sketching the homepage:
How will the homepage aid in the flow of the user/task flow?
How will the brand be represented?
How will the homepage translate on mobile?
How accessible will the site be to users?
How can the homepage be simple yet effective at getting ticket sales?
Low Fidelity Wireframes
Finally, after doing our research, determining Lightning’s target users, creating a site map, and envisioning the user flow; I began drafting some wireframes for the pages I found necessary. My goal here was to get as many ideas out as possible and later edit as needed when bringing these to life with the UI Kit and Task Flow.
Homepage
Explore Page
Booking Page
Payment Page
About Us Page
Confirmation Page
Bringing It All Together - Creating a Low-Fidelity Prototype
Utilizing the wireframes, feedback from peers, and the UI Kit, I brought together all elements to create the following Low-Fidelity Prototype screens. Again, the focus was mainly on making the task flow (booking process) efficient enough to capture and retain users on the site which in turn would convert into sales.
Homepage
About Us Page
Explore Page
Depart Trip Page
Return Trip Page
Payment Page
Confirmation Page
The Initial Testing Phase
After mocking up a low-fidelity prototype via Figma. I proceeded to create a research script aimed at a few objectives:
1. Test the overall quality and navigation of the site design.
2. Test how users interact with interactive cards and CTAs.
3. Test how easily users can check out a bus ticket.
4. Observe any areas of frustration, confusion, or difficulty.
Test users were also tasked to put themselves in the shoes of our persona, Miguel, and book a trip from Los Angeles to San Francisco.
What Test Participants Were Saying
“I don’t really use QR codes on a desktop to receive notifications. It almost feels like extra work having to take out my phone and snap a photo just to receive information. I’m more used to entering my phone number somewhere and receiving notifications on my phone. It feels more intuitive as many sites utilize this method.”
— Will
“I ride the bus all the time to get to school. I’m used to buying bus tickets beforehand and the booking process was straightforward. Would love to see a feature that includes ApplePay since that’s how I pay for my rides.”
— David
“The entry fields in the payment page seemed a bit off and it wasn’t till I realized that hint text was missing. I feel like this will guide users when entering crucial information. ”
— Julie
Test Findings
Additionally through usability testing, I was able to note a few findings and compile them onto an affinity map. Here’s what I noted:
Utilizing Test Findings and User Comments
After creating an affinity map to key in on areas of success, frustrations, and improvements noted by test participants, I went ahead and prioritized iterations. I opted for using the Feasibility, Desirability, and Viability scorecard to conclude the following priorities in the next iteration:
Top Priority (these were influential in lessening friction when it came to main the task of booking a trip):
Adding hint text in entry forms
Hierarchy for displaying trip Information
Updating destination cards
Low Priority (these were seen as secondary, some were made and others would have to wait for the next iteration)
Remove QR code
Make font sizes consistent
Hierarchy in CTAs
Allow users to create an account via checkout
Add Search Functionality to Explore Page
Priority Iterations:
Priority iterations were rated on two goals: lessening friction in the task flow and maintaining users engaged to complete a trip and in turn, bringing in revenue for Lightning Transportation. My first focus was on adding the necessary hint text at the payment screen to ensure the payment information was captured properly and to not frustrate the user when information was not entered properly. From there, I enriched the booking process to maintain users on the site longer, hopefully catching a sale through a pleasurable experience.
Before: The entry forms in the payment section were missing hint text to guide the user in the right direction when adding crucial information.
After: Hint text was added, making it clear as to how information should be entered. This would be crucial in converting turnarounds for Lightning as a transaction would be more likely to go through if the information was entered properly.
Before: The departure trip selected was shown at the top, briefly outlined by a yellow strip to be easily identified. Return information sat underneath it and was unaligned with the rest of the page. Visual hierarchy and proximity lacked to display the proper information needed effectively. The selected return date was highlighted in yellow with an option to select a date via a calendar; again unaligned and appeared disabled due to the grey background.
After: The return details were shown within a container that also contained the previously selected departure trip details. The selected return date (still highlight yellow) now lived within the same area of the return details with an option to view a calendar nearby to give users the affordance that they can select further dates. The content was also more aligned and easily identified to users as the container played a nice contrast against the background. This update would aid in the task flow for users.
Before: Destination cards did not align with the flow of the rest of the site were interactive components had rounded edges. Location names were also a bit too far from the destination photos and the “view details” link was 14px. A bit too small, putting those with poor eyesight out of reach.
After: Destination cards were updated to feel more interactive. A drop shadow was added to add depth and emphasis to the cars; as if a user could really select one. Bringing this component gave users the affordance that the cards were interactive as in real life. Also, the information within the cards was updated to appear more balanced. The “View Details” link was updated to 16px, regular to be more accessible to those with poor eyesight. These updates would create a more pleasant experience when booking a trip.
Secondary Iterations
After focusing on the top priorities, I opted to make updates that seemed feasible and required low effort yet made an impact on the overall flow.
One of these was removing the QR code on the screen when users successfully booked a trip. I took into account user testing feedback and also did additional research to iterate.
In the second iteration of the “Payment Successful” screen, I removed the QR code and added an option for users to enter their phone numbers to receive push notifications. I went with entering a phone number because:
Familiarization, majority of users are familiar with push notifications
It lessens friction if the user has a phone in their pocket, they no longer need to take it out and snap a photo
Creates an opportunity to keep users engaged as users don’t need to open another app to receive notifications
Other areas I updated were:
Making font sizes consistent
Making CTAs consistent
Before
After
The Second Iteration of the Lightning Transportation
The second iteration put to use initial testing findings and some alignments with business goals to enhance and improve the booking experience via Lightning’s website. Moving forward, future iterations would improve upon the user experience with added features and tweaks to make the site more cohesive. As for now, the second iteration stands as a stepping stone to getting the site live and running.
Homepage
About Us Page
Explore Page
Depart Trip Page
Return Trip Page
Payment Page
Confirmation Page
Next Steps and Beyond
After the second iteration, here are some next steps I would take:
Create an experience where users can create an account at checkout
Revisit the “Explore Destinations” screen and see how it could be improved
Retest the prototype to calculate the effectiveness of the updates made
Build the product after retesting once more
As my second case study and project, I really gained insight as to how to approach a project. Familiarizing myself with the design thinking process and putting users first helped guide me in the right direction. Another aspect was putting a focus on business goals and noting how features, updates, and the overall flow would in turn bring revenue to a company. Ultimately, this project was one that evoked more passion in my career in UX Design.