Интернет-магазин одежды Teorema
Кейс  •  UX/UI-дизайн  •  UX-исследования  •  E-commerce  •  2018
Teorema Officewear — сеть магазинов женской одежды в Москве и Санкт-Петербурге с собственным производством и большим каталогом товаров. Задача — проектирование и дизайн mobile-first интернет магазина с полным каталогом, системой заказа и кабинета пользователя.

Моя часть
UX-исследования для нового продукта, создание информационной архитектуры, прототипирование и разработка дизайна для всего клиентского сервиса.
UX-исследования
Проект начался с интервью с бизнесом для формирования задач, требований к продукту, понимания уже имеющейся целевой аудитории в оффлайне, бизнес-процессов. Для сформированного MVP было решено подготовить прототип.

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

На основе отобранных конкурентов были произведены исследования в плане положительных паттернов поведения пользователя на экранах, были сформированы гипотезы в форме user stories для внедрения на этапе прототипирования.

Проведя глубинные интервью с ЦА были сформирован набор user stories. На данном этапе продумывается механика кросс-продаж и стадия заботы о пользователе в виде работы CRM, письмами с предложениями и акциями, скидки при повторном заказе и пр.

На основе анализа было принято решение сосредоточиться на разработке именно mobile-first продукта, т.к. это самый востребованный вид устройств.

Затем был разработан подробный прототип основных экранов на примере десктопной версии, на котором была отработана информационная архитектура, подача фотографий, блоки кросс-продаж и продумано основное поведение пользователя.
Дизайн
Специализация магазина — офисный стиль в одежде, который предполагает строгий деловой стиль в дизайне сайта с акцентом на фотографии товара, а интерфейс должен только помогать пользователям находить нужные товары, подсказывать на ключевых этапах и упрощать процесс покупки.

Особенность mobile first предполагает сосредоточение всей нужной пользователю информации и элементов интерфейса в рамках первого экрана просмотра страницы. А адаптация мобильных экранов на десктопные разрешения должна смотреться органично, узнаваемо и так же удобно.

Адаптация мобильного экрана к десктопным разрешениям

Каталог товара в мобильной версии также содержит крупные фотографии товара, фильтрация каталога, удобную корзину. В мобильной версии реализованы все user stories, которые планировали на этапе исследования.
В мобильной версии карточка товара имеет интуитивно понятной интерфейс, в дизайне реализованы основные положительные паттерны поведения пользователя.
Результат работы
Для проекта было разработано более 30 экранов основных шаблонов, собран UI-kit по стилю и элементам интерфейса. За счет продуманной информационной архитектуры и подробного проектирования в проекте удалось достичь хороших показателей KPI, заложенных на старте.

Проект в Figma

Back to Top