menu
close
Elice is an online coding education platform.
Here is a case study on the messaging and course features.
2015 - 2019
As the first lead designer at Elice, a Series C EdTech startup founded by AI engineers, I led all aspects of design from the initial branding to UX/UI design, and building a design system across its web and mobile platforms. The product scaled to 400K+ students, achieving a 91.3% course completion rate.
Product Design
Design Systems
Branding
Sketch
Protopie
Zeplin
Invision
Elice is an AI-driven web and mobile platform that provides courses to learn code.
Key features include an online code editor where students and teachers can code together. We collect and use data about how students learn to provide AI features that optimize learning as well as teaching.
At Elice, we delivered features through 2-week sprints. After an internal design workshop, we had a collection of sprints to launch an AI and chat feature.
Efficient
Enhance productivity and efficiency by using AI
Explainable
Make users understand and be aware of AI
Trustworthy
Foster trust and transparency with AI features
The main persona for our target group of users was students who were learning to code for the first time. On the other hand, there are also teaching assistants (TAs) and teachers who struggle to manage large groups of students.
Has a hard time understanding what code error messages mean.
Struggles to manage large groups of students in each course.
Wants course materials to be helpful for students at all levels.
In the 'Learn' phase, students frequently switch between the lecture materials, video, and coding exercises. It was important to integrate the solution in this cycle in order to provide help from teachers at the right time.
We trained an AI model with various learning data to come up with an overall progress indicator for each student. Given a student input data, the AI model classifies and outputs the progress indicator as "Needs help" or "On track."
AI Dashboard to Glance Student Progress
Using the AI dashboard, teachers can see at a glance who is on track and who needs help. The dashboard visualizes overall student progress and for students that need help, there is a direct button to open 1:1 chat.
AI Tooltip for Explainability and Transparency
We also placed a tooltip to signify that this was an AI feature and explain the logic behind the AI progress indicator so that there is transparency.
We decided to integrate a chat feature and place the button on the global header so that it would be persistent throughout all pages. Also, a "Help" button that opens up 1:1 Chat with the teacher was placed in the code output screen so that students can access it any time while working on a code exercise.
Using the new Q&A chat feature, we ideated in the long run to add an AI chatbot that would instantly answer questions for students. The AI chatbot would also have the capability to generate simple code examples for students to reference.
I set up a system between admin, educators, students, and the AI chatbot so that different roles and permissions were assigned with the chat features. For example, admin has access to all chat functionalities whereas students can only view their course chatroom and 1:1 chatroom.
The user flow was designed so that students can ask questions at any time with ease, especially during coding exercises. Students can link their code and ask questions via the Help button in the code output screen.
Teachers can also easily access chat through the Chat icon in the global header on any page. They can jump into the students' code editors using the code link, and it's easy to manage large groups of students using the AI dashboard.
Ease of asking questions for students
Students can ask questions whenever they need to by clicking on the "Help" button in the code editor. This opens up 1:1 chat with the AI Chatbot.
Fast response from teachers and coding together
Students receive answers through chat and can go back and forth between the code editor and chat window. Teachers and students can code together in the editor.
Students and teachers can edit code simultaneously using the code link through the chat. This way, students can understand exactly where their errors are.
The chatroom list shows the 1:1 AI chatbot, teacher, and course chat.
For every course, there's a group chat with all the students.
Students also have 1:1 chat with the AI Chatbot to ask questions.
In the 1:1 chatroom, students can send a link to their code editor.
The mobile app accompanies the web app, and all data including the students' code are synced. The mobile app also supports the code editing and AI chatbot features. We encouraged more persistent learning through the use of the mobile app.
At the end of each sprint, we had a retro session to reflect on how the sprint went.
Ensuring ethical use of AI was an area for improvement throughout this project. Our goal was to use AI as a tool for empowerment, but we had limited data sets, which meant that we couldn't take into consideration students of varied backgrounds.
Transparency was prioritized by including explanations for AI features, fostering trust and user understanding.
Privacy and data security were central, with strict measures to safeguard user information.
To minimize bias, we should conduct rigorous testing with diverse datasets and user groups.
We made repeated UI elements into design system components. AI was integrated using a recognizable gradient and sparkle symbol. Since the courses were in both Korean and English, each component would account for multiple languages as well as responsiveness.
Elice web follows responsive design principles so that students can access courses on any device. A 12-column grid system is used, where the number of columns decreases as the device frame gets smaller, and all content is adjusted accordingly.
