How We Built A Language Learning Constructor App For Chilled-Out Vocabulary Practice

Description

Akler is a language learning app that helps quickly get the basics of a new language at just a few minutes a day.

Tech stack

Backend:NodeJS, ExpressJS, NextJS, RESTful
Frontend:React, Redux, AntD
iOS:Swift, XCode, UIKit, RxSwift, MVVM, SQLite, CoreData, In-App Purchase, Local Notifications, REST API

Our role

UI/UX Design, Backend, Mobile development, Web Frontend

The Challenge

Akler was conceived as a very basic English learning app: it's goal was to help Russian-speaking users learn their first 100-10,000 English words without breaking a sweat.

Halfway down the road, however, it was decided that Akler can do more than just English and Russian. From there, we had two goals for the project:

  1. Design the app in a way that would prevent the learning curve from seeming overwhelming or boring
  2. Figure out the architecture that would allow adding the unlimited amount of new languages and scale the app on the fly

Pivot 1

We started from planning UX and UI that would help people stay involved with the learning. The app had to be as breezy and engaging as any time-waster app on their phone while offering an efficient curriculum.

We developed the design from scratch: from naming and concept to the last interface elements. Our designers created the app's mascot Akler, crafted 4 variants of visual presentation, and modeled the app's logic.

Pivot 2

Originally, Akler was planned as a monolith app with sealed-in languages, categories, and words. However, this solution seemed inconvenient for the future addition of new languages.

As a result, we built a complex admin panel, which allows adding and editing new languages and categories on the fly from the backend, without tight integration with iOS development.

Overview of interface and functionality

Categories

The entire vocabulary contains 5,000 words and phrases organized in big categories and smaller topics: 13 categories of words with 80 topics inside, and 26 phrase categories.

The user can choose the categories they want to learn, and the app will generate daily vocab based on the selected topics and individual word-per-day limit.

Lessons

The learning mechanics is geared to help the user learn a certain number of words per day at a comfortable pace — and actually remember them.

Upon sign-in, the user chooses the languages they want to learn, the number of words they are ready to memorize per day (from 5 to 50), and the categories: Human, Food, Animals, Nature, etc. This data is available at the starting screen in the form of a study plan for the day.

To help users memorize the words better, Akler provides examples of usage and the audio button to check the pronunciation.

Each lesson ends up with a 4-step examination to reinforce the knowledge.

This way, Akler keeps things interesting and ensures you have enough time to study a little every day.

Vocabulary

Once the course is finished, the words are auto-saved in the Vocabulary section. From there, the user can brush up on the learned words and their pronunciation.

If some word in the vocab still looks unfamiliar, the user can delete it — the app will get it back to the next course's rotation queue.

Stat

Akler gathers statistics on user's daily performance and translates them into representative graphs. From the Stats section, users can monitor their daily and overall progress and get extra motivation.

Audio

We integrated virtual assistant Siri into the app, making it easier to memorize the words by listening to their pronunciation.

Translations

Inaccurate translations are a no-go for a language learning app. Our team considered various integration options and settled with real translators. Thus, the app gives the most relevant variant of direct translation so users wouldn't get lost in the machine one.

Along with the words and phrases, the app contains the examples of usage, which helps to memorize vocabulary in the context.

Admin panel

We crafted a well-thought-out admin panel with advanced access control. It allows admins to:

  • Manage words and phrases. All words, translations, and languages are adapted and pulled in from the backend. If the admin wants to change a translation or add new content units, they can do it from the admin panel in a few clicks.
  • Create and configure the roles and manage the rights of content managers and translators.
  • Manage categories of words and phrases. Akler uses L18N internalization technology: it allows updating the keys and translations without the need to update the app.
  • Add and store files. Admins can upload files and images to the Content Delivery Network (CDN), with their pathnames established in the settings.
  • Quickly import words and phrases from .CSV files instead of adding them manually.
  • Upon each new login, Akler checks the status of the vocabulary base. If a fresher version is detected, the app will automatically pull up the updates.

Database

We chose to work with the SQLite database because it allows storing a large amount of data in the application. All translations, categories, catalogs, and documentation are packaged in multiple SQLite databases that can be quickly updated from the admin panel.

The app immediately pulls in the changes — they will come into force upon the next login, independently from the backend. Thus, the learning progress is added to the profile, and the relevant information is safely stored on the server.

This solution helped avoid the hustle of online updates and associated lags.

Testing

The app immediately pulls in the changes — they will come into force upon the next login, independently from the backend. Thus, the learning progress is added to the profile, and the relevant information is safely stored on the server.

Numbers

4
months
of development from idea to a store-ready MVP.
5,000+
words and phrases and their translations into 6 languages.
120+
screens
and 4 iterations of design to deliver an eye-candy app that keeps users involved.
6
languages
English, Russian, German, French, Spanish, and Italian.
user flow
by increasing the capacity, it's possible to handle any amount of users in the future.
languages to add
New languages and translations are added via the admin panel and show up in the app without restarting it.

Results

A turnkey MVP helping beginner learners grasp the basics of a new language fast.
Complex admin panel — the owner can scale the app on the fly without tight integration with iOS development.
Efficient learning based on a spaced repetition system. It drills users on the words in a number of ways, so all their memory channels are activated.
Quick updating of vocabulary and categories due to the SQLite database implementation. This solution helps avoid lags associated with online updates.

Tell us about your idea

If you'd like to get in touch with us you can email us at info@rocketech.it, call us on +65 3159 3765, send us a message via our online form, or get answers in real time by simple briefing @RocketechHelloBot.
SingaporeMoscowKyivLondonSan Francisco