Разработка
интернет-
порталов

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

Сегментируем целевую аудиторию по 20+ критериям от пола и возраста до жизненных приоритетов, прорабатываем портреты и пользовательские истории, простраиваем User Journey, чтобы сформулировать реальную ценность интернет-портала для целевой аудитории и выгоды от его посещения. В процессе аналитики определяем:

• ключевые для юзеров функции интернет-портала
• типовые сценарии использования аналогичных сервисов
• психологию поведения ЦА и близкие ей подходы

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

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

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

Превращаем карту интернет-портала с иерархией разделов, категорий и подкатегорий, глобальной и локальной интуитивной навигацией в интерактивные модели страниц сервиса. Закладываем логику перемещения пользователей между личным кабинетом, различными страницами сайта и интегрированными ресурсами, визуализируем расположение блоков и элементов на страницах с учетом user flow. Опираясь на результаты анализа психологии диджитал поведения ЦА предопределяем ожидания пользователей и размещаем меню навигации, поиск, фильтры и сортировки, функционал регистрации и логина, модальные окна, виджеты, чаты и другие функциональные элементы именно там, где юзер подсознательно ищет их глазами.

Высокодетализированные прототипы дополняем отточенным UX-копирайтингом, чтобы «общение» интерфейса интернет-портала с аудиторией было логичным, понятным и в общем tone of voice сервиса. Отдельно продумываем интерактивные микро отклики на любые действия пользователей: уведомления, подсказки, виджеты, пуши. Такой подход помогает достичь идеального соприкосновения продукта с юзером и его психологическими триггерами, повысить уровень вовлеченности в контент и превратить случайного посетителя в лояльного клиента.

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

Пример прототипа высокой детализации

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

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

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

Одновременно с прорисовкой страниц собираем UI-kit с мастер-компонентами, библиотекой стилей, типографикой, элементами навигации — так при масштабировании будет возможность оптимизировать и ускорить процесс создания новых страниц, при этом сохраняя консистентность дизайна.

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

На финальном этапе проводим UI/UX тест дизайн-макетов на фокус-группе и готовим подробное ТЗ на верстку и бэк. Описываем логику поведения всех кнопок, виджетов, функциональных элементов, способы представления текстового, визуального и аудиоконтента, последовательность анимаций и полноценную карту перелинковок.

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

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

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

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

Чек-лист для дизайн-ревью

Используем масштабируемые технологии для бэкенд-части, чтобы при расширении функциональных возможностей интернет-портала разработка требовала минимума финансовых и временных ресурсов. Интегрируем блоки верстки с выбранной CMS (1С-Битрикс, WordPress, Modx, Opencart), фреймворками (Laravel, Yii2, Symfony) или с новой системой, разработанной специально под задачи проекта. Программируем бизнес-логику сайта, включая обработку запросов от пользователей, валидацию данных, аутентификацию и авторизацию.

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

Запускаем интернет-портал и сопровождаем продукт на протяжении всего цикла жизни: подключаем сайт к системам веб-аналитики Яндекса и Google, получаем статистику о поведении пользователей, дорабатываем пользовательский опыт с учетом потребностей юзеров и вовремя оптимизируем основные бизнес-показатели.