Vocapp

I created a responsive web application made to learn new words with games and flash cards.
The design process starts with a competitor analysis up to a clickable low fidelity prototype.

 

My Role: UX Design student

Tools

Pen & Paper
Adobe XD


InDesign

Zoom

Illustrator

Photoshop

Marvel

UX Design Tools for Vocapp

Design Process: Empathise

Competitor Analysis

Because I know little about e-learning and language education, I dived into research and a competitive analysis for an overview. Studying the competitors helped me form the overall product strategy and discover valuable opportunities.


I examined three competitors:

1. “Babbel”, the market leader in E-learning

2. “Leo” a popular dictionary website well-known for its community and forum

3. “Memorion” an app I stumbled upon because of its high ratings and recommendations on the internet.

1. Babbel

Babbel Icon
Babbel Screenshot Onboarding

Onboarding

Babbel Screenshot Vocabulary

Vocabulary

Babbel Screenshot Learning Methods

Learning Methods


PRO
- State-of-the-art onboarding
- Questioning of Age and Learning Purpose
- Quick, smooth registration
- 7-day free trial
- 5 learning methods to choose from
- Small learning units

CON
- Mandatory to put down billing credit card or paypal account during registration process
- No community
- Costs after 7-day trial: 6,95 - 8,95 Euro mtly
- Too entertaining


Conclusion:
Babbel is a highly professional application. I appreciate the app asking its users about their goals, so the learning method and intensity can be adjusted. It's easy to navigate, looks fresh and inviting, and is entertaining because different learning methods are laid out for the user.

I have slight doubts if the app can convince as a learning app and not drift off to entertainment. And, unfortunately the app is not free although the pricing is moderate.

The biggest pain point for me is the registration process with mandatory credit card details and email verification, even for the free 7-day trial.

2. Leo

Leo Icon
Leo Screenshot Start

Start

Leo Screenshot Vocabulary

Vocabulary

Leo Screenshot Learning Methods

Learning Methods


PRO
- User-based dictionary included
- Different learning modes
- Phrases and expressions can be added too
- Audio for pronunciation
- Adding the word you looked up in the Leo-dictionary to your stack of flash cards
- Ready-to-use-stack of words available
- Simple app with 3 core functions (community, dictionary and training) for several languages
- Free of cost

- Community and Forum

CON
- No onboarding or explaination of the app
- Redirection to website for registration
- Special courses are chargeable

- No “back” button
- Bad recognition of typed in words (capitals are marked as mistakes)
- Out-dated, unpolished UI Design

- Complicated interface with folder structure

- Advertising


Conclusion:
Leo is well-known for its dictionary and forum. I visit the website often when I am searching for an appropriate translation, especially phrases and sayings.

Sadly, the application is confusing and could use improvements. The navigation is rough, the UI feels out-dated and unpolished. It reminds me of a Windows user interface with its folder-based structure.

Using the app is frustrating and if it wasn’t for the dictionary and forum I wouldn’t use it. Leo has a strong community and if the user has a deeper interest in the language it’s highly entertaining. This feature really adds value to the application.

3. Memorion

Memorion Icon
Memorian Screenshot Start

Start

Memorian Screenshot Flash Card

Flash Card

Memorian Screenshot Learning Methods

Learning Methods


PRO
- No registration
- 3 different levels: Beginner, Advanced, Expert
- Customisable flashcard stacks
- Easy to use with just one hand
- Audio and talk to speech
- Exact documentation of your progress
- Entertaining
- Detailed tutorial videos on Youtube
- Free
- No advertising

CON
- No onboarding

- Navigation in English only
- Redirection to website for registration
- Overwhelmingly packed app with too many features

- Time-consuming and to understand the app
- Very basic/technical design

- Feels complicated


Conclusion:
Memorion is like a Swiss Army pocket knife. The creator has put a lot of effort and thought into it. I enjoy trying out the different games, checking my progress and switching levels seamlessly.


The downside is that the app is overloaded and the UI design is pretty basic. It has so many features that it‘s difficult to completely understand it at a glance. For a full overview of the features there are several tutorials available on YouTube. You could easily cut this app down to 4 or 5 individual ones. The application feels very technical and heavy due to the dark background.

Empathy Map

Empathy Map Jan

I like convenient and simple learning techniques.”

Jan, 50

Customer Service Manager

Empathy Map Elena

Talking and conversation is the key.”

Elena, 38
Lawyer

Empathy Map Carla

 “I just wish I had more time.”

Carla, 47

Working Mom, Art Director

 


Carla, Mom and Art Director

Carla, Mom and Art Director

Doing…
I am busy trying to keep job and family together.


I use flash cards to memorize new words.


I turn on BBC radio in the morning to listen to the English language

Thinking…
I wish I had more time to learn new words.

I think the best method to learn is a small learning group.

I think I’m a slow learner.

Feeling…
I’m always stressed and don’t have much time.

Using new words in my everyday life is a challenge.

It’s a great feeling doing something just for myself and not my job or family.



Jan, Customer Service Manager

Jan, Customer Service Manager

Doing…
I spend a great deal of the day talking on the phone.

I learn through practice and repetition.

I like to use new technology.

Thinking…
I think it’s hard for me to find time.

I like easy solutions.

I think it will become easier to communicate without learning because of Google Translate and innovations to come.

Feeling…
I forget newly learned words easily.

I should bring up more time to learn new words.

Looking back and seeing your
progress is very uplifting.



Elena, Lawyer

Elena, Lawyer

Doing…
I just practice and try to use the new vocabulary as often as possible.

I watch series (e.g. Netflix) in a foreign language with subtitles to get a feel for it.

I use new words regularly.

Thinking…
I think being able to communicate in another language will make me look even more professional.

I think it’s a good way to connect with others fast.

I think it should be fun to learn new words.

Feeling…
I feel empowered when I can
use my new skills.

Learning new things is good for your brain.

I believe learning new words is easier if you aren't afraid of making mistakes.


User Persona

Vocapp User Persona Felix

Problem Statement

Felix needs a way to learn new words easily because he works for international, English speaking clients and wants to give a professional impression. He lives a busy life and can’t concentrate for a longer period of time. He needs short, repetitive tasks wit measurable results to stay motivated.

Design Process: Empathise

Sitemap

Vocapp Sitemap

Design Process: Ideate

First Low Fidelity Prototype

After research, interviewing, and creating user personas I sketched a low-fi prototype to get a better understanding of the application and locate possible pain points and errors.

Vocapp 1.Prototype
Vocapp 1.Prototype

Design Process: Test

Usability Testing

I focused on the schedule settings and the general usage of the marked flash cards.

From mypoint of view, two features are important for this application:
1. A very good schedule and settings for time & date
2. Easy and entertaining to operate

Three participants with different backgrounds took part in a moderated user testing with the low fi protoype.

 

The test results show that the participants struggle with the navigation bar, weak or misleading phrases and user-unfriendly button sizes. The feedback went into the second prototype.

Usability Testing 01
Usability Testing 02

Usability Testing 03
Usability Testing 04

(Click on Image to enlarge)

Design Process: Test

Revised Low Fidelity Prototype

Taking the results into consideration I made adjustments to the prototype to improve the overall interface. The first prototype navigation bar didn’t follow a clear hierarchy and had misplaced actions. I didn’t realise this issues at the time of making.

 

Improvements

- Skip Option during Onboarding

- Refined Sign-Up with more Options and explanatory text

- Edited Dashboard

- Redesigned Schedule Settings for better usability

- New Navigation

- Consistently using one wording

2. Prototype Vocapp
2. Prototype Vocapp

The Take Away

From my point of view the second protoype is a big step forward and is heading in the right direction.

More testing and adjustments made would turn it into a refined application.
I learend that my perception doesn't necessarily match with the users expectations and testing quick prototpyes eliminates errors at an early stage.