RadicalAI is a start up company that seeks to make education more accessible. While interning there, I got to work on designing one of their upcoming features, the arcade, which seeks to incorporate conversational AI into a quizzing and learning environment.
As part of the Arcade team, I was tasked with designing the course home page. I created 2 different low fidelity wireframes. I first created different components to match the user stories I was assigned. This includes ideas I had for a course homepage and a chat interface.
Next, I was told to focus more on the course homepage aspect of the arcade. I sought to fulfill the user stories provided to me, where there would be a selection of courses to look at, and each course would have levels that can be reviewed, culminating in a overall assessment.
After receiving some feedback, I went on to build a mid fidelity prototype. The product owner wanted the layout to be more similar to other online courses, such as UXcel. I borrowed some of the icons from UXCel as placeholders, since the course content was devised yet.
Pictured is a wireframe showing the different states I prototyped. I implemented drop downs to help make the design more compact, and created different states showing a users progress through the course.
Our team's boss wanted to shift the focus of our work onto the AI manager and interface, instead of the traditional quizzing interface.
First, we conducted research and brainstormed different AI features, UI elements, and types of content to consider for the Arcade. We plotted our ideas into an affinity diagram.
I worked on creating prototypes for the chat aspect of the arcade. One of the challenges I encountered was deciding how to layout the AI coach with the chat. The goal was to make the user feel like they are having a conversation, and not just quizzed randomly. I kept a lot of my prototypes in a lower fidelity, as another team at RadicalX was working on a design system that would replace some of the visual elements.
I created many variants for the the chatting feature of the AI manager. One aspect I felt was important and that I noticed in my research was making the available responses discoverable. I created different variants of where to place possible responses.
I also considered how accessible the coding window would be. I created a few variants of the layout where a user could swap between the chat and the code. Because the product was focused on learning coding, I felt it was important for users to be able to code while learning.
I also worked on the overall layout of homepage. I wanted to make the AI manager present throughout the interface, not just while you're in the course.
Following feedback, I got rid of the double navigation bar, and consolidated some of the information on the pages into more segmented parts.
Our group pooled together different ideas to create a general prototype for the Arcade Manager. I worked on implementing some of the aspects of the coding window.
