Okdesk — полный редизайн корпоративного сайта для хелпдеск №1 в России и СНГ

Корпоративный сайт для help desk SaaS системы учёта и управления заявками — Okdesk. Сделали дизайн и верстку публичной части проекта. Каждая страница реализована как уникальный landing page. Кейс VERNO.digital.

Okdesk — полный редизайн корпоративного сайта для хелпдеск №1 в России и СНГ

/О проекте

Okdesk — самое популярное (~ 800 активных клиентов) и полностью российское решение, которое предоставляет широкие функциональные возможности корпоративных Service Desk систем по цене, доступной любому бизнесу.

/Главная задача

За последние несколько лет Okdesk совершил качественный скачок в развитии: команда увеличилась до 30+ человек, а сама система стала ещё более гибкой, получила десятки новых функций и возможностей, которые позволяют решать любые задачи, связанные с автоматизацией техподдержки, сервиса и выездного обслуживания в компаниях разного масштаба и в различных отраслях.

Как следствие, изменилось и позиционирование, что нашло своё отражение в новом фирменном стиле и дизайне сайта.

Учитывая объём и специфику работ при редизайне сайта, мы тщательно подошли к выбору агентства. В первую очередь нам понравились кейсы Verno.digital.

Из рассматриваемых кандидатов портфолио компании было самым привлекательным и совпадало с нашими представлениями о новом дизайне.

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

Алексей Шевченко, руководитель направления маркетинга Okdesk.

Таким образом, перед нами стояли две главные задачи:

  • Обновить дизайн сайта в соответствии с новым фирменным стилем и позиционированием;
  • Лаконично показать новые функциональные возможности системы;

И несколько сопутствующих задач:

  • Увеличить конверсию сайта;
  • Проработать стиль сайта и посадочные страницы.

1. Дизайн

Концепции

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

Okdesk — полный редизайн корпоративного сайта для хелпдеск №1 в России и СНГ

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

Главная страница была далеко не первой на старте, изначально необходимо было сделать отраслевые страницы, которые бы могли точечно попадать в пользователя и влиять на конверсию.

Okdesk — полный редизайн корпоративного сайта для хелпдеск №1 в России и СНГ

Главная страница служит разводящей и демонстрирует ключевые возможности сервиса.

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

Анна Блинкова, UI/UX дизайнер Verno.digital
Анимация на первом экране главной страницы

Раздел с отраслевыми решениями

Okdesk — полный редизайн корпоративного сайта для хелпдеск №1 в России и СНГ

Сделали 11 страниц отраслевых решений

Okdesk — полный редизайн корпоративного сайта для хелпдеск №1 в России и СНГ

Под каждую возможность и преимущества разработаны уникальные иллюстрации. Совокупно мы уже сделали 147 уникальных сцен и иконок.

Okdesk — полный редизайн корпоративного сайта для хелпдеск №1 в России и СНГ

Результаты после обновления отраслевых страниц

Okdesk — полный редизайн корпоративного сайта для хелпдеск №1 в России и СНГ

Страницы возможностей

На страницах возможностей мы уже использовали мокапы с демонстрацией работы сервиса. Страницы насыщены анимацией, которую реализовывали на верстке, а сложные сцены в Adobe After Effects.
На страницах возможностей мы уже использовали мокапы с демонстрацией работы сервиса. Страницы насыщены анимацией, которую реализовывали на верстке, а сложные сцены в Adobe After Effects.
Okdesk — полный редизайн корпоративного сайта для хелпдеск №1 в России и СНГ

В реализации

Уже сделаны и в ближайшее время на сайте появятся новый блог и детальная страница статьи.

Блог
Блог

Реализовали раздел с подбором тарифов и их сравнением.

Okdesk — полный редизайн корпоративного сайта для хелпдеск №1 в России и СНГ

2. Верстка

В качестве сборщиков мы используем связку gulp + webpack, что позволяет избавиться от рутинных задач при верстке, автоматизировать все процессы. А также улучшить качество кода, благодаря плагинам gulp и модульности javascript.

Более подробно:

1. Мы пишем css на препроцессоре scss, что повышает уровень и качество верстки. Также css прогоняется через autoprefixer для кроссбраузерности.

2. Мы пишем html на препроцессоре pug, что делает код более читаемым, легко масштабируемым.

3. Javascript пишется в современном формате, модульно, и прогоняется через babel для максимальной поддержки предыдущих версий браузера.

Также верстка осуществляется по BEM методологии, с компонентным подходом и организацией файловой структуры (pug + scss).

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

Сергей Попов, ведущий frontend-разработчик Verno.digital

3. Итог

Хотим сказать спасибо Okdesk за очень подробное техническое задание и оперативное участие в согласованиях.

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

Конечно, пользуясь случаем, размещаем отзыв о нашей работе:

Сотрудничество с Verno.digital — исключительно позитивный опыт для нас. Это клиентоориентированность, приемлемая стоимость, высокое качество. Дизайн сайта давно требовал обновления, потому что морально устарел и не давал максимальной конверсии, в чём мы и убедились, обновив его, и уже успели оценить результаты. Цифры говорят сами за себя.

Наш сайт плотно связан с backend, поэтому при внедрении новых решений неизбежно возникают технические ошибки, которые мы не предусмотрели в ТЗ. В таких случаях мы обращаемся к коллегам из Verno.digital и всегда получаем профессиональную и оперативную поддержку.

Алексей Шевченко, руководитель направления маркетинга Okdesk.
2121
11 комментариев

Okdesk вполне достойное решение.
Года 4-назад изучал эту тему, подбирал систему управления задачами компании, в том числе с функционалом help/servicedesk. Okdesk была в первой десятке кандидатов.
Но выбрали другое решение, по части факторов okdesk на тот момент проигрывал выбранному решению.
P.S С тех пор только с этим решением веду проекты.

1

Спасибо!
За 4 года мы сильно убежали вперед и, оглядываясь назад, можно смело сказать, что сегодня и в 2018 Okdesk - это 2 очень сильно отличающихся друг на друга продукта

2

Все хорошо в статье, но судя по тому, чем пользуются компании (а у нас по роду деятельности есть доступ к данным о работе с обращениями в 200+ компаниях), хелпдеск #1 это все-таки https://helpdeskeddy.ru/

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

1

Ваша скромная выборка компаний вряд ли может гарантировать "точность" информации.
У нас эта выборка, например, более 50 000 компаний.
Но №1 это про:
- количество активных клиентов на платной подписке;
- количество выпускаемых функций и релизов;
- количество бренд запросов среди всех отечественных или "мимикрирующих" под отечественные helpdesk решений на рынке, например, в том же Яндекс (хоть сервис wordstat) и по другим параметрам.
В любом случае, неплохая реклама Эдди

3

Нашёл возможно одного из немногих отличных разработчиков сайтов, но понимаю, что цена от 380т, а бюджет 40-60т '(

1

Спасибо за оценку нашей работы!) Действительно, сделать полноценный сайт в вашем бюджете - очень сложная задача, однако, немного увеличив бюджет, можно начать с landing page и сконцентрировать на нем трафик. Таким образом, у вас уже будет будет инструмент, который работает на прибыль, далее, по мере развития вашего бизнеса, его можно развивать и превратить в полноценный сайт. Свяжитесь с нами, и мы обсудим варианты разработки и подготовим для вас предложение.