Vocabulary Haven
Objectes:
Vocabulary haven should function as a tool to make it easier for the users to learn German vocabulary and grammer in the flashcard learning style in an easy way, while offering a game-like experience.
Overview:
I worked on this mobile application as my first project in the intro course under CareerFoundary and the supervision of my tutor and mentor then. It was my first work as a UX designer, and I enjoyed working on it, while gaining my first understanding for design thinking and the related skills as a UX designer.
When working on this project I learned about the design thinking process, and learned the following skills:
-
Research and Competitive Analysis [Understand]
-
User Interviews [Observe]
-
Personas [POV]
-
User Flows and Card Sorting [POV/Ideate]
-
Wireframing and Prototyping [Ideate and Prototype]
-
Usability Testing [Test]
-
Design Presentation and Critique [Tell Story and Present]
​
and the tools I used in this project are:
-
Microsoft Word
-
Facebook Messenger for remote interviews
-
Whimsical for the user flows
-
Samsung Notes on a tablet and pen for sketching.
-
Templates in PDF format.
-
Marvel for rapid prototyping
​
Content
Source CareerFoundary
01
Competitive analysis
The first step was to make a competitive analysis; I chose then 3 of the top ranked apps in the flashcard vocabulary learning criteria on Google Store: Vocabulary Flashcards, Quizlet & Kartelkarten.
The main goal of the analysis was to find a gap in the market, where the users are not satisfied or their demand is simply not met. So, I started to read the reviews of the users and started to try them, while listing all the advantages and disadvantages:
​​
​Some of the advantages can be summarized as following:
-
Simple and totally functioning interface.
-
The availability of flashcards decks and libraries on demand.
-
The option of sharing flashcards and decks in a relatively similar way like in social media.
-
Extra audio features are implemented.
​
Some of the disadvantages can be summarized as following:
-
Complicated design for the login page; too many elements that may distract the user.
-
Less visuals and UI elements.
-
No support for image files.
​
and finally concluded the study as following:
​
-
Vocabulary Flashcards: is indeed a simple application that is backboned with great learning material aimed directly for its target user, also easy to use, but far from any attractive visual experience.
-
Quizlet: is just more than a flashcards app, and offers great support for its target user, while allowing the user to share his experience and interacting with others, in a way that simulates social media. The only problem here is that the abundance in features can be quite the challenge for some other users, who may be just looking for building the old set of paper flashcards in a simple application.
-
KarteiKarten: It’s in my opinion the one application that gets to the point in the simplest way, and even the cheapest of the other alternatives for the user, but without any learning material to offer, it’s losing a competitive edge and a share of users.
Learning points:
Here I gained the understanding of the importance of competitive analysis in the beginning of the design thinking process; gaining the first understanding for the market, user needs and the pain points, also opportunities and gaps in the market.
​
click here to access the complete competitive analysis.
​
02
User interview
User interview is considered the most important kind of qualitative user research, where the researcher will be able to read the user's body language, and also give him the chance to ask follow up questions that may lead to important details. The user interviews as the main user research in this project gave me the understanding for the user needs.
​
I've to admit that the preparation for the user interview script was more challenging then the user interviews themselfs. Every participant had his limited time schedule and the open questions used in the interview should be as efficient as possible.
I interviewed one family member and two collegues, and they are:
-
Mariane, 32 and mother of two children, and work as a French teacher for middle School.
-
Žan from Croatia, works in Austria.,38, learned hotel management and happily in a relationship.
-
Kirolos, 34 and works as a senior accountant.
The questions were as following:
-
Can you tell me in brief about yourself and your job?
-
Can you tell me about your last experience learning a new language?
-
What kind of tools did you need in learning this new language?
-
What was your favourite tools in learning vocabulary then? Why?
-
Did you use a vocabulary learning app before? How often did you use it?
-
What feautures did you use the most in these apps? Why?
-
Why did you decide to learn this language in the first place?
click here to access the complete user interviews.
​
Two of the interviews were remote, and only one of them was in-person. After the interviews took place the findings were analyzed separately and were sorted depending on what the user think, feel and do as following:
Mariane:
Žan:
Kirolos:
03
Persona
After analyzing the results of the interviews, I decided that Marianne will represent the target user of our app, and spread the analysis of her interview answers in a persona that reflects this user group.
Looking into the persona helped in formulating the user stories as following:
-
As Mariane, I want to learn the language concepts and grammar in a cheerful way so that I‘ll not get bored.
-
As Mariane, I want a game-like experience with challenging properties so that I‘ll keep myself motivated and learn faster from my mistakes.
-
As Mariane, I want some recommendations for suitable E-books for every level I reach so that I can save time/optimize the search on the internet.
-
As Mariane, I want to be able to communicate with native German speakers.
And the user stories lead to formulating the problem statement as following:
Mariane needs to learn German, understand its concepts/grammar and be able to communicate with native German speakers because she wants to travel to Austria.
We will know this to be true when we see Mariane actively learning German and able to communicate in it.
​
and the hypothesis statement:
We believe that by creating an application for learning German that provides game-like experience, simplified explanations for language concepts and grammar, some recommendations for E-books and the possibility to communicate with native German speakers for Mariane, we will accelerate her German language learning process.
​
04
Task Analysis & User Flow
The next challenge for me was creating my very first user flow, although some may argue that it can be an easy task, especially with an in detailed task analysis; entry point, success criteria, and description for the steps the user should make to reach the success criteria listed one by one. I myself tried it in the ordinary way by putting the entry point on the top of the page, the success criteria in the bottom of the page and try the best and simplest way to fill the space inbetween, while simultaneously working on the chart itself.
There are many tools to create a user flow on the internet nowadays, and for me to choose between them was the most challenging part. But finally after some tries I found Whimsical, which is really easy to use (I didn't know about Figma till this point).
​
As you may notice here that I didn't stick to any regular shape/function relationship, and one of the mistakes I made was not creating a legend. But afterwards I created it, and became afterwards as important as creating the flow itself.
​
So, as you can see in the charts above, I worked mainly on two user flows:
-
Entry Point: Splash screen / Success Criteria: learning a new word.
-
Entry Point: Homepage / Success Criteria: learning through taking a quiz.
click here to access the complete task analysis & user flows.
User flows
05
Wireframing & prototyping
After adjusting the user flows, I started a rapid prototyping process, where simply sketched low fidelity were required with enough details to create a prototype that can be used in usability testing.
Although I normally use sticky notes for sketching, here I decided to use a tablet with a pen and Samsung notes. I uploaded a suitable template for an android phone in a PDF format, and started to sketch on the tablet. This method has its advantages like the ability to instantly edit or erase something from the design.
Afterwards I created a prototype using Marvel, and some wireframes were created specially to simulate the user interaction, so that the usability tests can take place.
​
Low fidelity wireframes
Splash screen
Sign up
Create a new FC. 1
Create a new FC. 4
Taking a quiz 3-1
Onboarding 1
Sign in
Create new FC. 2-1
Create a new FC. 5
Taking a quiz 3-2
Onboarding 2
Homepage
Create new FC. 2-2
Taking a quiz 1
Onboarding 3
Hamburger menu
Create new FC. 3
Taking a quiz 2
Taking a quiz 4
06
Usability tests
A plan was then created for the usability tests; 3 sessions each from 10 to 15 mins. evaluated in Jakob Nielsen’s rating scale:
-
0 = I don’t agree that this is a usability problem at all
-
1 = Cosmetic problem only: need not be fixed unless extra time is available on project
-
2 = Minor usability problem: fixing this should be given low priority
-
3 = Major usability problem: important to fix and should be given high priority
-
4 = Usability catastrophe: imperative to fix before product can be released
with the following direct tasks:
​
-
Sign up or sign in to the app.
-
Create a new flash card.
-
Preview or edit a newly created flash card.
-
Take a quiz and check your statistics.
and the following script:
-
You are preparing to travel to/work in Austria, and you are busy learning German. You notice that you learn too much Vocabulary, and you need a way to remember all of them and revise them, so you searched for an app and found „Vocabulary Haven“, now all you need is to get started.
-
Now you have learned a new word and need to save it to practice later.
-
You learn something new about the word you learned before, and would like to save this information too.
-
You learned hard in the last few days, and want to make sure that you remember most of the vocabulary you‘ve learned.
The tests went smoothly; two of them were moderated remote and one in-person. and the tests results lead to the following iterations:
Sign up/ Sign in screen
Here, I changed the whole design and text of the screen as the severity level of this confusion was very high (4);
-
Sign up position changed to be on the top of the screen, and was described as "create a new account".
-
A line separated the two processes: Create a new account and sign in.
-
Sign in changed into Log in
Deck's library in creating a new flashcard flow
As the prototype was tested the users couldn't find the way back from the deck's library, when they chosen to add the newly created flashcard to an existing deck, that is why a new screen was created for this feature that will show the deck's library but with a back button instead of the hamburger menu on the top of the screen.
The preview screen in creating a new flashcard flow
While the prototype was tested one of the users asked "what if I noticed a mistake while previewing a newly created flashcard?". The only answer was to search the flashcard and edit it, and to save the user this trouple an edit button was added on the screen, to make it directly possible to edit the flashcard while previewing it.
The customization screen in taking a quiz flow
Here, the users mentioned that they would prefer a shorter test time intervals, that is why the time intervals were reduced.
Also the quit button was replaced with a close "X" button on the top of the screen to avoid tapping mistakes.
07
Mid fidelity wireframes
Splash screen
Sign up
Create a new FC. 1
Create new FC. 3
Taking a quiz 2
After almost one year I decided to start working on Vocabulary haven again. You may have noticed that the sketches that were drawn missed a lot of the important UI elements like a strong structured navigation. which caused a mess in dealing with elements like the close buttons and other elements. By anyway I was then a total beginner, and I lacked the knowledge about UI, and how Consistency and hierarchy can play a huge role in the wireframing process. So, I decided to take Vocabulary haven to Figma, and bring its sketches to life as following:
Onboarding 1
Sign in
Create new FC. 2-1
Create a new FC. 4
Taking a quiz 3-1
Onboarding 2
Homepage
Deck's library
Create a new FC. 5
Taking a quiz 3-2
Onboarding 3
Menu
Create new FC. 2-2
Taking a quiz 1
Taking a quiz 4
08
Typography
The time came to start defining the main UI elements, and I started by defining the main fonts for the app. I tended to make it as simple as possible with no great variation as the spacing is working on my side in the element hierarchy on the screens.
​
So, with some research I decided for the combination of:
Space Grotesk for h1 (20px, bold)
-
Jost for h2 and primary triggers (20px, semibold)
-
Jost for body text (12px, normal)
-
Jost for secondary triggers (10px, normal)
​
09
Color palettes
Using my favorite website Dopely Colores I was able to create the following gradients as a main background for the app and color palettes used for the main color theme through the app:
%201.png)
10
Logo
Using Figma on a 120px in a 120px frame I created the logo of Vocabulary haven as a combination of a V and H that are forming a house like shape.
​
The colors of the logo are inspired with the gold color, I also used Dopely colors to create a palette for the logo.
10
High fidelity wireframes
Splash screen
Sign up
Create a new FC. 1
Create new FC. 3
Taking a quiz 2
Using all the elements mentioned above, Figma, Unsplash the figma plugin as a source of pics and Iconify also a Figma plugin as a source for icons I was able to create the following high fidelity wireframes.
Onboarding 1
Sign in
Create new FC. 2-1
Create a new FC. 4
Taking a quiz 3-1
Onboarding 2
Homepage
Deck's library
Create a new FC. 5
Taking a quiz 3-2
Onboarding 3
Menu
Create new FC. 2-2
Taking a quiz 1
Taking a quiz 4
Conclusion
While practicing on Vocabulary Haven I was introduced to the design thinking process, and learned accordingly the following processes and skills:
-
To understand through the competitive analysis.
-
To observe through user research:
-
how to prepare the script for a user interview.
-
how moderate user interviews in-person or remote.
-
how to analyze and sort the interview results.
-
To understand the user point of view by creating personas and formulating the problem statement.
-
To ideate through task analysis and user flows.
-
To create low fidelity wireframes by sketching.
-
rapid prototyping using tools like Marvel.
-
and finally to present the work done.
I'm looking forward to completing my work on Vocabulary Haven, as the next step will be clearly:​
-
Prototype.
-
Usability testing.
-
Iterating accordingly.
Thanks a lot for your interest, and I'm looking forward to your feedback.
