Why a Language App?
Language learning apps are some of the most downloaded apps on the market to the point that Duolingo, is the most downloaded Education app on the Google Play store in Canada, Germany, and England (source) and ranked in the top 100 most downloaded apps on the Google Play store in the USA, France, German, and Canada (source).
Even though these apps are so popular, only 5% of language learning takes place offline (source). Why is this? It's because these apps focus on vocabulary mastery and grammar but don't practice other skills like speaking and writing. In an attempt to fix this, new apps entered the market such as Hellotalk and Tandem were users can speak to native speakers in a messaging system. These apps do well in terms of downloads and popularity, but don't gain enough traction like Rosetta Stone and Duolingo. That's where jeParle comes in. I wanted to solve this problem and build an all-in-one app. When building it, I kept in mind many different kinds of apps that train skills sought after skills such as Anki for flashcards, Duolingo for grammar, and Hellotalk for communication (speaking and messaging). In the Light Demo section, I go more in-depth on what inspired me in each respected app.
Design Goals
  • Easy to navigate and give users the ability to toggle between different learning modules with less than 5 clicks.

  • Responsive Mobile Prototype.

  • Validate prototype and goals met through User Testing.

Problem Statement
  • To give users the ability to use an all-in-one app to practice grammar, vocabulary, listening, and messaging within an easy-to-navigate system.
Tools

Figma: Iconify & Content Reel plugins

Design Process

I'd like to share my design process

Learn

I want to learn the client’s vision and initial reason as to why they want a product created. I also want to research the industry and trends that are happening.

Define

After defining and understanding the problem  statement and idenfifying the users, we can get to work on the design.

Listening

User testing begins in this stage and I listen to any feedback and concerns that the users have. This part is crucial as it tells me where the design is and needs improvement.

Deliver

After all, the goals were met and the user’s concerns were answered, I then send the design with all its elements and style guide to the developers. Depending on the project, some time’s I develop the site myself through Webflow.

Brainstorming
My thought process for this design was broken up into 3 steps in order to have a clear picture of how I wanted the app to look and function:
  • Lighting demo
  • Sketching
  • Prototyping
Lighting Demo
For the lighting demo, I took inspiration from other language learning apps. Below you will find which apps inspired me as well as what I liked about each.
Hellotalk
  • Hellotalk is a social media app in which users can chat with each other from all over the world. The messaging interface is very clean and easy to navigate.

  • Some of the features are very useful such as how to find a language partner.

Italki
  • Italki is a language learning app that connects language learners with teachers where they can organize lessons via Zoom.

  • The home dashboard is very informative as it provides most of the app's functions and features without needing to toggle through the tabs to find it.

Anki
  • Anki is a powerful SRS flashcard app with various features such as adding audio and photos to each flashcard.Italki is a language learning app that connects language learners with teachers where they can organize lessons via Zoom.

  • The structure of the flashcards are very well organized and put together. Very easy to use and understand.The home dashboard is very informative as it provides most of the app's functions and features without needing to toggle through the tabs to find it.

Sketches

After seeing what I liked and didn't, I got to work on the layout of the design. I followed the Problem Statement and its claim to have an all-in-one app with ease of navigation. All designs had no more than 3 toggles and only 1 in the dashboard. This fell in line with the fundamentals of what the app should have and below are the sketches of when I was going through the process.

  • The "home" and "study" dashboards in this sketch are concept designs for when in the app. I wanted these screens to not be overwhelming but to show some assessments/tasks they can open without needing to browse to find them.
  • Grammar interface for when the user is studying different exercises.
  • Concept interface for the media player when listening to a podcast.
  • In the bottom row are two interface ideas for when designing the messaging interfaces. There was also a calling screen that I decided against including in the final prototype.
  • The Message interface is meant to represent the concept Messaging dashboard.
  • Random interface was the concept messaging feed.
  • The Podcast and Player interfaces are meant to be for the Podcast section of the app. The Podcast is the dashboard and the Player was an additional Media Player concept interface.
Design Evolution
Paper Wireframe
Digital Wireframe
Low-Fidelity Wireframe
High-Fidelity Wireframe
User Flows
Validation
After the high fidelity-design was complete and the components/interactions were installed on the prototype, I wanted to get feedback on the user experience and see if there were any areas to improve on the design. So I conducted a user test.
User Testing
When doing a user test, I wanted to be sure to choose users who not only have used language learning apps but also spoke other languages at various language levels. Below you will see the profile of each user that tested the app.
User #1
  • Speaks 2 languages.
  • Used language apps to learn their 2nd language.
  • Uses Quizlet and other study apps for other topics.
User #2
  • Speaks 3 languages.
  • Learned languages from immersion methods.
  • Is a foreign language professor
User #3
  • Speaks 5 languages.
  • Learned languages from apps and immersion method.
  • is a UI/UX Designer and understands interface design.
Interviews
I showed each user the prototype and asked them 3 open ended question and one closed question:
  • How was navigating on the app? Was it easy to find what you were looking for and did you ever feel lost?
  • How was the coloring and typography? Did you feel anything felt out of place or unpleasant?
  • Would you change anything about the design or add any features to the app?
Responses
Below is a sample of some of the responses:

“Very easy to find everything you need.”

“You should add some more vector icons next to the categories.”
“I liked that you could see pictures of the speakers in the podcast section”
“I like the colors you chose. Its really pleasant on the eye”
“Try mixing some of the "red" from the logo and blend it with white. I think it will blend better and have the design pop out more.”
“A lot of apps focus on word to word translation. Its great you illustrate images so it keeps them in the language.”
Results
Below you will find the results of all the users and their feedback.
  • All users concluded that the app was easy to navigate and finding features was easy. No one felt like it was “hidden”. The only feedback I got was from a user who suggested including a complete prompt when finishing a test. Earlier versions of the prototype just had the same question loop.
  • All feedback on the color palette and typography was positive. The only suggestion that was given was to add a hover to the buttons which I opted out of because I felt the interface has a lot of natural colors and would make the design seem less natural. This is some text inside of a div block.
Design Alterations
The User Testing proved to be a great success and gave me insight to some changes that made after the tests.
Home Dashboard
Media Player
Testing
Conclusion
  • Looking back at the Problem Statement, this app fulfilled its promise. This all-in-one language learning app allows users to measure their progress all in one place by using the build Vocabulary and Grammar assessments. Users can also use the messaging features to practice conversations.

  • The User Test's results provided evidence that the app fulfilled its promise to be easy to navigate and toggle through. No user test came out feeling confused or overwhelmed.

  • The User Test was interesting to watch. I noticed the majority users seem to have gravitated to doing grammar assessments more than any other feature. All seemed to enjoy the experience and overall design. I am proud of the end product and that everyone enjoyed using the app.