Языковое сообщество

Дизайн мобильного приложения, который помогает учить языки

Обложка

Описание проекта

Сколько раз вы говорили себе: «Все, с понедельника сажусь за английский»? А потом понедельник превращался во вторник, вторник — в следующую неделю, а неделя — в месяц… Знакомо, правда? Мы все через это проходили.

Не хватает чего-то, что помогло бы не забросить изучение. И нет, это не дисциплина! А наличие правильного инструмента — языкового сервиса, к которому мы приложили руку.

Что требовалось

Клиент оценил наши кейсы на Behance и обратился к нам за разработкой дизайна для своего мобильного приложения.

Что сделали

Мы разработали дизайн, который делает изучение языка увлекательным, мотивирующим и, главное — постоянным. Это не просто приложение, а личный помощник в мире иностранных слов, грамматики и общения с носителями языка — он помогает учить слова, прокачивать свой уровень и получать за это награды.

Миссия проекта

Цель была проста — сделать так, чтобы пользователь не просто заходил в приложение, а возвращался снова и снова. Повторение — мать учения 🙂

Нужно было отстроиться от других сервисов, проработать UX/UI, сделать визуал ярким и привлекательным, но в то же время сдержанным — чтобы не отвлекать внимание от основной цели, ради которой человек заходит в приложение.

Этапы разработки

Аналитика

Заказчик пришел к нам с готовым брендбуком. Наша задача заключалась в том, чтобы пользователь мог легко ориентироваться в приложении, интуитивно понимать, куда нажать, что выбрать и как двигаться дальше.

Маскот осьминог

Прежде чем приступить к работе, мы проанализировали конкурентов. Изучили их сильные стороны и задались вопросом — как сделать наш сервис не просто функциональным, но и запоминающимся? Как сделать лучше?

В голову арт-директора пришел осьминожек — милый и дружелюбный персонаж, который стал визитной карточкой приложения. Он встречается на экранах онбординга и сопровождает пользователя по всему приложению.

Онбординг

На этапе прототипирования уделили особое внимание деталям. Каждый экран, каждая кнопка, каждый переход — все продумали так, чтобы пользователь чувствовал себя уверенно.

Словарь и перевод

Дизайн

Когда идеи были согласованы, то перешли к визуальной части. Это тот самый этап, когда проект начал оживать: цвета, шрифты, анимации — все складывалось в единую картину. Для работы мы подготовили объемный UI-кит, который включал в себя цвета, шрифты, отступы, инпуты, кнопки и компоненты.

UI-кит

Подготовили дизайн более чем 500 экранов:

  • Страницы входа, регистрации и экран заставки — чтобы пользователь с первых секунд чувствовал себя комфортно
  • Главная сайта — интуитивно понятная и стильная, с акцентом на ключевые функции
  • Главный экран словаря — чтобы учить новые слова было легко
  • Туториал по заданиям — простой и понятный гайд для новичков
  • Уведомления — ненавязчивые, но эффективные, чтобы пользователь ничего не пропустил
  • Награды за достижение нового уровня — медали, кубки и другие бейджи, которые мотивируют двигаться дальше
  • Экран «Избранное» — чтобы сохранять важное и возвращаться к нему в любой момент
  • Блок «Обучение» — главный экран, стейты и экран языка, где все структурировано и доступно

Уведомления

Детально проработали логику пользовательского профиля. Теперь ученик может:

  • Выбирать языки для изучения
  • Редактировать информацию о себе
  • Отслеживать прогресс и вести статистику
  • Быстро переходить к заданиям, не теряя времени

Профиль

А для самых старательных учеников подготовили особые награды и уникальные ачивки, которые подчеркивают их успехи.

Для этого использовали библиотеку Lottie, которая позволяет проигрывать анимации в реальном времени на iOS, Android и в веб-версии. Когда пользователь видит, как оживает его прогресс на экране, это мотивирует 🙂

Задания и достижения

Но главной фишкой, как мы уже сказали, стал сам маскот. Мы отрисовали его в разных видах и состояниях. Он встречает пользователей на разных экранах, направляет их, дает подсказки и делает взаимодействие с приложением более дружелюбным.

Иллюстрация осьминог

Маскот настолько полюбился команде, что мы решили «поселить» его на мерче. Теперь он украшает футболки, кружки, блокноты и другие предметы. Иллюстрации легко адаптируются под любой фон и текстуры, делая мерч стильным и универсальным.

Мерч осьминог

Приложение также несет социальную миссию. Одно из его ключевых преимуществ — возможность не просто соревноваться с другими, но и общаться с носителями языка.

Мы тщательно проработали экраны чатов и диалогов, чтобы пользователи могли легко переписываться друг с другом или в групповых чатах.

Чаты

Результат

Наша цель — сделать обучение интуитивным, увлекательным и эффективным — была достигнута. Приложение скачали более 50 000 пользователей из Google Play.

Результат

С осьминожком, анимациями и продуманным интерфейсом изучение языка становится не просто полезным, но и вдохновляющим процессом.

Оцените сами 🙂

Получился отличный результат: красивое приложение с приятными глазу цветами. В нем приятно проводить время, удобно фиксировать новые знания и общаться с единомышленниками. А работать над анимациями такого яркого проекта с милым персонажем – это отдельный кайф.

Антон, директор по развитию бизнеса

Кейсы, которыми мы гордимся

    • Behance

      Behance

Вверх