First end to end project

LingualGo was designed as a language-learning app to engage users with gamification and progress tracking.

LingualGo was an end to end UX design project. Focused on making an app that’s seamless to navigate while focused on presenting data efficiently to the user.

DesignLab
LingualGo

LingualGo was focused on having data presented in an easy to understand form, taking gamified elements and formatting them into an “at glance” UI. Adapting many data driven graphs and design principles from gaming apps.

Background

The goal of LingualGo was to carve out a niche in the language learning app space by creating a product that makes the experience more engaging and rewarding through better progress visualization and elements making it more akin to a game.

I had several ideas for the user’s wants, such as:

The users want to quickly build conversational skills in a new language for travel, work or personal interests
They want a fun, gamified way to practice through bite-sized lessons tailored to their goals.
They want feedback on pronunciation plus tools for tracking progress over time

Hypothesis

So where do we go from here?

User research

With the goal in mind I turned to researching.

Research the current market of language apps
Interview potential users
Collect data
Create Affinity map
Create our HMW’s and POV’s
Create user personas

Thus I was led to this synthesis map

Motivations

Lack of personalized feedback and inability to gauge true proficiency level were frustrating.

Gamification

Streaks, rewards, and progress visualization helped with motivation.

POV

I’d like to explore ways to help language learners motivated by an interest in translation to build skills beyond just travel basics because their goals extend to broader comprehension

Interviews

Led to finding out exactly what the users are looking for in their app, what their pain points are and where to focus

That’s a lot right?

Let’s summarize

User needs

Repetition, memorization through practice, and reinforcement were the mostly used techniques for learning

User personas & POV/HMW

From the research, two user personas were made to represent the potential users and their wants/needs. Along with a POV/HMW statement to tunnel in on where to focus.

What did I learn from the research?

Affinity map

Repetition, memorization through practice, and reinforcement were the mostly used techniques for learning

POV/HMW

By having these statements I knew exactly the problem that I was facing, and from there could narrow down each idea

Pain points

Inability to gauge proficiency was a common stated struggle within the interviews, often leading to motivation decreasing and curriculum being dropped

Engagement

Users stated that having tools to gauge proficiency led to a more personalized and enjoyable path of learning

HMW

HMW: Motivate language learners interested in translation to continue building comprehensive skills beyond just travel basics?  

HMW: Set appropriate expectations for travel motivated language learners around achievable proficiency levels?   

HMW: Give people the language skills to immerse themselves into another culture while traveling?  

Market research

Helped to narrow down the industry standard for language apps and what users would come to expect when it came to their uses

User personas

By creating personas I had a general idea for the average users, and could define their experiences more accurately

Task flow

Steps to schedule lessons were too fragmented. Simplifying this process to a single screen became a priority to improve usability.
Including visual cues like progress bars in flows helped users feel confident about where they were in their journey.

Site map/ Card sorting

The first step was creating a remote card sort

Users prioritized organizing lessons by skill progression rather than specific topics, which shaped the hierarchy of the sitemap.
Grouping feedback tools under one category was unexpectedly popular, suggesting users value easy access to progress-tracking features.

User flow

Users naturally navigated towards the homepage for quick stats and lesson plans, reinforcing the need for a clean and accessible dashboard.
Overcomplicated paths caused confusion, highlighting the importance of reducing clicks for key actions like starting a lesson or viewing progress.

What’s next?

And now with all that set, the fun part began and thus began the creation of the initial wireframes and prototypes

First wireframe

Low fidelity

Concepts:

A large portion of the initial design was focused on everything being easy to access and have a well defined statistics page. Plans at the beginning were to have everything be organized and set in an easy to access way. I wanted everything to be able to be accessed swiftly, similar to the YouTube UI. While at the same time, making it gamified and fun for the user

On the home page, less choices were presented to have less of an overwhelming claustrophobic feeling.

Second wireframe

Mid fidelity

When going to the lesson page, a plan was made to display the language constantly to not have a user be confused

The taskbar stayed in line with the site map, having six options that could be navigated to at any time to reduce pages and steps

Design tile

Third wireframe

High fidelity

This current iteration was refined even more ways 

The statistics page was made even more in depth, adding two more for comparisons, progress, and achievements

The task bar was made easier to read with the inclusion of a highlight over each section

A new page to represent the possible games were included, along with possible plans

A progress bar was added to most languages, to represent the current status of the course

However next came usability tests...

I had 5 different users test out three tasks given to them, and the results I got were…

Home page

Colors were not liked by many of the users, leading to frustrations with contrast, uniformity, and icons

Schedule

Users found the schedule choice clunky and confusing, wanting less screens and the colors to make more sense

With these results found, I could iterate a final time on LingualGo, and thus created the final version…

Leaderboard

Users missed the fact they could even compare, hating certain icons and blaming lack of some. They found the information too bunched and wanted to see even more

The color scheme was fixed to be more visually cohesive, along with making the header/footer pop out more using drop shadows. All progress bars got redone to be more visually readable.

The lesson page got a rework to be able to choose the lesson more specifically, the header got reworked to take up less space.

The game page was fixed to be more user friendly when it came to the information, along with adding a notes section in order to fill the empty space. Colors were changed as well to fix the accessibility issue of color contrast.

The progress page went under massive changes. Icons were shifted due to user tests describing difficulty navigating. Colors were added to make the leaderboard more in depth. And the entire page as a whole was increased in size to reduce the tight spaces between sections.

The comparison page didn’t undergo massive shifts outside of small color corrections.

Similar to the previous comparison page, there weren’t many changes to the stats section.

The schedule page got iterated on heavily, by combining the header into progress, more space was made to accommodate other languages.

Finally the schedule swap page got iterated heavily too. by creating sections to scroll through this solved the unnecessary extra page and step. Along with solving the issue of empty space, while adding to the visual flair.