PaiR @ ChatGPT Microsoft Azurethon
Overview
Applying AI to help students get immediate feedback when solving a coding problem by themselves
Role
UX research, UI design, User testing
Timeline
April - August 2023
Team
June Kim (Design lead), Samuel Suh (PM), Jongmo Kim (Engineer), Elim Bek (Engineer)
My team participated in ChatGPT Microsoft Azurethon 2023. We builded a Chrome extension called “Pair Programming Extension”, and a website. We wanted to apply AI to help students get feedback when they try solving new problems, and to get practice trying similar problems.
Pain point
No tutor to help students when they study coding alone
The e-learning market, rapidly growing since COVID-19, is evolving with AI technology to prioritize consumer needs over traditional service providers. This shift highlights the increasing importance of user-centric digital education experiences in shaping the future of learning.
Solution
Pair Programming, a user interaction-based digital coding education support service
1
Generating Hints and Answers in Chrome Extension
The hints for the coding problem is generated, using ChatGPT and prompt engineering. These prompts take user questions as input and produce relevant hints tailored to the problem.
2
Creating New Questions on Website
The similar coding questions are generated, which are categorized by difficulty levels (easy, middle, difficult), leveraging ChatGPT and Google Custom Search API. These prompts ensure accurate and contextually relevant problem generation.
Brainstorming + Personal concern
I struggled for over 30 minutes to find how to count up to 5 in coding.
As part of a coding meet-up group, I contributed to a project focused on education, collaborating with developers to explore interactive learning methods. Initially struggling to find simple coding solutions, I learned to use Python loops to count up to five, highlighting the importance of immediate interaction in coding education. This experience underscored the value of real-time feedback and collaboration in learning environments.
Competitive analysis + The gap
The competition had NO IMMEDIATE INTERACTION aspect.
Because coding is popular, there are many programs that can study coding online. However, I found that there was no interaction when learning alone. You can ask questions in the Forum, but you have to wait for others to answer or look for a conversation that already has an answer.
Target user
Our target user is anyone using online coding training, + 8.5 million people worldwide.
Our target audience consists of roughly 8.5 million coding learners, including both computer science students and coding bootcamp participants, particularly those focused on mastering algorithms. Pair Programming (our product) supports them during the (4) Feedback and (5) Repetition stages of learning to accelerate their skill development. Additionally, the product can be customized for classroom environments and scaled to cover broader topics, addressing the growing global demand for coding proficiency.
User flow
Based on the targer user I figured out, I designed two user flows intuitively so that users can follow the flows easily.
The flows illustrate how a user solving coding problems on LeetCode uses Pair Programming to get instant hints, discover related problems, and learn more effectively.
Design process
I explored various UI designs to create an optimal visualization for the Chrome extension modal and the website.
Paper prototype
First, I broke down every step that users will walk through and tried to think about the process considering what users will expect in each step. Since the hackathon had to be completed in two weeks, I created a low-fidelity wireframe as early as possible and handed it over to a front-end developer.
Wireframes
I made a wire frame based on the paper prototype. Since our project had to be completed in two weeks, I shared the low-fidelity wireframe with the product owner and discussed what features could be improved internally. After the discussion I itereated a few features considering how users will feel about interacting with the product.
I designed a Chrome extension wireframe allowing users to select new question options, but refined it based on stakeholder feedback to focus on repetitive learning by selecting only question difficulty.
Visual design system
Logo design contains the spirit of "Pair Programming".
I designed a responsive logo for the 'Pair Programming' Chrome extension, inspired by collaborative software development techniques. The logo adapts to various devices and screen resolutions, embodying a flexible and contextual design system.
UX full cycle roadmap
The project will be completed by Q3 2023, finalizing the full UX process.
1
Prototype feedback and iteration
I gathered feedback on the prototype and iterated it. Due to time constraints, I focused on "Leetcode.com" but plan to expand the Chrome extension to support all coding challenge websites.
2
Recruiting software engineers
I am recruiting new software engineers to replace those who participated in the hackathon but are no longer available, ensuring the project's continuity.
3
Extension launch and feature expansion
I plan to launch the Chrome extension in Q2 and add features in Q3, including a ChatGPT function to evaluate user code on aspects like time complexity, memory efficiency, and code cleanliness, providing qualitative feedback.
