Веб-сервис
SaaS
B2B
SkyMetric: сервис аналитики товаров для продавцов
Задача
Спроектировать дизайн платформы, личного кабинета, браузерного расширения и посадочной страницы (End-to-end, from 0→1)
SkyMetric - это аналитический сервис крупнейшего маркетплейса Казахстана Kaspi, который предоставляет продавцам детальную аналитику по категориям, брендам, товарам маркетплейса, помогает рассчитать прибыльность и найти поставщика
О продукте
В начале работы над продуктом я изучила контекст и основные задачи пользователей с помощью фреймворка JTBD, а именно:
Графы помогли:
- читала тематические телеграм-каналы/чаты продавцов на Kaspi (о чём пишут, что волнует, с какими проблемами сталкиваются, как решают их);
- провела серию CustDev с текущими продавцами на Kaspi (8 человек);
- проанализировала полученную информацию и на её основе создала графы задач «как было» и «как стало» (см. подробнее ниже)
Графы помогли:
- понять основные задачи пользователей, как они их решают;
- подсветить, какие из этих задач важные и неудовлетворённые;
- сделать вывод о том, какие задачи сервис SkyMetric может решить за пользователей
01
Анализ контекста и аудитории
02
Анализ конкурентов
Следующим шагом я провела анализ прямых и косвенных конкурентов: MPStats, MarketGuru, Маяк, Keepa, Semrush.
Отметила подходящие решения, которые адаптировала под мою задачу:
Отметила подходящие решения, которые адаптировала под мою задачу:
- многоуровневая навигация
- интерфейсные подсказки
- гибкая визуализация данных на графиках
- контролируемая адаптация таблиц
- встроенная база знаний
Tooltips помогают лучше разобраться в элементах/наименованиях без перегрузки UI, что крайне важно в сложных аналитических продуктах
Основное навигационное меню размещено в sidebar слева, управление профилем в header, а контекстные вкладки (tabs) используются для переключения подуровней внутри разделов меню. Это решение снижает когнитивную нагрузку и помогает быстрее ориентироваться в интерфейсе
Графики позволяют легко считывать информацию благодаря акцентам на выбранных точках, возможности подсветки значений и разделению графиков по типам данных в разных виджетах. Это упрощает сравнение
На малых разрешениях (менее 1280px) используется фиксированная ширина контейнера и горизонтальный скролл, что предотвращает искажение структуры таблицы
Из интерфейса доступна база знаний, что позволяет пользователю самостоятельно находить ответы на основные вопросы
Калькулятор даёт возможность рассчитать ROI найденного товара.
Калькулятор в pop-up по 3 причинам:
Калькулятор в pop-up по 3 причинам:
- это помогает удержать пользователя на текущей странице, не меняя контекст
- размер калькулятора позволяет не выносить его на отдельную страницу
- скорость - переходы между страницами занимают больше времени, чем открытие pop-up
Калькулятор
Основные задачи профиля: управление подпиской (переход на Премиум тариф или отписка от него) и отслеживание истории платежей
Профиль пользователя
Этот раздел помогает увидеть, по каким брендам сколько продаж и за какие периоды, т.к. у некоторых продавцов есть разрешение продавать определённый бренд - так они могут выбрать какой бренд лучше продаётся
Раздел «Бренды»
С помощью раздела «Анализ товара» пользователь может посмотреть детальную аналитику по товару и найти поставщика
Раздел «Анализ товара»
Раздел «Поиск ниши» помогает решить пользователю следующие задачи:
- найти продающиеся товары в новых категориях;
- исключить товары с высокой конкуренцией
Раздел «Поиск ниши»
Затем создала под проект UI-кит, который включает в себя палитру, типографику, компоненты
UI-кит
После проведённых исследований я разработала wireframe для согласования структуры интерфейса
Wireframe
Проектирование
03
- Ширина контейнера таблицы фиксируется, начиная с 1280px и ниже, далее добавляются горизонтальный/вертикальный скролл + сворачивается side bar для экономии места
- встроенный калькулятор рядом с товаром - даёт посчитать прибыль, не уходя со страницы, не перебиваем контекст
- сортировка по всем параметрам в таблице
- полное название товара показываем в tooltip - экономим место в таблице для отображения большего объёма информации
- в таблице показываем превью фото товара - легче ориентироваться, визуальная подсказка
- кнопка выгрузки данных в формате .xlsx - даём возможность сохранить данные
У SkyMetric также есть браузерное расширение в Google Chrome. Его цель - дополнительный канал продаж. Оно бесплатное, но с ограниченным функционалом.
После того как пользователь его установил и включил, оно отображается
на странице товара Kaspi (под товаром).
Расширение работает по аналогии с разделом «Анализ товара»
После того как пользователь его установил и включил, оно отображается
на странице товара Kaspi (под товаром).
Расширение работает по аналогии с разделом «Анализ товара»
Браузерное расширение
Завершающий этап. Здесь я собрала кликабельный прототип в Figma и провела юзабилити-тестирование с пользователями, участвовавшими ранее в CustDev.
На основе результатов тестирования внесла следующие улучшения:
На основе результатов тестирования внесла следующие улучшения:
- добавила переход на страницу товара в Kaspi из раздела «Анализ товара» - пользователям это было важно для получения дополнительной информации по товару + это экономило им время самостоятельного поиска
- добавила больше интерфейсных подсказок
04
Тестирование
Проект прошёл через полный цикл продуктовой разработки — от анализа аудитории и конкурентов до проектирования и тестирования.
Все этапы я вела самостоятельно: принимала решения на основе полученных данных, проводила юзабилити-тестирование, продумывала детали, вносила улучшения, а также согласовывала все этапы с заказчиком.
Все этапы я вела самостоятельно: принимала решения на основе полученных данных, проводила юзабилити-тестирование, продумывала детали, вносила улучшения, а также согласовывала все этапы с заказчиком.
Результат
