О проекте
ROBIN обратился к нам. Они уже 4 года занимаются разработкой RPA-решений (программные решение для эмуляций действий пользователя). Перед нами стояла задача создать сайт, который вызовет доверие. Сложность состояла в том, что:
- RPA-системы - продукт новый, незнакомый и технически сложный для пользователя.
- Не было абсолютного понимания структуры сайта.
- Подобных компаний очень мало на российском рынке.
Результаты
14
57
4
уникальные шаблоны страниц
уникальные иллюстрации и айдентика сайта
разработано 4 варианта дизайна главной страницы
шаблонов
иллюстраций
итерации
И самый главный итог: клиент остался доволен работой и обратился к нам за рекламой и SEO-продвижением.
Сначала определили целевую аудиторию (ЦА). Мы выделили потенциальных клиентов – это собственники среднего бизнеса и IT-директора.
В процессе работы появился инсайт: что помимо клиентов сайт посещают и другие пользователи. Например, сотрудники, которые хотят в одном месте посмотреть полное описание всех услуг. Поэтому и сайт должен не только продавать, но и решать другие задачи. Так мы выделили вторую целевую аудиторию - партнеры: владельцы и директора по развитию IT-компаний.
В процессе работы появился инсайт: что помимо клиентов сайт посещают и другие пользователи. Например, сотрудники, которые хотят в одном месте посмотреть полное описание всех услуг. Поэтому и сайт должен не только продавать, но и решать другие задачи. Так мы выделили вторую целевую аудиторию - партнеры: владельцы и директора по развитию IT-компаний.
После того как мы определили структуру сайта, встал вопрос подготовки контента. Многие заказчики, когда обращаются за разработкой, недооценивают объем работ на стороне клиента. И это приводит к тому, что дизайн готов, а наполнения не происходит, и сайт не запускается.
Чтобы не допустить такого, мы заранее составили план по подготовке контента на основе структуры сайта, и заказчик смог распределить задачи между отделами.
Чтобы не допустить такого, мы заранее составили план по подготовке контента на основе структуры сайта, и заказчик смог распределить задачи между отделами.
Команда проекта
С нашей стороны над проектом работали два дизайнера и руководитель проекта. Со стороны заказчика был выделен маркетолог, который помог скоординировать коммуникации на стороне клиента. Для того, чтобы коммуникации происходили проще и быстрее, мы подключились к системе управления задач нашего клиента и в общие чаты для сотрудников. Это позволило оперативнее согласовывать все детали.
Следующей задачей стало прописать, Jobs to be done (для чего используется сайт) и опасения клиентов.
Это позволило выделить 5 ключевых задач, план нашей работы:
1. Сделать имиджевый сайт, чтобы аудитория на этой точке контакта видела серьезную компанию.
2. Доступно рассказать о продукте, показать в чем специфика решения и не перегрузить лишней информацией.
3. Презентовать кейсы, которые доказывают эффективность.
4. Дать доступ к обучающей программе, чтобы снизить нагрузку на техподдержку и увеличить количество партнеров.
5. Рассказать о партнерской программе.
Это позволило выделить 5 ключевых задач, план нашей работы:
1. Сделать имиджевый сайт, чтобы аудитория на этой точке контакта видела серьезную компанию.
2. Доступно рассказать о продукте, показать в чем специфика решения и не перегрузить лишней информацией.
3. Презентовать кейсы, которые доказывают эффективность.
4. Дать доступ к обучающей программе, чтобы снизить нагрузку на техподдержку и увеличить количество партнеров.
5. Рассказать о партнерской программе.
С чего мы начали?
Подготовка контента
На момент обращения к нам текущий сайт заказчика не отвечал заданным целям. Он был сделан на скорую руку: был непонятным, и несовременным. И решал задачу исключительно сайта-визитки.
Мы начали работать с «0». Всю работу над проектом можно поделить на несколько этапов:
1. Обсуждение и подготовка задач / референсов.
2. Сбор контента.
3. Подготовка прототипов.
4. Подготовка концепций (дизайна главной страницы) и поиск образа.
5. Дизайн и верстка остальных страниц.
6. Запуск и перенос на рабочий домен.
Мы начали работать с «0». Всю работу над проектом можно поделить на несколько этапов:
1. Обсуждение и подготовка задач / референсов.
2. Сбор контента.
3. Подготовка прототипов.
4. Подготовка концепций (дизайна главной страницы) и поиск образа.
5. Дизайн и верстка остальных страниц.
6. Запуск и перенос на рабочий домен.
Этапы работы
Отсутствовало понимание образа RPA-систем. Если на старте проекта рассматривались все возможные варианты, то в процессе реализации на "живой" картинке, стало понятно, что образа нет и его нужно разрабатывать и искать.
Мы стали смотреть всех западных конкурентов. Большинство из них использует в качестве образа – роботов. И хотя пойти по этому пути было бы логичнее и проще, мы решили искать другие варианты, чтобы сделать наш проект уникальным.
Второй момент, на который мы обратили внимание при разработке концепции, что западные стартапы используют flat-графику. Но в России крупный заказчик часто воспринимает это как "несерьезность", в буквальном смысле, считают это "мультиками".
Наш продукт должен работать на пользу клиенту, поэтому от этой концепции тоже было решено отказаться.
Мы стали смотреть всех западных конкурентов. Большинство из них использует в качестве образа – роботов. И хотя пойти по этому пути было бы логичнее и проще, мы решили искать другие варианты, чтобы сделать наш проект уникальным.
Второй момент, на который мы обратили внимание при разработке концепции, что западные стартапы используют flat-графику. Но в России крупный заказчик часто воспринимает это как "несерьезность", в буквальном смысле, считают это "мультиками".
Наш продукт должен работать на пользу клиенту, поэтому от этой концепции тоже было решено отказаться.
Поиск образа
Графика и иллюстрации
Мы достаточно долго искали визуальный образ, но все было не то. В итоге было принято решение остановиться на их фирменном знаке - птице ROBIN. Сама по себе птица не передавала достаточно смысла, и возникал вопрос: "Причем тут птица?". Поэтому, в образе птицы мы заложили значение технологичности: использовали сеть, которая создает впечатление нейронной сети.
В процессе работы над проектом сильно помог прототип сайта и договоренность с заказчиком, что принятые решения не обсуждаются. Это позволило сравнительно быстро реализовать дизайн и сайт.
На черно-белом прототипе мы смогли согласовать и обсудить все тексты и структуру страниц.
Такой подход позволил непредвзято посмотреть на тексты и расположение блоков, потому что, когда страницы наполнены иллюстрациями и цветом, мы воспринимаем все совершенно иначе.
На черно-белом прототипе мы смогли согласовать и обсудить все тексты и структуру страниц.
Такой подход позволил непредвзято посмотреть на тексты и расположение блоков, потому что, когда страницы наполнены иллюстрациями и цветом, мы воспринимаем все совершенно иначе.
Прототип
Платформа
Изначально мы планировали делать сайт на 1С Битрикс, что позволило бы активно развивать платформу в будущем, но значительно увеличило бы бюджет и сроки. Но так как компания находилась на пути формирования продукта, мы выбрали другой подход.
В качестве платформы для разработки сайта мы выбрали Tilda. Особенность разработки заключалась в том, что 90% всех блоков были нестандартными блоками с ручной адаптацией, а также под проект разрабатывалась айдентика и галерея собственных иллюстраций.
В качестве платформы для разработки сайта мы выбрали Tilda. Особенность разработки заключалась в том, что 90% всех блоков были нестандартными блоками с ручной адаптацией, а также под проект разрабатывалась айдентика и галерея собственных иллюстраций.
Для оформления сайта мы выбрали цветовую палитру: белый фон, бордовый цвет для графики и синий цвет для активных элементов. Шрифтовая пара Gilroy Extrabold для заголовков и Muller для наборного текста и подзаголовков.
Большая работа была проделана с типографикой, тенями и стилеобразующими элементами. Важно было передать строгость большой компании формата Enterprise, совместив ее с легкостью работы. Это стало возможно благодаря ограничению цветовой палитры, белому фону и работе с пространством.
Большая работа была проделана с типографикой, тенями и стилеобразующими элементами. Важно было передать строгость большой компании формата Enterprise, совместив ее с легкостью работы. Это стало возможно благодаря ограничению цветовой палитры, белому фону и работе с пространством.
Дизайн
Дизайн мобильной версии
Поскольку 90% работы велось в нестандартных блоках, то и адаптировать каждую страницу пришлось вручную для дизайна мобильной версии. Для каждой страницы сайта были настроены версии: 1200-MAX; 960-1200; 640-960; 480-640; 320-480.
На проекте получилось 7 различных видов форм для обратной связи. Для того, чтобы правильно распределить заявки между отделами. Подготовили отдельную таблицу для их распределения.
На проекте получилось 7 различных видов форм для обратной связи. Для того, чтобы правильно распределить заявки между отделами. Подготовили отдельную таблицу для их распределения.
Отзыв клиента
Павел Борченко
Генеральный директор
Благодарим компанию Альтопромо, и в частности, Ярославцева Ивана, за внимание к деталям и ответственный подход к проекту, в результате которого удалось достичь поставленных целей. Выполненной работой доволен и рекомендую, как надежного подрядчика.
Команда проекта
Иван Ярославцев
Руководитель
Гусев Ростислав
Разработка прототипа/дизайн
Михаил Вострокнутов
Фронтенд разработчик
