Overview
Solo project Completed at CareerFoundry UX Design Bootcamp
Scope
Competitive analysis, user research, user persona, information architecture, wireframes, prototypes, usability testing
Empower people to learn new vocabulary
Objective
Nowadays, there are countless tools and applications that help learners to practice any language. Even though people are busier and full of activities, learners need a way to keep motivated and engaged towards their goals.
I have based the design and development of my product on the Design Thinking philosophy
Discovering existing flashcards apps
Competitive analysis
Learning a new language is not an easy task. The process of learning vocabulary can vary depending on everyone context, background, accessibility, etc. Fortunately, there are plenty of language schools, apps and platforms that aim to facilitate this process. All use different techniques to develop everyone skills.
First, I conducted an in-depth competitive analysis of some applications to discover what they offer, what they may lack; their branding, their teaching techniques and analyze the overall user experience and user interface design.
Apps: Duocards, Lexilize Flashcards, German word of the day - Daily German Vocabulary
Users want to practice on-the-go and feel engaged in the learning process
User research
My users' satisfaction would be the key of the success of my app, that's why it was essential to have interviews (and conversations) with them. Listening to their stories, their feelings and thought. Learning more about their behaviors gave me a clearer picture of who I am designing for.
I created a script and conduct a series of user interviews via Meets. My goal was to gain insights into the needs and wants of real users of existing apps.
Aligning the design process with my user's needs
User persona & User stories
Based on the findings and insights from each interview, I created my user persona Laura. Because I found it as a great tool to have a concrete idea of my user during the design process.
Then, I created the user stories and job stories (right image). These allowed me to focus on defining functions and solutions from Laura's perspective. Which meant that her needs would be taken into functional requests for features that empowers her to learn new vocabulary.
Problem Statement
Laura needs a way to improve her German from level A1 to B2 because she is going to apply to a university in Berlin soon. We will know this to be true when we see that she reaches the required language level and qualifies to study her master's degree
My Hypothesis Statement
We believe that by creating a vocabulary app to practice in a daily basis with resources sorted by categories, topics and levels for Laura, we will achieve an improvement of her language skills and vocabulary required to enter to the university.
Clear navigation is crucial
Information Architecture
It was the time to understand HOW my users will engage with the content and navigate through my vocabulary app.
I came up with some initial ideas on how to organize the content and how to provide the information to my users. I also identified two main tasks that Laura would need to complete to accomplish her goals:
-
Practicing vocabulary
-
Setting a reminder
Then, I visualized how she would move through the information using my users' flow
Flashcards, activities, challenges and goals
Low-fidelity prototype
At this point, I had already created my user persona and defined the necessary tasks to reach her goal. It was time to sketch the first wireframes on paper understanding and visualizing the user flow. Then, I uploaded them to Marvel and created the first low-fidelity prototypes for my app.
The first wireframes were very useful. Bringing the first ideas to life, thinking about every detail that a screen needed and creating a clear flow for each task took time but finally the lo-fi prototype was ready to be tested by some users.
Tasks:
-
Practice vocabulary for a specific category.
-
Set a reminder schedule for a specific goal.
Testing, iterating
Usability testing
I conducted the first usability testing with the first version of low fidelity prototypes. I wanted to do early testing because it allowed me to see if my app offered adequate functionality for my users to sign up, log in, and enter their personal information. Also, whether it offered logical navigation patterns and whether it allowed my users to study new vocabulary.
With my test plan, script and scenario tasks. I recruited 4 participants who were actively learning a language. I conducted 3 moderated remote 1 moderate in person tests.
Each participant completed the following tasks:
-
Successfully Sign up and complete onboarding process
-
Pick a category, review vocabulary with flashcards
-
Explore activities (Play a game, accept a challenge)
-
Create a new daily reminder
-
Create a new category, add vocabulary
After the results, I worked on my app improvements and then moved on to designing the mid-fidelity prototypes in FIGMA. I continued collecting feedback and went back to testing before moving on to hihg fidelity prototypes.
I organized my findings and summarized them in a usability testing report*. Then, I ranked the errors on a Jakob Nielsen rating scale. Which helped me prioritize what needed to be fixed in my prototypes by the observations with higher severity results.
Usability testing report
The iterative process have helped me to understand how potential customers would use my product and identify what, how and why a element or fuction was needed to meet the needs of my audience (language learners).
Prototype
High-Fidelity
Features: The decisions
-
Users can create an account, log in or log in as a guests.
-
They can choose languages, choose level or take a test.
-
From the home screen, they can browse through the categories, select and complete sets of flashcards. At the end they can test their knowledge of the words they have learned.
-
Each card contains a word, its translation into the native language, audio with pronunciation, reference image and sentence to facilitate the description.
-
Users are able to create their own category/topic with their own list of words. They now can personalize their categories with color, name, image.
-
Users would find games, exercises and challenges in "activities" to have fun during the learning process.
-
The games, challenges and flashcards would stimulate the full package of skills. These may contain reading, listening, writing and speaking exercises.
-
In the settings, they are able to create reminders as a goals in order to feel motivated and engaged with learning vocabulary.
Style Guide
I have defined the style guide for my application. The user interface elements will help me to keep my design coherent and consistent.
The chosen colors (green, yellow and orange) are related to brain stimulation and are used in education and learning processes.
Learnings
-
Early usability testing is crucial to improve your product, navigation and features.
-
It is important to pay attention to details, comments and non-verbal language during testing, everything can help you a lot during the design process.
-
There is always room for improvement. Showing and sharing results and progress and receiving feedback from friends, tutors, mentors has benefits at any stage of design.
Next Steps
The future of learning applications is AR...
First, I believe these steps would help me continue to improve my product
-
Test again my current prototypes
-
Look for feedback on my app (on mentors, potential users, friends)
-
Evaluate Heuristics
-
Build a Design System
Second, to make Swords more interactive and thinking into the future. I would love to integrate AR into my flashcards app.
My idea is to have the possibility to practice languages with objects around us. Assign labels, colors and categories to each object you want to learn. In this way, users could practice vocabulary in different spaces.
I believe that the incorporation of new technologies would facilitate and make this even more real and fun.
Next Project:
