April 2024
UX Designer - User Research, Interaction Design, Visual Design, Rapid Prototyping
This mobile app was designed in 4 weeks
In my Digital Product Experiences class at Utah Valley University, I was tasked with creating a mobile app that taught a subject to middle school students.
I was also required to include AI as a part of the design process for this project.
Project Goal
Create a product that teaches a subject to middle school students.
Research Activity: Technological Viability
Before I went about designing this product, I wanted to make sure it was at least sort of technically realistic. So I turned to some secondary research.
Teaching French to middle school students seemed like an appropriate use for an LLM, like ChatGPT or LLAMA. Their main purpose is to understand natural human language, so these tools are really good at validating syntax and grammar. I even tested that they could understand mixed language prompts, which they can.
I also saw evidence of cutting edge games using LLM's to create "improvised" dialogue for NPC's.
I concluded that my project goals were viable using current technology.
French Adventure Description
This app allows students who are learning French to practice slowly learning the language primarily through "conversation." It is essentially a visual novel game, with dynamic dialogue powered by AI technologies.
Who is the audience?
Middle School Students - This app is intended for middle school language learners. When writing the script that the dialogue would be based on, I made sure to write to the reading comprehension level of my target audience.
Design Phase
Script
I first wrote a simple script for this project. I started with an initial prompt to an AI to create an outline for the plot of the game. I then limited the scope for the prototype to the first chapter of the game. I then drafted a short script based on the outline provided by ChatGPT.
Character Designs
I then used Adobe Illustrator AI to generate some designs for the cast of main characters. I later refined the designs so they were more visually consistent.
AI Designs
My Redesigns
Wireframes
Before revising the characters, I created some rough interactions to get a feel for how the final screens should flow together.
I used Illustrator AI to generate the backgrounds for these screens. I then went in and adjusted colors and shapes to be a bit more effective, and to not clash with the character designs.
Given that I was not working with an outside client, and empowered by modern AI tools, I felt comfortable with expiramenting with full color designs.
Prototype Demonstration
After revising my wireframes, I created a final prototype to present to my professor and classmates.
Design Highlights
Project Reflection
What went well
I found AI to be helpful tool for speeding up the design process for this project. I don't think it would have been possible to achieve the storybook like visual quality I had in mind for this project without the use of AI generative technology, given the tight timeline for the project.
That being said I do still feel like most of these tools are fairly limited, and their results often need to be adjusted or refined by a human counter part.
What could have gone better
This project needs a higher degree of visual polish. Additionally it would benefit from more refined animation for the different interactions throughout the experience.