Learning Made Easy and Fast
Timeline: June 2023
Project: Individual
Responsibilities: Research, Wireframing, Prototyping
Overview
Need to travel to a country where you don’t even know how to speak the most basic phrases in that language? With TravelKey, you can learn basic foreign languages quickly and easily to survive within days before your trip.
Problem
Pain Point: No time to learn
Travelers often face the problem of not knowing how to speak the basic language of the foreign country they will be going to.
​
Defining the problem:
How can I provide an easy and fast way for travelers to learn basic phrases of a language in a short amount of time?
Goal
✅ Feel well-prepared.
Effectively learn basic phrases and know the important contacts of the foreign country days before the travel.
​
✅ Quick and easy.
The app provides the essential phrases and audio for how to pronounce them.
Solution
5min Everyday (Spaced Repetition Learning)
Research has shown that people learn better when they space learning out rather than cramming it in.
Using Voice
Compared to reading or thinking silently, saying out loud what you want to remember is proven more effective.
Process
Design tools used:
​
-
Persona Profile
-
Journey Map
-
Wireframing
-
Digital Prototype
Research
Through online research, I found out the effective ways to learn a language fast, as well as the methods existing language apps use.
From my personal experience using a language learning app, Duolingo, I know how effective spaced repetition system is.
Target Audience
Busy office worker
Rachel planned a vacation trip with her family. Busy and tired after work, she has no knowledge of the foreign language at all and does not know where to start learning.
​
Wants: To know at least the basic phrases of the country she is going to, so as to immerse in the culture.
Journey Map
UX App Flow & Wireframe Sketches
Establishing App requirements and Assumptions
Mid-fidelity Prototype (Figma)
Final Design
Overall, I created a simple and easy-to-follow interface using minimal colors.
To provide a quick and easy experience for users to quickly review phrases they have learnt or to learn new phrases. Flashcards can also be a familiar tool they use when studying.
​
I have chosen orange as the app’s primary color as it is associated with confidence and optimism. I want the users to feel positive learning new phrases from a foreign language.
Flashcard interaction gif
.png)
Following the main flashcard element on the home page, I created these practice cards with a drop shadow. I have also applied this effect to the buttons so that it is obvious to users that they can click on them.
​
Designing for higher accessibility: There is a contrast between chosen and disabled buttons (chosen=orange, disabled=grey).
.png)
In Library, users can add other common phrases they like to their practice. As the number of users increases, more phrases can be added based on analysis and feedback.
Reflection Journal
What I Learned
🤔To think in the user’s perspective for possible scenarios
Even though this app is for people with completely no knowledge about the language, I have included the ‘skip’ feature in case the user already knows the phrase (heard the phrase before). A new phrase will be added to the practice lesson they are on after they skip.
💨Better efficiency in Figma
This is my first time using Figma to do an app prototype. It has many functions and shortcuts similar to Adobe XD (which I have more experience in).
What I Can Do Better in the Future
Do user testing and get user feedback
Since this was a quick design challenge that took 3 days, I did not have the time to do user testing.
Develop the idea to make it more useful and informative
An additional idea I had: add flashcards with a picture of the local food and a brief description of the dish.
Visual Design
I would work on the typography, icons, and style more if I had more time.