Разработка интернет-магазина — весь процесс (UX/UI, Product Design)
Все этапы разработки абсолютно нового продукта в области продажи чая.
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».
Wireframes
User Interface
Каталог товаров & Страница товара
Каталог товаров & Страница товара
Оформление заказа
Пункты самовызова
Личный кабинет
Иные макеты
Style Guide
Поиск
Cпасибо за то, что уделили время данной статье!
Ознакомиться с проектом более детально и поддержать его вы можете на Behance
Скажите мне, что они там анализируют в UX UI? Имитация бурной многоэтапной деятельности с привлечением овердохуя узкоспециализированных людей, а на выходе классический ИМаг...? Нахера столько пустых трудозатрат и сжигания клиентских денег / времени, когда на выходе у тебя шаблон магазина https://next.aspro-partner.ru
Да. А как им еще обосновать, куда делись деньги?
Подстраиваться под давно изменившийся рынок сайтостроения. А пока это подход канувший в лету году так в 2012
Что вы имеете ввиду под 2012, просто интересно?
Напомню, responsive design появился примерно в 2013 году и вот тогда примерно и началось, то что мы называем современным веб-дизайном (и то кажется для многих это открытие).
А кейс, да, попытка натянуть современный методы на обычный веб-дизайн. Проблема UX (как отдельной дисциплины) в том, что его все пытаются продать или внедрить, но мало кто понимает зачем и как. Типа "ну актуально же, у всех прогрессивных чуваков есть."
Большинство современных UX/Product дизайнеров все также занимаются рисованием прямоугольников, только к красивым кнопкам добавляется красиво нарисованная схема "юзер кликнул X увидел Й". Зато в названии должности можно дописать пару баззвордов и за счет этого накинуть себе стоимость.
В остальном цивилизованном мире, кстати, не лучше. Только там более профессионально себя продают (хоть как то объясняют зачем они нужны бизнесу) и могут связно выступать у доски с цветными стикерами, вполне успешно выдавая это за human centered design и "creative problem solving".
У нас же все выглядит как то наивно, если не сказать дремуче. Часто даже английского языка нет за пределами популярной терминологии да и на русском тексты хуже только у маркетологов. О понимании технологий вообще можно не упоминать. Набор кнопок с полями, формами и пр. уже гордо зовется «дизайн системой», как правило без понимания, что это такое (тема хайповая), зачем нужно и как работает за пределами Фигмы (не забывая упомянуть насколько пользоваться фигмой прогрессивно и модно).
—————
Что-то увлекся, сорри. Просто накипело. Надо было, наверное статью написать, но пусть тут будет. Автору желаю учится дизайну посерьезнее, ну или сразу становиться инфобизнесменом и загонять про ценность UX со сцены не тратя время на рисование экранов (тут такой недавно статью выдал, там пиздец, зато он консультировал Тинькофф Банк, даже пруфы есть).
А чего на этом рынке изменилось, коли не секрет?
Нахер никому не уперлась вся вот эта индивидуальная разработка. Запустил готовое решение, напильником под себя допилил и полетел. А вот что в кейсе выше - херня полная, больше денег у бизнеса от этих трудозатрат не будет. (Я про электронную коммерцию)
Кек, не надо свой интернет-ларек равнять с сайтами, куда ходят миллионы. Даже +2% конверсии на таком обьеме даст БОЛЬШЕ денег бизнесу.
Какая конверсия, о чем вы?))) если на этот сайт ходят миллионы - тем более никуда не денутся. Или вы думаете, что на сайте с хорошими ценами, крутым сервисом и огромным ассортиментом ухудшится конверсия из-за неправильного оттенка кнопки «купить»?)) Спешу вас огорчить
Ну к кстати не в оттенки кнопке дело, это утрирование. Если форма покупки, например, неудобная то немало людей отвалится. Всякие способы привлечь к повторной покупке могут работать хорошо, а могут начать раздражать (восприниматься как спам) и покупатели не возвращаются. Промо организовано неграмотно (выдача недостаточно персонализирована), карточки товаров плохо оптимизированы под мобильные, структура каталога избыточная (не удобно находить нужный товар), реклама неуместна/мешает а она там потому маркетолог продавил ее побольше везде насовать, да много всего, на самом деле. Всегда есть что улучшить. И если взять какой то один небольшой момент, то это кажется, ерунда, но если исправить сразу несколько то впечатление уже заметно меняется.
И большие или просто дальновидные магазины это улучшают. Сам пользуюсь несколькими крупным и периодически замечаю, что где то они допиливают, становится удобнее, быстрее, проще.
Но вы правы в том, что полностью/с нуля сейчас делать смысла практически нет.
Еще раз - вопрос про +2% к 100. На большом обьеме это очень существенные деньги, которые уходят от продавца. И да, клиент денется, те самые 1-2 процента. Просто вы обьемы не понимаете.
По поводу цвета - конечно ухудшится, только не в в том порядке, как вам думается. Сами картинки товаров должны быть определенной цветовой насыщенности и не выбиваться из общей гаммы, иначе их начнут хуже покупать. При этом кнопка должна быть максимально совпадающей по гамме и тону со всеми представленными товарами, что как бы на сотне-другой тысяч разнообразных товаров становится проблемой.
12 лет в екоме, мне эту шнягу не продадите. Мелкому и среднему бизнесу этот подход противопоказан. Скажу более того - даже крупному надо с чего-то запуститься и только потом А/Б тесты
У мелкого бизнеса тупо нет денег оплачивать весь цикл разработки с исследованиями в полном масштабе. Да и если бизнес только стартует в интернете, откуда метрики и прочие статистические данные для аналитики?
А как он изменился? Что на этом рынке сейчас происходит? Можно в двух словах?
Для начала, в данном примере я лично не увидел серьезных трудозатрат, наверное вы не сталкивались с серьезным исследованием с анкетированием 100+ пользователей и разбором бизнеса/экономической модели/конкурентов по винтикам. Но имеено благодаря такому подходу, первое - можно узнать "боли" клиентов и закрыть их либо на стороне решения, либо на сторое бизнеса, а второе - данные знания помогут сэкономить на этапе маркетинга. Уже есть готовые портреты, вводные данные для запуска +- вменяемой рекламы. Автору плюс, отличный подход!
Моим глазам больно от отсутствия контраста
Как поклонник чая я возмущен. У меня очень устойчивое подозрение, что ни одного человека который в месяц тратит на чай хотя бы 1.5-2т.р Вы не удосужились опросить. Реально бомбануло от персоны №1 (вы когда последний раз близко общались с секретаршами - пакетированный newby/greenfield вот предел мечтаний). Если заказчик примет эту концепцию которая да 90% оторвана от ожиданий целевой аудитории через полгода проект закроет.
Комментарий недоступен
Это конечно хорошо и красиво, когда 5 стран и свои плантации.
А как быть когда бюджет 0, и даже по конкурентам не проведешь анализ( используют шаблоны других областей).
Комментарий недоступен
тяжелая промышленость и строительный бизнес. Эти сферы очень консервативны особенно в восточной части страны, если на разработку еще начали выделять то на UX/UI нет.
Да есть такие компании как Леруа и Северсталь . Но первый маркетплей, а второй B2B, что не очень актуально. Металл(_|о)профиль сидят на стандартном шаблоне.
Ближе всех технониколь, и там есть свои недостатки, да и по одному делать опасно, у слишком сильное имя.
В остатке только своя метрика и надо собирать базу.
Комментарий недоступен
По одному нельзя, потому что могла сыграть магия имени, или просто случайность, а на случайность не охото полагаться. Своя метрика - я назвал то что есть сейчас(посетители, клики, выполненные цели) и нужна достаточно большая выборка(из наблюдений прошлого сезона на трафик погода влияет не значительно, хотя строительство и погода вроде как очевидно). Стандартный шаблон - это и есть стандартный шаблон вот что установилось то и оставили, либо из топа templatemonster в рубрике( к примеру - metallprofil.ru. - аля битрикс деволт синяя). У производителей да. У них все хорошо внутри, автоматизация и учет. они хорошо работают B2B. Но B2C и M2C(производство-клиент) храмает. А если ты небольшой ритейл в небольшой бурятии... Для примера хочется построить из лего автомобиль. Завод делает все делали отдельно (ни какой комплектовки а по другому ни как). Вот и заходим мы на наш абстрактный сайт "ЛЕГОА" и видим колеса, квадратные элементы, прямоугольные, плоские. Уходим с сайта и идем искать какие детали нам нужны. И возможно мы вернемся на сайт, если конечно какой-нибудь сайт "Легович" не переманит.
Отличный макет! Мы с удовольствием реализовали бы его в QuickBuy, если захотите
Комментарий недоступен
сейчас как раз ведется работа, по наращиванию функций для удобства загрузки товаров, новые инструменты для продажи, а также большое количество интеграций...
мы физически не успеваем делать это быстро, также планируем маркетлплейс и другие каналы продаж...
Ребята, спасибо за обратную связь 🙂
Наблюдать за этим всем было забавно. Вступать в дискуссии не стал принципиально, ибо не увидел ни одного вопроса адресованного лично мне, как автору 🙏🏻
Данная статья действительно несёт в себе характер кейса, с перечислением основных процессов и демонстрацией итога, не более 🙃
Далее по плану отдельные, детальные статьи, с подробным описанием и демонстрацией каждого этапа 🙂
Комментарий недоступен
🙏🏻☺️
Вау, ребята придумали интернет-магазин. Я думаю теперь каждую нишу нужно освещать.
Почему бы и нет?
Комментарий недоступен
А на выходе как остальные магазины. Вопрос: а нахера столько работы делать, чтобы получить как обычно? 😂 Вопрос риторический, для меня понятно, что есть желание загрузить работой все рты, даже там где они и не нужны
Вода.. Из разряда мема про сову - сперва рисуем овал, а потом остальную сову.
Воу!
По моему слишком медленная анимашка
UX – это когда вот так
https://articles.uie.com/three_hund_million_button/
Да тоже буллщит, кстати.
Можно привести в пример факапы фэйсбука с настройками приватности, из за которых было множество скандалов и люди пострадали. Хотя казалось бы это фэйсбук, у них там каждая кнопочка проходит A>Z тесты на миллионной выборке.
Да, возможно, кто-то может позволить себе полный цикл разработки, но быстрее и проще использовать готовые конструкторы по запуску интернет-магазинов, типа advantshop.net
Комментарий удален модератором
Делал аналог такого магазина конкурентам по России. Только чая матча. Все красивые текста о ux в этой статье являются не более чем словами. Такая поверхностная аналитика создаёт только ложные гипотизы и никак не отображает реальную ситуацию. Например 2 карточки пользовался узконаправоенны ничего не дадут, нужно больше и реальных, на из основе пишутся общие карточки которые могут косвенно влиять на аналитику. Но не быть основополагающей. Исследование конкурентов?) найти у кого есть какие плюшечки и фишечки и перенять их. Это не исследование вовсе
а вы серьезно думаете, что вам вот так возьмут и выложат все реальные цифры, показатели, гипотезы и всю внутреннюю информацию?)
автор вроде четко дал понять, что перечисленные этапы не более, чем просто список того, что сделано, а как и каковы реальные аналитические данные — информация достаточно конфиденциальная и внутренняя, вам, как «аналитику» вроде стоит понимать это)
Думаете это повод называть выдумку аналитикой ? И пытаться выставить себя экспертом на базе просто раскинутых мозгов на коленке ?
Чтобы выложили кучу денег нужно создавать свою экспертизу. Оставляя ее за кадром никогда не получится взять проект с кучей денег.
Если не умеете делать аналитик не делайте. Проект вида. Я умею. Но не покажу как. Да и вам ничего не скажу. Пахнет лютым инфоцыганством. Если она уже терпит жесткое падение. То в нашей сфере она и не думало падать
Я не аналитик. Я просто знаю на практике как это происходит. И такой подход к аналитике никого отношения не имеет