The Challenge
As a requirement for a university project discipline focused on chatbots, the challenge was to conceptualize and build a functional chatbot application. Our team decided to create "Tavern Talk," a specialized chatbot designed to simplify the often complex process of creating Dungeons & Dragons character sheets. The goal was to guide users through the necessary questions in a conversational format and allow them to save multiple character sheets to their account.
My Role
Working within a small team, I took on multiple responsibilities for this project. I conducted UX research to understand the needs of the target users, handled the UI design, and also actively participated in the frontend coding effort.
The Process & Solution
Design
Our design process utilized Figma to create wireframes, visual designs, and interactive prototypes. A key focus was establishing a strong thematic connection to D&D; we used dark red and silver gradients and related visual elements to evoke the classic fantasy tavern atmosphere. The UX research helped me understand what the conversational flow should be and the structure for presenting character information.
- Thematic Visual Design:
Established a strong D&D thematic connection using dark red and silver gradients and related visual elements in Figma. - Conversational Flow:
Utilized UX research to inform the conversational flow of the chatbot for character creation. - Character Information Structure:
Designed the structure for presenting and saving character sheet information. - Wireframing and Prototyping:
Created wireframes and interactive prototypes in Figma to visualize and test the user experience.
Development
We developed "Tavern Talk" using a straightforward MERN-like stack: React for the frontend, Node.js for the backend server, and MongoDB for the database, without relying heavily on additional libraries. The application was designed as mobile-only, simulating a phone interface even when viewed on a desktop. My frontend contributions involved building React components and implementing the designed user interface.
Technologies Used
Responsibilities
- Conducting UX research to understand user needs.
- Handling the UI design of the chatbot application.
- Participating in frontend coding using React.
- Implementing the designed user interface.
The Outcome
The result was a functional web application deployed live on Vercel at tavern-talk.vercel.app. The chatbot successfully guides users through the character creation process. The project fulfilled the course requirements and was well-received, earning our team a very good grade.
This project was a valuable learning experience, particularly as it pushed me outside my comfort zone since I wasn't previously familiar with D&D. It demonstrates my ability to conduct UX research, design thematic user interfaces, contribute to frontend development using React, and collaborate effectively within a team to deliver a complete (although simple stack) application from concept to deployment. It represents a key step in applying learned concepts to build a creative and functional tool.
