Проектирование и разработка дизайна интернет-магазина Megatop.by

Спроектировать и разработать дизайн интернет-магазина Megatop.by

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

Работа велась по водопадной модели. Первичный план, без этапов согласования и правок, содержал 7 этапов. Примерная разбивка этапов была такой:

1. Аудит текущего сайта
2. Анализ конкурентов
3. Опрос аудитории
4. Разработка персонажей и user stories
5. Разработка прототипов
6. Разработка макетов дизайна
7. Правки и доработка макетов  

На этапе аудита мы определили основную аудиторию сайта, разобрались с поведением пользователей на сайте и сделали определенные выводы

Провели опрос пользователей

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

В процессе исследования выяснилось, что даже профессиональные термины, например "пронация" и "супинация", могут быть незнакомы широкой аудитории — это важно учитывать при проектировании интерфейса.

Возраст аудитории

• 25–34 лет — 54,9%
• 35–45 лет — 22,0%
• 18–24 года — 15,9%
• 46–55 лет — 4,9%
• 56 лет и старше — 2,3%

Пол

• Женский — 85,4%
• Мужской — 14,6%  

Опросили 600 респондентов

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

Какие критерии наиболее важны при покупке обуви?

• Цена / качество — 46,2%
• Комфорт / удобство — 26,9%
• Внешний вид / дизайн — 17,7%
• Натуральные материалы — 6,9%
• Размер
• Акции / распродажи  

Портрет пользователя и сценарии поведения

На основе аудита и опроса респондентов:

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

Средний уровень дохода определяли косвенно — на основе данных о стоимости мобильных устройств пользователей. Такой метрики не существовало, поэтому подход формировали в процессе, сверяя результаты с аналитикой и данными опроса.

Причины отказа от покупки и решения

На основе сценариев пользователя описали ключевые причины, из-за которых покупка не происходила, и сразу зафиксировали решения:

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

Выводы по результатам

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

Mobile first

С учетом количества посетителей с мобильных устройств при разработке прототипов и дизайна руководствовались принципом mobile first.

Прототипы в данном случае это макеты со стилистикой но без цвета.

После согласования и утверждения прототипов приступили у отрисовке в цвете