Дизайн
Dmitriy Ivanov
4532

Разработка интернет-магазина — весь процесс (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

{ "author_name": "Dmitriy Ivanov", "author_type": "self", "tags": [], "comments": 42, "likes": 47, "favorites": 341, "is_advertisement": false, "subsite_label": "design", "id": 124483, "is_wide": false, "is_ugc": true, "date": "Fri, 01 May 2020 17:54:59 +0300", "is_special": false }
Briskly
PR в стартапе: как и кому рассказать о себе после выхода на рынок?
Как попасть в топовые СМИ, зачем раскручивать основателя и почему вы должны быть первым, кто расскажет вашу историю…
Объявление на vc.ru
0
42 комментария
Популярные
По порядку
Написать комментарий...
15

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

Ответить
6

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

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

Ответить
0

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

Ответить
8

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

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

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

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

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

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

Ответить
0

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

Ответить
–2

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

Ответить
4

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

Ответить
–4

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

Ответить
3

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

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

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

Ответить
1

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить
2

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

Ответить
8

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

Ответить
8

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

Ответить
8

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

Ответить
5

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

Ответить
1

Это что за кейс такой? Почему бюджет 0? Зачем так делать? 

Ответить
0

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

Ответить
0

Ого. Промышленники и строители ведь очень продвинутые, у них цифровая трансформация, сапы и бентли, цифровые двойники, управление активами, платформы сервисов, они глобально конкурентоспособны. Или есть какие-то другие компании? А что значит "сидят на стандартном шаблоне"? И что значит "своя метрика и надо собирать базу"? Какие особенности там есть? Почему по одному делать опасно?

Ответить
0

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

Ответить
4

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

Ответить
0

ребята из qb, когда уже нормально будет реализована загрузка прайс-листов? вот у меня небольшой магазин, 20-30 тысяч позиций всякого, плюс я еще хочу перепродавать товар от поставщиков (а это уже ближе к 100к позиций), то есть быть витриной и тот же фулфиллмент делать. в качестве учетной системы в офлайне как стандарт используется какая-то 1с и кассовый софт, в любой момент есть остатки, цена, картинки. И мне допустим стало интересно загрузить все это в квикбай.такой кейс вы вообще не рассматривали?

Ответить
2

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

Ответить
3

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

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

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

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

Ответить
2

пеши исчо))

Ответить
2

🙏🏻☺️

Ответить
2

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

Ответить
1

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

Ответить
1

А я считаю что разработчики молодцы. Все по науке - и фокусгруппа, и исследования, и сиджиэм, и вайрфрейм, и сетка. Зеродизайн. Очень воздушно. Внимание на продукт. Доходчивая концепция. Интересно, какую cms/crm будут юзать?

Ответить
0

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

Ответить
1

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

Ответить
0

Воу!

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
–2

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

Ответить
0

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

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

Ответить
–2

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

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

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

Ответить
–2

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

Ответить

Прямой эфир