︎


RADICAL X 
UI.UX | 2023
Duration: 8 weeks

Tools: Figma, Adobe Illustrator, Slack, Gather
RadicalX presented us with an innovative idea: integrating gamification into their platform to elevate the learning journey with Arcade games, powered by an AI chatbot. Our task was to create a chatbot from scratch, assisting users in learning coding principles and offering personalized feedback. Our objective was to develop the Arcade feature, an interactive component within our educational tech platform. This feature will include captivating coding courses presented in a gamified learning format, similar to the engaging experience of Kahoot. Users will have the opportunity to engage in a variety of coding games, with each game centering around a distinct coding topic.
My Role: UI.UX Design / Research / Wireframing
Team: Natalie Ung, Hyunji Jun, Alex Beckerman, Wilson Liu, Anita Nwude-Chenge, Bomon Liu, Nathan Itturino





PROTOTYPE
HOME PAGE
Users can track their progress, personalize their AI manager’s avatars, discover courses, and review past achievements on the home page. You can start a new course, continue where you left off, or go to the course overview page.




PROTOTYPE
AI ARCADE MANAGER
& CHAT
The AI Arcade Manager serves as the immersive interface for gamified learning. Depending on the course or lesson type, users can either learn through interactions with an AI chatbot or hands-on coding. Offering a variety of customization options, users can tailor their environment to match their preferences effectively. The AI chat interface seamlessly merges learning and interaction. Users can simultaneously engage in learning discussions and testing while interacting with the AI. This is the hub for theory comprehension and learning.




PROTOTYPE
HANDS-ON CODING
Much like the chat interface, users can engage with the Arcade Manager through a compact chat window. This interface enables direct code writing, allowing for a comprehensive learning journey. Additionally, a separate window shows live results as users input and execute their code.




PROTOTYPE
COURSE OVERVIEW 
The course overview page acts as a central hub, offering users deeper insights into course content and the opportunity to delve into individual lessons across different levels.




DESIGN SYSTEM
The typography and color system prioritize legibility to alleviate the strain of reading long texts while coding. Additionally, we incorporated the energetic core brand colors to make the gamified learning experience more exciting. We created fun achievement medals to enhance the learning experience while keeping basic icons minimal and universal. By providing cute medals for small, unexpected achievements, users can have more satisfying learning experiences.




RESEARCH PROCESS
By creating target audience personas, conducting competitive analysis, feature analysis, affinity mapping, wireframing, and iterations, we established a clear direction that aligns with the current market and our target audience.
  • Captivating Learning: gamified elements for continuous engagement.
  • Empowering Career Transitions: Integration of coding games with real-life application and personalized feedback.
  • Supporting Future Readiness: User-friendly interfaces, customization options, and in-game dialogues.
© 2023 HYUNJI JUN