UX Research of
Compass card Website
Figma, Canva, Slack, Zoom, Excel
Jan.3, 2024 - Jan.12, 2024
Juyeong, Kyra
Case Study
Overview
-
Conduct UX research for the compass card website
-
Understand issues on this website
-
Suggest solutions based on research and analysis
Our Process
-
Analyze the website
-
Identify the Issues
-
Conduct UX research (Heuristic Evaluation, User Interview, Cognitive Walkthrough)
-
Analyse data
-
Compare research findings
-
Discuss possible solutions
-
Choosing a method to solve the problem
-
The next step
What is the Compass card?
Compass cards are convenient, reloadable fare cards that can be used when taking transit within Metro Vancouver. Compass Cards can be loaded with Stored Value, or with prepaid passes (such as Monthly and DayPasses). Additionally, users can use their VISA or Mastercard credit card instead of Compass card.
Compass Card Website: https://www.compasscard.ca/
Research goal
-
Analyzing the Compass Card Website
-
Finding any issues or problems within the website and coming up with a solution
Heuristics Evaluation
Issues
Color contrast
Overall, the color contrast of this website is not enough. It would be more clear and tangible for users if the color of texts are darker than now. Moreover, it helps those who prefer to use accessible versions.
Lack of Information
There is no description about the zone on the Purchase a Card Page. People might be confused which zone should they choose when they want to purchase a monthly pass.
Showing the details about the zoning map of Sky train would allow people to purchase the collect zone for a monthly pass.
Issues
The image icon in Find a trailer
It does not describe accurate information for the user to find the compass card retailer and bending machine. Lack of information on each image icon.
Briefly explain what each image icon means with descriptions below.
Issues
Link Error
When users click on the link to try to purchase online, the letter 500 error appears. It does not tell the user exactly which error is the problem.
Showing correct information instead of the error. For example, when a customer clicks the Online button, the customer will transfer to purchase a card section instead of showing the 500 error.
User Interview
Target Audience
The Compass Card has no particular selective targets as the website and the cards themselves are in fact for everyone (ages 18 and up) who would like to prioritize convenience in their commute.
The Goal
To know the user experience and gather user feedback
The questions used
1. How often do you use the website?
(Do you prefer to use your phone or a desktop?)
2. Could you tell me about your user experience when navigating through the website?
3. Have you ever had a hard time or gone through any technical issues when using the website? (Could you tell me a little more about that?)
4. on a scale of 1-10 how would you rate the website’s usability?
5. Could you tell me about any favorite or like and dislikes about the website?
6. If you could, what are certain features or changes would you like to make in the website?
The Result
5/12 users say they don’t use the website.
7/12 of users agreed to an interview.
User General Comments
-
“It needs more information details”
-
“The app s good as it is. 10/10”
-
“The transaction process takes forever. So I often just have to tap up at the machine”
-
“An app would be nice.”
-
“It’s not that complicated and it’s pretty easy to understand and use.”
Cognitive Walkthrough
Main Goal
Main goal : Activate compass card through website
Sub-Goal 1: Purchase compass card
Sub-Goal 2: Register compass card
Sub-Goal 3: Load monthly&daily passes
Sub-Goal 4: Add stored value
Sub-Goal 5: Autoload setting
When did the problem happen?
-
When they purchase a Compass Card
-
When they make a transaction
-
When they load Compass Card
Issue1
Select card type when they purchase a Compass Card
-
Some users don't know the difference between Adult and concession.
Issue2
Store values and passes
-
Some people don't know which zone they should choose.
Issue3
Enter billing information
-
The address of billing information must be in Canada thus I couldn't use my credit card from Japan. They should describe this at the beginning of this form, not below.
Issue4
Sign in
-
Users cannot save their login information due to security reasons. This might be inconvenient for users because they need to login every time.
As for the improvement, they should try to Make less time to be ready for use since this card will arrive within 10 business days, they are required up to 2 hours to add values/passes.
Findings
I found several areas that need to improve more.
-
Layout of website and functions
-
Eradicate the limitation of Transaction
-
Make less time to be ready for use
(Card will arrive within 10 business days, they are required up to 2 hours to add values/passes)
-
More information for users
Solutions
User Persona
User Senario
Goal
Maria wants to explore Vancouver and decides to buy and load her compass card for future transit adventures online.
Process
-
Access to the Compass Card website
-
Access the “Purchase a card” section on the home screen
-
Figure out where the compass card retailers and bending machines are in case she needs support
Actions
1. Access to the Compass Card website
- Search for Compass Card
- Click / tap the link
- Access successfully
2. Access the “Purchase a card” section on the home screen.
- Select card type
- Select load values, add monthly pass/daily pass
3. Figure out where the compass card retailers and bending machines are in case she needs support.
- Refer to the image icons on the map
Challenges for Users
1. Access to the Compass Card website
- Overall, some parts of the content in this website are not tangible because of the weak color contrast and small text size.
2. Access the “Purchase a card” section on the home screen.
- She struggles to identify where Zone 1, Zone 2, and Zone 3 are located on the page, making it difficult for her to proceed.
3. Figure out where the compass card retailers and bending machines are in case she needs support.
- She faces difficulty as the icons lack accurate descriptions, making it challenging for her to locate the needed services.
Conclusion
-
The website needs to provide clear instructions and visuals for each zone on the homepage, ensuring users like Maria can easily understand and navigate the purchasing process.
-
Clear and intuitive icons with accurate descriptions should be incorporated to guide users in finding compass card retailers and bending machines.
-
The design elements, especially text color and size, should be revised to enhance readability and user comprehension.
Next Step
- Work on Website Improvement
- Develop an App
Moving forward, the researchers would like to proceed to discover more unresolved issues and problems through the Heuristic Evaluation, User Interviews, and this time the Guerrilla Usability Testing.
We believe that these methods could further improve our research’s progress by further analyzation of the website and user data gathering. We also believe that the users are the key to solving the website issues because “with research = a true design”