Сервис для изучения иностранных языков с чатом, словарем и заданиями

Сколько раз вы обещали себе, что «на этот раз точно буду изучать английский язык непрерывно и продуктивно»? 5-10-20? Андестенд эту боль вери велл :)

Кому-то просто не хватает личной мотивации. Кому-то тягу к языку отбили еще в школе, когда учитель не мог объяснить, для чего же учить эти неправильные глаголы... Но мы подросли и теперь понимаем, что знать английский в наше время – мастхэв.

Но как начать самостоятельно регулярно его изучать? Где искать единомышленников? Как сделать процесс нескучным? Правильно, с помощью сервиса «Вола».

«Вола» – успешный, стремительно набирающий популярность стартап. Заказчик оценил кейсы студии на Behance и обратился к нам за разработкой дизайна сайта и мобильного приложения.

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

Нам нужно было проанализировать предложения конкурентов, проработать UX/UI продукта. 

В дизайне важно было отстроиться от других сервисов для самостоятельного изучения языков. Сделать визуал ярким и привлекательным, но в то же время сдержанным. Чтобы не отвлекать внимание пользователей от основной цели, ради которой они заходят в приложение.

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

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

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

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

Далее разработали дизайн:

— Экранов входа и регистрации, сплеш-скринов;

— Главной страницы сайта;

— Главного экрана словаря;

— Туториала по заданиям;

— Уведомлений;

— Наград за достижение нового уровня (медаль/кубок);

— Экрана «Избранное» для десктопа;

— Блока «Обучение»: главный экран, стейты и экран языка.

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

Для удержания интереса пользователей мы продумали поощряющие анимации, в динамике которых отображается прогресс обучения. Их реализовали через технологию Lottie. Это библиотека для iOS, Android и веб-разработки, которая позволяет рендерить анимацию и проигрывать ее в приложении в реальном времени.

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

Еще одна большая задача — проработать социальную часть приложения. Одно из преимуществ «Волы» — возможность не просто соревноваться с теми, кто тоже изучает английский язык, но и с носителями того языка, который вы сейчас осваиваете.

Проработали экраны чатов и диалогов. Пользователи могут общаться с конкретным человеком или зайти в интересующую их тему. Не зря же в школе топики учили :)

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

Такой мерч будет отличным подарком пользователям сервиса за выполненные уникальные задания и полученные ачивки.

У нас получился дизайн классного сервиса для изучения иностранных языков с удобным мобильным приложением, которое уже скачало из Google Play около 50.000 пользователей.

«Вола» поможет не только наладить общение с носителями, но и увеличить словарный запас и общую грамотность при изучении нового для себя иностранного языка.

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