This university project for the Human Computer Interaction Course (HCI3150) redesigns the MetroBus (St. John's public transit) homepage to fix usability issues like clutter, poor navigation, and hidden key features. The prototype uses a clean dark theme with the Trip Planner front and center for better user experience.
Check out the live site: (https://siddwayy.github.io/Metrobus/)
Developed for HCI 3150 by Prateek Raghav this redesign addresses original site problems including visual clutter from ads and announcements, Trip Planner buried in menus, inconsistent buttons, and recall-heavy features like stop IDs. The solution features modern dark mode, high-contrast green buttons, and prioritized core tasks.
- De-cluttered layout without ads or extra boxes
- Trip Planner prominently at top-center
- Consistent dark theme for better readability
- Reduced cognitive load with clear navigation
Tested with 4 participants planning a trip from 46 Wicklow St to 173 Freshwater Rd:
| Metric | Original | Prototype | Improvement |
|---|---|---|---|
| Avg. Time | 59.25s | 24.5s | 59% faster |
| Total Errors | 3 | 1 | 67% fewer |
| SUS Score (Avg.) | 35.6 | 95.0 | +59.4 points |
100% of users preferred the prototype for its clarity and efficiency.
- HTML5, CSS3, Vanilla JavaScript
- Responsive design for mobile
- Hosted on GitHub Pages
- Clone repo:
git clone https://github.com/siddwayy/Metrobus.git - Open
index.htmlin browser - Edit
styles.cssandscript.jsas needed
- Prateek Raghav