Puzzle Brain — обучающая онлайн-платформа доступного ценового сегмента. На сайте собраны небольшие курсы на разные тематики, направленные на проработку отдельных навыков и умений. По формату позиционируют себя как интернет-магазин, при этом важное место в продажах занимает подписочная система и апсейл на покупку дополнительных курсов.
Клиент пришёл с задачей проработать внутреннюю LMS сайта (система управления обучением), т. е. личный кабинет пользователя, в котором можно ознакомиться со всеми курсами платформы, оформить подписку, проходить уроки и отслеживать свой прогресс. У компании на момент старта проекта уже была своя LMS, но без витрины со всеми курсами, что существенно уменьшало возможности для апсейла. К тому же её дизайн был устаревшим, а функционал, по мнению клиента, требовал доработки — в чём-то он был избыточен, а в чём-то, наоборот, не учитывал все потребности клиента и компании.
На старте проекта было проведено несколько интервью с клиентом. Общались напрямую с CEO компании, что существенно упростило работу, так как лицо, принимающее решение, и хранитель всех знаний о компании, маркетинге и продажах — один и тот же человек. Клиент максимально подробно рассказал о текущих бизнес-процессах, работе LMS, целевой аудитории, способах продаж и требованиях к личному кабинету.
С первого знакомства и на всех последующих этапах была выстроена максимально продуктивная работа. Этому способствовало не только то, что клиент глубоко погружён в продукт и точно знал, какой результат хочет получить, но и максимальная открытость в плане ответов на возникающие вопросы и рассмотрение наших рекомендаций по улучшению.
После серии интервью провели конкурентный анализ. Смотрели сайты компаний, которые предоставляют похожие обучающие курсы, а также сервисы онлайн-кинотеатров, так как их бизнес-модель близка к модели Puzzle Brain.
В итоге построили информационную архитектуру, расписали функционал и наполнение страниц.
Информационная архитектура LMS
В процессе аналитики внешней LMS выяснили, что сайту потребуется панель администратора (админ-панель), в которой менеджер будет осуществлять управление контентом в личном кабинете пользователя. Поэтому следующим этапом работ стал сбор требований и построение архитектуры для админ-панели. Подробнее о разработке админ-панели мы расскажем в отдельном кейсе.
Так как большинство пользователей платформы Puzzle Brain обучаются с мобильных устройств, то проектирование и дизайн делали по принципу Mobile-first. Сроки по проекту были довольно сжаты, поэтому прототипы делали для ключевых и сложных страниц, а более простые (например, «Все курсы») или универсальные (страницы входа и регистрации), собирали непосредственно на этапе дизайна.
Прототипы мобильной версии
После согласования прототипов для мобильной версии приступили к адаптивам.
Прототипы адаптива LMS
Перед стартом работ над дизайн-концепцией предварительно созвонились с клиентом, чтобы синхронизироваться в визуальном оформлении личного кабинета.
В процессе обсуждения пришли к решению, что цветовую гамму основного сайта (внешней витрины) нужно сохранить. Она привычна для пользователей, а цвета хорошо воспринимаются целевой аудиторией, которая состоит преимущественно из женщин. Также важным пожеланием от клиента было отстроиться от подобных сайтов в нише — личный кабинет не должен быть похожим на такой, как у конкурентов.
После совместного обсуждения провели анализ внешней витрины и посмотрели, как подходят к визуальному оформлению своих сайтов конкуренты. Собрали мудборд и подготовили референсы по отдельным элементам.
Вместе с клиентом остановились на следующих характеристиках:
- дружелюбный и лёгкий интерфейс;
- аккуратные карточки с легкими тенями;
- яркие и скруглённые кнопки;
- простые интерфейсные иконки.
В качестве акцентного цвета выбрали оттенки сиреневого и фиолетового.
На примере первых экранов главной страницы подготовили несколько вариантов концепций. Все они были в стиле ранее утверждённого мудборда, но имели некоторые отличия в характере. При презентации клиенту понравились все варианты, и он решил провести голосование внутри своей команды. В итоге был выбран вариант, который наша команда считала наиболее удачным. На этой положительной ноте приступили к дизайну остальных страниц.
Элементы мудборда и варианты дизайн-концепции
При работе над главной страницей учли разные сценарии, проработали варианты карточек в зависимости от статуса курса и приступили к внутренним страницам по прототипам. После того как мы утвердили все ключевые макеты, приступили к проработке второстепенных, которые не входили в прототипирование.
При возникновении вопросов — организовывали дополнительные небольшие созвоны для уточнения деталей. Оперативная двусторонняя коммуникация в процессе работы позволила сократить время работы над макетами и повысила качество проработки интерфейсов.
Некоторые дизайн-макеты местами отличались от прототипов не только композицией, но и функционалом. Часть изменений инициировали мы, когда при проработке дополнительных страниц поняли, как сделать функционал более органичным. Другая часть изменений появилась из-за внутренних процессов модернизации на клиентской стороне.
В итоге совместно с клиентом пришли к такому функционалу и дизайну, который отвечал новым внутренним процессам Puzzle Brain и при этом вписывался в основную структуру, под которую изначально прорабатывались все макеты и логика работы платформы.
После согласования дизайн-макетов мобильной версии собрали UI-кит, в котором учли состояния всех элементов, кнопок, иконок. Готовый исходник передали клиенту. UI-кит помог разработчикам оперативно приступить к их части работы и оптимизировать время на запуск проекта.
От лица проекта PuzzleBrain выражаю огромную признательность за выполненную работу. Особенно хочу отметить:
1. Пунктуальность. Это всегда редкость, и ребята здесь прям сильно порадовали.
2. Отзывчивость. Мы просили временами пойти посмотреть что-то — как оно у других, и всегда на это был позитивный отклик. Благодаря этому переделали часть интерфейса, и он стал удобнее, чем первая версия.
3. Дружелюбность. Такое ощущение, что я работал со своей командой. Очень тесный и тёплый контакт. Безумно ценно быть на одной волне.
4. Проактивность. Столько предложений, сколько поступало от ребят, я не получал даже от внутренней команды.
5. Экономичность. Очень порадовало, что можно было не делать что-то, что было ранее заявлено, если в этом терялась необходимость. Например, на дизайне админки мы сэкономили почти 300 к и кучу времени — ребята сами придумали, как оптимизировать эту часть работы.
