Продуктовый дизайн. Как мы разработали дизайн для сервиса аналитики FullStats

На связи Илья Никитин, основатель агентства NDA, и Антон Аверин, продуктовый дизайнер в NDA. Мы — небольшое агентство, занимающееся разработкой дизайна для цифровых продуктов. Наша цель — создавать не только красивые, но и удобные продукты.

Сегодня мы хотим поделиться нашим опытом разработки дизайна для сервиса аналитики, которым в настоящее время пользуются 19 000 пользователей.

Продуктовый дизайн. Как мы разработали дизайн для сервиса аналитики FullStats

Дальше будет много текста, так что вот кратко, что вас ждет в статье:

Сначала коротко расскажу о продукте

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

С помощью FullStats вы сможете оптимизировать свою рекламную кампанию на Wildberries, сокращая затраты и увеличивая прибыль. Вы получите доступ к рекламному кабинету, где сможете управлять своими рекламными объявлениями, анализировать их эффективность и принимать обоснованные решения для повышения конверсии.

Своими словами, это сервис, который помогает клиентам сэкономить рекламный бюджет и получить максимальную прибыль от рекламы на Wildberries.

Какая стояла задача?

Заказчик хотел создать продукт, который удовлетворит потребности селлеров Wildberries и их менеджеров. Наша первоочередная задача была разработка минимально-жизнеспособной (MVP) версии сервиса.

Мы должны были создать полноценный сервис, который поможет выполнять следующие задачи:

  • Оптимизация SEO
  • Анализ конкурентов
  • Оптимизация рекламного бюджета
  • Запуск, настройка и анализ рекламных кампаний и другое.

Какую планку мы поставили себе

Это был наш первый опыт работы с продуктовым дизайном. Ранее мы в основном занимались разработкой корпоративных сайтов и интернет-магазинов. Однако мы всегда стремимся к новым вызовам и решили поставить перед собой несколько целей в рамках этого проекта:

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

Паспорт проекта

На созвоне с клиентом мы обсудили план работ, определили функционал для первого запуска и выявили наши текущие приоритеты. Мы также установили сроки — 1 месяц. Для ускорения процесса мы работали по спринтам и передавали в разработку утвержденные макеты.

Мы создали карточку проекта в Notion, чтобы обеспечить максимальную прозрачность в процессе работы и чтобы все видели, на каком этапе находится дизайн.

Продуктовый дизайн. Как мы разработали дизайн для сервиса аналитики FullStats

Анализ

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

Анализ рынка: Мы изучили конкурентов и анализировали существующие аналитические сервисы. Это позволило нам выявить преимущества и недостатки существующих решений, а также найти уникальные возможности для FullStats.

Первые прототипы

  • В сжатые сроки мы создали прототипы, удалили ненужные функции и оставили только то, что поможет быстро разработать MVP и получить первый результат.

Получили средне-детализированные версии прототипов сервиса.

Продуктовый дизайн. Как мы разработали дизайн для сервиса аналитики FullStats

Для проверки прототипов мы обратились к будущим пользователям продукта — уже имеющим аккаунты поставщиков на Wildberries. Нам не пришлось искать респондентов, так как у заказчика были менеджеры, работающие с поставщиками.

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

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

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

Детализация прототипов и дизайн

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

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

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

Выпуск MVP

Продуктовый дизайн. Как мы разработали дизайн для сервиса аналитики FullStats

Перед выпуском MVP мы провели тестирование на фокус-группе из 50 человек.

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

Главное, что показали тестирования — продукт оказался востребованным и хорошо принятым пользователями.

Проблемы при разработка MVP

При работе над MVP мы столкнулись с такими проблемами, которые затрудняли и замедляли дальнейшую работу над проектом:

  • Несоответствие верстки и дизайна: Функции, которые были выпущены в продакшн, визуально не соответствовали тому, что было спроектировано дизайнером в Figma. Исправление таких случаев в продакшн версии занимало много времени из-за их низкого приоритета.
  • Несоответствие задачам в ТЗ: В процессе работы над задачами становились известны новые требования, которые не были предусмотрены в техническом задании. Поэтому приходилось перерабатывать макеты снова.
  • Хаос в Figma: Разработчикам было сложно найти актуальный дизайн проекта в файлах Figma, так как иногда существовали две версии дизайна (устаревшая и актуальная) или вообще новая версия, о которой никто не знал.

Как мы решили эти проблемы? Об этом расскажу чуть ниже.

Годовой спринт

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

Инфраструктура, построенная на этапе разработки MVP, оказалась недостаточной для легкого масштабирования с точки зрения проектирования и разработки. Поэтому мы выделили 4 основные задачи для дальнейшей работы над проектом:

  • Создание дизайн системы
  • Организация дизайн процесса
  • Создание базы знаний
  • Создание структуры в Figma
Продуктовый дизайн. Как мы разработали дизайн для сервиса аналитики FullStats

Дизайн система

При разработке MVP продукта мы создали UI-kit для удобной работы, но он оказался недостаточным при масштабировании. Поэтому мы решили создать дизайн-систему по нескольким причинам:

  • Целостный визуальный стиль. Дизайн-система устанавливает единые стандарты и гармоничный внешний вид всех компонентов в сервисе. Это помогает создать единое восприятие продукта пользователем и поддерживать его согласованность в интерфейсных решениях.
  • Объединение паттернов пользовательского взаимодействия. В дизайн-системе мы определили основные паттерны и принципы взаимодействия, что облегчает навигацию и повышает удобство использования для пользователей.
  • Ускорение time to market. Благодаря дизайн-системе мы быстро создаем новые экраны и функциональность, используя уже готовые элементы. Это сокращает время разработки и ускоряет выход новых релизов.
  • Простое масштабирование продукта. Дизайн-система обеспечивает гибкую основу для развития и масштабирования продукта. Мы легко добавляем новые компоненты и функциональность, не нарушая целостность дизайна. Это позволяет адаптироваться к изменяющимся потребностям пользователей и требованиям рынка.

Многие считают, что дизайн-система = UI kit, но это не так. Дизайн-система — это больше, чем просто набор компонентов в Figma. Вкратце, дизайн-система — это UI kit + код + документация.

Процесс выполнения задачи:

  • Составление ТЗ — Проведение созвона с CTO, проектным менеджером и тимлидом команды фронтенда для обсуждения требований и ограничений.
  • Исследование — Анализ конкурентов, получение обратной связи от пользователей, проведение интервью и других исследований для формулирования гипотез.
  • Составление гипотез и прототипов — Приоритизация и проверка гипотез на «быстрых» прототипах, создание прототипа среднего уровня.
  • Дизайн-чек — Проведение ревью с техническим директором и фронтенд-разработчиком для проверки и сравнения задуманного с реализацией.
  • Детализация прототипов — Улучшение прототипов, проектирование состояний, работа с текстом, уточнение деталей в программе Figma, создание интерактивного прототипа.
  • Разработка — Отправка задачи на разработку.
  • Дизайн-ревью — Проверка задачи по чек-листу, описание ошибок и отправка на доработку.
  • Выпуск фичи — Релиз функционала.

Не все задачи мы выполняли в рамках этого процесса. Например, исправление состояния элемента или ошибки в тексте мы исправляли без привлечения данного процесса.

База знаний

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

Продуктовый дизайн. Как мы разработали дизайн для сервиса аналитики FullStats
  • Статьи (этапы разработки задачи, работа с UI-китом, доступы к различным сервисам и т. д.)
  • Чек-листы (проверка дизайнером)
  • Полезные материалы (вариации логотипа, где найти шрифты и иконки, используемые плагины и т. д.)

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

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

Структура в Figma

Ранее все задачи, дизайн и UI kit хранились в одном файле в Figma. Это было удобно для небольшого количества макетов, но стало сложно ориентироваться, когда их стало 50, 100 и более.

Поэтому мы перешли на профессиональный тариф в Figma и создали следующую структуру:

  • Команда: добавили всю команду с доступом «can view», а только мы имели доступ на редактирование, чтобы избежать случайного повреждения файлов.
  • Проекты: создали 2 проекта в команде: «Задачи« и »Актуальный дизайн».
  • Файлы: в проекте «Задачи« мы хранили все файлы с задачами, а в проекте »Актуальный дизайн» — файлы с актуальным дизайном каждого раздела и UI kit.
Продуктовый дизайн. Как мы разработали дизайн для сервиса аналитики FullStats

Структура страницы файла с задачей:

  • Обложка: содержит название задачи, краткое описание, статус и ссылку на задачу в Jira.
  • Чек-лист: страница с чек-листом для проверки макетов дизайнером при проектировании.
  • Дизайн: готовый дизайн с пояснениями для разработки, описывающий поведение ключевых экранов, блоков, взаимодействий и т. д.
  • Прототип: страница с интерактивными прототипами для разработчиков.
  • Исследования: все проведенные исследования в рамках задачи, включая анализ конкурентов, опросы, интервью и т. д.
  • Проверка разработки: страница с чек-листом для проверки разработчиками верстки. Если есть ошибки, подробно описываем их на этой странице и задача отправляется на доработку.
  • Наброски: хранятся здесь отклоненные наброски и решения, которые могут быть полезны в будущем.

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

  • Обложка
  • Дизайн
Продуктовый дизайн. Как мы разработали дизайн для сервиса аналитики FullStats

Итоги:

Итоговый релиз проекта

Макетов было разработано: 250

Затрачено времени на проект: более 14 месяцев, по сей день мы ведем там работы

Количество людей, которые пользуются платформой: 19 000 пользователей

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

Теперь вы можете воспользоваться FullStats и получить все необходимые инструменты для успешной работы на Wildberries.

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

Илья Никитин
Арт директор
Антон Аверин
Продуктовый дизайнер
55
Начать дискуссию