praktika.school

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

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

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

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

Во время разработки набросков сама оцениваю свои идеи:
1 – слишком простые формы, скучно, не хочется рассматривать
2 – немного интереснее засчет элементов на главном экране – карточек. Иллюстрации привлекают внимание, но слишком грубые
3 – нравится цвет и карточки на главном экране. Во втором блоке иллюстрации не привлекают внимание, нужно или убрать их или изменить вид

Как итоговый вариант для презентации и дальнейшей разработки я выбрала 3-й вариант. После чего получила ответ от заказчицы:

Главный оффер и новая концепция школы планировалась в формате библиотеки для маркетологов с пополняемыми инструментами-курсами. В фирменном стиле школы решила использовать прямую отсылку к библиотеке – плоские карточки в формате формуляров.

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

В итоге цифровая библиотека – это понятная структура, большие элементы, зеленый цвет и пиксельный иллюстрации.

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

В остальном анимация только легкая функциональная.

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

В личном кабинете еще более минималистичный дизайн, в котором используются фирменные элементы. Анимация функциональная – только на элементах, показывающих действие при наведении. Цветовые акценты на элементах и кнопках расставлены для призыва к действию.

Промежуточный результат конверсий после редизайна: