Role: UI/UX Designer
Date: February 2024 - March 2024
Team: Chloe Adriene Lescano, Mark Marilla, Jack Morin, Ryan Tzu, Bo Zhang.
(Note: I was mainly responsible for proposing hypotheses, setting test tasks, conducting usability testing, and creating prototypes during the project. Following the end of the term, I reorganized and rewrote sections that were previously managed by other team members, finally resulting in this version.)
Introduction
TransLink is Metro Vancouver’s regional transportation authority, and operates a public transit system made up of a network of buses, the SkyTrain, and the SeaBus. In this UX case study, we aimed to assess the usability of TransLink's website, which is a critical platform for Vancouver's public transportation users to find current schedules, fare information, and trip planning tools. With millions of riders relying on TransLink annually, we strive to enhance its intuitive and efficient user experience through our redesign.
Business Problem
The current TransLink website overwhelms users, and its lack of findability, utility, and usability leads users to prefer using third-party apps for transit information or relying on transit without alerts, rather than the official Translink website.
Goals
Our goal is to enhance the website usability and overall satisfaction through our evaluation and redesign. We anticipate that the System Usability Scale (SUS) score will be above 70.
Constraints:
Limited access to Translink data: As this is a group project within an educational setting, we lack access to Translink's backend data. Therefore, we are unable to thoroughly track user visits, page views, clicks, and dwell time.
Budget constraints: Without financial support, instead of recruiting a large number of users for screening and testing purposes, we have relied on friends and family in our immediate circle to identify the most suitable candidates.
Unavoidable Bias: Since we selected this website for research and testing, there might be an inevitable bias in the process, potentially influencing outcomes to prove our ideas as correct.
Design Process & Timeline
Given that Translink.ca is an existing website, and the course focuses on usability testing, we opted for a combination of hypothesis-driven design process and Lean Hypothesis Testing. Moreover, considering the time needed for usability testing and subsequent analysis, we made slight adjustments to our timeline accordingly.
Key Assumptions
Considering user needs and business goals, we conducted a vote to prioritize the following assumptions:
Too many repeated options in the navigation system can be confusing for users when finding information.
Our users need a more convenient way to access current alerts, because checking alerts is one of the key features of the Translink website. However, currently, these alerts are not sufficiently prominent.
We believe we will attract more non-English native speakers to our site if we offer language options commonly used in Vancouver.
Screening
The selection process included 10 screener questions that were tested by 12 participants who fit our criteria of frequent transit users. Below are the questions used to screen our candidates:
How frequently do you use public transportation in the Metro Vancouver area?
Which modes of public transportation do you typically use?
Do you use any specific transit-related apps or websites?
If so, how often do you use these apps or websites?
What are the specific tasks you use these websites or apps for? (Please select one or more that’s relevant to you)
How satisfied are you with online resources and services for public transportation?
How familiar are you with the transit schedules in the Metro Vancouver area, especially on holidays? (Rate from 1-10)
Is English your native language? If not, do you prefer browsing websites in English or in your native language?
What service site for transit news and updates do you usually use to get transit information? Is it reliable for you?
What are the biggest challenges for you when you take transit?
Validation & Hypotheses
Based on the screener test results, we learned that 91.7% of our participants deem transit schedules as the most important data they need when commuting, with 83.3% of participants utilizing Google Maps as their primary source for transit information.
Another key finding is that 25% of our participants indicated that English is not their native language, yet 66.6% still prefer browsing websites in English, while the remaining 33.3% are comfortable with either English or their native language.
We suspect this is mainly due to the fact that the survey sample generally has good proficiency in English. Additionally, viewing websites in other language options often leads to missing information, translation errors, or outdated content. After discussions, we decided to temporarily abandon the assumption of providing options in other languages. This one is too hard to test due to numerous influencing factors.
Here are the two hypotheses we ultimately prepared for testing:
We believe that page bounce rates will be reduced by 4% if the global navigation bar is streamlined, and the repeated options in the navigation bar and the features section below are consolidated.
We believe user satisfaction will increase by 7% if we implement a toast at the top of the homepage displaying the most important recent alert, along with adding a pin notification next to the 'Alerts' label in the navigation bar.
Methodology
Participants
During the screening process, we analyzed each response and chose one user per team member who best matched our user testing criteria. Here are the 5 participants who eventually participated in the usability testing:
Task Cards for Usability Testing
Usability Testing
System Usability Scale (SUS)
The System Usability Scale (SUS) provides a standardized method for evaluating the usability of the TransLink website. Our SUS score stands at 59, suggesting below-average usability (68) for our website. Though not abysmal, there are significant areas where usability can be enhanced.
Rainbow Sheets
Rainbow Sheets offers a comprehensive visual representation of user feedback and observations collected during usability testing sessions. Using the Rainbow Sheet, we recorded three types of crucial data, which is task success (TS), time on task (TOS) and observations of participants' behavior. Additionally, We also calculated a percentage to determine the average time and proportion of achievement. (link)
Task 1
Task 2
Through the observation and analysis of participant behavior using Rainbow Sheets, we discovered the following insights:
Users express confusion and hesitation when encountering repeated options. As Hicks' Law suggests, more options lead to increased decision time.
After successfully completing a task, users tend to stick with the same method rather than exploring alternative approaches.
The excessive number of options in the navigation system adds to the difficulty of finding information. 2 out of 5 participants failed (or almost failed) to locate the alerts in the navigation bar, despite its apparent visibility to designers.
Post Test Survey
Following the completion of the tasks we asked our participants to complete a short form to gather additional qualitative and quantitative feedback. The questions are as follows:
For Task 1, what was your overall impression of the Navigation Bar and Feature Sections on the home page? Did you find them accessible or overwhelming?
If the global navigation bar is streamlined, and the repeated options in the navigation bar and the features section below are consolidated, do you think this will make it more accessible? (Scale of 1-10)
For Task 2, how would Translink's Alert feature help you on your transit commute?
Do you think adding toast at the top of the homepage displaying the most important recent alert, along with adding a pin notification next to the 'Alerts' label in the navigation bar could help people find alert information more easily? (Scale of 1-10)
Were there things about the website’s design or layout that confused you? If yes, which part?
With the feedback from the participants, we were able to draw conclusive results to form our key takeaways, as well as confirm our 2 hypotheses, enabling us to move forward to create our prototype for a new and improved design.
Key Takeaways
Most users found it confusing to locate information and key details on the website due to the lack of clear information architecture.
Users struggled to locate alerts information on Translink’s website, indicating that the alerts tab is not prominently displayed on the homepage for user convenience.
Recommendations
Before:
After:
Solution 1
After the consolidation, repeated options have been reduced, enhancing user ease in finding information and improving overall findability.
When users hover over the label in the global navigation bar, a sub-menu will show up.
Solution 2
As demonstrated earlier in the research, prominently displaying important alerts meets user expectations and enhances the website's utility.
Conclusion
From our research, we found that the navigation bar and features section design of the Translink website often overwhelm users, and some users find it difficult to locate transit alerts information, despite this being a crucial feature. We believe that through our redesign, we can partially address these issues and enhance the competitiveness of the Translink website in third-party apps.
Next, the prototypes resulting from this research should be tested by users to confirm that our solutions indeed address the current issues. Additionally, if possible, we would be more than happy to share the process and results of this study with Translink, contributing to the convenience of travel for Vancouver residents.
Lastly, on a personal note, this project has involved many 'firsts' for me, such as my first time using a hypothesis-driven design process, my first time conducting usability testing, and as a newcomer in Vancouver, my first time collaborating with four locals on a complex local transportation website project. I expect to apply everything I learned from this project to my current career and beyond. Although this was just a school project and only a glimpse into UX, the skills I took away will be very useful to my future projects.
Comments