Как я сайт «лепил» для ASUS

Этим летом с коллегами запустили проект ASUS.STUDIO. С помощью него мы хотели объединить контент-криэйторов и дать российской аудитории полезные видеоуроки по разным направлениям: фото, видео, дизайн, 3D-моделирование, моушн-дизайн, мультипликация и аудио.

Вот так выглядела первая версия нашего сайта.

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

Результат вроде всем понравился. Красиво и работает - класс. Не сказать, что мы прям эксперты по созданию сайтов, поэтому всем было ок. Мне тоже :)

Вот тут можно посмотреть первую версию сайта.

В личном портфолио 7 сайтов. Все +- похожи, что-то явно пошло не так. Я решил всерьез научиться создавать «правильные» и красивые сайты, поэтому записался на курс «Профессия UX/UI-дизайнер с нуля до PRO» от скилбокса. Посмотрел первые 12 уроков и понял, в чем мои главные ошибки (осталось посмотреть ещё 443 урока🙃). Все мои сайты были без полезного функционала и имели много лишнего.

Сразу же я решил обновить сайт нашего проекта.

Я посмотрел статистику просмотров каждой страницы и какой путь совершает человек. Путь был в большинстве случаев такой:

Главная -> Раздел с уроками -> Нужная категория.

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

На новой главной решил применить Z-паттерн (или подобие его). Теперь посетитель сайта может сразу выбрать нужную ему категорию уроков и посмотреть все доступные. После идет блок, где можно узнать про ускорение приложений и выбрать ноутбук для эффективной работы в «тяжелых» приложениях.

В это меню собрал 5 основных страниц, которые есть у нас: главная, раздел с уроками, раздел с криэйторами, раздел с приложениями и страничка с ноутбуками, где про них можно узнать больше или купить. Тут руководствовался тем, что люди акцентируются на первых и последних элементах. Поэтому наиболее важные для нас пункты назначения стоят по бокам. (В мобильной версии оставили только кнопки: Главная, Уроки и Инструменты).

После главного экрана идет блок с новыми уроками (обновляю все вручную, занимает максимум минуту времени) и выбор ноутбуков. Большинство людей переходило в раздел «Уроки» только для того, чтобы посмотреть на свежие уроки, которые вышли у нас (публикуем почти каждый день. Только иногда есть паузы). Для таких людей собрали 5 самых новых уроков прямо на главной, чтобы не приходилось переходить дальше. Раздел с ноутбуками был у нас не очень популярен, поэтому вынесли его тоже на главную. В будущем посмотрим, будет ли больше переходов на сайт продукта. (Очень хотелось бы).

Далее идут все профессионалы, которые записывают уроки в рамках этого проекта. Тут логика, примерно, как с ноутбуками. Мало людей переходило на страницы криэйторов внутри сайта, основные переходы были с других платформ (YouTube и Instagram).

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

Эти формы по поместили в самый низ. Будем продвигать их через рекламу, чтобы люди оставляли свои идеи и вдобавок находили новых творческих людей. Запускали рекламу в этом квартале и пришло 7 новых заявок от креативных людей ещё со старого сайта. Посмотреть этот раздел можно тут.

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

Все скриншоты выше относятся к новой главной. Далее расскажут про раздел с уроками.

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

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

Сейчас стало гораздо удобнее и многие в комментариях написали нам «Спасибо».

Это так приятно😄

У нас оставался ещё один тип страниц, которые тоже нужно было обновить, а именно - страницы авторов. На этой странице была основная информация об авторе, чем он занимается, ссылки на его соцсети и записанные уроки.

Вот такая длинная страница была, посмотрите:

Целых 5 скриншотов мне пришлось сделать, чтобы вам её показать. Было принято решение упростить эту страницу, чтобы не приходилось много листать и у нас это вышло, причем, очень даже классно (С - скромность)

Удалось уместить всю информацию из старой версии более компактно. Основная информация сразу видна при открытии страницы.

Если пролистнуть чуть вниз, то можно посмотреть на уроки только от этого автора. И все. На этом страница автора закончилась. Длинный скролл в 5 экранов удалось уместить в 1.5 экран.

Результат в этот раз понравился всем, и мы спешили переехать на новую версию сайта. Я сам не ожидал, что такое возможно.

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

Я впервые писал такую статью, поэтому не судите строго. Извиняюсь, если где-то допустил ошибки. В будущем буду делиться новыми своими работами, пока не стану профессиональным UX\UI дизайнером.

Всем спасибо за внимание. Жду ваших комментариев, будет очень интересно почитать.