Timeline
April 2023 - August 2023
My Role
UX research, UI design, user testing
Team
June Kim (Design lead), Samuel Suh (PM), Jongmo Kim (Engineer), Elim Bek (Engineer)
OVERVIEW
Applying AI to help students get immediate feedback when solving a coding problem by themselves
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.
PROBLEM
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.
THE SOLUTION
Pair Programming, a user interaction-based digital coding education support service
1️⃣ Generating Hints and Answers in Chrome Extension
Developed prompts using ChatGPT and prompt engineering to generate hints based on user interactions. These prompts take user questions as input and produce relevant hints tailored to the problem.
2️⃣ Creating New Questions on Website
Designed prompts leveraging ChatGPT and Google Custom Search API to generate similar questions categorized by difficulty levels (easy, middle, difficult). 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.
PERSONAS
TARGET USER
Our target user is anyone using online coding training, + 8.5 million people worldwide
Our target audience includes approximately 8.5 million individuals learning coding, comprising both computer science majors and coding bootcamp learners, with a focus on those interested in learning coding algorithms. This platform can be customized for classroom use and expanded to cover additional topics, catering to the growing demand for coding skills.
USER FLOW
Based on the targer user I figured out, I designed two user flows intuitively so that users can follow the flows easily
DESIGN PROCESS
I explored various UI designs to create an optimal visualization for the Chrome extension modal and its 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
I keep working on this project by Q3 2023 to complete the full cycle of the UX process
01. 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.
02. 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.
03. 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.