A semester-long HCI course project focused on redesigning Bykea into a more usable, accessible, and inclusive experience.
We followed an end-to-end HCI workflow: problem discovery → evidence-based redesign → user evaluation → interaction analytics (Microsoft Clarity) → optimization recommendations.
- Project brief:
Updated_HCI_Project_Description_2025____.pdf - Final presentation:
final_presentation/HCI_Project_Presentation_-_Zuha_Maham_Maryam.pdf - Milestone 1 report:
milestone_01/hci_phase1.pdf - Milestone 2A report (HTML prototypes):
milestone_02A/HCI_2A_Zuha_Maham_Maryam.pdf - Milestone 2B report (Figma prototype evaluation):
milestone_02B/HCI_2B_Zuha_Maryam_Maham.pdf - Milestone 3 report (Clarity analytics + optimizations):
milestone_03/HCI_03_Zuha_Maryam_Maham.pdf - Deployed prototype (Milestone 3):
https://bykea-final-working-prototype-36t8r5dp3-maryam-ihsans-projects.vercel.app/
-
Figma Make prototype link (Milestone 2B):
https://www.figma.com/make/FYQN68CCulCLaqZ5OOE1SU/Bykea-Final-Working-Prototype?p=f&t=RtOeD6ss8fMdjhFQ-0
Course: CSE-407 Human-Computer Interaction Goal: Apply HCI methods to redesign a real system using research + iterative evaluation.
Chosen product: Bykea (ride booking, parcel, wallet). Even when a system is functionally complete, users can still fail at basic tasks due to poor information architecture, weak feedback, confusing mapping, inconsistent visuals, and inaccessible interaction patterns.
This project documents a complete redesign pipeline, including research artifacts, prototypes, evaluations, and analytics-driven refinements.
Instead of “one UI for all,” we redesigned Bykea into four tailored interfaces, each optimized for a distinct user group:
- General users
- Senior citizens
- People with disabilities (motor/vision/cognitive constraints)
- Illiterate / low-literacy users
This approach applies inclusive design by adapting interaction techniques to user ability (not forcing users to adapt to the system). Key accessibility ideas include large touch targets (56dp+), high-contrast layouts, progressive disclosure, voice input/support, and icon-first navigation.
Objective: Identify real usability problems in Bykea’s existing interface using mixed methods.
What we did
- Online survey (broad user feedback)
- Task-based user testing using think-aloud
- Post-task interviews
Tasks tested
- Book a ride (pickup → destination → confirmation)
- Send a parcel (sender/receiver details)
- Wallet/balance flow
What we found (high level)
- Navigation + information architecture issues (users struggle to find features like wallet)
- Mapping/location selection problems (pin accuracy, lack of named landmarks)
- Small touch targets and unclear affordances
- Weak feedback/status during key steps (driver search, confirmation)
- Friction for vulnerable groups (seniors, disabled, low-literacy)
Artifacts:
milestone_01/hci_phase1.pdf- Survey PDF + responses CSV in
milestone_01/
Objective: Convert Milestone 1 findings into concrete design solutions and high-fidelity prototypes.
What we produced
- HTML/CSS/JS screen prototypes (high-fidelity mock flows) for each persona group
Key redesign directions
-
Declutter the home screen: make pickup/drop-off central and visible
-
Improve location selection: clearer structure + stronger confirmation cues
-
Rework flows into step-wise panels: fewer decisions per screen
-
Accessibility upgrades:
- Seniors: larger text, higher contrast, simplified choices, voice input support
- Disabled: large touch targets, predictable layouts, reduced typing, clear confirmations
- Illiterate: icon/emoji-driven flow, minimal text, strong visual cues, voice support
Artifacts:
milestone_02A/(HTML files + report)
Objective: Make the prototype interactive and evaluate it using appropriate HCI evaluation methods per user group.
Why we changed approach HTML prototypes were not enough to simulate realistic interaction. We transitioned to an interactive prototype using Figma / Figma Make and performed structured evaluations.
Evaluation methods used
- General users (15): Heuristic evaluation (Nielsen’s 10 heuristics) across ride/parcel/shop flows
- Disabled users (2): Cognitive walkthrough (step-by-step learnability + task completion)
- Senior citizens (2): Think-aloud protocol (observe confusion, expectations, confidence)
- Illiterate/low-literacy users (2): Picture-based usability questionnaire (icon understanding + voice feature utility)
Outcome The redesigned interface improved clarity, accessibility, and predictability. At the same time, evaluation surfaced refinement needs such as:
- clearer terminology for certain features
- better discoverability for some controls
- stronger voice guidance (especially for low-literacy users)
Artifacts:
milestone_02B/(report + summary)
Objective: Validate and optimize the redesigned prototype using real interaction analytics instead of only controlled testing.
What we did
-
Exported the Figma Make design into a working web app
-
Hosted it on Vercel
-
Integrated Microsoft Clarity to capture:
- click maps / dead clicks / rage clicks
- scrolling + attention patterns
- session recordings
User sessions
- Collected 25+ sessions on the deployed prototype.
What we learned
-
Sessions were generally smooth with low frustration indicators, suggesting strong clarity.
-
A notable issue was a high rate of dead clicks, meaning some elements looked clickable even when they were not.
-
Heatmaps revealed opportunities to refine:
- affordance cues (make interactivity obvious)
- CTA placement consistency
- onboarding micro-hints (e.g., how to interact with maps)
- voice interaction transitions and feedback
Artifacts:
milestone_03/(report + working code)
Across the redesign, we explicitly applied core HCI principles including:
- Visibility of system status (clear progress + confirmation states)
- Consistency and standards (predictable layouts and control placement)
- Recognition over recall (icon-first navigation; reduced memory load)
- Error prevention and recovery (better validation; safer confirmations)
- Reduced cognitive load (progressive disclosure; fewer decisions per screen)
- Accessibility by design (large touch targets, high contrast, voice support)
The final working prototype code (exported from Figma Make and hosted for Milestone 3) is available here:
milestone_03/prototype-working-code/
Tech stack (exported project):
- Vite
- React + TypeScript
cd milestone_03/prototype-working-code
npm install
npm run dev.
├── Updated_HCI_Project_Description_2025____.pdf
├── final_presentation/
├── milestone_01/ # Survey, responses, Phase 1 research report
├── milestone_02A/ # HTML prototypes + Phase 2A report
├── milestone_02B/ # Figma prototype evaluation report + notes
└── milestone_03/ # Clarity analytics report + deployed prototype code
└── prototype-working-code/- Zuha Aqib (26106)
- Maham Junaid (26909)
- Maryam Ihsan (27152)