Brighttrip
Improving website navigation through heuristics and usability evaluation.
Duration
3 weeks
Type
Individual
School project
My Role
Usability Tester
Research Methods
Heuristic Evaluation
Moderated Usability Testing
WCAG Compliance Testing
Tools
Figma, G-Suite, UserZoom, ANDI, WAVE, JAWS
PROBLEM
RESEARCH GOALS
BrightTrip.com is a unique website offering courses to enhance travel experiences. However, the design of the website led to user confusion, which users are likely to abandon due to frustration.
• Evaluate and improve navigation and information architecture for better content access
• Increase user task completion rates by 30% through interface design improvements.
IMPACT
Influenced major website information architecture redesign, by identifying and fixing 15+ heuristic & WCAG violations.
Reduced error rates by 30% through actionable design recommendations solving usability challenges.
STUDY SUMMARY
APPROACH
Heuristic
Evaluation
Usability Study w/
Task Analysis
WCAG 2.1
Compliance
I analyzed the website against Nielsen's 10 usability heuristics to identify potential UX issues.
I observed 5 participants using think aloud protocol as they completed key tasks on the website, noting their behaviors and pain points.
I assessed the website's accessibility using (WCAG) 2.1 criteria with ANDI and WAVE browser plugins.
KEY FINDINGS
Content discovery is challenging - Users struggled to understand if they'd explored all available courses, leading to a sense of FOMO (fear of missing out).
"I felt like I was going in circles, never sure if I'd seen everything or how to get back to where I started."
Navigation feels disjointed - The website's structure doesn't provide a clear path for users to follow, causing confusion and disorientation.
Valuable content gets overshadowed - Despite the high-quality courses, users find it difficult to appreciate the full value due to the confusing layout.
"I love Johnny's YouTube content, but on BrightTrip, I'm never sure if I've seen everything. It's frustrating because I know there's probably great stuff I'm missing."
HEURISTIC EVALUATION
STUDY DESIGN
HEURISTICS LOG
Issue: Over categorization
Issue: Confusing nav bar options
| Goal | To identify UI design inconsistencies and confusions |
| Tasks |
|
| Methods | Qualitative Evaluation |
| Tools | Airtable |
01
Heuristics - Consistency and Standards
The course library page categorizes courses excessively, resulting in visual clutter.
Suggestion: Simplify categories; add filters
02
Heuristics - Recognition rather than recall
The navigation bar neither offers a clear image of the website’s information architecture nor correlates to the numerous categories
provided in the library.
Suggestion: Expand nav bar links
Issue: Duplicate entries in cart
03
Heuristics - Error Prevention
The shopping cart allows users to add the same course twice , potentially resulting in double payment.
Suggestion: ‘Added to cart’ notification & warning
USABILITY TESTING
5
Participants
TEST DESIGN
PARTICIPANT RECRUITMENT
TASK DESIGN
TASK ANALYSIS
RESULTS
10
Tasks
46%
Avg. task completion rate
| Goal | To measure task completion efficiency and satisfaction. |
| Tasks |
|
| Methods |
Moderated Testing Think-Aloud protocol Observation and notetaking Mixed-methods analysis |
| Tools | UserZoom |
To ensure relevant insights for our usability study, I selected 8 participants who meet any of the following criteria:
Actively travel and create visual content (e.g., photos, videos)
Regularly watch instructional videos to enhance their skills
The study included 10 tasks focusing on:
Website navigation - Search functionality - Course interaction
| Task 1,2,8 | Navigation and Course discovery |
| Task 3 | Search Functionality |
| Task 4,5,6 | Deep navigation and video interaction |
| Task 7,10 | Catalogue and price discovery |
| Task 9 | Shopping cart usability |
Task 4: What are the first 5 principles of ‘Leave no trace’, a video lesson in ‘Camping 101’, one of the free courses?
Task 8: How many free courses are available?
Task 4,8 Completion rate: 0%
Users struggled to effectively filter courses as ‘Paid’ or ‘Free’
"The website is annoying; it is tough to find what I want. Even though I see the links, I'm not sure whether they are the whole list because the catalogue page provides additional alternatives. I'm just confused.”
Task completion times varied widely, from as quick as 10 seconds to as long as 4 minutes 35 seconds. Users encountered several challenges:
Difficulty locating specific courses, especially when they weren't featured on the main catalogue
Confusion between 'Subscription' and 'Store' links
Trouble finding and using the search bar
Challenges in navigating course details and video lessons
Including the observations from Heuristic evaluation, 3 more usability challenges were discovered from usability testing:
Problem: Confusing words ‘Store’ and ‘Subscription’
01
Solution: New Categorization- ‘Courses’ & ‘Creators’
Problem
The thumbnails for ‘Explore chapters’ are not usable
Solution
New Categorization- ‘Courses’ & ‘Creators’
02
Problem
Users expressed frustration when trying to find the search bar. They expected it to be at the top of the page, as is common on most websites. Instead, it was hidden in the 'Browse Courses' section, which didn't even display all available courses.
Solution
Move search bar to the top of the page.
03
WEB ACCESSIBILITY CHECK
WCAG 2.1 COMPLAINCE
VIOLATIONS
| Manual Accessibility Inspection | Automated Accessibility Inspection | |
|---|---|---|
| Tools | Screen Reader: JAWS 2023 | ANDI, WAVE |
| Web Browser | Google Chrome | |
| Method | Screen Reader testing, Keyboard Navigation testing, Color Contrast and Visual inspection, Content Structure Test - Headings, lists, links | |
The screen reader does not read the course price, which are shown as labels on each course tile.
Violation: Guideline 2.5.3(A) Label name
Violation: Guideline 1.2.2(A) Captions (Pre-recorded)
The pre-recorded videos do not have the option to enable audio captions.
Violation: Guideline 2.4.6(AA) Headings and Labels
Across the website for all available course pages, the “About this course” section is skipped when navigating the website with a keyboard.
DELIVERY
COMUNICATION & NEW WEBSITE
TAKEAWAYS
ADDITIONAL LINKS
After compiling my findings from the heuristic evaluation, usability study, and WCAG compliance test into a detailed report, I shared it with Johnny Harris, the product owner of BrightTrip. To my surprise, the website underwent a redesign shortly after.
While browsing the new site, I noticed that some of my suggested solutions had been implemented. However, I also observed that several key issues I had identified remained unaddressed.
• Small changes can make big impacts
I was surprised to see how seemingly minor issues, like the search bar placement, significantly affected user behavior. It reminded me that in UX design, details matter tremendously. Sometimes, simple adjustments can dramatically improve usability without requiring a complete redesign.
• Combine methods for deeper insights
Conducting both heuristic evaluation and usability testing revealed a fuller picture of the user experience. While the heuristic review caught many issues, usability testing uncovered nuanced problems I hadn't anticipated. This combination helped me see beyond my own assumptions.
You can find the detailed reports of the above website evaluation here