LightLogo

Как в Атвинте разрабатывают веб-продукты, часть 1: что происходит на этапе аналитики и проектирования

Бизнес и эффективность
Новости
Дизайн
Аналитика
31 июля 2020
article preview
Работа над сайтом, веб-сервисом или мобильным приложением состоит из двух крупных этапов: сначала проводим аналитику и проектирование; на втором этапе — непосредственно разрабатываем продукт. 
Эта статья посвящена Первому этапу — аналитике и проектированию. 

Что делаем на первом этапе

  1. Аналитика
  2. SEO проектирование
  3. Разработка контента: текст, фотографии, видео
  4. Проектирование архитектуры продукта и написание техзадания
  5. UX-проектирование интерфейса и разработка прототипов
  6. Разработка дизайн-концепции
  7. Опционально — разработка логотипа и фирменного стиля  

Зачем нужен первый этап

Этап аналитики и проектирования нужен, чтобы перевести идею продукта в конкретные шаги его реализации и понять, что именно и как лучше сделать с технической точки зрения. Этап помогает синхронизировать видение сайта или IT-продукта у заказчика и команды проекта.  
Если сравнить со строительством здания, то на этом этапе мы разрабатываем чертежи и проектную документацию. В случае веб-разработки аналитики, проектировщики и дизайнеры определяют, как должен работать и выглядеть сайт. 
А еще работа по техзаданию и прототипам помогают запараллелить часть работ на втором этапе. Ведь каждая функция и взаимодействие подробно описаны. Это ускоряет разработку и позволяет заказчику получить готовый сайт быстрее без потерь в качестве.
Мы в Атвинте не пропускаем этот блок работ. Если клиент не готов вложиться в первый этап, мы вынуждены распрощаться. Без аналитики и проектирования мы не можем гарантировать качество продукта, а потому не готовы взяться за проект.

Шаг 1. Исследования и аналитика

Какие специалисты задействованы

Маркетологи и менеджер проекта изучают аудиторию, конкурентов и спрос по данным систем аналитики и открытым источникам.

Для чего нужно

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

Что делаем

В результате этапа клиент получает аналитический отчет. В зависимости от бизнес-задач клиента, в отчет включаем такую информацию:

Шаг 2. SEO проектирование 

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

Какие специалисты задействованы

SEOnспециалисты и маркетолог-аналитик собирают семантику для сайта, кластеризуют ее, разрабатывают структуру сайта и рекомендации по проектированию. В работе опираются на данные из аналитического отчета.

Зачем нужно

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

Что делаем

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

Шаг 3. Сбор и подготовка контента

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

Какие специалисты задействованы

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

Зачем нужно

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

Шаг 4. Проектирование архитектуры проекта и описание техзадания

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

Какие специалисты задействованы

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

Зачем нужно

Техническое задание (ТЗ) важно для высоконагруженных проектов со множеством интеграций. Например, для информационных систем, крупных ecommerce-решений, сервисов автоматизации процессов. В таких проектах много функциональных особенностей, которые нельзя упускать, иначе продукт не будет выполнять свои задачи. 
Кроме того, на больших проектах задействовано много разработчиков, и техзадание позволяет запараллелить разработку отдельных функций продукта, а потом безболезненно и бесшовно собрать проект. Такой подход позволяет делать и запускать продукты быстрее.

Что делаем

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

Шаг 5. UX-проектирование 

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

Какие специалисты задействованы

На этапе проектирования совместно работают UX-дизайнеры, аналитики и SEO-специалисты. В работе опираются на рекомендации SEO-проектирования и данные аналитического отчета.

Зачем нужно

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

Что делаем

Команда анализирует пользовательское поведение, прорабатывает пользовательские сценарии и Customer Journey Map — путь клиента по сайту. 
Результат этапа — схема всех страниц сайта или интерактивный прототип с учетом бизнес-задач клиента и пользовательских сценариев. 
На прототипах размечены контентные блоки, элементы взаимодействия вроде кнопок и инпутов, продумана механика работы интерфейса, последовательность событий на пути к цели пользователя. Например, до кнопки «Зарегистрироваться» или «Купить». 
Это еще не дизайн-макеты, а только «чертеж» для будущего дизайна. Чтобы превратить их в макеты, нужно продумать дизайн-концепцию и визуальные решения для всех элементов.

Шаг 6. Дизайн-концепция  

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

Какие специалисты задействованы

Над проработкой дизайн-концепции работают дизайнеры и арт-директор.

Зачем нужно

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

Что делаем

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

Результаты этапа Аналитики и проектирования

В результате этого этапа получаем материалы, с помощью которых дизайнеры и разработчики воплотят проект, а заказчик получит работающий продукт вовремя и в рамках бюджета. 
Список материалов по итогам Первого этапа:
  1. Аналитический отчет
  2. SEO-рекомнедации
  3. Техническое задание
  4. Прототипы
  5. Дизайн-концепция
  6. Текст и прочий контент для сайта 
В завершении Первого этапа менеджер проекта оценивает стоимость реализации всех функций и дизайнерских решений. После согласования стоимости, заключаем дополнительное соглашение на второй этап и переходим непосредственно к разработке.

Читайте также: 

0
0
0
Robot