Project Overview
Founded by Diego Salvatierra, "Say!" is a language learning app that guides users into building their own unique sentences using AI. By reinventing the digital language learning from the ground up, users will no longer have to memorize useless vocab.
With Say!, users are able to learn foreign languages based on how they want to learn it. AI technology like ChatGPT is incorporated into the app and generates grammatically correct content. The user can test their pronunciation on words and is checked through Whisper. Completed sentences and words are saved into the phrasebook.
Project Details:
Length:
Contract based duration (on-call).
Team:
Diego Salvatierra (Founder), Tom Cheng (Product Researcher), and myself (UX/UI Designer).
Tools:
Figma, Adobe Photoshop, and Adobe Illustrator
My Role
I was asked to deliver a design proposal for the app. Including a system of colors, fonts, icons, and other design artifacts necessary. I also took responsibility into redesigning multiple screens following the previous structure presented to me.
Design Choices - Wireframes
Starting out with the landing page and language selector, I dove into research on what language apps already exist. With this, I took inspiration from successful language learning apps such as Duolingo, Busuu, and Rosetta Stone.
By understanding the competition and how their information architecture is structured, it led me on bringing Say! into the right direction of familiarity and ease-of-use for our users.
Language Selector Screen
Landing Page Screen
The most important task for me was how the sentence building page was going to be designed. Diego informed me about the idea of a building block-like structure that allows the user to pick a word from a selection menu, and place them into their respected boxes. The user will do this for a subject, a verb, and then a noun to complete their sentence.
The design hierarchy of the sentence builder took on many different forms and iterations. We settled on this iteration where we included the additional options of shuffling their word boxes, or manually adding a word of their own.
User Testing
We conducted a number of user testing to best identify what worked within the sentence builder and what didn't. We received tons of helpful feedback from one user, who happened to be a foreign language professor.
"an English translation toggle can be very convenient during this stage, it should help challenge the users or those who are more skilled in the language."
"Those who are more fluent in a language may not want to start their sentences off with a subject, how can we give them the freedom to change up the structure?"
The User Experience
Onboarding Process:
The user is greeted to a quick introduction to the Say! App. Showcasing what they are about to experience.
Login / Signup
The user is able to login with their email or they can login using google.
Choosing a language
Say! provides a variety of language the user can choose from. They can either get started on learning a new language, or they can access their phrasebook.
The Sentence Building Page
Where all the magic happens. The user can build and form sentences based on the language selected. Forming a sentence gives the user the ability to practice and speak the sentence they formed. AI will analyze and give feedback regarding the user’s accuracy.
Personal Phrasebook
Completed phrases and sentences can be stored in the user’s phrasebook. Saved content can be practiced and edited.
Conclusion + Future Implications
With this project, I created satisfying screens and a strong design style guide to push the Say! in the right direction. With the new visual presence I designed, the app can be progressed further into development.
Future Implications that could be suggested would be adding a home screen, and a digital assistant to humanize the AI within the language build page.
