Progress Indication in a Language Learning App & Website: Embark

What is Embark?

Embark is a language learning mobile and web product made for missionaries of the religion, The Church of Jesus Christ of Latter-day Saints who teach about their religion in many countries and languages. The goal of Embark is help missionaries learn the language they are assigned to teach in.

The Users

Primary Users: Men and women missionaries, usually ages 18-22

Secondary Users: Elderly couple missionaries, usually 55+ year old

What Tools I Used

Miro: Mind maps and explorations

Figma: Screen designs and user flows

Objectives

Create a way for the missionaries to know how much progress they have made on a topic. Currently you have to go several screens in before obtaining this information.
Create moments of joy or excitement to celebrate small milestones it takes to learn a new language and reveal landmarks of progress.
Assist the missionaries to know which topic to work on next. Find a way to indicate the following states of progress.

Initial Learning Progress
Initial Learning Complete
Spaced Review Progress
Spaced Review Complete
Overall Progress
Overall Complete
Maximum amount of progress or potential

The Team

Interface Design: I created the screen designs based off of an existing brand identity. I was able to propose some changes to the screen designs including the shape of the topic cards from being two columns to one column.

User Flow Design: I created 100% of the user experience in this project

Collaboration: I worked with the instructional designer on overlapping aspects including user research.

I also worked with the web developers to implement the design into the existing program.

The Design Process

Sketches

Mind Mapping

A mind map created to help us think through what were key moments the users would want to see their progress and what information would be helpful to be known right away.

User Testing

I interviewed men and women between the ages of 18-22 who are users of Embark. The user testing focused on ensuring the users were able to use the product to help them determine what they should work on next. I asked them what they currently do to decide what topics to study during their language study time. All of the interviews were done virtually over Zoom and we had them walk through a Figma prototype after some initial interview questions.

Key Findings

After exploring many different routes we ended up simplifying components to be helpful but not overwhelming or confusing. We decided we didn’t need to separate the progress for initial learning and review learning as long as they had a way to know when review was available which we indicated with a dot.
Gamifying the app more so that it is fun and engaging is a value the users find very important when working on a tough and daunting task of learning a new language.
The users also value their teachers and the curriculum teams plan to help them progress quickly and effectively and so making it known what our recommendations are helps with that.

Explorations

Here I show some of the different explorations of how we can show the progress mentioned. We wanted it to be intuitive and quick to understand.

Initial Learning Progress
Initial Learning Complete
Spaced Review Progress
Spaced Review Complete
Overall Progress
Overall Complete
Maximum amount of progress or potential

I explored doing trophies to indicate completion, silver for initial learning and gold for review. We tried multiple ways of doing two colors for the progress bars or highlighting the card or using a dot indicator to show review was available.

I explored the idea of using a honey comb for spaced review progress.

I looked at showing how long until review was available so the user knew when they could come back to review a topic.

For context, spaced review is the concept that review should be spaced out over time and so having a way for the users to know when they have things to review is important.

I then decided to try making the topic cards the full length of the screen to be display and highlight the progress bar.

Through user testing we found that the missionaries really enjoyed an existing feature where the background image will change when you level up.

We have ten backgrounds and they are monochromatic. Each screen displays a different terrain or landscape representing places around the world and how the missionaries will go to places around the world.

At the same time I was working on finding ways to make the Embark app more inclusive of those with visual impairments including color blindness.

So I began to explore the idea of having all the UI components match the background colors to have a full immersion of change when you level up.

This tested well for accessibility and the gamification and enjoyment of the users so we continued to move forward with this idea in our explorations.

I looked at implementing a bar at the top of the screen which would show your level and progress for the next level. It also would provide a quick way to review past items learned.

The next two screens was explorations of how this would apply to the screen within a specific topic and how that would change how the progress is shown there.

I than looked at ways to show the users when they have earned a trophy or completed a topic. I wanted to use this a moment to explain what needs to be done to reach the next level of progression as well to both communicate and motivate them to keep making progress.

After further user testing we found the missionaries especially the first time users wanted a quick way to know what they recommended they work on next. So we ended up creating a For You screen that would become the home screen

Our other main goal of the For You screen was to provide a prominent place for the users to launch in review when they had some available to work on.