oblozhka stati 1 1160x620 - UX/UI кейс: редизайн интернет-магазина женской одежды

В этой статье хочу вам рассказать о том, как я редизайнила свой первый e-commerce и поделиться полученным опытом и шишками. Эта статья будет полезна начинающим дизайнерам, потому что в ней я по шагам распишу, как проводилось UX-исследование, на чем базируется выбор визуального оформления сайта, и с чего лучше начать работу над интернет-магазином.

Это не коммерческий проект, а case study, который я выполняла во время обучения на курсах по веб-дизайну в школе A-level.

Задача

Задача заключалась в полном редизайне интернет-магазина женской одежды.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - UX/UI кейс: редизайн интернет-магазина женской одежды

А заключалась она в следующем:

  1. Исследование.
  2. Создание информационной архитектуры.
  3. Разработка и тестирование прототипа.
  4. Работа над визуальной составляющей сайта.

UX-исследование

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

Существует много различных способов провести UX-исследование. Мое состояло из следующих шагов:

  1. Разбор сайта “по косточкам”. На этом этапе важно понять, что не так у сайта с визуальной и функциональной составляющими, выписать каждую мелочь и определить для себя, почему конкретно этот сайт нуждается в редизайне.
  2. Анализ рынка и конкурентов. Сравнить, что у них хуже, а что лучше, какие функциональные преимущества есть у конкурентов.
  3. Портреты целевой аудитории и CJM (Customer Journey Map).
ux research big - UX/UI кейс: редизайн интернет-магазина женской одежды

Профессиональная подготовка UX-исследователей

Научитесь определять потребности пользователей! 3 месяца обучения, ведущие эксперты, удостоверение о повышении квалификации НИУ ВШЭ, менторство
Узнать подробнее

Шаг первый: анализ сайта.

Перед тем, как разносить в пух и прах интернет-магазин, я собрала референсы, просмотрела ряд известных онлайн магазинов, чтобы понять, как работают те или иные элементы сайтов, какие паттерны применяются в e-commerce, что сейчас в тренде, и как работает рынок. Насмотревшись на хорошие примеры, я приступила к разбору и анализу сайта.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - UX/UI кейс: редизайн интернет-магазина женской одежды

На этом шаге я получила представление о том, что стоит исправить на сайте, и какие блоки нуждаются в детальной проработке:

  1. Главная страница выглядела перегруженной: слишком много фотографий, крупных иконок. Мало “воздуха” и полезной информации, несколько блоков подряд дублируют друг друга, не сообщая ничего нового для пользователя.Нужно было заменить контент и структуру главной страницы: добавить баннер, на котором будет расположена информация о новинках, сезонных коллекциях, акциях и распродажах (до этого баннер отсутствовал, хотя это очень хороший способ сообщить покупателю о выгодах и акциях, тем самым стимулировать его совершить покупку), убрать повторяющиеся блоки.
  1. Добавить больше полезной информации о магазине (например, адреса и фотографии шоурумов). Магазин очень популярен в инстаграме, но если пользователь переходит на сайт из поиска – ему ничего не известно о магазине. Поэтому нужны блоки доверия, чтобы рассказать покупателю о магазине и его преимуществах.
  1. Фильтры и навигация не соответствовали контенту (например, при фильтре по цветам в каталоге, в поисковой выдаче будет не тот цвет, который был задан).
  1. Необходимо было упростить процесс регистрации, сделать возможным заводить аккаунт при помощи Google и Facebook.
  1. Согласно проверке на PageSpeed Insights скорость прогрузки сайта на декстоп устройстве составляет 2.7 сек., а на мобильных – 6.8 сек. Для быстрой загрузки сайта нужно было проработать контент и уделить внимание респонсиву.

6. Система поиска нуждалась в детальной проработке.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - UX/UI кейс: редизайн интернет-магазина женской одежды

Шаг номер два: анализ конкурентов.

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

Помимо этого, целевой сайт и сайты конкурентов тестировались потенциальными покупателями (по совместительству моими знакомыми).

Тестирование я проводила онлайн при помощи Zoom. Доброволец шарил экран, и мы вместе исследовали каждый блок, каждую страничку. Покупателю нужно было ответить на следующие вопросы:

  • что ты видишь?
  • что ты чувствуешь?
  • что ты можешь сделать?

В конце я просила оценить сайт по нескольким критериям по 5-ти бальной шкале.

Всего тест прошло три человека. Я выставила свой балл каждому из сайтов и по результатам свела таблицу со средней оценкой всех сайтов:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - UX/UI кейс: редизайн интернет-магазина женской одежды
Сравнительная таблица, красным в ней выделен e-commerce, над которым работала я. Среди своих конкурентов он занимает последнее место по среднему баллу

Важный вывод, который я сделала для себя на этом этапе – дизайнер ≠ пользователь. Часто мои мысли и аргументы отличались от того, что говорили пользователи. Я поняла, что важно прислушиваться к аудитории и делать не то, что нравится мне, а то, что будет удобно и понятно юзеру.

Шаг третий: портрет Целевой аудитории и CJM.

Целевая аудитория – это группа людей, которым нужен товар, который продает и продвигает сайт. Я для себя разделяю ЦА на три категории:

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

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

Взяв за основу 30 аккаунтов, я смогла составить 3 собирательных образа целевой аудитории:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - UX/UI кейс: редизайн интернет-магазина женской одежды
Персоны ЦА

Сценарий и cjm.

Customer journey map – это визуализация взаимодействия клиента с продуктом. Полезный инструмент, помогает определить проблемные области и увеличить объемы продаж.

Я попросила одного добровольца помочь мне. В режиме скайпа пользователю нужно было справиться со следующей задачей: подобрать себе платье на годовщину свадьбы и попробовать оформить заказ. 

На этом этапе выяснилось, что пользователь, зачастую, сталкивается с такими проблемами (в скобочках приведены живые комментарии):

  1. сложно найти товар определенной категории (“мне не совсем понятно, как работает поиск и почему мне сложно найти нужный товар”);
  2. система фильтрации не проработана и усложняет поиск товаров (“очень жаль, что нет деления платьев на подкатегории, мне теперь придется листать весь каталог и смотреть, есть ли у них вообще вечерние платья”);
  3. сайт не вызывает доверия у покупателя (“а где здесь отзывы можно глянуть? в смысле, нет отзывов?”; “если бы я не заказывала у них одежду через инстаграм, а первый раз бы попала на сайт, я бы не купила. потому что нет никакой инфы про магазин, я бы подумала, что у них очень плохого качества одежда”);
  4. нужно добавить больше информации о доставке и оплате (“а как понять, сколько доставка стоит?”).
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - UX/UI кейс: редизайн интернет-магазина женской одежды
Customer Journey Map

В понимании того, что такое CJM и как его строить мне очень помогла вот эта статья.

Архитектура сайта

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

Сделав наброски первой карты сайта, я поняла, что она не соответствует ожиданиям пользователя, что такая структура не будет удобной. Поэтому, я изучила товар более подробно, и смогла разделить его на подкатегории. Я структурировала информацию о компании и добавила несколько страничек, которые будут работать на доверие покупателя. Вот что получилось:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - UX/UI кейс: редизайн интернет-магазина женской одежды
Архитектура сайта

Прототипы и вайфреймы

Первые прототипы я нарисовала от руки, чтобы понять, как должен выглядеть сайт.

Главную страничку я попробовала отрисовать low fidelity в Figma, чтобы понять, как это может выглядеть. Было несколько вариантов, но я остановилась на этом:

Финальный вариант прототипа мне помогли выбрать знакомые, которые часто пользуются интернет-магазинами одежды, и мой ментор.

UI часть

Перед тем, как начать отрисовывать UI, я познакомилась с визуальными трендами, которые актуальны на данный момент и составила мудборд из референсов.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - UX/UI кейс: редизайн интернет-магазина женской одежды
Мудборд, который составлен из работ других талантливых дизайнеров или существующих онлайн-магазинов

Я большой фанат чистого дизайна в шведском стиле. Такое оформление отлично подходит для интернет магазинов одежды, в котором нужно делать акцент на фото и видео контент. Именно поэтому я выбрала такой стиль для своей работы. Покупатель не должен отвлекаться от просмотра вещей, поэтому интерфейс в моей работе максимально чистый.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - UX/UI кейс: редизайн интернет-магазина женской одежды

Мой результат можно посмотреть на Behance.

Итого

За полтора месяца работы над проектом я смогла добиться поставленных в задаче целей и полностью преобразить сайт. Я познакомилась с процессом UX исследований и лишний раз убедилась в том, что дизайн – это не только про красоту, но и про логику и удобство пользования.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - UX/UI кейс: редизайн интернет-магазина женской одежды

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Как мы хотели поменять один цвет и сделали редизайн

Хотели поменять один цвет — сделали редизайн Мы команда Carrot quest, сервиса…

Как я проектировал карточки для совершенно нового приложения Swiggy Daily

История проектирования списка товаров приложения Swiggy Daily. Это платформа, предлагающая блюда, приготовленные по-домашнему, небольшими кухнями

UX/UI-кейс: личный помощник студента

Кейс мобильного приложения, которое поможет новым студентам быстрее адаптироваться к университетской жизни