Концепт лэйаута Ozon Seller
Так исторически сложилось, что Ozon Seller на разных устройствах очень разный. Это «размывало» опыт клиента. Я отбросила все реалии с техническими ограничениями и подумала над новой версией продукта
Что лечила
-
-
Проблема
-
Возможное решение
-
-
-
Проблема
Кликабельный серый
Так мы назвали принцип, согласно которому элементы, имеющие серый фон, являются кликабельными. Крупные серые карточки часто выглядели информационными, а не интерактивными. Конверсия в кнопки всегда была выше
-
Возможное решение
Явные кнопки для переходов и действий
Блоки первого уровня не должны быть кликабельными. Только для группировки контента. Если нужен переход или действие, необходимо добавить явную ссылку, кнопку или иконку
Кликабельные серые карточки
-
-
-
Проблема
Разная стилистика
Ozon Seller создавался на белом фоне с островами с серой рамкой. Мобильное приложение создавалось позже и с упором на приложение для покупателей — с серым фоном и белыми островами. Типографика также была разной
-
Возможное решение
Универсальный UI
Единая стилистика для веб версии и мобильных приложений. Это могло бы создать ощущение единого продукта для пользователя, а командам помочь сократить time2market
Разный UI в web-версии и мобильной
-
-
-
Проблема
Разные функции и контент
Веб версия часто делалась раньше, чем мобильная и предлагала гораздо больше возможностей и данных. Механики отличались и пользователи путались в функционале
-
Возможное решение
Универсальный UX
Идентичный контент, навигация и паттерны в веб и мобильных приложениях. Это могло бы снизить когнитивную нагрузку на пользователя, ускорить его работу и повысить уровень удовлетворённости
-
-
-
Проблема
Отсутствие тёмной темы в веб версии
Тёмную тему в веб версии очень просили пользователи. На момент работы над задачей она не была реализована
-
Возможное решение
Поддержка темизации
Семантическая палитра и поддержка темизации в веб версии. По аналогии с мобильным приложением
-
-
-
Проблема
Промо без акцента
Элементы управления, как правило, окрашены в цвет бренда — синий. Такой цвет сам по себе акцентный и когда возникла необходимость внедрения рекламы на страницы, она не выделялась в достаточной мере
-
Возможное решение
Нейтральные элементы управления
Нейтральные оттенки без цветового тона, но с разной контрастностью, для обычных сценариев и цветные, яркие, возможно с градиентом для промо. Это позволило бы лучше управлять вниманием
-
Концепция
-
Подготовила универсальные шаблоны виджетов для web и mobile. Серые карточки заменила на кнопки для явных действий и ссылки для явных переходов. Использовала единую типографику и поддержала темизацию
В концепте использованы
Иллюстрации Максима Ткаченко
Иконки Андрея Ковалева
Лучшие!
В концепте использованы
Иллюстрации Максима Ткаченко
Иконки Андрея Ковалева
Лучшие!
Результат
-
В Ozon Seller концепция не получила развития, однако в Ozon.ru присмотрелись к некоторым решениям и постепенно их внедряют