Collaborative Programming Game
CodeLink—Beginner friendly approach to learning how to code.
OVERVIEW
My Role
Lead UI/UX Designer
Team
Jason Artley
John Hoang
Ryen Huang
Charlie Ngyuen
Timeline
January 2024 - March 2024
Breakdown
At CodeLink, our goal was to build a platform that helps novice programmers advance their skills through competitive learning, fostering a supportive community where users can both teach and learn from one another.
As the lead UI/UX designer, I guided the project by making thoughtful design choices and aligning our efforts with clear objectives.
Our final product received highly positive feedback after multiple rounds of iteration and refinement.
HIGHLIGHTS
Prototyping a game.
CONTEXT
Understanding beginner programmers.
A novel approach to learning.
We wanted to design an innovative way for a social group to engage. We observed that many people found coding intimidating due to its largely self-taught nature. This presented a fantastic opportunity to incorporate social interaction into the learning process.
THE PROBLEM
Designing methods to stand out.
Conducting a competitive analysis.
Websites designed for coding practice, like LeetCode, cater primarily to individuals who already posses a sturdy coding background. Additionally, existing coding platforms offer limited opportunities for social engagement.
Leetrooms
Leetrooms is a collaborative IDE where users can join each other and solve problems
Collaborative experience, leading to enhanced learning
Casual environment
Not beginner friendly, difficult for new programmers to pick up
EliteCode
Elitecode is a competition based programming platform where users can play each other in a 1v1
Competitive environment, driving users to learn quickly
Gamification of programming
Not collaborative, hard for users to learn if not familiar with content
RESEARCH
Gathering insights from users.
The important questions.
What coding languages were people most familiar with?
What challenges did people face while programming?
What features would be useful in a platform for learning programming?
What competitive environment format would people offer?
Our findings.
Our study involved 29 participants selected through convenience sampling.
People were most familiar with Java and Python
This helped us choose a default language for our prototype
Struggle to find motivation and learn new concepts
Gave us insight to utilize collaboration for accountability
Users wanted some way to learn to code with others
Provide some assistance from outside sources if needed
Preference for live competitions (competing in real-time)
DESIGN PROCESS
Designing a solution.
Establishing the foundation.
A typical user flow lets users choose between competitive or practice mode, then select their difficulty, partner type (friend or skill-matched player), and programming language. After pressing play, teammates work through each problem, enabling collaborative skill-building by the session’s end.
Our preliminary ideas.
We developed some low-fidelity prototypes to visualize our user flow.
Prototype round one.
Testing our ideas.
We had 10 participants split into two groups of five, providing problem links via Repl.it, an online collaborative IDE. Each team used one device to solve two beginner-friendly problems within 15 minutes, with the first team to finish declared the winner.
Reviewing the feedback.
Making necessary changes.
Prototype round two.
Testing our new ideas.
We split our 8 participants into teams of two to improve communication. A leaderboard tracked progress in real-time, and users marked hints used after each problem. With a 10-minute time limit, teams alternated roles as driver and navigator, with the team earning the most points winning candy.
Reviewing the feedback.
A HUGE SUCCESS
Feedback was positive; team size improved communication and learning.
Making adjustments.
Crafting the visuals.
Testing different designs.
We started to work on the visuals for our platform and made sure to incorporate all of our feedback during our testing. We wanted to translate the in-person experience of using an IDE into an online mock-up of that experience.
Making more design changes.
FINAL DESIGNS
Finalizing the visuals.
Refining the user experience.
We designed Codelink to feel like a code editor mixed with a game. We wanted to encourage collaboration through this feel of playing a MMORPG with the pixel-art style. A design system was created to ensure consistency throughout the design of the platform.
Onboarding process.
Home page.
Competitive and practice queue.
Leaderboards.
Live match.
CONCLUSION
Learning through iteration.
Reflecting on the process.
Our research showed strong interest in a beginner-friendly, competitive learning environment that promotes team-based learning through pair-programming. Two prototyping sessions guided key iterations, and all participant feedback proved valuable, despite the small sample size.
Future steps.
Incentive for competitive
Rewards are vital in a competitive environment; cash prizes could be offered to the top-ranked players in each language division
Elo system
To ensure fairness, players should start at 0 'elo' and work their way up, promoting skill distribution
HOME
Work
About
CONTACT
LinkedIn
Resume
©2024 Jacky Huang. All Rights Reserved