beta
Москва
Кемерово

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

сложность:  

Работа над сайтом, веб-сервисом или мобильным приложением состоит из двух крупных этапов: сначала проводим аналитику и проектирование; на втором этапе — непосредственно разрабатываем продукт. 

Эта статья посвящена Первому этапу — аналитике и проектированию. 

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

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

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

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

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

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

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

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

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

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

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

Это особенно актуально для стартапов и новых IT-продуктов, в которых на старте много неизвестных даже для самого заказчика.

На основе аналитики команда проекта:

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

Что делаем

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

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

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

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

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

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

Зачем нужно

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

SEO-проектирование не гарантирует попадание в топ-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. Текст и прочий контент для сайта 

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

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

Оцените пост:
5
Не очень
Комментарии:0
×