My Role: UX Research & Design
Tools: Pen & Paper / Marvel
Timeline: Feb-Mar 2022
A mobile app that empowers people to learn (and remember) new vocabulary.
As part of the Introduction to UX Design course with CareerFoundry, I was tasked with designing a mobile app that empowers people to learn new vocabulary. As an ESL teacher, I was immediately intrigued by this project and eager to explore innovative ways to cater to users’ language learning needs.
I began with a competitor analysis. I was spoiled for choice as the market is flooded with vocabulary and language apps. To keep things simple, I went with two apps that I was familiar with and one that was brand new to me. I analyzed the experience of using these apps and evaluated both positive and negative points while specifically focusing on the onboarding experience, menu and navigation, and the learning experience. I summarized my findings in a pros and cons list for each one. Here are some of the findings:
Once the words on the flashcards are “known,” the user must wait a few minutes to continue practicing them.
Getting to know language app users
Once I had a clearer idea of some of the best features of existing learning apps, I began user research to better understand what users might want from my app. I spoke with four individuals who were either currently using language learning apps, or had done in the past. I wanted to discover as much as I could about their experiences.
Luca Jones: 32 year-old Londoner who speaks English and Italian and who has recently moved to France. Luca is an online therapist who has decided to work remotely for a while to get a change of scene. Eventually wants to settle down and open a private practice.
Luca, a busy individual looking to learn French and assimilate into a new city without attending a language school, Is looking for an app that will both motivate him to continue and keep him consistently engaged while learning. Luca's goal is to progress in his career and connect with local people in Toulouse.
To develop a language learning platform that offers interactive and enjoyable language lessons, customizability, gamified elements, and opportunities for social interaction that will lead to Luca's successful assimilation and career advancement.
Conceptualizing the Flow
Now that I had brought my users to life through Luca, I began visualizing the tasks he would complete while using Vocabee. I developed a couple of user flows for two of the most important tasks: Saving learned vocabulary words to a bank and challenging another user to a game.
From my user flows, I drew wireframes which I would then prototype and test with real users. I used Marvel to prototype my sketches and tested four tasks with four participants.
Before testing my design, I outlined my main research goals. I wanted to discover the following:
I watched as my participants made their way through the various tasks I had assigned to them. It was becoming apparent how valuable usability testing was and I was intrigued to see the different ways people interpreted my app.
What worked Things to improve
Upping the Fidelity
Rather than sketch new wireframes, I decided to incorporate the changes I would make into mid-fidelity wireframes, also created on Marvel. There were many iterations I wanted to make including improving the layout on the signup page, finalizing the saving a word flow and adding an option to save your own words to your bank.
By changing the wording on the 'Next' button to 'Continue', and by placing it with the form fields rather than under the alternative ways of signing up (Google, FB), this screen became more intuitive.
Users expressed confusion over this initial screen where Buzzy (the Vocabee mascot) asks what the user wants to do. Therefore I combined this with the home screen where the user can access all icons and lessons.
I added info buttons to the game tabs so that users can check game instructions before selecting a game. This prevents a lot of back and forth between screens because the user no longer needs to select a game and be taken to the next screen to find out how to play.
Some test participants expressed a desire to include words learned outside of the app in their word bank. The new screen now reflects this option.
After prototyping my new, mid-fidelity screens, I took Vocabee for a second round of tests with the two of the same participants and two new ones. All of the tests were moderated in-person tests and I specifically wanted to observe their behavior on the updated screens. My key findings were as follows:
As this was a short, introductory project, the scope did not include high-fidelity screens or developing the UI of the app. However, I decided to add a few more screens to make Vocabee feel more complete, including an accessibility screen where users can change the font size, adjust sounds, adjust color contrast and add subtitles to videos.