2023–2024 гг.
Проектирование UX/UI для онлайн-редактора карточек товаров
/ о проекте
Заказчик: Продуктовая команда, создающая сервис для продавцов на маркетплейсах.
Продукт: Mark It — онлайн-редактор для быстрого создания дизайна карточек товаров (Wildberries, Ozon, Яндекс Маркет) без навыков дизайна.
Продукт: Mark It — онлайн-редактор для быстрого создания дизайна карточек товаров (Wildberries, Ozon, Яндекс Маркет) без навыков дизайна.
/ задача
Разработать с нуля полный цикл взаимодействия пользователя с сервисом:
- Личный кабинет: создание и управление проектами, файлами, папками, корзиной, профилем и тарифами.
- Ядро продукта — редактор: набор инструментов для создания карточки (цвета, фигуры, текст, инфографика, изображения) с возможностью работы с несколькими холстами и шаблонами.
- Предпросмотр: отображение готовой карточки на трёх маркетплейсах в ПК и мобильной версии.
- Схема монетизации: продумать логику показа тарифов и ведения пользователя к покупке.
После регистрации пользователь попадает в личный кабинет, где может создавать новые проекты, как из готовых шаблонов, так и создавать свой индивидуальный дизайн с чистого листа. В личном кабинете можно производить разные действия с проектами, не заходя внутрь проекта.
В личном кабинете можно создавать папки и сортировать проекты и файлы по папкам для своего удобства, удалять, что ненужно и восстанавливать из корзины.
Пользователь так же может управлять своей подпиской и выбрать другой тариф во время текущего тарифа.
Перейдя в проект пользователь может создать свою карточку товара в редакторе, используя множество инструментов, такие как настройка цвета фона, добавление фигур, текста, готовой инфографики или создать свою инфографику и добавить свои изображения. Слева от холста панель с рядом холстов проекта, который имитирует панель набора изображений товара на маркетплейсах. Можно добавлять и удалять новые холсты и при этом видеть заранее, как примерно это будет выглядеть на площадке.
Так же можно воспользоваться готовой галереей шаблонов, отредактировать выбранный шаблон под свой товар, а также создать свой шаблон, сохранив его в личной галерее шаблонов для будущего использования.
В режиме предпросмотра можно увидеть, как картинка будет смотреться на трех популярных маркетплейсах в ПК и мобильной версии, на странице товара и в плитке товаров.
/ схема ведения к покупке
Необходимо было продумать, как и когда появляется информация о тарифах в интерфейсе, сколько осталось проектов в тарифе и схему ведения к покупке. Создала схему для того, чтобы разработчики все правильно реализовали в сервисе.
/ мои решения и подход
Провела глубокий анализ конкурентов и смежных сервисов (Tilda, Readymag, Google Презентации), чтобы взять лучшие практики и добавить уникальные решения.
Спроектировала логику личного кабинета с полным набором функций управления проектами, файлами, папками и корзиной.
Разработала интерфейс редактора, включающий: работу с холстом, настройку фона, добавление фигур, текста, готовой и пользовательской инфографики, загрузку изображений.
Реализовала систему шаблонов — галерея готовых шаблонов, возможность редактирования и сохранения собственных.
Продумала панель управления холстами (имитация набора изображений на маркетплейсе) и режим предпросмотра для разных площадок.
Спроектировала схему монетизации — когда и как пользователь видит информацию о тарифах, сколько осталось проектов, и как его вести к покупке.
Выступила арт-директором при разработке логотипа, предложив концепцию «маркировки-стикера», отсылающую к названию и смыслу сервиса.
Разработала цветовое решение (фиолетовый как симбиоз цветов Wildberries и Ozon) для визуального единства с экосистемой маркетплейсов.
Спроектировала логику личного кабинета с полным набором функций управления проектами, файлами, папками и корзиной.
Разработала интерфейс редактора, включающий: работу с холстом, настройку фона, добавление фигур, текста, готовой и пользовательской инфографики, загрузку изображений.
Реализовала систему шаблонов — галерея готовых шаблонов, возможность редактирования и сохранения собственных.
Продумала панель управления холстами (имитация набора изображений на маркетплейсе) и режим предпросмотра для разных площадок.
Спроектировала схему монетизации — когда и как пользователь видит информацию о тарифах, сколько осталось проектов, и как его вести к покупке.
Выступила арт-директором при разработке логотипа, предложив концепцию «маркировки-стикера», отсылающую к названию и смыслу сервиса.
Разработала цветовое решение (фиолетовый как симбиоз цветов Wildberries и Ozon) для визуального единства с экосистемой маркетплейсов.
/ результат моей работы
- Полностью спроектирован и передан в разработку полный функционал сервиса (личный кабинет, редактор, предпросмотр, схема монетизации).
- Разработаны все ключевые пользовательские сценарии: от регистрации и создания проекта до экспорта готовой карточки.
- Создан уникальный интерфейс, сочетающий лучшие практики конкурентов и собственные находки, адаптированный под потребности продавцов на маркетплейсах.
- Продумана визуальная стратегия и цветовое решение, связывающее сервис с экосистемой крупнейших площадок.
- Все макеты и логика переданы разработчикам для реализации.