ОТВЕТЫ НА ВСЕ ВАШИ ВОПРОСЫ И НЕМНОЖКО ЗНАНИЙ
КАК МЫ РАБОТАЕМ И КАК ЭТО РАБОТАЕТ

КАК СДЕЛАТЬ РЕДИЗАЙН САЙТА (НА ПРИМЕРЕ COSCHEDULE): 10 ПРОСТЫХ ШАГОВ

Итак, вы на пороге важного события – редизайна вашего сайта.

Задача не из легких: 301 редирект, тексты, код, A/B тестирование, карты сайта, планирование! И это только некоторые обязательные пункты.

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

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

Вот как два человека смогли создать сайт с наброска за 4 месяца.

веб дизайн, контент, юзабилити, редизайн, UX-дизайн, мозговой штурм, идеи, макеты, сайт для бизнеса, A/B тестирование

 

Процесс:

1. ПРОВЕДИТЕ МОЗГОВОЙ ШТУРМ

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

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

веб дизайн, контент, юзабилити, редизайн, UX-дизайн, мозговой штурм, идеи, макеты, сайт для бизнеса, A/B тестирование

2. СОЗДАЙТЕ КАРТУ САЙТА

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

3. НАПИШИТЕ ТЕКСТ ПЕРЕД СОЗДАНИЕМ ДИЗАЙНА

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

Рекомендации:

  • Напишите минимум 25 заголовков для каждой темы (если есть такая возможность) и протестируйте их среди членов своей команды.
  • Перед тем, как написать хоть одно слово, спросите себя: “Почему клиенты захотят это читать?”. В ответе должна быть реальная выгода или причина, почему ваш блог, страница, email будут интересны пользователям.
4. ПОДГОТОВЬТЕ НАБРОСКИ

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

веб дизайн, контент, юзабилити, редизайн, UX-дизайн, мозговой штурм, идеи, макеты, сайт для бизнеса, A/B тестирование

5. НАЧНИТЕ С PHOTOSHOP, ЗАТЕМ ЗАЙМИТЕСЬ КОДОМ

Создайте подробный дизайн каждой страницы. Делать это нужно до написания кода. Этот этап помогает избавиться от необходимости представлять себе будущие страницы и все их элементы.

6. ПРОВЕДИТЕ A/B ТЕСТИРОВАНИЕ

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

Инструкция по проведению A/B тестирования:

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

Команда CoSchedule протестировала несколько заголовков и добавила видео на домашнюю страницу. Это обеспечило им рост конверсии для нового сайта на 6%.

7. ПРИСТУПАЙТЕ К РАЗРАБОТКЕ

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

8. ПРОВЕРЬТЕ КОД

Здесь вы сможете проверить функциональность дизайна. Для стадии подтверждения качества можно использовать Meistertask. Подобные инструменты упрощают процесс редактирования и помогают быстро тестировать сайт. Также вы сможете определять разные фазы (в процессе, обзор, готово) и при помощи Skitch создавать визуальные элементы (дизайнеры будут от этого в восторге).

веб дизайн, контент, юзабилити, редизайн, UX-дизайн, мозговой штурм, идеи, макеты, сайт для бизнеса, A/B тестирование

9. ВЫДЕЛИТЕ ВРЕМЯ НА ИСПРАВЛЕНИЕ ОШИБОК

Ошибки будут, поэтому выделите на их исправление время. Попросите членов своей команды протестировать сайт и постараться найти ошибки и изъяны. В этой же фазе протестируйте UX. Привлеките для этого друга или коллегу, который не участвует в проекте. Делайте пометки и будьте готовы вносить изменения. Запомните, хороший дизайн работает просто, если пользователю приходится задумываться, то вы делаете что-то неправильно.

10. СДЕЛАЙТЕ ГЛУБОКИЙ ВДОХ И ПРЕДСТАВЬТЕ ВАШЕ ТВОРЕНИЕ МИРУ!
10+. ПРОДОЛЖАЙТЕ A/B ТЕСТИРОВАНИЕ

После запуска нового сайта работа не заканчивается. Все только начинается.

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

Помните, у вашего сайта одна цель – конвертировать посетителей в клиентов. А если вы хотите увеличить показатели конверсии, A/B тестирование поможет вам определить, что работает, а что нет.

 

Уроки:

ПИШИТЕ ТЕКСТЫ СЛОВАМИ КЛИЕНТОВ

Лучший способ продать что-то – использовать фразы и слова своих существующих клиентов. Как это сделать?

веб дизайн, контент, юзабилити, редизайн, UX-дизайн, мозговой штурм, идеи, макеты, сайт для бизнеса, A/B тестирование

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

ЕЖЕДНЕВНЫЕ СОГЛАСОВАНИЯ

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

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

СНАЧАЛА МЕЧТАЙТЕ, ПОТОМ ФОКУСИРУЙТЕСЬ

В самом начале процесса создания дизайна выделите 5 дней на мозговой штурм. Выглядит этот процесс следующим образом:

  1. Наметьте идеи и соберите информацию
  2. Сделайте наброски дизайна и сюжетных линий
  3. Выберите и сфокусируйтесь на 2-3 идеях
  4. Создайте на базе идей подробные макеты
  5. Протестируйте новую историю на других членах команды

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

  • Какова основная цель проекта? (конверсия, трафик)
  • Какие предположения вы делаете? Чего вы ожидаете от этого редизайна?
  • Проанализировав данные, определите, что работает эффективно на существующем сайте? (а что нет)
  • Что вам нравится/не нравится в нынешнем дизайне? Почему?
  • Если время на работу не было бы ограничено, как выглядел ваш дизайн?

Ответы на эти вопросы помогут вам объективно оценить новые идеи и найти что-то действительно уникальное.

ВЫСОКАЯ СКОРОСТЬ ДЛЯ ЛУЧШЕГО ДИЗАЙНА

Лучшие результаты получаются в результате быстрой работы. В нашей природе заложена предрасположенность находить проблемы и проявлять осторожность. Если действовать быстро, страх не успеет появиться.

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

ИЗБЕГАЙТЕ ПЕРЕРАБОТОК

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

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

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

Возьмите из опыта CoSchedule то, что вам нравится, оставьте все остальное и создайте свой уникальный процесс, который приведет вас к успеху.

 

Статья взята с rusability.ru