Проект для компании Севстар
Редизайн сайта
«Севстар» — компания с 18-летней историей, занимающей лидерское положение в своем городе. Интернет-провайдер и продуктовая IT-компания, которая разрабатывает различные цифровые продукты для B2B и B2C.
Причины редизайна:
- Ребрендинг в компанииМы разработали новый фирменный стиль, обновили айдентику, создали корпоративный брендбук. Сайт должен был соответствовать новому бренду.
- Достаточный функционалПо данным аналитики, опросов и интервью с пользователями, сайт достаточно хорошо выполняет свои функции: преимущественно имиджевую и информационную.
- Сохранение структурыВ ходе пересмотра сайта было решено сохранить его функционал и структуру, оставить основные функции без изменений.
- Простота реализацииОптимальным решением для обновления сайта мы посчитали редизайн: эффективное визуальное решение, которое реализуется в достаточно краткие сроки и не имеет существенных технических сложностей и ограничений.
Процесс работы
Работа строилась по продуктовому циклу: изучение рынка, ЦА и конкурентов, разработка пользовательских сценариев, формулирование гипотез и постановка задач, разработка макетов, тестирование и улучшение макетов, передача их в работку и дизайн-ревью.
Анализ конкурентов
На 1 этапе работы работы мы провели анализ конкурентов: сайтов интернет-провайдеров, операторов услуг связи и мультисервисных компаний. Оценили, какие дизайн-решения встречаются у конкурентов часто, какие команда посчитала удобными и неудобными для пользователя.
На основе анализа были даны рекомендации для нашей задачи:
Простота
сделать меню и навигацию более понятными, упростив их
Тарифы
поместить на главную страницу лучшие предложения по тарифам
Оплата
разместить на главной форму оплаты и проверку адреса для подключения услуг
CJM, ЦА и сценарии
Следующим этапом было построение CJM, пересмотр и сегментирование ЦА.
CJM отражает путь нового пользователя при выборе провайдера и подключении интернета.
Применима при переходе на более скоростной тариф и добавлении дополнительных услуг.
CJM отражает путь нового пользователя при выборе провайдера и подключении интернета.
Применима при переходе на более скоростной тариф и добавлении дополнительных услуг.
При сегментировании ЦА мы в первую очередь выделили пользователей, принимающих решение или влияющих на решение о покупке интернета, выборе тарифа и подключении дополнительных услуг.
Ядром ЦА мы посчитали Главу семьи — как правило, это мужчина 30-50 лет с высоким доходом, который стремится закрыть все потребности своих родных, а решение принимает самостоятельно или учитывая их мнения и пожелания.
Важные сегменты ЦА — Пользователь и Геймер.
Пользователь — как правило, женщина 25-50 лет, активный пользователь интернета, соцсетей и мессенджеров, услуг доставки, аудио и видео контента. Доход средний или выше среднего. Влияет на выбор провайдера и цифровых услуг, может выбирать их самостоятельно.
Геймер — чаще всего молодой человек 12-25 лет, увлеченный играми, стримингом, блогингом и стремящийся получить топовые услуги интернета. Редко имеет средний доход или выше, но активно влияет на выбор провайдера и цифровых услуг.
Job Stories
По основным задачам я сформулировала Job Stories:
Когда я выбираю провайдера интернета
Когда я выбираю тариф интернета
Когда я подключаю интернет
Когда я собираюсь оплатить интернет
Я хочу оценить дизайн сайта провайдера
Чтобы подключиться к продвинутой современной компании
Хочу пройти на сайте проверку адреса
Хочу оплатить онлайн на сайте провайдера
Хочу увидеть лучшие варианты тарифов
Чтобы сразу убедиться в доступности подкючения по моему адресу
Чтобы оплатить быстро и без проблем удобным мне способом
Чтобы сократить время на поиск подходящего удобного тарифа
User Flow
На сайте реализовано большое количество различных сценариев для различных продуктов и услуг. Я построила обобщенный User Flow — основной сценарий поведения пользователя на сайте.
Макеты и UI-kit
Т.к. структура сайта сохранилась практически без изменений (они коснулись только содержания главной страницы), я приступила к созданию нового UI-kit.
Типографика
На основе нового брендбука компании я выбрала шрифты для сайта: OpenSans и Nebulosa.
В ходе работы над UI-kit я создала новые стили текста на основе выбранных шрифтов для мобильной и десктопной версии сайта.
Колористика
На основе фирменных цветов я разработала цветовую схему для сайта, создала цветовые стили и переменные.
Иконки
Я также актуализировала старые иконки и нарисовала новые.
Компоненты
Примеры некоторых обновленных компонентов: кнопки, карточка тарифа, форма оплаты, поле ввода.
Макеты
Примеры обновленных страниц: главная страница, страница продукта Интернет, страницы акций.
Мобильная версия
Пример адаптации главной страницы для мобильных устройств
UX-исследования. 5-секундный тест
Чтобы узнать, как воспринимается новый вариант дизайна сайта, я применила пятисекундный тест старого и нового вариантов.
-
Цель исследованияУзнать первое впечатление, связанное с дизайном сайта Севстар; выяснить, как воспринимается бренд Севстар через сайт компании, какие ассоциации возникают в связи с ним. -
Ход работыВ исследовании приняли участие 22 респондента (м и ж, 20-50 лет, жители Севастополя, активные пользователи интернета).
Я озвучивала задание: «Посмотрите некоторое время на страницу, которая сейчас появится». Затем на 5 секунд показывала изображение главной страницы сайта. -
Результаты- Новый дизайн понравился 80% пользователей (18 из 22). Старый дизайн — только 31% (7 из 22).
- Характеристики компании при новом дизайне сайта: современная, продвинутая.
- Редизайн успешен, т.к. его высоко оценивают пользователи, и он соответствует новому бренду компании.
UX-исследования. Парное сравнение
Для уточнения результатов 1 этапа исследования я провела парное сравнение вариантов дизайна.
Описание исследования:
Цель: выяснить, какой вариант дизайна предпочитают пользователи.
В исследовании приняли участие 18 респондентов (м и ж, 20-50 лет, жители Севастополя, активные пользователи интернета).
Респондентам я показывала парами экраны старого и нового дизайна сайта: главная страница, страница тарифов, страницы продуктов и услуг, — и предлагала выбрать дизайн, который вызывает большее желание стать клиентом компании, подключить ее услуги или приобрести предлагаемые продукты.
В исследовании приняли участие 18 респондентов (м и ж, 20-50 лет, жители Севастополя, активные пользователи интернета).
Респондентам я показывала парами экраны старого и нового дизайна сайта: главная страница, страница тарифов, страницы продуктов и услуг, — и предлагала выбрать дизайн, который вызывает большее желание стать клиентом компании, подключить ее услуги или приобрести предлагаемые продукты.
Результаты
- 15 из 18 (83%) пользователей предпочли новые варианты дизайна во всех случаях, 16 из 18 (89%) — в 2 случаях из 4.
- 10 из 18 пользователей тратили менее 5 секунд на выбор предпочитаемого варианта.
- Редизайн оказался успешным, т.к. его выбирает практически без сомнений значительная часть пользователей (>80%)
Исследование: восприятие дизайна сайта
и отношение к бренду
и отношение к бренду
Для этого исследования я использовала метод семантического дифференциала, разработанный для изучения и измерения отношений в психологических исследованиях и также применяемый в маркетинговых и продуктовых исследованиях.
-
Описание исследования:Для определения шкал я использовала прилагательные из семантики бренда и их антонимы. Также я включила важные определения для сайта: понятность, дизайн, удобство.
Основная гипотеза исследования — редизайн получит более высокие показатели, в первую очередь по шкалам «технологичность», «современность», «инновационность». -
Ход работыВ исследовании приняли участие 22 респондента (м и ж, 20-50 лет, жители Севастополя, активные пользователи интернета).
Задание для респондентов: пожалуйста, познакомьтесь с сайтом компании Севстар. Затем оцените компанию по предложенным качествам. -
РезультатыВ результате редизайн сайта получил существенно более высокие значения по шкалам «технологичность» (5.19 / 2.85 для старого дизайна), «современность» (5.60 / 2.00), «инновационность» (5.35 / 3.00), «дизайн» (6.02 / 2.23).
Результат указывает, что сайт действительно воспринимался как устаревший, не соответствовал новому бренду компании, следовательно, редизайн был необходим.
Результаты редизайна
В ходе исследований выяснилось, что редизайн сайта соотвествует семантике бренда компании: технологичность, современность, инновации.
Пользователи скорее готовы подключиться к компании с новым дизайном сайта, чем с реализованным в изначальном варианте.
Полученная обратная связь была позитивной, положительных отзывов было существенно больше, чем отрицательных.
Новый дизайн не вызвал у пользователей затруднений при использовании сайта, в т.ч. потому что функционал не получил значительных изменений.
Пользователи скорее готовы подключиться к компании с новым дизайном сайта, чем с реализованным в изначальном варианте.
Полученная обратная связь была позитивной, положительных отзывов было существенно больше, чем отрицательных.
Новый дизайн не вызвал у пользователей затруднений при использовании сайта, в т.ч. потому что функционал не получил значительных изменений.
Спасибо за внимание!
