Разработка интернет-магазина — весь процесс (UX/UI, Product Design)

Все этапы разработки абсолютно нового продукта в области продажи чая.

Dmitriy Ivanov

HaloTea — компания, которая занимается продажей чая из стран Азии. Она имеет сеть чайных магазинов в 5 странах мира и собственные чайные плантации в Китае и Индии.

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

Этапы

1. Аналитика: конкурентный анализ, анализ рынка, интервью;

2. User eXperience: UX person, CJM, User flow, Wireframe;

3. User Interface: десктопная версия, мобильная версия.

Аналитика

Конкурентный анализ

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

Разработка интернет-магазина — весь процесс (UX/UI, Product Design)

Анализ рынка

В качестве объекта исследования выбраны лидеры рынка, выявлена основная категория покупателей и эффективные каналы привлечения трафика.

Разработка интернет-магазина — весь процесс (UX/UI, Product Design)

Интервью

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

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

Разработка интернет-магазина — весь процесс (UX/UI, Product Design)

User eXperience

UX person

Для получения представления о покупателях, созданы две персоны мужского и женского пола с разными ожиданиями от магазина.

Разработка интернет-магазина — весь процесс (UX/UI, Product Design)

Custоmer Journey Map (CJM)

На основе ожиданий целевой аудитории проделан путь покупателя на сайте лидера рынка, определены эмоции и выявлены сложности для улучшения точек контакта клиента и магазина «HaloTea».

Dmitriy Ivanov

Wireframes

Разработка интернет-магазина — весь процесс (UX/UI, Product Design)

User Interface

Каталог товаров & Страница товара

Dmitriy Ivanov
Разработка интернет-магазина — весь процесс (UX/UI, Product Design)

Каталог товаров & Страница товара

Мобильная версия

Оформление заказа

Разработка интернет-магазина — весь процесс (UX/UI, Product Design)

Пункты самовызова

Личный кабинет

Разработка интернет-магазина — весь процесс (UX/UI, Product Design)

Иные макеты

Style Guide

Разработка интернет-магазина — весь процесс (UX/UI, Product Design)

Поиск

Dmitriy Ivanov
Разработка интернет-магазина — весь процесс (UX/UI, Product Design)

Cпасибо за то, что уделили время данной статье!

Ознакомиться с проектом более детально и поддержать его вы можете на Behance

60
42 комментария