Как я сайт «лепил» для ASUS — vc.ru

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

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

Раздел «Уроки»

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

Не надо так делать.

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

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

Декабрь 2020

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

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

Анализ.

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

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

Обновленная версия сайта.

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

Меню переехало в такую «штучку». Появляется при скролле вниз. Напишите в комментариях, если у такого элемента есть правильное название, это будет очень ценно для меня.

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

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

READ  Лучшим смартфоном для селфи признан Asus Zenfone 6 ZS630KL - РЫБИНСКonLine

При наведении фотография становится цветной 🙂

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

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

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

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

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

Раздел «Уроки»

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

Фильтр для выбора уроков.

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

Старый раздел «Уроки». Можно выбрать только категорию.

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

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

Старых разделов больше видеть не хотелось.

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

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

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

Новая страница автора. Основная информация

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

Новая страница автора. Уроки

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

Итоги

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

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

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

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

Статья в оригинале

Поделиться ссылкой:

Добавить комментарий