Dina B LIght mode_edited.jpg
Artboard.jpg
About the Project

This project was part a UX Design course at CareerFoundry.

My Role:  

UX Designer

Project Duration:

4 weeks

Goal:

The goal was to design a mobile app that empowers people to learn new vocabulary in a fun and enjoyable way.

Group.jpg

Competitive Analysis

Competitive Analysis
During the Understand phase of the project, I carried out a Competitive Analysis of the three leading language learning apps in the App Store and retrieved the below findings:
Screenshot 2020-12-27 at 08.27.24.png
Overall I found the app had quite a dark UI which was quite depressing and different to the logo being white and blue. The constant ads on every page can be overbearing and irritating, furthermore, after selecting a topic/keyword, the page where I select what I would like to do with the flashcards was too busy and confusing to use. On the other hand, the consistency of the theme was kept throughout and the use of familiar iOS emoji’s was encouraging. 
Overall, the app’s light and friendly UI stayed consistent throughout and was a pleasant experience with great visualization. The use of the pictures helped to remember what I learnt. However, I feel Babbel is best for beginners rather than advanced learners as the repetitiveness of the words will not stimulate the advanced. This is because the course is mostly based on vocabulary building in basic scenarios. 
Screenshot 2020-12-27 at 08.27.28.png
Despite the app’s dark UI, Duolingo is very game like which teaches languages in a challenging and playful way, so it is perfect for users who lose motivation quickly. The use of different imagery and audio is are helpful to remember what you learn. However, the lightness of the app logo (below), contradicts the app itself being dark, which I found quite dull and depressing. Overall, the app was easy to use and follow, another improvement I would consider is providing more information at the beginning.
Screenshot 2020-12-27 at 08.27.34.png

User Research

User Interviews
Following the Competitive Analysis, I conducted 4 user interviews with participants that had experience with learning a new language or were currently learning one. The participants consisted of 4 females and were all done in person.  I asked the following questions: 
  1. Tell me what your average day looks like. What do you do?
  2. When was the last time you had to learn new vocabulary/language for something?
  3. Is there anything that motivates you when learning new vocabulary/language? If so, tell me more about this.
  4. On average, how much time do you dedicate weekly to learning the new vocabulary/ language?
  5. What is your technique to learning new vocabulary/language? For example; do you go online classes, face-to-face lessons, studying on your own, online classes etc....
  6. Tell me about a time you’ve been frustrated trying to learn new vocabulary/language. Why did you feel this and is there anything that could have made it easier for you?
  7. Do you have any experience with vocabulary/language learning apps? If so, which features did you find helpful?

Personas

User Persona
Based on the research I discovered in my User Interviews, I created a proto-persona to understand my user's needs, behaviours & goals.
AMINA.png
Problem Statement
Amina needs an app that will help her to develop her  conversational skills in French whilst on the go and send her reminders to learn new vocabulary as she has a busy lifestyle. 
Amina also needs a way to be able to save and review her own collection of flashcards containing new vocabulary she has learnt as well as personalizing them with recorded audio and images to better understand them.

Planning

User Flows
Based on Amina's needs, I created a 2 user flows that illustrates the paths she would take to achieve her goals: 
Task 1
Create a new flashcard to add vocabulary and personalise it.
USERFLOW 1.png
Task 2
Select a topic to learn and take a test to practice.
USERFLOW 2.png
Wireframes
After defining my user flows, I sketched low-fidelity wireframes of my main screens.
Screenshot 2020-12-27 at 16.26.56.png
Screenshot 2020-12-27 at 16.27.10.png
Screenshot 2020-12-27 at 16.27.01.png
Screenshot 2020-12-27 at 16.27.19.png
Screenshot 2020-12-27 at 16.27.39.png
Screenshot 2020-12-27 at 16.27.30.png

Prototyping

High-Fidelity Prototype
After compiling all low-fidelity wireframes to mid-fidelity wireframes, I was able to create the high-fidelity prototype using Marvel. Here are a few screens from the prototype: 

User Testing

Usability Testing
After creating the working prototype, I conducted 3 face-to-face usability tests with 3 participants. Each test was approximately 20 minutes long and the participants carried out 4 direct tasks: 
1. Open app & sign in as a new users or an existing on
2. Add a new flashcard and customise
3. Learn a new topic and complete a test
4. Check what the daily word/phrase of the day is 
 
Once I received the feedback,  I complied a Usability Test Report to indicate the severity of each critique using Jakon Nielson's scale. The following comments were obtained: 
You could make Facebook, Google and Twitter icons bigger so emphasise that you could sign in through social media!
 
There isn't a way to rerecord/delete button for audio pronunciation if user wishes to erase recording"
There was a glitch with question 2? The app told me I was wrong but I was actually right.
After making the amendments based on the feedback, I iterated the app again, below you can find the final prototype!

View the prototype here for full experience

Project Learnings & Future Iterations

Future Iterations
  • Set up notifications so that user can receive daily reminders to learn as well as word/phrase of the day

  • Think about setting up a rewards/points system

  • Connect with other friends to play and learn with each other to improve conversational skills more

Project Learnings
  • User feedback is vital

  • Time management with Wireframing

  • Keep it simple!

  • User flow is the base of Wireframing

  • Keep testing, you’ll never know what feedback/ideas you’ll get to improve!

Clay Dark Left.jpg