Как сделать дизайн сайта через призму UX? Без танцев с бубном, SMS и регистрации

С чего начинается работа по дизайну сайта? Почему Вася делает дизайн за 30 тысяч, Лена — за 150 тысяч, а известная студия — за 1 миллион? Почему конкурент сделал сайт за 200 тысяч, а мой будет стоить 500? И можно ли вообще сделать сайт раз и навсегда, без всяких этих этапов согласования и правок?

Я — Лена, дизайнер, и сегодня поговорим о том, как по уму (моему, конечно) стоит делать проекты по веб-дизайну. Конечно, не всегда есть возможность и время сделать четко по этой инструкции. Но именно так вы достигнете максимальной эффективности при адекватном бюджете.

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

А как же? Сейчас расскажу.

Представим себе некоего заказчика в вакууме, который пришел со своей идеей. В лучшем случае, у него есть небольшое ТЗ и несколько зарисовок ручкой (влитых в Figma, Miro или GDocs).

Ему нужен дизайн стартапа: веб-версия, 2 приложения и немного макулатуры для инвесторов. С чего же начать? Нет, не с фейспалма. Уверяю — такое встречается сплошь и рядом. Нацепив дежурную улыбку, я отправляю в бой менеджера проектов (с навыками UX) и иду пить кофе в ближайший Старбакс, на время забывая о заказчике.

Итак, PM, одаренный широким кругозором, усиленно пытается понять, с чем едят полученный проект. Иногда в разговоре с заказчиком приходится скатываться до очевидностей: «Почему треугольничек не вставляется в круглое отверстие, нипанимаааааюююю…»

Итогом этапа, в идеале, должно стать:

• flow или короткое ТЗ на проект;
• базовый прототип с основным функционалом;
  
• краткое и емкое пояснение: для чего делается проект, какие есть конкуренты, как планируется монетизация, основные плюсы и минусы запуска проекта.

Что могу посоветовать:

1. не пренебрегайте созвоном или личной встречей с клиентом. Даже если ваша интроверсия приобретает критические масштабы. За время карантина (ох, простите, самоизоляции) я встретилась как минимум с 3 ситуациями, когда часовые переписки составляли исключительно неверное представление о проекте. И да, не столкнувшись с этим, я бы сама себе не поверила.

2. не стесняйтесь задавать глупые вопросы. Порой самый глупый вопрос может открыть невиданные ранее грани проекта.

3. составьте чеклист того, что вы хотите получить от клиента. И не продолжайте проект, пока не получите всё.

4. если на этом этапе даже вы понимаете что проект не взлетит, и промдизайн летающего ТС в виде топора очевиден только вам, попробуйте мягко убедиться в том что вы поняли все верно (селф-тест на дурака): наглядно представьте топор заказчику. Если ваш оппонент не видит ничего зазорного в происходящем — акститесь, лучше отказаться, чем получить минус в карму.

На этом этапе я обсуждаю с командой и заказчиком сырые прототипы. Все происходящее постепенно обрастает подробностями. И как раз тут нужен профессионализм всех участников. В этот момент понимаешь, почему менеджер проектов, которому ты платишь 1500 в час, отрабатывает их на 150% — и даже немножечко больше.

Затем сравниваем то, что получилось, с конкурентами. Иногда они есть — но чаще всего нет. И даже похожего ничего нет. Стартапы — штука веселая, да. В таком случае ищем аналогии, другие сервисы со схожей моделью работы (и из других тематик тоже). Сравниваем логику, упрощаем, составляем листы сравнений с конкурентами и псевдоконкурентами, дорабатываем прототип.

Наступает время создавать CJM. Приветствую UX инженера, аналитика... И хотела бы я сказать, что снова ухожу пить кофе — но нет. Втроем мы собираем группы клиентов, согласовываем с заказчиком, вживаемся в роли/приглашаем респондентов, раскладываем прототипы и начинаем штормить. В подробностях посмотреть, как создавать CJM, можно, например, тут https://vc.ru/marketing/96029-instrukciya-po-sostavleniyu-customer-journey-map-cjm. Созданию CJM я могу посвятить отдельный лонгрид и это обязательно когда-нибудь произойдет.

В итоге имеем:

1. прототипы v2;
2. обзор конкурентов;
   
3. CJM.
   

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

Все прототипы, которые мы делали до этого, можно назвать базовыми. Теперь мы создаем финальный прототип, на основании которого будем делать опрос ЦА и — после доработки — дизайн.

Тут все очевидно — если нужно нечто “вау”, берем Digital Producer и UX Copywriter. Если нет — можно обойтись своими силами. Превращаем литры кофе в кликабельный прототип, который закрывает максимум потребностей по CJM. Да, кажется Старбакс уже должен оформить мне программу лояльности.

Кстати — многие спрашивают, кто такой UX копирайтер, и почему он столько стоит. Этот персонаж, в первую очередь — психолог и UX аналитик, и лишь во вторую — человек пера. Он обладает знаниями о поведении пользователей и умеет работать с прототипами и CJM. Текст, написанный UX'ером, упрощает пользовательский путь и, в целом, быстрее ведет к понятной юзеру конверсии.

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

Итого, после этого этапа мы имеем:

1. прототип в деталях;
2. листы опросов;
   
3. тексты — на прототипе и в отдельных файлах.
   

Ура! Наконец-то мы подобрались непосредственно к дизайну! На основании конкурентов, best practices, хотелок клиента, желаний левой пятки в полнолуние — рисуем дизайн и иллюстрации. Порой обсуждаем. Порой до 20+ раз одну страницу (реальная цифра: привет, Антон!). На серьезных проектах, которыми пользуются тысячи людей, количество обсуждений не имеет решающего значения — важен исключительно результат.

Обсуждаем итоговый дизайн с клиентом, тестируем на ЦА, дорабатываем.

Получается:

1. кликабельный дизайн в Figma (320px+768px+1140px+big);
2. иллюстрации в векторе;
   
3. геморрой у арт-директора (ладно-ладно, не всегда)
   

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

Пишем, не забывая скриншоты:

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

После верстки проверяем с разных устройств и корректируем получившуюся работу. До 3 итераций — норма, 4я — повод сменить верстальщика. Кстати, многие думают, что работа front-end'а не так уж важна, рутинна — и делать ее сможет даже обезьяна. Я в корне не согласна с этим мнением. На мой взгляд, за хорошего верстальщика, который еще и развивается, стоит держаться, как за любимый айфон.

Результат этого этапа:

1. тз для верстальщика;
2. готовая верстка.

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

В роли UX-специалиста я понимаю — что стоит сделать в первую очередь, чтобы выпустить не самый куцый MVP. Пользоваться этими рекомендациями или нет — уже выбор тимлида.

Также, иногда рекомендую стек — когда на моем пути встречаются оригиналы, которые в 2К20-м разрабатывают на плюсах то, что практически не касается железа. Разработка на том же Питоне, с учетом планируемых нагрузок, будет и в 10 раз дешевле, и в 10 раз быстрее. Я не претендую на экспертность в выборе стека и часто сама обращаюсь за советом. Но когда вижу, что клиент пытается прыгнуть на грабли с разбега — стараюсь убедить хотя бы выбрать лопату вместо грабель.

В конце этого этапа мы получаем:

1. документ, расставляющий приоритеты разработки с точки зрения бизнеса;
2. предложения по стеку (чаще всего — несколько).
   

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

И это не камень в огород тестировщиков. Задача QA часто ставится заказчиком в контексте: “Проверить, что все работает и найти баги”. А улетевшая на 5px кнопка или несовпадение шрифта — не баги же.

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

Результат этого шага:

• документ с правками по дизайну;
• документы, отражающие скорость работы продукта и баги на конкретных (чаще всего — мобильных) устройствах.
  

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

Поднимаю составленные на Шаге 3 общие идеи для A/B тестирования, добавляю те, которые появились после запуска продукта, планирую их в итерации, обсуждаю с клиентом и рисую.

В таком состоянии проект переходит на постоянную поддержку, в которую входит:

• A/B тестирование;
• Отрисовка нового функционала, обновлений;
• Создание креативов, баннеров, графики для рекламы и т.д.

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

По итогам этапа получаем:

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

Да, я такой же дизайнер, как и тысячи других. Писать этот материал заставила меня та боль, которую я испытала, сделав за последние полгода несколько проектов из финтеха и схожих тематик ТЗ: “Хотел бы, чтобы вы сделали игру, 3Д-экшон, суть такова…” И что-то там про “корованы”, задачи застройщиков, стартапы и прочие радости жизни. И мне очень хотелось бы, чтобы вы этой боли избежали. А именно — правильно считали проекты и привлекали нужных специалистов, когда вашей квалификации не хватает.

Будем честны. В одиночку качественно пройти все эти этапы практически нереально. И вряд ли вы — тот Д’Артаньян, который пребывает исключительно в окружении лиц мононаправленной ориентации, и может всё. Всегда будет страдать что-то, что в конечном счете обернется для заказчика финансовыми и временными потерями. А зачем вам это надо?

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

• Себестоимость лендинга, проработанного по такой схеме — не менее 70.000 рублей. С учетом издержек, минимальной прибыли — получаем 100.000 рублей и выше.
• Стартапы, приложения в самой простой реализации обходятся в 150.000 — 600.000 рублей и более.
• Сложные решения по типу “а сделайте мне досье по всем клиентам финучреждения с модулями, блэкджеком и дамами” — от 1.000.000 рублей только за дизайн и это себестоимость (!).

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

При работе с крупными проектами на взаимодействие с клиентом и его ЦА может уходить до ¼ рабочего времени. Это тоже нужно учитывать при планировании проекта.

Я намеренно опустила некоторые этапы, ценность которых может быть высокой на проектах >1.000.000 рублей и старалась не ругаться, бросаясь в вас терминами типа RITE, ET, Desk Research и т.д.

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

OMG! Статья изобилует сарказмом. Пожалуйста, воздержитесь от прочтения, если это вам не близко. Говорят, люди, не понимающие сарказм — читают с конца.

За иллюстрации — спасибо Ирина Сальварт. За идею для статьи — всем клиентам, которых в "карантин" стало много больше.