LearnCode
An educational application prototype designed to teach programming through courses, community interaction, and gamification elements like rankings and badges.
Role
UX Researcher & UI Designer
Project Goal
Design the information architecture and evaluate the usability of the LearnCode prototype so learners can find courses, track daily progress, and access certificates intuitively.
Target Audience
Software Engineering students and individuals interested in autonomous learning through gamified online courses.
Key Challenges & Constraints
The primary challenge was structuring a gamified learning experience while identifying navigation and interaction friction points across core mobile application flows:
Research Overview: The research was conducted across four sequential stages by a 4-member team: an initial usability study with 10 Software Engineering students, a hybrid card sorting study with 10 participants, an unmoderated tree testing evaluation with 6 students, and a peer heuristic review conducted by 3 independent student evaluators. High-fidelity UI revisions were subsequently designed by Evelyn in Figma.
Design Strategy
The research strategy focused on understanding user mental models, optimizing content hierarchy, and eliminating interaction barriers before finalizing designs.
Key Implementation Strategies
Information Architecture
- Mental Model Alignment: Categorizing features via Card Sorting.
- Findability Testing: Validating menu logic through Tree Testing.
- Clear Pathways: Streamlined navigation between courses and profile.
Gamification & Feedback
- Learning Streaks: Motivating daily autonomous practice.
- Community Sharing: Reinforcing engagement through peer posts.
- Reward Feedback: Visible badges and certifications.
Usability Standards
- System Status: Immediate feedback for critical user actions.
- Error Prevention: Safeguarding against accidental data loss.
- Consistency: Global navigation and standardized interactions.
Evaluation Conducted
The UX research and evaluation process was structured across four sequential methodology stages to iteratively refine the prototype:
Initial Usability Study
Initial qualitative and quantitative evaluation of the core user journey (from sign-up to certificate download) with 10 Software Engineering students. This stage helped identify baseline satisfaction and early UI friction points.
Card Sorting
To address navigation challenges identified in the initial study, a hybrid card sorting session was conducted with 10 participants. This revealed users' mental models, allowing us to establish a logical hierarchy based on four main categories: Home, Ranking, Community, and Profile.
Tree Testing
The proposed information architecture was evaluated with 6 students using task-based scenarios (e.g., finding a certificate or checking daily streaks) to measure findability and structural logic without visual distractions.
Heuristic Evaluation
A peer review conducted by three fellow students using Nielsen's 10 Usability Heuristics to identify subtle interaction barriers and missing error prevention mechanisms.
Test Results & User Feedback
In the initial usability study, the 10 participants awarded the prototype an average overall satisfaction score of 9.3 / 10. However, subsequent empirical testing surfaced key structural ambiguities and interaction friction points:
Additional Usability Findings
- Missing Navigation Labels: In the initial study, bottom navigation icons lacked text labels, causing users to pause and guess panel destinations.
- Navigation Menu Disablement: The global navigation bar was hidden inside the course catalog, forcing users to repeatedly tap back instead of directly switching views.
- Authentication Friction: The registration form lacked real-time email format validation, and the password visibility toggle did not reveal the input text.
- False Affordances: Top-bar score counters were visually interpreted as clickable buttons rather than passive indicators.
- Leaderboard Sync: Registered user aliases were not immediately reflected on the leaderboard after completing tasks.
Positive User Feedback
Participants praised the vibrant visual styling, the motivating gamification structure (badges and streaks), and the clarity of interactive coding exercises, noting that the community feed fostered strong collaborative motivation.
Final Design & Improvements
Guided by user mental models from Card Sorting and usability observations across Tree Testing and Heuristic Reviews, I refined the high-fidelity LearnCode mobile prototype in Figma into a structured learning experience.
Based on the research findings, I grouped design revisions into three core enhancement pillars within the Figma prototype:
1. Information Architecture & Global Navigation
- Dual-Access Gamification: Placed the daily streak indicator prominently on the Home dashboard while adding access within Profile to match observed user mental models. A follow-up tree test is recommended to empirically validate this findability design intent.
- Persistent Global Navigation: Kept the bottom tab bar visible across the course catalog to eliminate dead-end screens and enable single-tap tab switching.
- Standardized 4-Pillar Menu: Adopted the Card Sorting hierarchy (Home, Ranking, Community, Profile) with explicit text labels under each icon.
2. System Status & Error Prevention
- Publishing Status & Feed Feedback: Designed a simulated progress spinner with a clear "Publishing..." status indicator during upload, smoothly transitioning to display the new post at the top of the community feed.
- Destructive Action Safeguards: Added modal confirmation dialogs when saving or discarding profile edits to safeguard against accidental data loss.
- Immediate Leaderboard Updates: Simulated instant user alias and score updates on the leaderboard upon lesson completion.
3. Form Usability & Microinteractions
- Registration Validation: Added inline email format verification UI states before submission.
- Interactive Password Reveal: Enabled dynamic toggle between masked and plain text for credential input.
- Clear Visual Affordance: Styled passive indicator chips distinctly from actionable buttons to prevent misclicks.
Key Learnings
Designing and evaluating LearnCode highlighted the importance of balancing gamified engagement with clear information architecture in a mobile learning prototype.
Core Learning: High overall satisfaction ratings in initial testing (such as our 9.3/10 baseline) can easily mask critical navigation barriers. Combining findability metrics from Tree Testing with qualitative findings from Card Sorting and Heuristic Reviews guided high-fidelity Figma iterations, proving that aesthetic polish cannot replace intuitive structural logic.
The study demonstrated that evaluating real user journeys helps transform subtle interaction friction into clear, user-centered design decisions.