Как правильно сделать редизайн

Редизайн — это масштабное изменение дизайна сайта. Обычно под ним понимают полную смену ключевых элементов дизайна. Это отличает редизайн от мелких изменений, которые происходят в рамках одной дизайн-концепции.

При редизайне внешний вид сайта может сильно измениться: другие цвета, шрифты, кнопки, расположение элементов. У пользователей такие изменения иногда вызывают негатив. Когда знакомый сайт меняется, они могут не принять новый дизайн — в итоге и людям неудобно, и бизнес сталкивается с оттоком пользователей и репутационными потерями.

Рассказываем, как сделать редизайн сайта, чтобы не ошибиться и снизить риск потери клиентов.

Шаг 1. Определиться, зачем нужен редизайн

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

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

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

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

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

Шаг 2. Выбрать тип редизайна

Тут нет жесткой классификации, но есть приблизительная. В зависимости от цели мы выделяем типы редизайна.

Функциональный или ребрендинговый

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

Пример: у нас был такой кейс с сервисом Sape. Клиент разросся за годы работы, и в старый дизайн уже не влезали все функции. Ему был нужен функциональный редизайн, чтобы уместить всё нужное.

При ребрендинге редизайн будет скорее имиджевым. Сайт может функционально остаться таким же, но при этом нести другую идею и посыл, иначе позиционировать бренд. Например, компания решила ориентироваться на более молодую аудиторию — нужно «осовременить» дизайн, чтобы говорить на одном языке с новой ЦА.

Одномоментный или постепенный

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

Пример: Кинопоиск. Когда Яндекс в 2015 году провел ребрендинг и резко изменил дизайн сайта, поднялась огромная волна негатива. Чтобы избежать репутационных потерь и оттока аудитории, Яндексу пришлось вернуть всё как было. Позже он стал вводить изменения постепенно.

Редизайн на новом сайте

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

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

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

Шаг 3. Соблюсти все этапы редизайна

Любой дизайн — это последовательный процесс. Этапы процесса примерно те же, что и с обычной разработкой UX/UI:

1. понять цели и задачи, которые будет решать дизайн;
2. проанализировать текущие метрики и конкурентов;
3. исследовать поведение пользователей на текущем сайте;
4. сформулировать гипотезы;
5. спроектировать путь клиента и пользовательские истории;
6. если нужно, провести SEO-оптимизацию;
7. создать вайрфреймы, приблизительные эскизы дизайна;
8. разработать визуальный дизайн;
9. протестировать макеты на пользователях, но пока не внедрять на сайт;
10. реализовать дизайн вместе с командой разработчиков;
11. протестировать реализацию на пользователях, проанализировать результат и интерпретировать метрики.

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

(!) Учитывайте привычки пользователей

Люди очень подвержены силе привычки. Это касается и пользователей сайта: у них уже есть какие-то привычные сценарии использования продукта. И если эти сценарии сломаются, возникнет негатив.

Пример: однажды мы сделали редизайн финансового сервиса и поменяли расположение важных блоков. В итоге через час после публикации нового дизайна у нас было 40 страниц негативных комментариев. Самый популярный звучал так: «Молодцы, отличный редизайн, хочу пожать дизайнеру горло».

Но при этом на старый дизайн вернулось только 3% пользователей.

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

(!) Дайте возможность привыкнуть постепенно

В идеале, если сервисом пользуется много людей, лучше внедрять изменения постепенно и не заставлять пользователей моментально переучиваться. Тогда негатива будет меньше.

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

Если нет возможности сменить дизайн постепенно — можно сделать кнопку «Вернуться на старый дизайн», но в новом реализовать больше фишек и полезных функций. Тогда люди со временем перейдут сами. А новые пользователи будут сразу приходить в обновленный дизайн: у них еще нет привычек, их не надо переучивать.

Шаг 4. Тестировать и еще раз тестировать

Еще одна причина негатива при редизайне — владелец продукта убрал нужную людям фишку. Например, какой-то фильтр: посчитали, что он не нужен, а оказалось, что им часто пользуются.

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

Таких ошибок помогает избежать тестирование:

• отслеживайте, как ведут себя пользователи на старом и новом сайте;
• исследуйте новый дизайн с помощью фокус-группы пользователей;
• проведите A/B-тестирование, когда разным людям предлагают разные варианты дизайна;
• проведите CustDev и соберите с пользователей обратную связь.

Если ошибка всё же произошла — убранную функцию лучше вернуть, чтобы улучшить пользовательский опыт.

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

Шаг 5. Обучать пользователей работе с новым дизайном

Еще один ключевой момент — онбординг. Нужно показать пользователям, что такой редизайн не сделает их опыт хуже, а даст больше возможностей. Расскажите нативно, как ими пользоваться. Например:

• добавьте всплывающие подсказки рядом с функциями;
• сделайте раздел «Помощь»;
• запишите обучающие ролики и вебинары;
• напишите для кнопок и функций понятный текст.

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

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

Шаг 6. Отслеживать динамику и не делать поспешных выводов

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

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

Итоги

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