23 Июн 2016

Анализ и проектирование сайта интернет-провайдера

Заказчик
Региональный интернет-провайдер с филиалами в нескольких городах Сибири
Задача
Редизайн и вёрстка сайта интернет-провайдера

По рекомендации одного из наших клиентов к нам пришёл местный Красноярский интернет-провайдер “Игра-сервис”. Компания давно на рынке, но, как и у многих долгожителей сайт безнадёжно устарел и встала задача редизайна, а также адаптивной вёрстки.

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

В конце кейса будет ссылка на результат этапа анализа по этому проекту.

Что мы называем этапом анализа?

Если коротко, то это этап генерации идей и создания карандашных набросков.

1. Вникаем в задачу, специфику бизнеса заказчика

Тратим время на то, чтобы хотя бы на уровне потребителя понять бизнес заказчика.

2. Смотрим конкурентные / похожие решения

Понимаем сильные и слабые стороны. Отмечаем, что взять на вооружение. Для “Игры-сервиса” мы проанализировали самые удачные сайты из этого списка, а также те, которые нам нравились — Онлайм и Дом.ру. Отметили для себя интересные решения и пошли анализировать ЦА. Жаль AIC'ы выложили свой кейс по проектировке сайта Онлайм сразу после того как мы закончили этап дизайна. Там очень много полезной информации — рекомендую.

3. Анализируем целевую аудиторию проекта, находим инсайты

«Влезаем» в “шкуру” текущих и потенциальных абонентов. Понимаем, что для них важно. Что влияет на решения и что ими движет. Смотрим Яндекс.Метрику и понимаем основные возрастные группы потенциальных и реальных абонентов.

Так, мы узнали основные возрастные группы и что от 25 до 45 лет подавляющее большинство посетителей сайта — женщины. Это было неожиданно. Мужчины активнее только в возрасте от 18 до 24 лет.

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

Ниже пример одного из пользовательских портретов. В качестве фото представителя аудитории мы просто берём фото из интернета. Надеюсь люди на фото не сильно огорчатся ).

4. Формулируем ключевое рекламное сообщение (SMP)

Над СМП мы думали достаточно долго. Узнавали у клиента его отличительные особенности, читали инфо на текущем сайте. Вот некоторые варианты СМП:

  • Оптика в квартиру — банально, но понятно и ЦА сразу понимает ценность;
  • Никакой витой пары!  — тоже что и первое, но динамичнее и не так банально;
  • Интернет для геймеров  — сильно урезается ЦА (комментарий клиента);
  • Подключаем в течение 24 часов — В этом что-то есть;
  • Интернет по технологии Gpon для игр и учёбы — сильно заморочено (от клиента).

В момент генерации понимаем, что одно СМП для всех ЦА не подходит и решаем сделать отдельное для бизнеса:

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

В итоге остановились на этих СМП:

  • Интернет для игр и учёбы;
  • Выгодные интернет-решения для бизнеса от провайдера с пятнадцатилетним опытом.

5. Генерируем идеи по проекту на основе SMP и рисуем эскизы

Понимаем как сделать дизайн, который будет понятен и приятен потребителю. Как донести через дизайн ключевое рекламное сообщение. Генерируем минимум 10 идей, выбираем лучшие.

После первичных идей по мотивам 2-х лучших, аналитик-проектировщик, рисует карандашные наброски и презентует их всей студии.

Пример эскиза главной страницы

После коллективного обсуждения наброски дорабатываются и отправляются в документ “Результат этапа анализа”.

 

6. Подбираем примеры стилистики

Для каждой концепции подбираем подходящую стилистику. Учитываем целевую аудиторию, бюджет проекта.

7. Оформляем презентацию для согласования с клиентом

8. Составляем точную смету проекта

В презентации у нас показаны 2-е концепции. Обе решают задачу и предполагают качественный результат. Но, как говорится “все равны, но кто-то равнее” и потому мы сразу говорим к какой из концепций склоняемся мы и аргументируем почему. Часто, при общении с клиентом приходим к решению объединить концепций в “золотую середину”. Как правило это идёт на пользу и не ломает ни одну из концепций.

Проектируем страницы выбора тарифа

После анализа идёт этап проектировки. Самой ключевой страницей сайта является выбор тарифа. От её понятности зависит многое. В качестве неплохих примеров страниц выбора тарифов рассматривали Гудлайн, Rinet, Дом.ру, Онлайм и ещё 2-3 штуки вспомнить которые уже проблематично.

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

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

 

При проектировке мы старались предугадать и учесть вопросы, которые возникнут у среднестатистических посетителей. Например, при выборе тарифа на телевидение нужно сначала объяснить чем отличаются цифровое и кабельное ТВ. С этим справляется псевдо-ссылка “В чём разница”. Ещё важно не только сказать сколько каналов входит в тариф, но и показать какие именно. Удивительно, но некоторых не сильно именитых провайдеров нет даже этого.

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

Перед выбором тарифа мы предлагаем человеку измерить свою текущую скорость и показываем это так же в игривом стиле.

Проектирование личного кабинета

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

Для кабинета мы провели отдельный анализ.

В качестве примера не плохих кабинетов рассматривались Мегафон, Дом.ру и Qiwi Кошелёк.

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

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

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

Прототипирование

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

Покликать прототип можно тут 

Немного смущает, что пункт меню “Бонусы и спецпредложения” оказался в самом низу, но это логично, т. к. ему самое место в глобальном разделе “Мой профиль”. К тому же мы вынесли инфо о бонусах в шапку и их довольно видно. Если Метрика покажет, что на раздел мало кликают, то поднимем повыше.

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

Результат проектирования и дизайна личного кабинета

Вот в общем-то и все основные моменты анализа и проектирования в ходе данного проекта.

Как и обещал публикую ссылку на результат этапа анализа по этому проекту.

P. S.

Для разных видов работ существуют дополнительные составляющие этапа анализа. 

А для видео это:

  • написание сценария;
  • отрисовка раскадровки.

Но об этом как-нибудь в следующий раз.

В карточку агентства

Письмо автору кейса

Пользуйтесь реальным опытом в IT и следите за успехами потенциальных подрядчиков и конкурентов
Подпишитесь на рассылку
Читайте также
Кейсы по теме#Дизайн