Как это работает в ADN: проектирование
Проделали адски сложную работу и разложили по полочкам, как мы работаем с этапом проектирования. Матрица, ссылки на примеры документов, советы как продать проектирование клиенту — все здесь.
Представим ситуацию, в которой мы все периодически оказываемся. Клиент обращается в студию, вы начинаете общаться, речь заходит об оценке и вы говорите: «сначала мы разработаем прототип, и тогда поймем, сколько точно будет стоить проект». Вроде логично, одна из задач проектирования — это выяснение требований. Вы же не лендинг на пять экранов оцениваете. Но клиент часто воспринимает это так: вы навязываете ему «лишний» этап, растягиваете сроки и раздуваете бюджет. И хочет оценку здесь и сейчас.
Проектирование — один из основополагающих этапов любого сайта, и в конечном счете именно благодаря ему становится возможна точная оценка. Давайте разбираться, как все устроено.
Что дает проектирование?
Хороший дом вряд ли получится построить без проектных работ, с любым IT-продуктом то же самое. Проектирование экономит время и бюджеты за счет более четкого плана, значительно снижает риски. И, что довольно важно для клиента, продукт, получающийся на этапе проектирования, конечен. Никто не мешает взять этот материал и произвести точную оценку затрат в нескольких компаниях сразу.
Каждый раз перед тем, как сесть за прототип, мы должны донести его ценность до клиента. Что ему говорить? Пошагово объяснить, что:
- Он поймет, как будет выглядеть его продукт. Посмотрит на структуру и композицию, поймет, чего не хватает, а что тут лишнее.
- Увидит, как это все взаимосвязано. Поймет логику: в каких отношениях главная, допустим, с каталогом, новостями, личным кабинетом, программой лояльности и всем остальным.
- Понажимает на кнопки. Увидит, что при этом происходит. Добавлять базовую анимацию ключевых экшнов, например, при скролле — нормально и даже хорошо, ведь механику работы на статичных макетах понять сложнее.
- Сразу скажет, что ему не нравится. И вы быстро согласуете правки, не затрачивая на это кучу ресурсов.
- Получит точную оценку проекта. Теперь вы можете рассчитать оценку наиболее точно: зная количество страниц, элементов, состояний объектов, анимацию, механику работы.
Прототип не только не подразумевает под собой дополнительные расходы, но и экономит ресурсы — как заказчика, так и студии. Кроме того, клиент в любой момент времени может увидеть общую картину — по принципу прогрессивного джипега:
В любую секунду любой проект готов на 100%, хотя проработанность может быть и на 4%.
Теперь покажем наш подход к проектированию и то, как мы обосновываем стоимость этого этапа.
Как мы это делаем
Все начинается с матрицы проекта. Это такой сводный документ, большая таблица, с помощью которой можно быстро прикинуть оценку — столько будет стоить проектирование для промо-сайта, а столько для большого онлайн-магазина.
В среднем проектирование занимает около 2 недель, но эти сроки могут варьироваться от сложности проекта как в меньшую, так и в большую сторону.
В прошлом мы столкнулись с проблемой: для разных типов проектов не всегда целесообразно применять все этапы, иногда гораздо эффективнее сделать упор только на отдельных. Мы попытались структурировать наши наблюдения, проанализировали прошлый опыт, определили важность каждого этапа для конкретного вида продукта.
Теперь мы можем предлагать оптимальный пакет услуг, отталкиваясь от бюджета клиента (а в некоторых случаях и оптимизировать затраты). Также клиент сразу может наглядно посмотреть, что он получит в итоге, и сколько он за это заплатит. Для нас эта матрица еще и своего рода чек-лист работ, которые необходимо провести в рамках работ по проектированию.
В матрице есть этапы и продукты. На их пересечении — стоимость.
Продуктов четыре: интернет-магазин, корпоративный сайт, сервис и промо.
Этапов три, но они включают в себя комплекс услуг. Обязательные услуги для этого типа продукта выделены красным цветом, взаимоисключающие — желтым, белые — по желанию.
Как можно понять из картинки, начинается все с аналитики. Происходит это следующим образом.
Аналитика
Первая услуга, бесплатная для каждого типа продукта, — это концепция.
Концепция. Документ, от которого мы отталкиваемся. В нем записаны все дизайн-задачи, возможные примеры их решений и описание преимуществ каждого.
На основе концепции можно оценить лишь примерно оценить стоимость проекта. Главное — она помогает понять, сходится ли видение студии с видением клиента.
Mindmap. Когда все детали концепции проработаны, мы строим диаграмму связей. В mindmap отражена вся структура проекта.
Описание сегментов ЦА, и ключевых сценариев взаимодействия. Это документ, в котором мы описываем основные сегменты целевой аудитории: рисуем портрет, описываем возможные страхи и решения основных проблем пользователей.
Customer journey map. Здесь мы строим карту путешествия потребителя — то, как он будет взаимодействовать с продуктом или услугой.
Диаграммы деятельности. Нужны для визуализации бизнес-логики и работы отдельных функциональных единиц.
Moodboards — визуальный бриф. Подборка разных графических элементов в Pinterest: макеты, фото, начертания шрифтов — помогает выявить эмоциональные ожидания заказчика от продукта.
Описание сущностей системы. Сущности нужны, чтобы облегчить задачу разработчикам: они проектируют базы данных по готовым описаниям и тем самым экономят время. Описания в виде таблицы особенно актуальны для крупных проектов.
Аналитика — это, наверное, самый важный этап проектирования продукта, в дальнейшем он ложится в основу почти всех процессов. Аналитик должен погрузиться в бизнес, изучить ключевые метрики, понимать аудиторию, цели, задачи проекта, и агрегировать эти данные для использования на следующих этапах.
Прототипирование
Именно на этом этапе разработки мы беремся за Axure или Sketch, чтобы создать интерактивный прототип.
И в том, и в другом случае получится кликабельный прототип десктопных состояний из 25–30 страниц.
| Axure: | Sketch: |
| — несложные интерактивные элементы | — основные страницы и модальные окна |
| — модальные окна | — макеты в InVison |
| — доступен в любое время по прямой ссылке | — макеты можно выгрузить в любом формате |
| — генерируется офлайн-версия | — легко передать Sketch-команде |
| Лучше всего подходит для интернет-магазинов, крупных корпоративных сайтов и сервисов. | Удобно для промо-продуктов, корпоративных сайтов с упором на дизайн и сложную анимацию, мобильных приложений. |
Так выглядит интерактивный прототип Axure:
А это Sketch:
Анимация прототипов в Principle. Это подготовка интерактивных версий ключевых прототипов для демонстрации и запись скринкастов. Мы демонстрируем только ключевые механики, чтобы клиент понял общую логику продукта.
Это необязательный этап, но он хорошо подходит для демонстрации интерактивных прототипов на мобильных устройствах (iOS), при работах над промо-продуктами и продуктами с упором на дизайн.
Зачастую без визуализаций ключевых механик очень сложно объяснить заказчику, что мы хотим реализовать, как это будет работать, да и вообще зачем ему это нужно, и за что он платит деньги. Это усложняет процесс согласования и может обернуться проблемами на следующих этапах. Анимация на прототипе очень выручает, особенно при создании промо-продуктов.
Прототипирование — базовый этап, визуализирующий логику и функциональность продукта. Он дает клиенту итоговое понимание будущего продукта, а также позволяет протестировать гипотезы и интерфейсные решения на пользователях. Всегда важно помнить, что проектирование должно строиться на качественной аналитике и данных.
Документация
Наш базовый документ называется «функциональные спецификации», это аналог техзадания. Разница в том, что он модульный — то есть в каждом конкретном случае мы собираем отдельный пакет документов, который нужен при разработке именно этого продукта. В исключительных случаях, когда у продукта нет сложных функциональных особенностей, можно обойтись без техзадания.
Всего мы используем девять типов документов:
- Техзадание.
- Технические требования к сайту и ПО — общие и системные требования, а также требования по верстке и безопасности.
- Архитектура системы — структура страниц, используемые шаблоны интерфейсов для каждой из страниц со ссылками.
- Шаблоны интерфейсов системы — интерфейсные элементы со ссылками на сценарии, которые могут возникать при взаимодействии пользователя с этими элементами.
- Функциональные сценарии — все сценарии взаимодействия с системой и все условия, которые существуют в каждом из сценариев.
- Требования к системе администрирования — требования к безопасности, возможностям редактирования объектов, и функционалу.
- Рекомендации по SEO — полный список рекомендаций по ссылочной структуры сайта, формированию тегов title, description, keywords, формированию заголовков h1 и внедрению микроразметки, если необходимо. Эти рекомендации также отображены в техзадании.
- Поисковый аудит — семантическое ядро, анализ посещаемости, рекомендации по улучшению индексации сайта поисковыми системами и навигация.
- Рекомендации по оптимизации для публикации в социальных сетях — рекомендации по разметке с использованием ogp-тегов.
Этап проектирования — это не только минимизация рисков и «менее дорогой, чем дизайн» способ показать, как будет выглядеть сайт, какая логика будет в нем заложена. Само по себе проектирование — это конечный продукт, который позволяет заказчику перейти от «нам нужен сайт» к «нам нужен инструмент, который будет интегрирован в бизнес-процессы именно вот так». Что касается нас, как разработчиков, проектирование — это способ погружения всей команды, от сейлз-менеджера до тестировщика, в проект. Причем до того, как конкретный пул задач упадет на продакшн. В итоге мы получаем прозрачность со всех сторон: и заказчик и команда понимают, что их ждет, могут прогнозировать сложности и избегать их.
Бонус
Несколько полезных ресурсов, которые будут полезны, если вы интересуетесь проектированием:
- Очень годный доклад Алексея Бородкина из Notamedia о процессах проектирования и построении работы над сложными продуктами.
- Пиши, сокращай. Как создавать сильный текст. Проектировщику очень часто приходится работать со смыслами, доносить в прототипах какие-то мысли и идеи. Книга поможет научиться более грамотно и лаконично работать с текстом.
- Analytics Day. Проектировщик очень тесно связан с аналитикой и данными, поэтому нужно учиться анализировать данные, смотреть больше кейсов, и пытаться применять на практике.
Мы отправляем полезные материалы, которые помогут вам в работе
