TutorChat
TutorChat is a conceptual UX project for an AI chatbot that focuses solely on education and assisting students. Using an extensive UX design process, including creating user personas, storyboards, and wireframing, I imagined what it might be like to have a generative AI tool that could help struggling students.
The Project
Going into this, I wanted to try my hand at designing a language model AI chatbot. AI has been a hot topic as of late, and I thought it would be interesting to make an attempt at designing my own interface.
Generally, generative AI tools serve as assistants to their users, helping to create content and provide knowledge on any questions that they are prompted to answer. For example, a student working on an assignment for their high school English class is struggling with with their studies on Shakespeare. They can ask the AI for general advice on how to make sense of it, to which the bot will respond with several points of action the student could take, or the student may ask a more specific question regarding a particular piece of the text, to which the bot will give a response based on the large database of knowledge that it’s trained on. With this use case in mind, I moved forward to creating a User Persona to be the face of the project.
01
User Persona
As I started conceptualizing the project, I found myself drawn to the idea of using AI to help in education. The selected primary persona was designed to to be a realistic figurehead of the primary user base.
A possible scenario that Chris may encounter is that he needs to finish both a college application essay and an English report within only a couple of days. He doesn’t have a lot of time to spare with the hours he spends tutoring after school, and he knows that writing analyses usually takes him a long time. He can use the chatbot for assistance on understanding the text assigned to him by his teacher, while also asking the bot for tips on his college essay, providing resources and examples for him to reference. With the bot’s help, he is able to finish both essays on time.
02
Storyboards
In order to understand the user journey that Chris could potentially go through, taking into account any external and ecological factors that contribute to his experience as a user, I created storyboards mapping out events that lead up to him using the product, as well as thoughts that go through his head and feelings that he experiences.
At this point, I have also started on some very rough visualizations on what the interface could look like, as a result of the user experience that is laid out here.
03
Wireframes
This is the stage of the project in which I needed to map out the interface of the product, thinking about the user flow and possible places for interaction. I mainly emphasized the chatting features of the product, outlining the methods by which the user would interact with the AI, start new chats, navigate between different conversations, even diverge from a chat to explore a specific topic through a thread.
04
Prototype
We have reached the stage in which we can start prototyping the wireframes. I chose to create a medium-fidelity click-through prototype with InVision that takes the user through various potential paths in the user flow. Such paths include:
-
Typing a message in the chat
-
Starting a new chat
-
Switching between different chats
Other features that can branch off these paths:
-
Starting a new thread
-
Recording a prompt
-
Regenerating & Favorite-ing replies
-
Clicking over the Help and Account icons.
05
Obstacles
An AI language model, while an interesting idea for a UX project due to its current relevance in the world of design and tech, is also a bit of a challenge because it’s so topical and evolving. Generative AI has many controversies surrounding it that question the ethics behind the methods of training the AI as well as the ways in which it’s used that might encourage plagiarism, academic dishonesty, or even the spread of misinformation. When approaching this project, I had to think of use cases that not only help the user in whatever they’re working, but could also encourage further learning with source citing.
On a technical level, this was also my first time creating a thorough click-through prototype with Invision. Though it’s simple in terms that it only consists of hotspots that link to other screens, it was still valuable to learn how to integrate prototyping into my process.
06
Final Look
