Стэклевел: как продавать разработчиков в Европе и США и что бывает, когда дизайн делают не по прототипу

Что нужно было сделать?

Мы должны были разработать сайт с выходом на новый регион: США и Европа.

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

Клиент хотел продавать две основные услуги компании: разработчиков и команды разработчиков.

Для решения задачи мы поэтому провели анализ рынка, который включал:

• сравнение юзабилити и навигации, типов сайтов ;
• анализ источников трафика;
• статистика по каналам продвижения;
• выявление площадок для рекламы софта;
• анализ поисковой выдачи и контекстной рекламы;
• представление продукта, УТП.

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

Как мы это сделали?

1. Провели экспертизу по анализу предоставленных клиентом конкурентов.
2. Провели экспертизу по анализу выделенных нами топовых конкурентов в поисковой выдаче.

На основании анализа топовых конкурентов мы выделили несколько примеров сайта и параметров продвижения:

sumatosoft.com

rubyroidlabs.com

redmadrobot.ru

evilmartians.com

evrone.com

Целевая аудитория Stacklevel: крупный бизнес, иностранные и отечественные банки, IT-компании.

Что предлагают?

Outsoursing услуги - разработка кастомного ПО. Индивидуально под каждого заказчика.

Разработка сайтов под ключ, платформ/веб-порталов под ключ. ПО для интернет-банкинга, ПО для работы с клиентами банка, управление банковскими счетами клиентов. Разработка интернет-магазина, электронного документооборота (СЭД), CRM, ECM систем.

Каким образом?

Stacklevel предоставляет “руки”, команду разработки партнерам на проект либо решение конкретной задачи.

Кому?

Руководителям, высшему руководству компании (c-level).

В какой сфере?

E-commerce (ERP, ATS), Banking & Finance, Healthcare, Travel, Government.

Где хотят продвигаться?

США, Канада, UK, Швеция, Норвегия, Дания, Финляндия, Европа (центральная), Россия, Австралия, Индонезия, ОАЭ, ЮАР, Израиль, Индия, Пакистан.

Прототип сайта

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

Структура главной страницы

Страница в прототипе.

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

Как не надо делать дизайн и почему это наша ошибка

Так выглядит дизайн сайта.

Этот дизайн не согласовывался с нами, клиент общался напрямую с подрядчиком. И сейчас мы объясним, почему эта идея так себе.

На первый взгляд все сделано точно по прототипу, только “красивенько”.

Объясняем в чем проблема такого подхода.

Главное меню

Основные сценарии взаимодействия с пользователем:

Нанять разработчика – здесь мы ожидаем увидеть фильтр/подборщик девелоперов.

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

НО! Является ли подобная услуга востребованной на рынке? Что значит арендовать команду? понимает ли это заказчик, есть ли такой сценарий в принципе?

Наши кейсы – да, отлично, нам важно посмотреть, что компания делала.

Мы видим, что меню логически поделено на 2 части, отчего возникает вопрос: всегда ли будут только эти 3 пункта меню?

Как меню будет отображаться на разных разрешениях?

Что случится, если понадобиться добавить или убрать какой-то пункт?

О Нас – органичный пункт меню, рассказывает пользователю о компании в общих чертах.

Карьера – показывает нацеленность на привлечение специалистов. Стоит ли это помещать в главное меню или это лучше разместить на странице о компании? Сайт ведь нацелен в первую очередь на продажу услуг компании.

Выбор языка – сделан в стиле главного меню, сливается. Этот элемент лучше сделать не как пункт меню, а отличным от него, даже контрастным.Основной язык сайта - английский.

Например: можно сделать переключатель EN | по-русски (русскоязычному человеку так куда более приятно, чем RU, на это обратят внимание).

Лого – большой вопрос с тем, как оно будет выглядеть в разных разрешениях. Логотип Стэклевел очень большой, есть ли какие-то адаптации под мобильную версию?

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

Первый экран

Выглядит круто! Правда, очень красивый дизайн.

Но стоит его открыть в разрешении на 1280…

Две кнопки Do you want to hire developers? и Do you want to hire dedicated team? которые предполагают основные сценарии взаимодействия с пользователем, обрезаются. И сразу же слетает красивая анимация, с которой они должны появляться.

Далее возникает вопрос: эти кнопки будут синие, а ховер белый при наведении?

Если так, то в обычном состоянии правая кнопка будет сливаться с фоном, а левая будет сливаться с фоном при наведении.

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

Подача информации

Если посмотреть с точки зрения пользователя, то возможно стоит поменять текст на то, за чем могут приходить клиенты?

Подобрать разработчика на выбрать команду под проект.

Возможно, уже здесь нужен сценарий получить консультацию по проекту?

Не все клиенты (почти никто, вообще-то) четко представляют, какие разработчики нужны для их проекта.

Зачем нужны синие полосы слева? Это очень похоже на бесполезный графический мусор.

Проекты

1. Данная форма статична?
   Описание проекта всегда будет в 4 части? Что случится, если добавить лишние строки?
2. Какая анимация у кнопки See more our cases?
3. Удобны ли небольшие стрелки снизу для пролистывания материала? Заметит ли их пользователь вообще?

Кладбище логотипов

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

У данного блока нет названия, так что в целом непонятно, что делают эти лого на сайте. Это партнеры? Клиенты? Друзья? Случайные картинки из сети?

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

Красной стрелкой указан блок-призрак. Что это и зачем? Это остатки кладбища логотипов? Это случайные иконки? Зачем они здесь?

Карточка разработчика

В каждом разделе информации о разработчике одни и те же 4 пункта набора букв (не текста). Что случится, если информации будет больше, чем 4 пункта? Что если какой-то пункт займет больше строк?

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

NB: кнопка Request Team снова сливается с фоном.

↑↑↑ Это превью карточки разработчика ↑↑↑

Вопрос 1: почему информация об опыте и количестве проектов, в которых участвовал разработчик, не дублируется в развернутой карточке?

Вопрос 2: снова, что будет, если в каком-то подпункте превью будет больше информации?

Вопрос 3: зачем делать кнопку See more ярким синим цветом, создавая большую нагрузку на глаза пользователя? Например: можно выделять синим всю карточку при наведении.

Как избежать подобных проблем?

Как бы нам не хотелось сказать: не позволять клиенту общаться напрямую с UI-дизайнером - это не совсем так.

Самое главное - следить за логикой и помнить, что:

ДИЗАЙН - ЭТО НЕ КРАСИВАЯ КАРТИНКА, ДИЗАЙН - ЭТО ФУНКЦИОНАЛЬНЫЙ ИНСТРУМЕНТ

И вот здесь начинается часть про нашу работу.

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

Мы это знаем, потому что мы постоянно с этим работаем. Клиент - не знает. В этом и состоит разница.

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

Вывод

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

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