Кейс Дом.ru Бизнес: редизайн сайта, разработка административной панели и создание дизайн-системы

Задача

Запустить сайт, который:

1. Привлекает новых клиентов лучше старого.
2. Выглядит современно и отлично работает на всех устройствах.
3. Прост в поддержке: можно легко дорабатывать старые страницы и быстро создавать новые.
4. Приводит людей из поиска и корректно собирает аналитику.
5. Закладывает основу для единого визуального языка всей компании: например, для баннеров на мероприятия и так далее.

Результат

Мы запустили новую версию сайта, разработали кастомную админку и создали дизайн-систему.

За счёт этого сайт стал современным и удобным, а маркетологи компании — независимыми. С помощью новой админки и дизайн-системы они могут самостоятельно создавать новые страницы и редактировать старые. Для этого им не нужны дизайнеры и разработчики.

Что для этого сделали

Концепция

На основе исследований, интервью с менеджерами и бренд-менеджером Дом.ru Бизнес мы разработали картину бренда и целевых аудиторий компании:

Эта картина помогла нам придумать две концепции для будущего сайта:

1. Во главе сайта стоят клиенты. Они рассказывают, как Дом.ru Бизнес помогает им усиливать работу их компании, какими продуктами они пользуются, что больше всего ценят и так далее.
2. Во главе сайта стоят продукты и услуги компании. Классическая идея, в которой компания подробно рассказывает о своих продуктах и услугах, их преимуществах, возможностях и ограничениях.

Каждую концепцию мы проверили по пяти критериям. В итоге решили поставить во главу угла клиентов.

Прототипы страниц

Следующий этап работы — прототипирование страниц сайта. Во время него мы прорабатывали и согласовывали с клиентом структуру страниц, но не тратили время на детали: текст, дизайн и вёрстку. За 3 недели мы подготовили и утвердили 15 прототипов.

Главная страница

Главная страница знакомит потенциального клиента с продуктами Дом.ru Бизнес. Посетитель сразу видит все продукты компании и может выбрать нужный. Больше не нужно ломать голову над тем, к какому бизнесу относится его компания.

Страницы продуктов

У нас была задача: сделать страницы продуктов более информативными, заточить их под SEO и ускорить процесс их создания в будущем. Хотелось, чтобы страницу для нового продукта мог сделать менеджер компании без участия программистов и дизайнеров.

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

Страница блога

Мы задизайнили главную страницу блога и отдельные страницы для публикаций. Чтобы авторы могли использовать в статьях самые разные визуальные приёмы, мы заранее подготовили все нужные стили: заголовки, врезки, цитаты, фактоиды, крики и другие.

Страница «О компании»

Задача страницы о компании — показать размер и надёжность Дом.ru Бизнес, но не отпугнуть скучным полотном текста. Для этого мы решили разнообразить её с помощью фактоидов и яркого оформления.

На странице можно узнать о новостях Дом.ru Бизнеса, найти контакты, ссылки на социальные сети, все необходимые документы и лицензии и задать вопрос.

Раздел помощи

Мы обновили раздел помощи. Часть ответов на вопросы была в виде pdf-файла, который нужно было скачивать. Это плохо с точки зрения поисковой оптимизации, потому что поисковики такие файлы не индексируют. Мы перенесли вопросы и ответы из файла на сайт, чтобы собирать дополнительный трафик с низкочастотных запросов.

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

Дизайн-система

Чтобы дизайн сайта оставался согласованным независимо от того, кто его делает, мы сделали дизайн-систему. Она пригодится, чтобы с нуля создать новый раздел или страницу.

Например, маркетплейс и личный кабинет сайта делали уже не мы, но по нашей дизайн-системе. Мы лишь следили, чтобы не было ошибок.

Административная панель

Выше мы уже упоминали, что сделали административную панель, которая позволяет быстро и без участия разработки добавлять новые страницы услуг, публикации в блоге и разделе помощи. Чтобы этого добиться, мы создали административную панель с нуля: задизайнили интерфейс и запрограммировали на основе AdminLTE.

Что дальше

Конфигуратор стоимости услуг

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

Если человек хочет заказать услугу, у него есть два способа сделать это:

1. На странице отдельной услуги;
2. На странице «Собери своё решение».

Чтобы заказать несколько услуг сразу, посетитель может воспользоваться конфигуратором на странице «Собери своё решение». Он позволяет рассчитать стоимость нескольких услуг одновременно. Это решение подойдёт тем, кто точно знает, какие услуги ему нужны и хочет собрать подходящий пакет.

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

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

Мы закрыли почти все задачи.

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

Из плюсов: команда IT-Agency очень тщательно погружается в задачи и контекст, вникает в цели бизнеса, которые стоят за ТЗ, всегда аргументирует предложенные варианты решения задач. Часто мне предлагали дизайн-решение, которое больше отвечало целям, чем указанное в ТЗ. Коллеги умеют подружить противоречащие друг другу задачи и готовы помочь в защите проекта перед ТОП-менеджерами.

Работа с IT-Agency не подойдёт тем, кто не готов пересматривать прописанное ТЗ, тратить время на погружение команды в бизнес (у нас ушло 2,5 месяца при наличии уже написанного ТЗ) и открывать свои метрики.

Подойдет тем, кто:

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