chiLingo.

A vocabulary app designed to empower busy users. To be used when they want, for however long they want and to learn whatever they want.

ChilLingo is a vocabulary app that I developed over 1 month (part-time) as part of my Introduction to UX course with Career Foundry.

  • Role: UX Designer

  • Project Brief:

    Develop a mobile application focused on learning new vocabulary.

    To be used on-the-go for quick 5 to 10 minute study sessions around the user’s schedule to help encourage and maintain a learning habit.

  • Problem:

    Negative feelings that can be associated with learning when you have to give something up to fit it in.

    Starting new things but never being able to maintain because the requirements are so rigid.

    Struggles with fitting everything in.

  • Solution:

    ChilLingo is an app that has degrees of personalisation so that aspects of it can be moulded around what the user needs.

    The key aspects are:

    Being able to dictate how long and how frequently they want to learn.

    The ability to set a reminder for when is next convenient to study.

    Choosing the categories that they want to learn.

    An audio function that allows for hands free learning.

This project focused on the initial pathway of UX design:

  • Research and Understanding.

    Competitive Analysis

    User Research

    Proto-Persona

    Problem Statement

    Hypothesis Statement

  • Ideate and Design.

    User Flows

    Task Analysis

    Lo-fi wireframes

    Prototype (Marvel App)

  • Testing.

    Usability Testing

    Analysis

Research and Understanding.

Competetive Analysis.

  • I researched 3 applications that focused on flash cards and improving vocabulary.

    It made me realise how frustrating a lot of these apps were, not a lot of engagement and a lot of wasted clicks.

    I saw a correlation between my frustration and the lack of control that I felt I had when using the app.

User Research.

  • I interviewed 5 people focusing on:

    • their learning behaviours

    • their experiences with apps- in particular what puts them off

    • what helps form a good learning environment for them

    • their experiences with apps as a form of learning

  • The main points that came out of this:

    • Start things but don’t stick.

    • If you’re busy, learning isn’t considered a priority.

    • Want to get away from the feeling that you have to give something up to facilitate, resentment.

    • End up with negative feelings associated to learning which is not conducive to learning.

Persona.

 Finally, from these I created my problem statement and then my hypothesis statment.

  • Problem Statement:

    As Lillieth’s schedule can be unpredictable, some of the only free time she has per day is on her walking commute to work. Due to this Lillieth finds it difficult to sustain a consistent study habit over time and frequently does not continue with new hobbies that she starts. Lillieth needs a calm but engaging system in order to learn enough Italian so that she feels comfortable to travel to Italy alone.

  • Hypothesis Statement:

    We believe that by designing a system that allows for degrees of personalisation as laid out below, Lillieth will be able to maintain a study habit around the time that she has available. This will enable Lillieth to work towards gaining confidence in Italian.

    • By allowing Lillieth to set tailored reminders, she will be able to prompt herself to study at the next convenient time to suit her lifestyle.

    • Our system will allow Lillieth to pick categories applicable to her.

    • An audio function to allow hands free progress along side the more conventional visual method.

Ideate and Design.

User Flows and Task Analysis.

  • The key tasks for Lillieth are:

    • Being able to dictate how long and how frequently she wants to learn.

    • The ability to set a reminder for when is next convenient to her.

    • Choosing the categories that she wants to learn.

    • An audio function that allows for hands free learning.

  • I needed to map out how Lillieth would go about completing these tasks in order to visualise her process.

    This helped me define what success looks like and what she would need to do to get there.

    It also helped flesh out the app by identifying the different spaces she would need to visit.

Low Fidelity Wireframes and Prototype.

 

From my mapped out processes, I used pen and paper to create my initial lo-fi wireframes. I did a second version following review and went on to produce a prototype to use for testing.

Lo-fi wireframes showing the initial personalisation aspects of the app:

  • Schedule.

    Lessons are scheduled for every other day and the next reminder is set for tomorrow at 1pm.

  • Categories.

    You are allowed 5 categories at once to learn from and that there are already 5 selected, so one needs to be deselected before choosing another.

  • Home.

    There are 5 chosen categories waiting to be selected to learn, a shuffle function and the highly anticipated audio function.

All lo-fi wireframes and prototype:

Testing.

Usability Testing.

  • I conducted a usability test focusing on the personalisation aspects and the functionality around them as they are key parts of the app.

    Onboarding was used as part of prototype to reflect that they would be new users.

  • I was able to use 3 of the participants from my initial interviews.

    Although due to Covid, 2 of them were via video call, this was done on a laptop so they could use the prototype via Marvel on their own phones.

Analysis.

 

After reviewing the test results, I wrote up a test report showing the full analysis. However, I made three main recommendations.

  • Onboarding:

    Increase the lag time, better that the time is too long as the forward/back buttons are still there to use if required.

    Expand to 5 screens instead of 3.

    As the onboarding process started up as soon as the user pressed the “create new”, there was a bit of confusion as to what was going on.

    Firstly because they were expecting a screen asking for their information. Secondly because the onboarding screens had only a 3 second lag before moving on to the next. Even though they have forward and backwards buttons to allow you to toggle through them if required, they were moving too fast to see these!

    It is unclear if issues that came up on the following tasks were due to poor explanation via the onboarding, or because it moved too fast to read.

  • Vocab Cards:

    Add shortcut to change/delete categories on vocab card.

    The recommendation following task 2 was scored quite low, however because it was something that all 3 participants succumbed to, I thought it was a good one to action. The area to change or delete categories for learning is in settings. A shortcut to this space from the vocab card allows for an alternative route there.

  • Home Page:

    Change to the more standard house icon.

    I noticed throughout the testing that pressing the back button multiple times was utilised instead of the more direct one click to homepage button. As the home is also where the learning sessions are launched from, its icon was a book. This obviously doesn’t shout out “home page”!

Conclusion.

Refreshed Wireframes.

  • Updated “Vocab Card” screen with button for “delete/change” to take user to required page.

  • Updated onboarding to show “shuffle” mode and where to find it.

  • Onboarding showing the audio mode.

Evolution of the Home page.

  • The latest version showing updated buttons for shuffle and audio function, a home icon and the categories with clear icons to show what you’ll be learning.

Next Steps.

  • The original name chilLingo came about from the need for Lillieth to have a calm, understated app that allows for more effective learning.

    However as lo-fi protypes are more about functionality, this was not really something that could be fully explored and as the app proceeds through to high-fidelity designs, this will need to be fully realised then.

  • ▪ More functionality added to other features: Bookmark/Add New Vocab/ Profile Admin.

    ▪ Design aesthetic: calming and simple.

    ▪ Move up to high-fidelity wireframes and further testing.

Previous
Previous

SELF BALANCE: a mental wellbeing tracker