ROLE
UX Designer
DURATION
3 Months
PLATFORM
Desktop Application
CodeLINK
A coding platform aimed at helping users grasp programming concepts through competition & paired programming.
CodeLink:
Elevate Your
Coding Journey
play
create your own party
practice
options
leaderboards
log out
bestCoder123
bestCoder123
Choose your difficulty
Based on your selected difficulty level, we will select an appropriate problem for you and your partner to solve.
medium
Begin to Code
easy
Begin to Code
hard
Begin to Code
PREVIEW
Unlike most case studies, CodeLink was required to be designed without prototyping & iterating in Figma!
CodeLink is a novel social computing project I did while attending UCSD. It is a platform aimed to help users grasp programming concepts through competition, gamification & is based on an existing concept known as paired programming.
But how are you going to be able to prototype & iterate without Figma or any design tool?
We were required to receive feedback, prototype, & iterate on our existing design through live sessions, also known as Live-Prototyping. We weren’t allowed to prototype past lo-fi using Figma but were allowed to use other non-design applications to facilitate our live session.
GROUP MEMBERS
Ryen Huang
Jacky Huang
Jason Artley
John Hoang
PROBLEM
Programmers lack a platform that encourages collaboration, leaving them to struggle with coding concepts in isolation
Platforms like LeetCode focus on individual problem-solving, offering little opportunity for pair programming or peer collaboration. This absence of interactive and social engagement prevents novice programmers from effectively learning concepts, gaining support, and growing together.
SOLUTION
CodeLink:
Elevate Your
Coding Journey
play
create your own party
practice
options
leaderboards
log out
bestCoder123
A gamified approach to make the experience much more fun and engaging, rather than a chore.
bestCoder123
Choose your difficulty
Based on your selected difficulty level, we will select an appropriate problem for you and your partner to solve.
medium
Begin to Code
easy
Begin to Code
hard
Begin to Code
Users will be prompted of their coding expertise, ranging from basic to advanced similar to LeetCode.
bestCoder123
Competitive
Compete head-to-head to solve 3 coding challenges! Take turns as driver and navigator, using hints at a point cost. The fastest team to complete all 3 wins!
READY!
READY!
CodeMonster123
bestcoder123
READY!
READY!
Coder123
iLove2Code
Start
Utilizes the concept of paired programming to create an effective, but competitive learning environment.
Queues up players against another paired duo. There is also a chat window and microphone accessibility for efficient communication.
Hiro
Hiro
Problem 1:
Next Problem
easy
medium
hard
Code
Console
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8:34
Driver
Select a Language
Hiro
Hiro
Problem 1:
Next Problem
easy
medium
hard
Code
Console
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8:34
Navigator
Select a Language
Hiro
Pairs are randomly placed into roles: Driver & Navigator,
where the driver is required to type the answer and the navigator assists the driver. This is a crucial component of the concept of paired programming and has been proven to promote retention in coding.
COMPETITIVE ANALYSIS
The competition had no collaboration feature!
I’ve analyzed two existing applications: EliteCode & LeetRooms.
EliteCode gamifies an existing platform known as LeetCode, allowing users to compete against each other in 1v1. However, it offers zero collaboration features.
LeetRoom offers multiplayer & allows multiple players to code against each other. CodeLink allows for collaboration amongst users while being on the same team.
LOW-FIDELITY PROTOTYPES
CodeLink:
Elevate Your
Coding Journey
Join CodeLink and unlock a world of online paired collaboration. Engage in challenges, connect with peers, and enhance your skills in a vibrant community. Start your journey to coding excellence today.
sign in button
sign up
user name
Choose your difficulty
Based on your selected difficulty level, we will select an appropriate problem for you to solve.
easy
hard
medium
Problem 1:
Next Problem
tags
tags
tags
Code
Coding Language Dropdown
1
2
3
Console
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Hiro
Timer
Driver
Problem:
tags
tags
tags
Code
Coding Language Dropdown
1
2
3
Console
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Hiro
Timer
Navigator
LIVE PROTOTYPING ROUND #2
Based off feedback from round 1, we’ve reduced teams to pairs, reinforcing the concept of paired programming. This resulted in better teamwork & collaboration. A prize incentive was also introduced increasing the motivation and competition to win.
FEEDBACK & OBSERVATIONS
The feedback was positive with people really enjoying the team reduction and incentive change. We also noted that in these group sizes, people were able to communicate more efficiently and felt more like a team. Role swaps ensured participation and encouraged learning as a whole.
REFLECTION & TAKEAWAYS
Our live prototyping sessions revealed a strong interest in competitive and collaborative learning.
By focusing on pair-programming principles, we created an environment that catered to beginners and encouraged teamwork. Despite a small number of participants, the feedback from these two sessions was invaluable, helping us identify key iterations to improve the user experience.
LIVE PROTOTYPING ROUND #1
10 Participants were split into two groups of 5. We decided to use repl.it, a programming IDE. Each team was given two beginner-friendly problems to solve.
Too many people! The large group made it difficult to collaborate and solve problems. So we decided to make some changes for round 2.
FEEDBACK & OBSERVATIONS
Switching Roles
Team Reduction
Prize Incentive
“I think each person could have a different role whether it be doing one section of the problem or debugging…”
44.4% of the responses felt that “less teammates” would be better
“Just raise the motivation & competitiveness by including a prize incentive by winning!”
USER RESEARCH
Users struggle to apply programming concepts in practical ways and seek collaborative, real-time learning environments.
Our research revealed that while users are most familiar with languages like Java and Python, they find learning new concepts and staying motivated to be the biggest challenges. Resources like tutorials, collaboration tools, mentoring, and forums are highly valued, with a strong preference for live, real-time competition over asynchronous methods.
USER FLOW
From logging in to choosing a difficulty level, users can invite friends or play solo, select programming languages, and seamlessly begin coding as either the Driver (coding) or Navigator (guiding).
CodeLINK
A coding platform aimed at helping users grasp programming concepts through competition & paired programming.
CodeLink:
Elevate Your
Coding Journey
play
create your own party
practice
options
leaderboards
log out
bestCoder123
bestCoder123
Choose your difficulty
Based on your selected difficulty level, we will select an appropriate problem for you and your partner to solve.
medium
Begin to Code
easy
Begin to Code
hard
Begin to Code
ROLE
UX Designer
DURATION
3 Months
PLATFORM
Desktop Application
GROUP MEMBERS
Ryen Huang
Jacky Huang
Jason Artley
John Hoang
PREVIEW
Unlike most case studies, CodeLink was required to be designed without prototyping & iterating in Figma!
CodeLink is a novel social computing project I did while attending UCSD. It is a platform aimed to help users grasp programming concepts through competition, gamification & is based on an existing concept known as paired programming.
But how are you going to be able to prototype & iterate without Figma or any design tool?
We were required to receive feedback, prototype, & iterate on our existing design through live sessions, also known as Wizard-of-Oz prototyping. We weren’t allowed to prototype past lo-fi using Figma but were allowed to use other non-design applications to facilitate our live session.
PROBLEM
Programmers lack a platform that encourages collaboration, leaving them to struggle with coding concepts in isolation
Platforms like LeetCode focus on individual problem-solving, offering little opportunity for pair programming or peer collaboration. This absence of interactive and social engagement prevents novice programmers from effectively learning concepts, gaining support, and growing together.
SOLUTION
bestCoder123
play
create your own party
practice
options
leaderboards
log out
CodeLink:
Elevate Your
Coding Journey
A gamified approach to make the experience much more fun and engaging, rather than a chore.
bestCoder123
Choose your difficulty
Based on your selected difficulty level, we will select an appropriate problem for you and your partner to solve.
medium
Begin to Code
easy
Begin to Code
hard
Begin to Code
Users will be prompted of their coding expertise, ranging from basic to advanced similar to LeetCode.
bestCoder123
Competitive
Compete head-to-head to solve 3 coding challenges! Take turns as driver and navigator, using hints at a point cost. The fastest team to complete all 3 wins!
READY!
READY!
CodeMonster123
bestcoder123
READY!
READY!
Coder123
iLove2Code
Start
Utilizes the concept of paired programming to create an effective, but competitive learning environment.
Hiro
Hiro
Problem 1:
Next Problem
easy
medium
hard
Code
Console
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8:34
Driver
Select a Language
Hiro
Hiro
Problem 1:
Next Problem
easy
medium
hard
Code
Console
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8:34
Navigator
Select a Language
Hiro
Pairs are randomly placed into roles: Driver & Navigator,
where the driver is required to type the answer and the navigator assists the driver. This is a crucial component of the concept of paired programming and has been proven to promote retention in coding.
COMPETITIVE ANALYSIS
The competition had no collaboration feature!
I’ve analyzed two existing applications: EliteCode & LeetRooms.
EliteCode gamifies an existing platform known as LeetCode, allowing users to compete against each other in 1v1. However, it offers zero collaboration features.
LeetRoom offers multiplayer & allows multiple players to code against each other. CodeLink allows for collaboration amongst users while being on the same team.
USER RESEARCH
Users struggle to apply programming concepts in practical ways and seek collaborative, real-time learning environments.
Our research revealed that while users are most familiar with languages like Java and Python, they find learning new concepts and staying motivated to be the biggest challenges. Resources like tutorials, collaboration tools, mentoring, and forums are highly valued, with a strong preference for live, real-time competition over asynchronous methods.
USER FLOW
From logging in to choosing a difficulty level, users can invite friends or play solo, select programming languages, and seamlessly begin coding as either the Driver (coding) or Navigator (guiding).
LOW-FIDELITY PROTOTYPES
CodeLink:
Elevate Your
Coding Journey
Join CodeLink and unlock a world of online paired collaboration. Engage in challenges, connect with peers, and enhance your skills in a vibrant community. Start your journey to coding excellence today.
sign in button
sign up
user name
Choose your difficulty
Based on your selected difficulty level, we will select an appropriate problem for you to solve.
easy
hard
medium
Problem:
tags
tags
tags
Code
Coding Language Dropdown
1
2
3
Console
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Hiro
Timer
Navigator
Problem 1:
Next Problem
tags
tags
tags
Code
Coding Language Dropdown
1
2
3
Console
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Hiro
Timer
Driver
LIVE PROTOTYPING ROUND #1
10 Participants were split into two groups of 5. We decided to use repl.it, a programming IDE. Each team was given two beginner-friendly problems to solve.
FEEDBACK & OBSERVATIONS
Too many people! The large group made it difficult to collaborate and solve problems. So we decided to make some changes for round 2.
LIVE PROTOTYPING ROUND #2
Based off feedback from round 1, we’ve reduced teams to pairs, reinforcing the concept of paired programming. This resulted in better teamwork & collaboration. A prize incentive was also introduced increasing the motivation and competition to win.
FEEDBACK & OBSERVATIONS
The feedback was positive with people really enjoying the team reduction and incentive change. We also noted that in these group sizes, people were able to communicate more efficiently and felt more like a team. Role swaps ensured participation and encouraged learning as a whole.
REFLECTION & TAKEAWAYS
Our live prototyping sessions revealed a strong interest in competitive and collaborative learning.
By focusing on pair-programming principles, we created an environment that catered to beginners and encouraged teamwork. Despite a small number of participants, the feedback from these two sessions was invaluable, helping us identify key iterations to improve the user experience.
Switching Roles
“I think each person could have a different role whether it be doing one section of the problem or debugging…”
Team Reduction
44.4% of the responses felt that “less teammates” would be better
Prize Incentive
“Just raise the motivation & competitiveness by including a prize incentive by winning!”