Mobile application for learning English

Programs that were used

About project

Customer

Alexey P.

I was approached by a client to assist in creating the framework and design of a mobile application for learning English through series. The application's ability to sort words by series is an interesting feature that enables you to select series related to a particular subject and learn the language in a targeted manner (for example, the lexicon of the series "Doctor House" is perfect for doctors, because there are many specific medical terms used there).

The decision of which colors to use for the design emerged during its development. A dark mode is appropriate for cinematic themes, whereas a light mode is appropriate for learning. The design was split into light and dark as a result.

The application allows the user to:

• search for series by your favourite genre

• adding words to dictionary and track the development of learning words

• tracking the development of one's understanding of the series' texts

• listen to cues with the chosen word

• practice words (2 different trainings game)

• statistics for the results

1. User-Flow

2. Wireframes

3. Interface design

Stages of work

See customer feedback

User-Flow

Prototype

The prototype was developed using around 40 different wireframes. The prototype was developed in figma. Users were able to test the usability of the UX design after all the settings were finished. A few minor adjustments have been made. The prototype was generally welcomed.

The process of developing a UI design started after the prototype had undergone testing.

Design elements

Interface Design

The header of the home screen displays the user's progress: a card for the number of words he has learned, a card for the number of new words he needs to learn, and series he is presently learning. There is a progress indicator for the study on the series' image. The header of the screen shrinks and only shows the cards as you scroll.

The feed below displays the available series, broken down by genre.

The navigation bar has a "Catalog" button. We'll talk more about the catalog later.

The bottom menu consists of 5 parts: main screen, favorite series, dictionary, trainings and profile.

Home page

Following registration, the user is presented with three onboarding screens that include a synopsis of the program. The user can rapidly comprehend the benefits of this software solution thanks to the introduction onboarding process. This is useful and visually pleasing information for the user.

Onboardings

The catalog makes it easy for the user to locate the required series. Series can be filtered by genre in the collection, and there is also a series-name search option. In the series card, the user immediately sees the rating of the series according to the IMDb version. Additionally, the card has two different types of icons: an eye denotes that the series is still being watched, and a medal denotes that the study of the series has been finished.

The user can add the series to the "favorites" category.

Catalog

Card words and a translator were the two methods of word training available at the time the concept was conceived.

Word Flashcards

By using cards, the user learns words. He sees a card with an English word on the screen, but no translation. The user can listen to how this word sounds. The user flips the card over if he is uncertain of the word. All of the word's details are listed on the card's back side, including the word's form, translation, series and episode from whence it was added to the dictionary, and there is also a timestamp of the time when this word appears in the series. The user sees a phrase containing this word when they choose a timestamp.

Word Translation

The user has the option to hear the word and select the appropriate translation. The user can use the hint, which describes this word with synonyms. The user will see this term written after selecting an answer, and he will also have access to information about which series this word and a related sentence from that series featured in.

Trainings

The dictionary contains all the words that the user has ever wanted to learn. The dictionary is equipped with a search field by the name of the series. Each word has a status by which you can sort "new words", "in the process of learning", "learned words".

The user has the opportunity to choose certain words and send them for training or change word's status

Dictionary

The user can pick a specific episode of the series to learn words from. The study takes place according to the "Word Flashcards" training method, but there is a certain difference. First, the user sees the whole collection of word cards at once. Second, user can also group words according to their type, for example, learning only verbs or only nouns.

Words from the episode

There are two sections on the profile: my activity and settings.

Tab "My activity"

The user's activity is shown in the "my activity" area by day, week, or month. This page also shows records for the most words learnt in a day and the longest period of daily study. Generalized statistics on word statuses are also shown: how many words have already been learned, how many words are being studied, and the number of new words. The previously studied series are displayed below.

Tab "Settings"

The "Settings" tab contains the most common profile settings: name, password, mail, native language, other. You can also read the privacy policy or contact support on this page.

Profile

Most design of the application is made in dark mode, but the educational part is made in light mode.

Other screens

Customer feedback on freelancehunt

The work was divided into 2 parts:

Development of a mobile application prototype:

"Olga is a pleasant person to talk to and a professional with a lot of interesting ideas. During the development of the prototype, we were constantly in contact and discussed features and changes. Everything was done within the stipulated time. It was a pleasure to cooperate"

Mobile application design:

"Olga did a great job with the assigned tasks, was always in touch and tried in every possible way to do everything well. She constantly offered new ideas, many of which we added to the project. Everything was done within the stipulated time. Thank you, Olga, it was a pleasure to cooperate.