gdhopes.com

UX Design Case Study. 2021/22

UX/UI design for a language learning app that offers a personalised experience, allowing the user to create their own learning inputs

Tools: Adobe XD, Figma, Zoom, Usability Hub, Illustrator

PHANTASTIC

My first introduction into the world of UX.

A short course touching on some of the main points in the design thinking process.

How would I design a mobile app that empowers people to learn new vocabulary?

The idea behind the project was to redesign the experience of memorizing/learning by exploring how people learn vocabulary. Specifically via a mobile app designed to be used on-the-go for quick 5 to 10-minute study sessions.

COMPETITIVE ANALYSIS

My first step: Performing an informal analysis of existing mobile applications for learning vocabulary. Here are the highlights of this task, showing the strengths and weaknesses for each.

WORD UP 

Improve & expand your English vocabulary. Learn fresh words daily with Vocab Builder

• STRENGTHS •

• Colourful onboarding process

• Quick learning method

• Multiple learning methods

• Clean interface, lots of space

• WEAKNESSES •

• No autofill for help with spelling

• Colour scheme could be more aligned

• The adverts not loading stifled the overall experience

VOCABULARY BUILDER

Vocabulary Builder aims to aid in improving English vocab without causing information overload.

• STRENGTHS •

• I struggled to find any positives for this application…

• WEAKNESSES •

• No onboarding, no welcoming

• Text heavy, dark UI

• No initial assessment test

• Very very basic UI/UX design

LEXILIZE FLASHCARDS

Memorize words efficiently and improve your vocabulary. 

Quickly make your dictionary and easily learn with different games

• STRENGTHS •

Smooth, fast onboarding process

• No login or signup required

• Fully customizable 

• WEAKNESSES •

No speech input learning  

• Overwhelming amount of settings

• User progress is not immediately clear

Lexilize Flashcards provided the best overall experience, but there was definitely room for improvement in how the app allowed users to create content

USER RESEARCH

To understand more how people approach learning new subjects or vocabulary through mobile apps, I conducted three online interviews. 

Each participant answered six open-ended questions (see left) about their daily routines, time management, and preferred learning methods.

1. Jessica lacks a fixed routine due to her 2-year-old and studies; she fits learning in when possible, ideally in the morning.

2. Aspires to be a morning learner but often procrastinates; prefers short, flexible study sessions over sitting down to study.

3. Initially motivated by relocation, later, by academic goals. Tech motivation includes organization, easy access, and positive feedback.

4. Views learning as work; feels demotivated by limited practice and nervous about pronunciation in real-world use.

5. Immersed by necessity—used the language daily in public and at work. Feels more comfortable speaking 1:1 in private.

6. Prefers repetition and personalized definitions, supported by visuals. Would tailor learning based on available time.

INTERVIEW 1: JESSICA

FEELING

I feel my pronunciation holds me back

I feel better talking on a 1:1 basis

I feel that rewards help me in my progress

I feel that I don’t want to be confined to sitting down when learning

THINKING

I think organisation in learning is important

I think visual learning cues are also important

I think of learning as work

I feel improving my vocabulary will benefit my life in Germany

DOING

I study when I can make time, due to my lifestyle

I study in short periods

I use flashcards to learn 

I was motivated by relocation 

I was using my new skills to get around daily

JESSICA

Age: 31

Nationality: US

Location: Germany

Profession

Unemployed

1. Rob works full-time in internal communications at a local charity, mostly online from his laptop. He works a regular 9–5 schedule, occasionally staying late.

2. Prefers short 5–10 minute study sessions during his commute, using the Elevate app as a productive time filler.

3. Enjoys the instant reward of learning, especially when the topic is relevant and aligns with his interests.

4. Dislikes “pay to unlock” features, slow loading times, and unintuitive design—sees them as major barriers.

5. As someone who writes for a living, he uses his newly learnt skills in his daily role (he is using a vocabulary app). He has set up reminders to play the app twice a day and through this process he has created a better routine.

6. He believes in teaching the basics and explaining things first to allow people to gain an expectation and understanding before going further.

INTERVIEW 2: ROB

FEELING

I feel that personalisation and relevance are important

I feel reminders and routines are also important

I feel I would pay to unlock if the benefits were in line with the cost

THINKING

I think ‘pay to unlock’ options are blockers

I think positive reinforcement plays a big role in my learning

I think the login streak is one of the main reasons I use the app

I think using the app helps my routine and my mindset

DOING

I study in short periods, as a time killer

I use them for immediate benefit

I use reminders to help me

I play everyday to keep my ‘login streak’ going

ROB

Age: 32

Nationality: British

Location: UK

Profession

Internal Comms for
a local charity

1. Maria is studying UX full-time with a structured routine, balancing her studies around her 2-year-old’s schedule..

2. Uses Babbel in the morning as a relaxed, productive start to the day; also uses it in 10–15 minute bursts while waiting around.

3. Motivated by perfection and clear goals. Connects more with tech that’s personally relevant—like apps tied to her interests (e.g., plant-themed water tracker).

4. Quickly demotivated by apps or methods that don’t meet expectations, or that progress too slowly or too fast.

5. Practices phrases with native speakers and recognizes vocabulary in real-life settings like stores or menus.

6. Values organization and prioritizes learning practical topics and basics first.

INTERVIEW 2: MARIA

FEELING

I feel productive when using the app

I feel having end goals in sight are important

I feel progression has to be right in order for it to work for me

I feel frustrated when the app doesn’t work as intended or it is not as promised

THINKING

I think covering the basics is important

I think using the apps in short bursts works better

I think using the app in the morning leads to a productive day

DOING

I use Babel first thing in the morning to start the day

I also use it throughout the day on an ad-hoc basis, for 5-10 mins

I enjoy positive association

I am a perfectionist

I get frustrated quickly

maria

Age: 25

Nationality: US

Location: Germany

Profession

Unemployed,
Studying UX

PROTO-PERSONA

With the project being condensed, I used the information gathered from each interviewee to create a proto-persona who would form the basis for the design decisions moving forward

DANIELLA

DEMOGRAPHICS

Age: 28 years old

Profession: Studying full time at home

Lives together with her partner, having recently relocated to Germany

Has a marketing background

BEHAVIOURS

Daniella tends to study her vocabulary in short periods; waiting for friends, taking breaks between studies, or on public transport for example

Likes to practice German when visiting shops and cafes, also likes to practice around her new study colleagues whether online or face to face

Daniella likes apps that offer immersion and can play a part in her daily routine

NEEDS & GOALS

Would like to learn themes/dialogue that are related to her new life (cafes, supermarkets, study discussions etc)

To have the ability to learn German vocabulary in short 5-10 minute periods

To be able to add their own dialogue to fit her studies

Needs the app to feel relevant, to have a personal connection

All of the information collected so far led me to the problem statement for the project, and also my initial hypothesis statement for proceeding

PROBLEM STATEMENT

Daniella needs a way to learn new vocabulary in a new language to help her get adjusted to the new city. We will know this to be true when Daniella is able to, for example, to go to the supermarket or a café and use what she has learnt. 

Daniella needs an application that allows for 5-10 minutes of study time so that she can use it on the spot in the city and at home during her study breaks. Daniella’s needs a way to connect with the application, for it be something she finds relevant. 

We will know this to be true when Daniella uses the app as part of her daily routine

HYPOTHESIS STATEMENT

We believe that by creating a app that only requires a small amount of time to pick up and learn relevant vocabulary, Daniella will feel more settled in her new city.

Also, by creating an application that forms part of Daniella’s daily routine, by providing a fun way to her to learn and something she can connect with, Daniella will use it adaily and benefit from using it

We believe that by allowing Daniella to study ground level vocabulary along with being able to progress and add her own text, this will ensure that the application stays relevant to her day to day life and will always meet her requirements

USER FLOWS

Using what I saw would be the 2 main features of the app: adding your own vocabulary and taking the daily quiz to revise, I visualised how I would have expected users to navigate through the application

TASK 1:

OBJECTIVE: add new vocabulary to the app


SUCCESS: user has added their vocabulary to a flashcard

STEPS:

• Open the app

• New Users enter onboarding, existing users can login

• From the home page, choose ‘category’ in the menu

• Choose if you want to add your vocabulary to an existing category or create new category

• Add further information (definition, context, audio etc)

• Confirm if you are happy with this information

• New vocabulary has now been saved and added to the app

TASK 2:

OBJECTIVE: take the daily quiz


SUCCESS: user has completed at least 1 round of the quiz

STEPS:

• Open the app

• New Users enter onboarding, existing users can login

• From the home page, choose ‘Quiz’

• Choose Category or Random as the basis for the Quiz

• Random goes directly to Quiz

• Category asks user to choose between Words and Phrases

• User takes and completes Quiz

• Play again, or go to home screen to view their Quiz progress

MID-FIDELITY WIREFRAMES

With the user flows in place, it was time for the next step in visualisation: How would the app look and feel. Here you can see some of the concepts that came out of the mi-fidelity designs.

ADDING NEW VOCABULARY

DAILY QUIZ

USABILITY TESTING

With a working prototype built it was time to test the design. I set up 4 moderated tests with a set script via Skype, using the screen share feature and the app prototype. I set 4 tasks, using real world scenarios.

TASK 1:

Whilst watching a youtube video, you heard a phrase that you would like to add to the Phantastic app. What steps would you take in order to do so?

0%

Of the participants completed the task on the 1st try

The option was placed in the Categories section which participants did not recognise as a natural area to go to add their own vocabulary

TASK 2:

You’ve just woken up and you want a little challenge to start the day. You want to take the daily quiz. What steps would you take in order to do so?


100%

Of the participants completed the task on the 1st try

The option was placed in the Categories section which participants did not recognise as a natural area to go to add their own vocabulary

TASK 3:

You’re about to enter a coffee shop and you’re not 100% sure about a phrase you’ve learnt previously. Where would you check for this?

 

25%

Of the participants completed the task on the 1st try

In this section, I had used 2 names: ‘Knowledge Bank’ and ‘Used in Public’. It was not clear that the users existing vocabulary would be housed under ‘Used in Public’

TASK 4:

You like look of the app and after signing up you now want to change your photo so the app feels a bit more like it’s yours. How would you do it?

 

100%

Of the participants completed the task on the 1st try

Users found this task very intuitive, so no issues found.

INTERVIEW OBSERVATIONS

maria

• Liked having the voice record option but didn’t
understand
the audio icons that were on the flashcard, would like to see this made a lot clearer

• Found the current home page terminology confusing

ROB

• Liked having the ability to record their own voice into the app

Liked having a ‘nickname’ option as found this very personal

maria

Liked having the ability to record her own voice into the app

Found the current home page terminology confusing

Would like to see text under the navigation options for clarity 

CLARA

Wanted the option to add flashcard to ‘used in public’ or ‘to learn’ as
this was not available

Felt that for someone who was new to learning applications, that
things should be more visual

USABILITY TESTING – THOUGHTS

The testing gave me my first real insight into just how unique the experiences are for each individual user. From someone who sits and reviews each button on each page, to someone who just taps and hopes for the best. 

 

It taught me that a lot of the time, my assumptions, no matter how confident I felt about them, went straight out of the window as soon as another user picked up the app. 

 

The results spoke for themselves and I made a lot of changes to the first prototype. The testing proved invaluable in gaining insight before moving forward and helping to guide and funnel ideas into making them much clearer.

THE DESIGN

The project for this application finished after completing the usability testing, however, having come this far, I wanted to see how the app would actually look.

Inspired by the retro feel main font (Made Gentle) I went with a colour palette and design that had also had a retro yet clean feel to it.

I felt that as the user is able to customise their experience quite a bit, it made more sense to keep the design minimal and they themselves could choose to add more (images, categories, audio etc)

#B7D8D6

#789E9E

#4D6466

#F2F5E4

#EEC89C

ONBOARDING

HOME

FLASHCARDS

– CATEGORIES – 

DAILY QUIZ