Vocabulary App
Role
UX/UI Designer, Research
Case Study
Learning Vocabulary App
Categorie
App
Tools
Figma, Marvel, Zoom, Google Drawings
Problem Context
Learning a new language could be a stressful and challenging activity for many people that need the skill to achieve their personal goals. There are plenty of available resources online that provide different types of methods to learn, often students struggle to find the right tool that suits their preferences, especially if time is lacking.
The Solution
I designed an app that will help new language students to achieve their goals in a functional, easy, educational, and entertaining way. Before knowing the final solution it is important to first know the competition and to know the user.
01- Research Process
Competitive Analysis
One of the first steps that I think is important is to do some research to better understand the problem space in which I will be operating. Knowing the competitors while doing a competitive analysis and evaluating their strengths and weaknesses will help me achieve the goal.
The features and elements that I evaluated are the following:
Launch experience (splash, on-boarding, sign up/log in).
Navigation.
Images, design, color shame.
Difficulty/ease of task completion.
Bellow 👇👇 are the results of the analysis.
User Interviews
Once I accomplished a Competitive Analysis, I considered opportunely to conduct a series of user interviews for the upcoming mobile flashcard app; having as an objective to know the users’ thoughts, desires, and needs. For that, I selected three users that are currently learning a language and use technology to strengthen their education.
Below are the three user interviews 👇.
Summarizing what my interviewees are doing, thinking, and feeling. Below 👇 we can find results from the user’s point of view, this will help me to build a User Persona.
02- USER PERSONA
Based on all the gathered information, I identified a user personas for the product, along with other important insights.
03- USER FLOWS & USER STORY
User Flows
My application needed a structure to help to build it, and a perfect starting point is the use of user flows. I mapped out two task flows and used a screen-based approach that helped me to identify the main screens my users would go through. Below I show one of them as an example.
04- WIREFRAMING, PROTOTYPING & USABILITY TESTING
Low Fidelity Wireframe
Using pen and paper, I began to visually brainstorm all insights gathered to create low-fidelity wireframes that show how the feature would function.
Prototype & Usability Testing
For this early stage, I wanted to perform Usability Testing to determine whether Vocabularium is useful. I used 4 participants, and the testing took around 15 minutes.
Usability Test Report
Mid Fidelity Prototype
Once analysed the User Testing results, I proceeded to make the pertinent changes, subsequently creating a mid-fidelity wireframes. For this case study, I added just some examples, aiming to give an idea of the final result.
05- FINAL DESIGN OVERVIEW
Splash Screen, Login & Language Selection
Home, Vocabulary Categories & Learning Card
Learn vocabulary
User Profile
06- FINAL THOUGHTS
Vocabularium has been a challenging and rewarding experience that introduced me to the design process and the world of UX. For this first project, I started from the concept phase to a low fidelity wireframe prototype ready to be presented to 4 users to perform a usability test. I was thrilled by the idea of just throwing myself into a project and comprehending the user-driven approach in practice. Apart from applying new tools, and techniques, I gained new insights about humans as a result of qualitative research passive listening. There was a lot of back and forth in the design process, but what stayed fixed was the users' feedback throughout the usability test which helped me to deliver a user-centered approach product.
I didn't want to leave the project as a low-fidelity wireframe, so I proceeded to bring the product to life by creating some final designs.