MEGABUS REDESIGN
Design iterations of the Megabus interface and booking process determined by a user test.
Role(s)
Lead Researcher, UX Designer
Test Participants
Ya Dang, Justin Obra, David Crean, Nate Davis, Elyse Francis
Duration
June 2022
Tools
Figma
Miro
Zoom
Adobe Illustrator
Megabus is a major North American transportation bus serving 100 cities between the US and Canada, known for their affordability and convenience to a wide demographic of people.
The objective of this user test was to determine design inconsistencies and usability problems within the content areas, and booking areas. This exercise collected data under controlled test conditions to establish baseline user performance and satisfaction of the interface for future usability evaluations.
PROBLEM
Upon my initial audit of the website it was clear that there were dated design practices throughout the interface. In my research for the font, I was able to determine the Brand Guide for Megabus had not been updated since 2013.
Potential sources of error in the objective of the user testing included:
VISABILITY
Failure to locate functions
Excessive clicks to complete a task
Failure to follow recommended screen flow
CONSISTENCY
Failure to locate and properly act upon desired information
Selection errors due to labeling ambiguities
ERROR PREVENTION
Improper labelling
Improper entry field usage
RESULTS
Decreased average task completion time
Improved consistency and feedback
Reduced errors and cognitive overload
USER TESTING
The walkthrough user test was conducted with participants over Zoom, and recorded to document the findings. While recording I was also taking notes on the responses from participants, timing for tasks, and noting any feedback. I used these recordings to then verify the findings and determine my conclusions.
USABILITY TEST REPORT
A visual showcase of the testing objective, method, results and conclusions.
WEBSITE AUDIT
I decided to keep the overall design of the website true to their current branding, while still improving the key factors revealed with the user testing. Here I've displayed an example of some stand-out concerns within the original Homepage.
Navigation Bar
"Fare Finder" is not useful
"Help" could be a dropdown menu
"Change Trip" could be under "Help"
"Log in/Sign up" could renamed for clarity
Map for language could be recognized language icon for clarity
Cards
"Experience Niagara Falls" is a dead-end and has no option to book a trip within.
Cards are dated in appearance
Could be more useful content
Footer
"Top Routes" can be in FAQ's or a card above
Accessibility options are redundant and can be condensed and renamed for clarity
Social Media icons can be updated
INFORMATION ARCHITECTURE
To address the largest issues with the user flow, I started in Miro to create a new navigation and footer to condense and clarify each category. An unclear navigation bar creates an overload of calls to action and reduces the findability of the page that they're trying to access.
WIREFRAMING
From Miro I moved into Figma where I took the information architecture and built out a lo-fi wireframe that transformed the current Megabus website to an improved and consistent user flow, feeling more refreshed and approachable for users while still remaining on brand.
Low Fidelity
High Fidelity
The hi-fi wireframes took the Megabus brand colours from the official Brand Guide and used them to add contrast to the homepage, emphasizing the calls to action that would be important for the user to improve findability and clarity.
Prototyping
The high-fidelity wireframes were created into a functional Figma prototype to aid the visualization of how the redesign would function. This prototype showcases the most highly used assets of the website progressing through landing on the homepage, and into the main functions of the booking process.
USABILITY COMPARISONS
Decreased average task completion time
Improved consistency and feedback
Reduced errors and cognitive overload
Remaining recognizable to frequent users
REFLECTION
This project was my first time leading a user test, and the first time that I lead an end to end process from the UX research to designing and creating a prototype. I enjoyed creating and leading the user test most out of this process. It created a solid foundation to build from throughout with informed design choices.
CHALLENGES
For the redesign I found myself wanting to stray and create my own branding. My approach remained user focused to keep the new design on brand as they have created a recognizable look and feel to their overall experience. I took the aspects that I liked and functionally improved the user experience but not overwhelming loyal users.
TAKEAWAYS