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

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

Dmitriy Ivanov

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

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

Этапы

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

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

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

Аналитика

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

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

Анализ рынка

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

Интервью

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

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

User eXperience

UX person

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

Custоmer Journey Map (CJM)

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

Dmitriy Ivanov

Wireframes

User Interface

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

Dmitriy Ivanov

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

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

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

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

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

Иные макеты

Style Guide

Поиск

Dmitriy Ivanov

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

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

0
42 комментария
Написать комментарий...
Андрей Епанчинцев

Скажите мне, что они там анализируют в UX UI? Имитация бурной многоэтапной деятельности с привлечением овердохуя узкоспециализированных людей, а на выходе классический ИМаг...? Нахера столько пустых трудозатрат и сжигания клиентских денег / времени, когда на выходе у тебя шаблон магазина https://next.aspro-partner.ru

Ответить
Развернуть ветку
Alexey Praskovin
Имитация бурной многоэтапной деятельности с привлечением овердохуя узкоспециализированных людей, а на выходе классический ИМаг...?

Да. А как им еще обосновать, куда делись деньги?

Ответить
Развернуть ветку
Андрей Епанчинцев

Подстраиваться под давно изменившийся рынок сайтостроения. А пока это подход канувший в лету году так в 2012

Ответить
Развернуть ветку
Yury

Что вы имеете ввиду под 2012, просто интересно?
Напомню,  responsive design появился примерно в 2013 году и вот тогда примерно и началось, то что мы называем современным веб-дизайном (и то кажется для многих это открытие).

А кейс, да, попытка натянуть современный методы на обычный веб-дизайн. Проблема UX (как отдельной дисциплины) в том, что его все пытаются продать или внедрить, но мало кто понимает зачем и как. Типа "ну актуально же, у всех прогрессивных чуваков есть."

Большинство современных UX/Product дизайнеров все также занимаются рисованием прямоугольников, только к красивым кнопкам добавляется красиво нарисованная схема "юзер кликнул X увидел Й". Зато в названии должности можно дописать пару баззвордов и за счет этого накинуть себе стоимость.

В остальном цивилизованном мире, кстати, не лучше. Только там более профессионально себя продают (хоть как то объясняют зачем они нужны бизнесу) и могут связно выступать у доски с цветными стикерами, вполне успешно выдавая это за  human centered design и "creative problem solving". 

У нас же все выглядит как то наивно, если не сказать дремуче. Часто даже английского языка нет за пределами популярной терминологии да и на русском тексты хуже только у маркетологов.  О понимании технологий вообще можно не упоминать. Набор кнопок с полями, формами и пр. уже гордо зовется «дизайн системой», как правило без понимания, что это такое (тема хайповая), зачем нужно и как работает за пределами Фигмы (не забывая упомянуть насколько пользоваться фигмой прогрессивно и модно). 

—————
Что-то увлекся, сорри. Просто накипело. Надо было, наверное статью написать, но пусть тут будет. Автору желаю учится дизайну посерьезнее, ну или сразу становиться инфобизнесменом и загонять про ценность UX со сцены не тратя время на рисование экранов (тут такой недавно статью выдал, там пиздец, зато он консультировал Тинькофф Банк, даже пруфы есть). 

Ответить
Развернуть ветку
Alexey Praskovin

А чего на этом рынке изменилось, коли не секрет?

Ответить
Развернуть ветку
Андрей Епанчинцев

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

Ответить
Развернуть ветку
Vladimir Goncharov

Кек, не надо свой интернет-ларек равнять с сайтами, куда ходят миллионы. Даже +2% конверсии на таком обьеме даст БОЛЬШЕ денег бизнесу.

Ответить
Развернуть ветку
Андрей Епанчинцев

Какая конверсия, о чем вы?))) если на этот сайт ходят миллионы - тем более никуда не денутся. Или вы думаете, что на сайте с хорошими ценами, крутым сервисом и огромным ассортиментом ухудшится конверсия из-за неправильного оттенка кнопки «купить»?)) Спешу вас огорчить

Ответить
Развернуть ветку
Yury

Ну к кстати не в оттенки кнопке дело, это утрирование. Если форма покупки, например, неудобная то немало людей отвалится. Всякие способы привлечь к повторной покупке могут работать хорошо, а могут начать раздражать (восприниматься как спам) и покупатели не возвращаются. Промо организовано неграмотно (выдача недостаточно персонализирована), карточки товаров плохо оптимизированы под мобильные, структура каталога избыточная (не удобно находить нужный товар), реклама неуместна/мешает а она там потому маркетолог продавил ее побольше везде насовать, да много всего, на самом деле. Всегда есть что улучшить. И если взять какой то один небольшой момент, то это кажется, ерунда, но если исправить сразу несколько то впечатление уже заметно меняется.

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

Но вы правы в том, что полностью/с нуля сейчас делать смысла практически нет. 

Ответить
Развернуть ветку
Vladimir Goncharov

Еще раз - вопрос про +2% к 100. На большом обьеме это очень существенные деньги, которые уходят от продавца. И да, клиент денется, те самые 1-2 процента. Просто вы обьемы не понимаете.
По поводу цвета - конечно ухудшится, только не в в том порядке, как вам думается. Сами картинки товаров должны быть определенной цветовой насыщенности и не выбиваться из общей гаммы, иначе их начнут хуже покупать. При этом кнопка должна быть максимально совпадающей по гамме и тону со всеми представленными товарами, что как бы на сотне-другой тысяч разнообразных товаров становится проблемой. 

Ответить
Развернуть ветку
Андрей Епанчинцев

12 лет в екоме, мне эту шнягу не продадите. Мелкому и среднему бизнесу этот подход противопоказан. Скажу более того - даже крупному надо с чего-то запуститься и только потом А/Б тесты

Ответить
Развернуть ветку
Stan Ezersky

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

Ответить
Развернуть ветку
iMAX

А как он изменился? Что на этом рынке сейчас происходит? Можно в двух словах?

Ответить
Развернуть ветку
vysota.digital

Для начала, в данном примере я лично не увидел серьезных трудозатрат, наверное вы не сталкивались с серьезным исследованием с анкетированием 100+ пользователей и разбором бизнеса/экономической модели/конкурентов по винтикам. Но имеено благодаря такому подходу, первое - можно узнать "боли" клиентов и закрыть их либо на стороне решения, либо на сторое бизнеса, а второе - данные знания помогут сэкономить на этапе маркетинга. Уже есть готовые портреты, вводные данные для запуска +- вменяемой рекламы. Автору плюс, отличный подход!

Ответить
Развернуть ветку
Алексей Бабенков

Моим глазам больно от отсутствия контраста

Ответить
Развернуть ветку
dlya yout

Как поклонник чая я возмущен. У меня очень устойчивое подозрение, что ни одного человека который в месяц тратит на чай хотя бы 1.5-2т.р Вы не удосужились опросить. Реально бомбануло от персоны №1 (вы когда последний раз близко общались с секретаршами - пакетированный newby/greenfield вот предел мечтаний). Если заказчик примет эту концепцию которая да 90% оторвана от ожиданий целевой аудитории через полгода проект закроет.

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Стройиндустрия

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

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Стройиндустрия

тяжелая промышленость и строительный бизнес. Эти сферы очень консервативны особенно в восточной части страны, если на разработку еще начали выделять то на UX/UI нет. 
Да есть такие компании как Леруа и Северсталь . Но первый маркетплей, а второй B2B, что не очень актуально. Металл(_|о)профиль сидят на  стандартном шаблоне. 
Ближе всех технониколь, и там есть свои недостатки, да и по одному делать опасно, у слишком сильное имя.
В остатке только своя метрика и надо собирать базу. 

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Стройиндустрия

По одному нельзя, потому что могла сыграть магия имени,  или просто случайность, а на случайность не охото полагаться. Своя метрика - я назвал то что есть сейчас(посетители, клики, выполненные цели)  и нужна достаточно большая выборка(из наблюдений прошлого сезона на трафик погода влияет не значительно, хотя строительство и погода вроде как  очевидно).  Стандартный шаблон - это и есть стандартный шаблон вот что установилось то и оставили, либо из топа templatemonster в рубрике( к примеру - metallprofil.ru. - аля битрикс деволт синяя). У производителей да.  У них все хорошо внутри, автоматизация и учет. они хорошо работают B2B. Но B2C и M2C(производство-клиент) храмает. А если ты небольшой ритейл в небольшой бурятии...  Для примера хочется построить из лего автомобиль. Завод делает все делали отдельно (ни какой комплектовки а по другому ни как). Вот и заходим мы на наш абстрактный сайт "ЛЕГОА" и видим колеса, квадратные элементы, прямоугольные, плоские. Уходим с сайта и идем искать какие детали нам нужны. И возможно мы вернемся на сайт, если конечно какой-нибудь сайт "Легович" не переманит. 

Ответить
Развернуть ветку
QUICKBUY

Отличный макет! Мы с удовольствием реализовали бы его в QuickBuy, если захотите

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
QUICKBUY

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

Ответить
Развернуть ветку
Dmitriy Ivanov
Автор

Ребята, спасибо за обратную связь 🙂

Наблюдать за этим всем было забавно. Вступать в дискуссии не стал принципиально, ибо не увидел ни одного вопроса адресованного лично мне, как автору 🙏🏻

Данная статья действительно несёт в себе характер кейса, с перечислением основных процессов и демонстрацией итога, не более 🙃

Далее по плану отдельные, детальные статьи, с подробным описанием и демонстрацией каждого этапа 🙂

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Dmitriy Ivanov
Автор

🙏🏻☺️

Ответить
Развернуть ветку
Владислав Игнатьев

Вау, ребята придумали интернет-магазин. Я думаю теперь каждую нишу нужно освещать.

Ответить
Развернуть ветку
Антон Фомин

Почему бы и нет?

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Андрей Епанчинцев

А на выходе как остальные магазины. Вопрос: а нахера столько работы делать, чтобы получить как обычно? 😂 Вопрос риторический, для меня понятно, что есть желание загрузить работой все рты, даже там где они и не нужны

Ответить
Развернуть ветку
Artem Latynof

Вода.. Из разряда мема про сову - сперва рисуем овал, а потом остальную сову.

Ответить
Развернуть ветку
Lucas Deutscher

Воу!

Ответить
Развернуть ветку
Тимофей Деменёв

По моему слишком медленная анимашка

Ответить
Развернуть ветку
Dmitry Trubnikov

UX – это когда вот так
https://articles.uie.com/three_hund_million_button/

Ответить
Развернуть ветку
Yury

Да тоже буллщит, кстати. 
Можно привести в пример факапы фэйсбука с настройками приватности, из за которых было множество скандалов и люди пострадали. Хотя казалось бы это фэйсбук,  у них там каждая кнопочка проходит A>Z тесты на миллионной выборке. 

Ответить
Развернуть ветку
Камиль Калимуллин

Да, возможно, кто-то может позволить себе полный цикл разработки, но быстрее и проще использовать готовые конструкторы по запуску интернет-магазинов, типа advantshop.net 

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Алексей Лоскутов

Делал аналог такого магазина конкурентам по России. Только чая матча. Все красивые текста о ux в этой статье являются не более чем словами. Такая поверхностная аналитика создаёт только ложные гипотизы и никак не отображает реальную ситуацию. Например 2 карточки пользовался узконаправоенны ничего не дадут, нужно больше и реальных, на из основе пишутся общие карточки которые могут косвенно влиять на аналитику. Но не быть основополагающей. Исследование конкурентов?) найти у кого есть какие плюшечки и фишечки и перенять их. Это не исследование вовсе

Ответить
Развернуть ветку
Lucas Deutscher

а вы серьезно думаете, что вам вот так возьмут и выложат все реальные цифры, показатели, гипотезы и всю внутреннюю информацию?)

автор вроде четко дал понять, что перечисленные этапы не более, чем просто список того, что сделано, а как и каковы реальные аналитические данные — информация достаточно конфиденциальная и внутренняя, вам, как «аналитику» вроде стоит понимать это)

Ответить
Развернуть ветку
Алексей Лоскутов

Думаете это повод называть выдумку аналитикой ? И пытаться выставить себя экспертом на базе просто раскинутых мозгов на коленке ?

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

Если не умеете делать аналитик не делайте. Проект вида. Я умею. Но не покажу как. Да и вам ничего не скажу. Пахнет лютым инфоцыганством. Если она уже терпит жесткое падение. То в нашей сфере она и не думало падать

Ответить
Развернуть ветку
Алексей Лоскутов

Я не аналитик. Я просто знаю на практике как это происходит. И такой подход к аналитике никого отношения не имеет

Ответить
Развернуть ветку
39 комментариев
Раскрывать всегда