Веб-сервис

SaaS

B2B

SkyMetric: сервис аналитики
товаров для продавцов

Задача

Спроектировать дизайн платформы, личного кабинета, браузерного расширения и посадочной страницы (End-to-end, from 0→1)

SkyMetric - это аналитический сервис крупнейшего маркетплейса Казахстана Kaspi, который предоставляет продавцам детальную аналитику по категориям, брендам, товарам маркетплейса, помогает рассчитать прибыльность и найти поставщика.
Бизнес-модель Freemium, 2 варианта подписки: Бесплатный / Премиум

О продукте

Процесс работы

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

• читала тематические телеграм-каналы/чаты продавцов на Kaspi (о чём пишут, что волнует, с какими проблемами сталкиваются, как решают их);
• провела серию CustDev с текущими продавцами на Kaspi (8 человек);
• проанализировала полученную информацию и на её основе создала графы задач «как было» и «как стало» (см. подробнее ниже)

Графы помогли:

• понять основные задачи пользователей, как они их решают;
• подсветить, какие из этих задач важные и неудовлетворённые;
• сделать вывод о том, какие задачи сервис SkyMetric может решить за пользователей

01

Анализ контекста и аудитории

02

Анализ конкурентов

Следующим шагом я провела анализ прямых и косвенных конкурентов: MPStats, MarketGuru, Маяк, Keepa, Semrush.

Отметила подходящие решения, которые адаптировала под мою задачу:

• многоуровневая навигация
• интерфейсные подсказки
• гибкая визуализация данных на графиках
• контролируемая адаптация таблиц
• встроенная база знаний

Этот анализ помог мне не изобретать велосипед и взять за основу те решения, которые уже привычны пользователям (!) и используются крупными компаниями на рынке.

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

Позволяет рассчитать ROI найденного товара.

Калькулятор унесла в pop-up по 3 причинам:

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

Решения для калькулятора:

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

Основные функции профиля: управление подпиской (переход на Премиум тариф) и отслеживание истории платежей.

Решения для подраздела «История платежей»:

• небольшая таблица с основными данными по транзакциям
• возможность оплатить счёт из таблицы - сокращаем путь в оплату с помощью добавленного CTA
• пагинация внутри таблицы для ситуаций с большим количеством транзакций

Профиль
«История платежей»

Основные функции профиля: управление подпиской (переход на Премиум тариф) и отслеживание истории платежей.
Решения для подраздела «Управление подпиской»:

• tabs - для переключения между подразделами внутри страницы профиля
• подсветка верифицированного логина профиля - делаем статус аккаунта более очевидным/способствуем завершению ключевого действия (если нет верификации)
• возможность смены тарифа из виджета текущего тарифа - сокращаем путь к оплате Премиум тарифа
• доступные тарифы показываются в pop-up с помощью сравнительной таблицы - легко и быстро считывается разница
• функции тарифа открываются в новой вкладке, так как это более сложный сценарий с дополнительными действиями

Профиль
«Управление подпиской»

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

Раздел «Бренды» сделан по аналогии с разделом «Поиск ниши», только без виджета с фильтрами и с другими параметрами внутри таблицы.

Дополнительные решения для этого раздела:

• ограничение контента на бесплатном тарифе (стимул к покупке)

Раздел «Анализ товара» состоит из 1 основного виджета.
Решения:

• поиск по коду/ссылке товара - больше шансов найти нужный товар
• radio buttons - для периода данных
• check boxs - для параметров
• разделение графиков по типам данных - первостепенные/второстепенные для этого раздела
• акцент на выбранных точках графика, контрастная подсветка значений
• открытие страницы товара на маркетплейсе - для тех, кому важно увидеть ещё больше информации о товаре
• возможность поиска поставщика по фото - решаем за пользователя боль поиска
• увеличенные фото товара в pop-up по клику на превью
• калькулятор также доступен на этой странице и открывается в pop-up

Раздел «Поиск ниши» состоит из 2 основных виджетов: фильтры и таблица с данными по товарам. Основные решения для этой страницы:

• загрузка асинхронная - показывает расположение и объём загружаемого контента сразу, подсказываем, чего ожидать
• валидация инпутов - позволяет увидеть отклик интерфейса и понять, как всё работает
• выбранные фильтры показала через теги - легко воспринимать и редактировать
• выбор категорий в модальном окне с древовидной структурой + поиск внутри категории - чётко видно иерархию, есть возможность быстро найти нужную категорию
• период данных показала через radio buttons - даём понять, что можно выбрать только один период за раз

После проведённых исследований я принялась за разработку wireframe (чтобы согласовать структуру интерфейса) и визуального стиля продукта.
Флоу этого этапа:
wireframe ➝ согласование ➝ UI-kit + дизайн-концепция ➝ согласование ➝ дизайн 1 экрана ➝ согласование ➝ дизайн остальных экранов/всех состояний ➝ адаптивы

03

После отрисовки всех экранов и состояний подготовила адаптивы для разных устройств:

У SkyMetric также есть браузерное расширение в Google Chrome. Его цель - дополнительный канал продаж. Оно бесплатное, но с очень ограниченным функционалом.

После того как пользователь его установил и включил, оно отображается
на странице товара Kaspi (под товаром).

Расширение работает по аналогии с разделом «Анализ товара».
Решения:

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

Браузерное расширение

Завершающий этап. Здесь я собрала кликабельный прототип в Figma и провела юзабилити-тестирование с пользователями, участвовавшими ранее в CustDev.

На основе результатов внесла следующие улучшения:

• добавила переход на страницу товара в Kaspi из раздела «Анализ товара» - пользователям это было важно для получения дополнительной информации по товару + это экономило им время самостоятельного поиска
• добавила больше интерфейсных подсказок

Проект прошёл через полный цикл продуктовой разработки — от анализа аудитории и конкурентов до проектирования и тестирования.

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

В результате получилось создать понятный, обоснованный интерфейс, закрывающий задачи пользователей и приносящий бизнесу прибыль

Результат

Связаться со мной: