Say It! is a mobile language learning app
that enables users to enhance their foreign language proficiency through daily 5-10 minute training sessions.
Say It! is a mobile application that focuses on empowering users to expand their vocabulary using Flashcards. Users stay motivated to learn new words by using them in context through short, interactive quizzes.
November - December 2020
The Say it! app case study was created as a deliverable for the Career Foundry 1-month Intro to UX Design course. The goal of the project was to practice using the design process, tools, and techniques in the field of user experience design.
UX Designer
I started the Say It! app project by conducting a competitor analysis and creating an initial low-fidelity prototype. This prototype helped me to conduct the first round of usability tests, and gather valuable feedback and insights to improve the app's design. Six months later, I refined the wireframes and prototypes and developed a design system.
In this case study, I followed the five-stage Design Thinking model:
The project began with writing the initial problem statement, which was refined after the first user interviews were conducted.
Users between 20 and 50 with a lack of free time who want to learn languages for career improvement and traveling.
A mobile application focused on learning new vocabulary with flashcards.
Practice new foreign words and phrases in the morning, evening, or on a lunch break for short 5 to 10-minute sessions.
Perhaps at a cafe, in a bed, or on public transport on a way home or to work.
To avoid overwhelming with long learning sessions and stay motivated with engaging visual content.
Our users need a way to learn and practice new foreign words and phrases regularly while on the go, for 5-10 minute intervals, because they may have limited free time but still want to improve their language skills for career advancement and travel purposes.
We will know this to be true when we see how many users using the app on a daily basis and making the progress.
We believe that by creating a simple, and intuitive flashcard app with short lessons and engaging visual content we can help our users to learn Vocabulary and phrases without procrastination and feeling overwhelmed.
The first step in finding out how the app can solve the identified problem was to conduct a competitive analysis. I analyzed three vocabulary apps - Quizlet, TOEFL English Vocabulary Cards, and Memrise -
to identify their positive and negative aspects, in order to determine what would be useful for our app and to avoid any mistakes.
The competitive analysis helped me to identify competitors' strengths and weaknesses relative to our product. Through the analysis, I found that incorporating various assignments, visual, and audio content would make our mobile app more effective. Additionally, including a grammar check feature could provide a beneficial solution for users.
As a next step, I conducted three User interviews to collect qualitative data. This helped me to collect valuable insights about potential users’ needs and define the direction of work.
Find out about previous positive and negative experiences with vocabulary learning apps, what was engaging and what was frustrating.
Find out what techniques helped potential users to learn vocabulary and memorise new words.
Identify what motivates them to keep learning.
Collect users’ ideas about features and improvements for ease, effectiveness and engagement of vocabulary apps.
To organize the information from the user interviews, I used an affinity map to group the key insights into three categories: what users are doing, thinking, and feeling.
Next, I synthesized my research findings from the Empathise phase into the User persona, which I kept in mind during the whole project. She helped me to understand and focus on potential users’ needs, behaviors, and goals.
User Persona and User flows helped me to focus on the user's tasks and orient my work toward the user's goals and experience.
With the research findings, user persona and user flows in mind I created the initial low-fidelity wireframes and prototype using pen and paper for wireframes and the marvel app for rapid prototyping.
Rapid paper sketches and Low-fidelity prototype allowed me to test my ideas in the early stage of the project, which helped me save a lot of time and be aware of potential users’ needs.
Using Marvel to test the first ideas of our app, I was able to gather valuable feedback that helped guide the development of our app in the right direction. It was a great opportunity to test the app at an early stage and make necessary adjustments based on user feedback.
1. Open the app and sign up for a new account.
Your friend recommended your new vocabulary app “Say It”. You downloaded it on your smartphone, and want to start learning from your current level and sign up for a new account to save your progress.
2. Learn vocabulary with flashcards.
You’ve heard about the effective technique for learning new foreign words with flashcards. Your friend recommended the “Say it” app for this method. You want to try it.
3. Create a set of vocabulary flashcards and add a new word to it.
There is one word that you recently heard and can’t remember. You would like to create a new flashcard with this word in a set of vocabulary words for practicing when you have free time.
4. Take a listening quiz.
You’re having difficulty understanding spoken language. You would like to practice this skill using a listening quiz.
1
It is not clear what to do if the user is neither a beginner nor an intermediate.
3
Delete definition intermediate from the button and leave just “check your level here”
1
Everything needs to be moved downward. I would make the start button bigger.
1
Reposition content lower, make the Start button bigger.
2
The "I know this word" button may not be entirely objective.
2
Create flip cards with two sides, one with the term and the other with the definition.
2
It was not clear how to find the flashcards.
4
Show Flashcards on a Home screen.
2
Participants did not understand how to go back from the Learning with cards section.
3
Add a button for going back. Instead of the logo can be written the current screen name.
3
Users need some buttons on the screen after the completion of saving a new word.
4
Create buttons - “Add another word” and “Close” on the screen with a saved flashcard.
3
The checkmark on creating a new flashcard screen is not functional.
2
Delete it.
4
"The words don't need to be displayed in this exercise as it is too easy. It would be better if I had to type what I hear myself."
1
Show words only on the beginner's level and not on intermediate or advanced levels.
4
Not clear how to start another activity after the quiz.
3
Create buttons - “Next quiz” and “Learn more” on the Listening quiz completed screen.
Based on the first usability test insights I've been able to make improvements and prevent the most common friction points.
The improvements made were crucial in making our app usable and easy to understand. It was a great decision to test the flows at an early stage, which helped to identify and correct major issues quickly.
As the next step, I used Figma to create more detailed wireframes and a prototype to visualize and present the features of my app. These wireframes depict the main flow of the app, which is creating a new vocabulary flashcard.
With a middle-fidelity prototype as a basic form of design intent and a solid understanding of what I am building, I got ready for High-fidelity prototyping and Visual design.
After multiple iterations, I created high-fidelity wireframes, in order to provide a detailed and polished representation of the user interface and functionality of the final product.
To establish a consistent visual language and streamline the design-to-development handoff process, I created a comprehensive design system.
A design system is a key asset for creating a user-friendly, visually appealing, and scalable product.
After creating a centralized system of design guidelines, components, and elements for the Say It app, we can ensure easier implementation of future design changes and new features.
The Say It app was my first project as a User Experience designer, and it was a challenging yet rewarding experience.
I was able to learn the whole design process by putting my knowledge into practice in a fast-paced environment.
Through the process, I learned how competitor analysis helped me to understand the market and find ways to differentiate
the app from the competition. Conducting the first user interviews was a valuable step to collect insights and shape
the direction of the project. It was amazing to see how early ideas on paper could be transformed into an app that met real user needs.
I also learned the importance of feedback in making better design decisions. I was able to incorporate feedback and improve the app in subsequent iterations.
Overall, the Say It app project was a fun and educational experience that allowed me to develop my UX design skills and learn how to create a useful and engaging product for potential users. I was even inspired by this project to try 3D modeling and create 3D illustrations for the app on my own.
Finally, I believe that the Say It app has become a simple and intuitive flashcard app with concise lessons and engaging visual content, helping our users learn vocabulary and phrases without feeling overwhelmed or procrastinating; which was our initial goal.
