Разработать многостраничный сайт компании комплексных поставок IT-оборудования. Найти и проанализировать несколько платформ реализации проекта в рамках бюджета заказчика.
Задача
Описание проекта
Сайт занимается поставками и установкой IT-оборудования: сетевое оборудование, телематика (транспорт), видеонаблюдение, программное обеспечение, электрозарядная инфраструктура, аксессуары.
Инструменты
Помимо этого, компания хочет на сайте разместить статьи, связанные с нишей. Создать ветку WIKI в которой любой пользователь найдет руководство по установке оборудования. Создать несколько страниц для контактов, карьеры, описании компании и другое.
Процесс работы
Figma
Tilda
Smart Animate
Discovery process
FigJam
Методология Waterfall
1. Формулирование задачи проекта и требований к платформе.
2. Составление прототипа будущей платформы.
3. Анализ платформы реализации на основе прототипа.
4. Проработка 3-х концепций проекта и отрисовка дизайна на основе концепции.
5. Верстка сайта на Tilda.
6. Тестирование платформы.
Цели бизнеса
Дискавери
Исследовал аудиторию и посмотрел прямых и косвенных конкурентов. Project-manager провел интервью с основателем бизнеса по моим запросам и я выявил ряд проблем у пользователей и сформулировал несколько корнер-кейсов.
Проблемы пользователей
Не реализовывать призыв к действию
Цикл сделки длительный и дорогостоющий, а клиенты не связываются по формам на сайте. Контакт происходит, как правило, лично с ЛПР-ом бизнеса.
Поэтому на сайте нет призывов к действию. Сайт выступал как информационная площадка с детальным описанием каждого продукта или услуги. Этот пункт был частью тех.задания.
Мало информации
о продуктах на сайтах конкурентов.
о продуктах на сайтах конкурентов.
У конкурентов нет раздела Wiki, и сложно найти документацию по запросу.
Отстутствует детальное описание комплектации каждого изделия.
Нет сравнения параметров изделий.
Были рассмотрены сложные ситуации, которые нужно решить интерфейсом.
Корнер-кейсы
А так же выявлено несколько инсайдов, которые важно не упустить при разработке сайта.
Инсайды
Пользователь хочет посмотреть не только характеристики оборудования, но и почитать статьи с примерами интеграции IT-оборудования в разные бизнесы.
Пользователю важно посмотреть документы-wiki и pdf-файлы загрузок к каждому изделию.
Например, у сетевого оборудования и оборудования телематики разные характиристики. Нужно продумать систему фильтрации на каждую категорию товара.
У сложного многостраничного сайта важно продумать понятную навигацию между разделами.
Пользователь хочет понимать с какими аксессуарами совместимо оборудование.
Были рассмотрены сложные ситуации, которые нужно решить интерфейсом.
Корнер-кейсы
Пользователю важно посмотреть документы-wiki и pdf-файлы загрузок к каждому изделию.
Пользователь хочет посмотреть не только характеристики оборудования, но и почитать статьи с примерами интеграции IT-оборудования в разные бизнесы.
Пользователь хочет понимать с какими аксессуарами совместимо оборудование.
А так же выявлено несколько инсайдов, которые важно не упустить при разработке сайта.
Инсайды
Например, у сетевого оборудования и оборудования телематики разные характиристики. Нужно продумать систему фильтрации на каждую категорию товара.
У сложного многостраничного сайта важно продумать понятную навигацию между разделами.
На основе этой аналитики я составил ряд гипотез, которые реализовал на сайте.
Гипотезы
У меня не было возможности протестировать гипотезы, поэтому предварительно согласовали их с заказчиком.
В карточке товара будут характеристики, комплект поставки, ссылки на поддержку в WIKI и документы.
В карточке товара показать статьи с примерами использования оборудования в бизнесе.
Пользователь должен понимать с какими аксессуарами или устройствами совместим товар.
Каталог товаров должен иметь разный тип фильтров.
Хлебные крошки помогут в навигации по сайту.
Деливери
Я структурно проработал сложный и большой сайт перед отрисовкой дизайна.
Создал структуру навигации сайта в FigJam
Работал вместе с Project-manager. Этот этап позволил спроектировать прототип каждой из страниц и понять логику навигации между ними.
Этап 1
На этом этапе я определил по какой логике называть ссылки страниц. Так же, эта диаграмма помогла бы не запутаться во время верстки навигации между разделами.
Этап 2
Спроектировал структуру раздела WIKI с помощью Mindmap
Перепробовали много разных вариантов. По итогу утвердили и согласовали прототип и зафиксировали этап работы.
Этап 3
На основе блочной структуры был собран прототип
Страницы предварительно были отрисованы в Figma, а затем заверстаны в Tilda.
Собрал референсы и начал дизайнить весь сайт.
Сайт должен быть похож на интерфейс приложения будущего.
Реализция сайта
Разводящая на каталоги
Проектирование каталога
Реализация каталога
Страница разводящая на разные каталоги.
У бизнеса 6 принципиально разных категорий товара, поэтому появилась необходимость реализовать страницу, разводящую на разные каталоги.
Проектирование каталога
Проблема: инфраструктура Tilda не позволяет создавать уникальные фильтры для разных типов продуктов на одном сайте с персональным тарифом.
Решение: мы с проджектом проанализировали фильтры для каждого типа продукта. Я создал несколько поддоменов, расширил тариф в Tilda и разделил каталоги товаров по поддоменам. Теперь фильтры персонализированы для каждого типа продукта.
Характеристики телематики и сетевого оборудования отличаются друг от друга. Пользователи не могли найти нужное оборудование из-за несоответствующих фильтров. В гугл таблицу мы занесли все значения, чтобы не запутаться при разработке.
Реализация каталога
На этапе КП наша студия договорилась сделать с заказчиком по одному шаблону карточки товара и проработать каждую страницу каталога с логикой фильтров в рамках Tilda. В дальнейшем, заказчик бы заполнял контент самостоятельно.
Проектирование карточки товара.
Подробное описание
В каждой карточке товара предусмотрено полное или краткое описание изделия. В некоторых сделал анимацию.
Ключевая информация в табах
Табами реализовал: характериситики, загрузки, поддержку и документацию, комплект поставки, совместимые аксессуары.
Примеры использования в бизнесе
В формате табов реализованы статьи с примерами использования оборудования в бизнесе.
Реализция WIKI
Первый уровень
Уровень разделов
Набор документации
Документация
Первый уровень.
Верхнеуровненый поиск происходит по брендам в рамках каждой категории IT-оборудования.
Например, у бренда «Teltonika» и бренда «Moxa» разные документации, т. к производители разные. Нет унифицированного стандарта.
Уровень разделов
Следующий уровень это разделы документации каждого бренда. Глобально, они разбиты: общая информация, Web UI, Сертификаты и Загрузки.
Набор документации
В каждом разделе есть набор статей или лонгридов с описанием документации.
Документация
Реализация статьи и лонгрида на шаблоне Tilda. Шаблон был выбран для легкого масштабирования на платформе.
Скриншоты сайта
Результаты
Сайт был полностью разработан и запущен к обозначенному сроку. Передан заказчику на наполнение и редактирование.
Роли в команде
- Кирилл Тимофеев — Артдиректор
- Николаев Николай — UX/UI и верстальщик сайта.
- Александр Гагин — Project Manager
Проект принадлежит студии Rhino Digital