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.

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.

Websites designed for coding practice, like LeetCode, cater primarily to individuals who already possess a sturdy coding background. Additionally, existing coding platforms offer limited opportunities for social engagement.

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 prefer?

Our study involved 29 participants selected through convenience sampling.

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.

We developed some low-fidelity prototypes to visualize our user flow.

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.

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.

We designed Codelink to feel like a code editor while promoting collaboration, using darker tones and a vibrant main color for a welcoming atmosphere. A design system was created to ensure consistency across all components.

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.