Продуктовый дизайн. Как мы разработали дизайн для сервиса аналитики FullStats
На связи Илья Никитин, основатель агентства NDA, и Антон Аверин, продуктовый дизайнер в NDA. Мы — небольшое агентство, занимающееся разработкой дизайна для цифровых продуктов. Наша цель — создавать не только красивые, но и удобные продукты.
Сегодня мы хотим поделиться нашим опытом разработки дизайна для сервиса аналитики, которым в настоящее время пользуются 19 000 пользователей.
Дальше будет много текста, так что вот кратко, что вас ждет в статье:
Сначала коротко расскажу о продукте
FullStats — это удобный и многофункциональный сервис, который предоставляет полную информацию о товаре, бренде, продавце и вашем конкуренте на Wildberries. В одном месте вы найдете рекламный кабинет, внутреннюю аналитику, анализ конкурентов и SEO-оптимизацию карточек на Wildberries.
С помощью FullStats вы сможете оптимизировать свою рекламную кампанию на Wildberries, сокращая затраты и увеличивая прибыль. Вы получите доступ к рекламному кабинету, где сможете управлять своими рекламными объявлениями, анализировать их эффективность и принимать обоснованные решения для повышения конверсии.
Своими словами, это сервис, который помогает клиентам сэкономить рекламный бюджет и получить максимальную прибыль от рекламы на Wildberries.
Какая стояла задача?
Заказчик хотел создать продукт, который удовлетворит потребности селлеров Wildberries и их менеджеров. Наша первоочередная задача была разработка минимально-жизнеспособной (MVP) версии сервиса.
Мы должны были создать полноценный сервис, который поможет выполнять следующие задачи:
- Оптимизация SEO
- Анализ конкурентов
- Оптимизация рекламного бюджета
- Запуск, настройка и анализ рекламных кампаний и другое.
Какую планку мы поставили себе
Это был наш первый опыт работы с продуктовым дизайном. Ранее мы в основном занимались разработкой корпоративных сайтов и интернет-магазинов. Однако мы всегда стремимся к новым вызовам и решили поставить перед собой несколько целей в рамках этого проекта:
- Улучшить пользовательский опыт: Мы сосредоточимся на создании привлекательного и интуитивно понятного интерфейса, который будет максимально удовлетворять потребности наших пользователей.
- Разработать уникальный дизайн: Мы стремимся создать оригинальный и запоминающийся дизайн продукта, который будет выделяться среди конкурентов.
- Обеспечить функциональность: Наша цель — создать продукт, который будет полноценно выполнять все необходимые функции и задачи, при этом сохраняя простоту использования.
- Провести тестирование: Мы планируем провести тщательное тестирование продукта, чтобы убедиться, что он работает без сбоев и соответствует высоким стандартам качества.
Паспорт проекта
На созвоне с клиентом мы обсудили план работ, определили функционал для первого запуска и выявили наши текущие приоритеты. Мы также установили сроки — 1 месяц. Для ускорения процесса мы работали по спринтам и передавали в разработку утвержденные макеты.
Мы создали карточку проекта в Notion, чтобы обеспечить максимальную прозрачность в процессе работы и чтобы все видели, на каком этапе находится дизайн.
Анализ
Исследование пользователей: Мы провели опросы, интервью и наблюдения, чтобы понять потребности и ожидания наших клиентов. Это помогло нам определить основные функциональности и возможности сервиса.
Анализ рынка: Мы изучили конкурентов и анализировали существующие аналитические сервисы. Это позволило нам выявить преимущества и недостатки существующих решений, а также найти уникальные возможности для FullStats.
Первые прототипы
- В сжатые сроки мы создали прототипы, удалили ненужные функции и оставили только то, что поможет быстро разработать MVP и получить первый результат.
Получили средне-детализированные версии прототипов сервиса.
Для проверки прототипов мы обратились к будущим пользователям продукта — уже имеющим аккаунты поставщиков на Wildberries. Нам не пришлось искать респондентов, так как у заказчика были менеджеры, работающие с поставщиками.
Изначально мы предполагали, что сервисом будут пользоваться только менеджеры, ведущие аккаунты поставщиков. Однако выяснилось, что даже некрупные поставщики также используют данный тип сервисов в работе.
Провели несколько интервью с поставщиками, чтобы лучше понять их потребности.
Потребовалось еще несколько дней для доработки прототипов после тестирования. После этого все согласовали с заказчиком и перешли к следующему этапу.
Детализация прототипов и дизайн
После нескольких циклов тестирования прототипов мы их доработали и приступили к созданию окончательной версии.
Мы уделили особое внимание каждой детали, чтобы создать точное и реалистичное представление конечного продукта.
Для ускорения процесса реализации, каждый макет был сразу передан Front-разработчику, а не ждали, пока будут готовы все макеты для верстки.
Выпуск MVP
Перед выпуском MVP мы провели тестирование на фокус-группе из 50 человек.
Мы получили много обратной связи по удобству использования, обнаруженным ошибкам, скорости работы и функционалу сервиса. Команда проекта усердно работала над совершенствованием продукта.
Главное, что показали тестирования — продукт оказался востребованным и хорошо принятым пользователями.
Проблемы при разработка MVP
При работе над MVP мы столкнулись с такими проблемами, которые затрудняли и замедляли дальнейшую работу над проектом:
- Несоответствие верстки и дизайна: Функции, которые были выпущены в продакшн, визуально не соответствовали тому, что было спроектировано дизайнером в Figma. Исправление таких случаев в продакшн версии занимало много времени из-за их низкого приоритета.
- Несоответствие задачам в ТЗ: В процессе работы над задачами становились известны новые требования, которые не были предусмотрены в техническом задании. Поэтому приходилось перерабатывать макеты снова.
- Хаос в Figma: Разработчикам было сложно найти актуальный дизайн проекта в файлах Figma, так как иногда существовали две версии дизайна (устаревшая и актуальная) или вообще новая версия, о которой никто не знал.
Как мы решили эти проблемы? Об этом расскажу чуть ниже.
Годовой спринт
После запуска MVP стало понятно, что проект обладает потенциалом, поэтому было решено расширить продукт и создать полноценный сервис на долгосрочную перспективу.
Инфраструктура, построенная на этапе разработки MVP, оказалась недостаточной для легкого масштабирования с точки зрения проектирования и разработки. Поэтому мы выделили 4 основные задачи для дальнейшей работы над проектом:
- Создание дизайн системы
- Организация дизайн процесса
- Создание базы знаний
- Создание структуры в Figma
Дизайн система
При разработке MVP продукта мы создали UI-kit для удобной работы, но он оказался недостаточным при масштабировании. Поэтому мы решили создать дизайн-систему по нескольким причинам:
- Целостный визуальный стиль. Дизайн-система устанавливает единые стандарты и гармоничный внешний вид всех компонентов в сервисе. Это помогает создать единое восприятие продукта пользователем и поддерживать его согласованность в интерфейсных решениях.
- Объединение паттернов пользовательского взаимодействия. В дизайн-системе мы определили основные паттерны и принципы взаимодействия, что облегчает навигацию и повышает удобство использования для пользователей.
- Ускорение time to market. Благодаря дизайн-системе мы быстро создаем новые экраны и функциональность, используя уже готовые элементы. Это сокращает время разработки и ускоряет выход новых релизов.
- Простое масштабирование продукта. Дизайн-система обеспечивает гибкую основу для развития и масштабирования продукта. Мы легко добавляем новые компоненты и функциональность, не нарушая целостность дизайна. Это позволяет адаптироваться к изменяющимся потребностям пользователей и требованиям рынка.
Многие считают, что дизайн-система = UI kit, но это не так. Дизайн-система — это больше, чем просто набор компонентов в Figma. Вкратце, дизайн-система — это UI kit + код + документация.
Процесс выполнения задачи:
- Составление ТЗ — Проведение созвона с CTO, проектным менеджером и тимлидом команды фронтенда для обсуждения требований и ограничений.
- Исследование — Анализ конкурентов, получение обратной связи от пользователей, проведение интервью и других исследований для формулирования гипотез.
- Составление гипотез и прототипов — Приоритизация и проверка гипотез на «быстрых» прототипах, создание прототипа среднего уровня.
- Дизайн-чек — Проведение ревью с техническим директором и фронтенд-разработчиком для проверки и сравнения задуманного с реализацией.
- Детализация прототипов — Улучшение прототипов, проектирование состояний, работа с текстом, уточнение деталей в программе Figma, создание интерактивного прототипа.
- Разработка — Отправка задачи на разработку.
- Дизайн-ревью — Проверка задачи по чек-листу, описание ошибок и отправка на доработку.
- Выпуск фичи — Релиз функционала.
Не все задачи мы выполняли в рамках этого процесса. Например, исправление состояния элемента или ошибки в тексте мы исправляли без привлечения данного процесса.
База знаний
Мы разработали базу знаний для дизайнеров, чтобы структурировать и задокументировать процессы и материалы для разработки, а также упростить интеграцию дизайнеров в команду. В базу знаний входят:
- Статьи (этапы разработки задачи, работа с UI-китом, доступы к различным сервисам и т. д.)
- Чек-листы (проверка дизайнером)
- Полезные материалы (вариации логотипа, где найти шрифты и иконки, используемые плагины и т. д.)
Разработан регламент, согласно которому дизайнер перед сдачей работы должен проверить макет и предоставить его в соответствии с регламентом. Это позволяет легко расширять команду дизайнеров в проекте и экономить время на настройке процессов с командой разработчиков.
Таким образом, мы оптимизировали процесс предоставления макетов, упростили жизнь дизайнеров и разработчиков, присоединяющихся во время разработки проекта.
Структура в Figma
Ранее все задачи, дизайн и UI kit хранились в одном файле в Figma. Это было удобно для небольшого количества макетов, но стало сложно ориентироваться, когда их стало 50, 100 и более.
Поэтому мы перешли на профессиональный тариф в Figma и создали следующую структуру:
- Команда: добавили всю команду с доступом «can view», а только мы имели доступ на редактирование, чтобы избежать случайного повреждения файлов.
- Проекты: создали 2 проекта в команде: «Задачи« и »Актуальный дизайн».
- Файлы: в проекте «Задачи« мы хранили все файлы с задачами, а в проекте »Актуальный дизайн» — файлы с актуальным дизайном каждого раздела и UI kit.
Структура страницы файла с задачей:
- Обложка: содержит название задачи, краткое описание, статус и ссылку на задачу в Jira.
- Чек-лист: страница с чек-листом для проверки макетов дизайнером при проектировании.
- Дизайн: готовый дизайн с пояснениями для разработки, описывающий поведение ключевых экранов, блоков, взаимодействий и т. д.
- Прототип: страница с интерактивными прототипами для разработчиков.
- Исследования: все проведенные исследования в рамках задачи, включая анализ конкурентов, опросы, интервью и т. д.
- Проверка разработки: страница с чек-листом для проверки разработчиками верстки. Если есть ошибки, подробно описываем их на этой странице и задача отправляется на доработку.
- Наброски: хранятся здесь отклоненные наброски и решения, которые могут быть полезны в будущем.
В структуре страницы файла для задач по исправлению мелких ошибок (текст, состояние, баг и т. д.) есть только две страницы:
- Обложка
- Дизайн
Итоги:
Макетов было разработано: 250
Затрачено времени на проект: более 14 месяцев, по сей день мы ведем там работы
Количество людей, которые пользуются платформой: 19 000 пользователей
FullStats — это результат масштабных исследований и разработки команды продуктового дизайна. Мы учли потребности и требования наших клиентов, чтобы создать удобный и функциональный сервис.
Теперь вы можете воспользоваться FullStats и получить все необходимые инструменты для успешной работы на Wildberries.
А если вам требуется разработать дизайн для вашего бизнеса или вы хотите арендовать нас как дизайн команду, то мы с радостью готовы с вами посотрудничать.