Techia
Techia
Gamified Tech Learning App
Gamified Tech Learning App
Category
Category
Mobile App
Mobile App
EduTech
EduTech
Role
Role
UI Designer
UI Designer
Team
Team
Part of the National UI/UX Competition Vol. 1 (Feb 24, 2025) by the Informatics Student Association of Universitas Dirgantara Marsekal Suryadarma. Team Kun Fayakun covered UI/UX design, research, prototyping, and presentation, awarded 2nd place.
Part of the National UI/UX Competition Vol. 1 (Feb 24, 2025) by the Informatics Student Association of Universitas Dirgantara Marsekal Suryadarma. Team Kun Fayakun covered UI/UX design, research, prototyping, and presentation, awarded 2nd place.
Overview
Overview
A gamified IT learning platform for school‑age learners that addresses declining classroom comprehension by using pet streaks, coin rewards, and virtual accessories to make learning more engaging and motivating.
A gamified IT learning platform for school‑age learners that addresses declining classroom comprehension by using pet streaks, coin rewards, and virtual accessories to make learning more engaging and motivating.
Problems
Problems
In the digital 4.0 era, technology enables remote learning but also introduces issues that affect student outcomes: declining comprehension and motivation, reduced reading habits, limited in‑person interaction, increased dependence on screens, and exposure to online risks. During and after pandemic-driven distance learning, many students became comfortable with online routines yet disengaged from structured study, leading to behavior and discipline gaps. The result is uneven learning quality and lower engagement across classroom activities.
In the digital 4.0 era, technology enables remote learning but also introduces issues that affect student outcomes: declining comprehension and motivation, reduced reading habits, limited in‑person interaction, increased dependence on screens, and exposure to online risks. During and after pandemic-driven distance learning, many students became comfortable with online routines yet disengaged from structured study, leading to behavior and discipline gaps. The result is uneven learning quality and lower engagement across classroom activities.
Goal
Goal
Design a gamified learning platform that improves motivation and engagement by turning study into clear goals, streaks, and rewards, with bite‑sized tasks, instant feedback, and safe, focused interactions. The platform should support teachers with structured content and progress tracking, help students build consistent learning habits, and translate time on task into measurable gains in understanding and participation.
Design a gamified learning platform that improves motivation and engagement by turning study into clear goals, streaks, and rewards, with bite‑sized tasks, instant feedback, and safe, focused interactions. The platform should support teachers with structured content and progress tracking, help students build consistent learning habits, and translate time on task into measurable gains in understanding and participation.
Design System
Design System
In this section, I created the design system as the core product structure: standardized color styles, typography scales and usage, the icon set, and a simple reusable component library. We also produced key assets: app logo, badges, and the cat‑robot mascot Techia, to use across the product. This serves as a single source of truth for design and development, keeping the experience consistent and speeding up delivery.
In this section, I created the design system as the core product structure: standardized color styles, typography scales and usage, the icon set, and a simple reusable component library. We also produced key assets: app logo, badges, and the cat‑robot mascot Techia, to use across the product. This serves as a single source of truth for design and development, keeping the experience consistent and speeding up delivery.
Wireframe
Wireframe
We created low‑fidelity wireframes to translate the concept into clear screens and flows: a home dashboard showing the active pet with EXP bar and current level, a lesson catalog where each lesson displays its progress and EXP reward, a lesson player with bite‑sized tasks and immediate feedback, a progress view summarizing total EXP, level, and recent unlocks, and an inventory where learners view, manage, and equip earned cosmetics and accessories. Simple onboarding and sign‑up frame the experience. The wireframes focus on the core loop: complete lessons, gain EXP, level up, unlock cosmetics, and equip them via the inventory to keep learning engaging.
We created low‑fidelity wireframes to translate the concept into clear screens and flows: a home dashboard showing the active pet with EXP bar and current level, a lesson catalog where each lesson displays its progress and EXP reward, a lesson player with bite‑sized tasks and immediate feedback, a progress view summarizing total EXP, level, and recent unlocks, and an inventory where learners view, manage, and equip earned cosmetics and accessories. Simple onboarding and sign‑up frame the experience. The wireframes focus on the core loop: complete lessons, gain EXP, level up, unlock cosmetics, and equip them via the inventory to keep learning engaging.
UI Design
UI Design
I designed a clean, responsive interface that brings the gamified learning loop to life: a home dashboard highlights the active pet with an EXP bar and level badge, the lesson catalog shows per‑lesson progress and EXP rewards, the lesson player delivers bite‑sized steps with instant feedback, a progress view summarizes total EXP, current level, and recent unlocks, and an inventory lets learners view and equip earned cosmetics and accessories. The visual language stays friendly and tech‑forward with clear hierarchy, readable type, accessible contrast, and gentle motion, while simple navigation and concise microcopy keep momentum and make each action obvious.
I designed a clean, responsive interface that brings the gamified learning loop to life: a home dashboard highlights the active pet with an EXP bar and level badge, the lesson catalog shows per‑lesson progress and EXP rewards, the lesson player delivers bite‑sized steps with instant feedback, a progress view summarizes total EXP, current level, and recent unlocks, and an inventory lets learners view and equip earned cosmetics and accessories. The visual language stays friendly and tech‑forward with clear hierarchy, readable type, accessible contrast, and gentle motion, while simple navigation and concise microcopy keep momentum and make each action obvious.
Prototype
Prototype
Then we created a high‑fidelity, fully interactive prototype that maps the core product journeys end to end: Login, Class Access, Pet View, Leaderboard and Profile View, Class Quiz and Reward, and Equip Reward to Mascot. Each flow is designed to be completed without guidance, mirroring real use and covering the key interactions for clear end‑to‑end review.
Then we created a high‑fidelity, fully interactive prototype that maps the core product journeys end to end: Login, Class Access, Pet View, Leaderboard and Profile View, Class Quiz and Reward, and Equip Reward to Mascot. Each flow is designed to be completed without guidance, mirroring real use and covering the key interactions for clear end‑to‑end review.