Как UX/UI дизайн помог создать тематический простор для узкой целевой аудитории и передать общий вайб компании — рассказывает команда Турум-бурум. О редизайне по RSR (Revolutionary Site Redesign) подходе, разработке кастомного дизайна и изменениях в ключевых страницах сайта читайте в материале.
World of Comics: знакомство с компанией
World of Comics — сеть тематических магазинов для фанатов гик- и попкультур в Украине. В ассортименте магазина только официальные и лицензированные товары: Мерч, Funko Pop, комиксы, настольные игры, коллекционные изделия.
Физические магазины компании World of Comics — уникальное пространство, в котором персонажи фактически всех вселенных вроде бы собираются вместе, чтобы обсудить последние новости своих миров. Яркие баннеры, тематические витрины, ростовые фигуры популярных персонажей — все это погружает посетителей в мир фильмов, сериалов, аниме и супергероики.
World of Comics имеет 4 офлайн-магазина в Киеве и один во Львове, однако ценителей гик- и попкультур можно найти в каждом городке Украины. Поэтому было решено создать новый сайт — крутой тематический e-commerce, ведь все фаны заслуживают получить наилучший опыт и впечатления от услуг World of Comics.
Нашей целью было разработать веб-дизайн интернет-магазина, который:
- Передает атмосферу волшебных вселенных физических магазинов через экран;
- Подчеркивает основные преимущества продукции и Интернет-магазина;
- Объединяет фанатов гик- и попкультур со всей Украины;
- Будет адаптирован под мобильные устройства.
Создание UX/UI дизайна для фан-магазина World of Comics по подходу RSR: этапы и решения
Интернет-магазин World of Comics был узкопрофильным и содержал только товары Funko Pop. Заказчик ставил целью создать онлайн-платформу, на которой фанаты мистических вселенных смогут найти любой товар по своему вкусу, а их в магазине более 12 000.
Мы решили создать дизайн интернет-магазина путем RSR, который заключается в полном редизайне сайта:
- анализ текущих проблем функционирования сайта;
- просмотре представленного товара;
- разработке тематического дизайна интернет-магазина;
- создании навигации на основе пользовательского опыта.
Учитывая желание клиента оптимизировать бюджет проекта и создать UI&UX дизайн за короткий промежуток времени, мы использовали наши наработки из предыдущих e-commerce проектов для узкой целевой аудитории и кастомизировали их под требования заказчика.
Особенностью кейса стало то, что большая часть нашей команды является целевой аудиторией World of Comics и точно знает все тонкости гик- и попкультур. Фактически это было создание дизайна интернет-магазина «от фанатов для фанатов».
Далее подробнее об этапах редизайна ключевых страниц сайта и примерах предлагаемых нами решений UX/UI.
UX-audit: экспертный анализ интерфейса и юзабилити сайта
Мы приступили к работе по проведению брифинга с представителями компании. Для понимания концепции будущего интернет-магазина было важно узнать:
- ассортимент сайта;
- ценовую политику магазина;
- план развития компании;
- ожидание заказчика.
После этого мы разработали информационную архитектуру интернет-магазина, определились с расположением и наполнением страниц и приступили к непосредственному созданию вебсайта для World of Comics с учетом принципов mobile first.
Стилистика сайта: создание дизайна, подчеркивающего преимущества продукции
Целью было создать дизайн интерфейса, который бы способствовал фокусировке именно на товарах.
Ассортимент магазина World of Comics — это яркая продукция, поэтому нашей целью было создать дизайн интерфейса, который не забирал бы внимание клиентов на себя, а, наоборот, способствовал фокусированию именно на товарах. Поэтому мы:
1. Сделали минималистичный дизайн интернет-магазина и выбрали белый фон с черными надписями, а ключевые элементы сайта, такие как кнопки «Купить», лейбы «SALE» и т.д. акцентировали с помощью ярких цветов — желтого, красного и синего;
2. Отказались от стоковых изображений и разработали собственные кастомные иллюстрации, максимально подчеркивающие супергеройскую тематику магазина и ассортимента товаров.
3. Использовали Tone of Voice, помогающий быть на одной волне с клиентом. Стиль общения с аудиторией является еще одной фишкой дизайна сайта.
4. Разработали нестандартный дизайн стандартной опции «обратная связь», размещенной в шапке главной страницы. Выбирая ее, клиент автоматически переходит на страницу с тематическим изображением, созданным нашей командой. Если время нерабочее, а человек хочет получить обратную связь, мы об этом пишем также в тематическом стиле: «Извините, консультанты сейчас на страже покоя». Этот элемент способствует созданию положительного пользовательского использования с самого начала знакомства клиента с интернет-магазином World of Comics.
Навигация сайта: прозрачность и понятность
В шапке сайта добавили ссылку на сервисные страницы, чтобы пользователи могли быстро найти всю необходимую информацию о магазине, способах доставки и условиях возврата с любой страницы сайта.
В адаптивной версии сайта, согласно стандартным паттернам поведения пользователей, всю эту информацию добавили в бургер меню. А каталог с основными категориями построили по туннельному подходу как в адаптиве, так и в рабочем столе, чтобы не путать пользователей и максимально упростить поиск нужного товара. Также обязательным элементом в шапке есть поиск с подсказками.
Мы сделали UI/UX дизайн с акцентом на фото товаров и яркие интерактивные блоки, которые служат дополнительными точками входа и ускоряют поиск нужного товара. Отдельного внимания заслуживает меню сайта, представленное в виде кастомных изображений героев комикса, чтобы пользователи могли по картинке быстро найти все релевантные товары.
Дизайн главной страницы
Дизайн главной страницы мы сделали в формате чередования ярких и цветных нейтральных блоков. Таким образом, мы не перегружаем пользователей и не теряем их внимание.
Структура главной страницы:
- Мы добавили большие цветные баннеры на главную страницу с актуальными предложениями магазина: новинки ассортимента, скидки, эксклюзивный товар. Это первое, что видят клиенты, заходя на сайт World of Comics, поэтому баннеры выполняют несколько функций:
- Погружают в тематику интернет-магазина;
- Служат точками входа на отдельные категории товаров;
- Обращают на себя внимание потенциальных покупателей;
- Рассказывают об актуальных предложениях магазина.
- Добавили отдельные иллюстративные блоки с кастомными изображениями, которые являются альтернативой текстовому меню вверху страницы. То есть если пользователь не определился с категорией, которая интересует его в начале своего знакомства с магазином, баннеры могут помочь ему с этим на следующих этапах.
- Использовали кастомные блоки для демонстрации преимуществ компании и предоставления полезной информации. Первое изображение содержит гиперссылку на страницу «Контакты». Там пользователи могут найти информацию о физических магазинах компании, их графике работы, контактном номере телефона и т.д.
- Добавили информативные блоки с предложениями, которые могут быть актуальны для пользователей:
- популярные вселенные;
- новинки;
- популярные бренды;
- популярные товары;
- распродажа;
- вы просматривали.
Сами плитки товаров в этих блоках очень просты: 80% занимает фото, краткое описание, цена/цена со скидкой, бонус, который получает покупатель. Есть также кнопка для быстрого оформления заказа без перехода на карту товара и фоновая кнопка «добавить в избранное». Такой простой и информативный дизайн позволяет пользователям экономить время и быстро перейти к оформлению заказа.
В адаптивной версии сайта эти блоки реализованы с функцией автоматической прокрутки через каждую секунду. Таким образом мы предоставляем пользователям всю информацию конкретного блока в пределах одного экрана.
Страница выдачи товаров
Дизайн страницы выдачи товаров выполнен в минималистическом, но очень функционально удобном стиле. Слева мы добавили основные фильтры, чтобы клиенты могли быстро найти нужный товар по определенным параметрам. Предусмотрели возможность не только перейти на карту товара, но и добавить товар в корзину прямо на выдаче в категории. Также мы проработали быстрый переключатель сортировки и количества товаров, показанных на странице.
В целом страница выдачи товаров содержит всю необходимую информацию для клиентов на этом этапе. Мы не перегружаем страницу и пользователей лишней информацией — здесь ничего не отвлекает от товара.
В адаптивной версии фильтры подаем с помощью контрастной кнопки, после клика на которую открывается отдельное окно с доступными фильтрами.
Для того, чтобы пользователь не вышел из интернет-магазина, если не нашел нужный товар в выбранной категории, мы добавили яркую вставку с популярными категориями в конце страницы, чтобы привлечь внимание пользователя к другой продукции.
Страница товара
Для любого е-коммерс страница товара является ключевой страницей для принятия пользователем решения о покупке. Поэтому мы:
- выделили большинство пространства для качественных фото товара, чтобы пользователь мог рассмотреть товар в деталях;
- удовлетворили потребности различных целевых аудиторий: те, кто недавно начал интересоваться гик-культурой или ищут товар на подарок, могут обратиться за консультацией специалиста, для экспертов же есть опция «купить в один клик»;
- добавили всю важную информацию об условиях доставки и оплаты в карточку товара для экономии времени пользователей;
- разработали кастомное изображение пиццы, оформляющей заказ, чтобы подчеркнуть скорость обработки заказа с помощью опции «Быстрой покупки».
Ниже мы добавили блок с похожими товарами, характеристику товара и отзывы к нему, ведь социальное доказательство важно для онлайн продаж. Эти блоки мы выполнили в виде выпадающего меню, чтобы не перегружать интерфейс интернет-магазина, но предоставить всю необходимую информацию.
Кроме этого, мы использовали интересный комиксовый блок, рассказывающий о бонусах, которые пользователь получает, написав отзыв к товару. Это действенный инструмент для привлечения аудитории и мотивации клиентов совершать дальнейшие покупки в магазине.
Страница выдачи товаров содержит инструмент upsell — блок из продукции из смежной категории товаров в том же ценовом сегменте или немного дороже. Таким образом мы не только заботимся о клиентах, предлагая ему другие варианты товара, но и увеличиваем средний чек.
Также мы оптимизировали страницу товара и под мобильные гаджеты, чтобы улучшить опыт пользователей мобайл:
- подчеркиваем название, серию и артикулю товара с помощью шрифта, чтобы пользователю было проще узнать дополнительную информацию о товаре при необходимости консультацией по телефону;
- добавили скролл между страницами товаров одной категории, чтобы можно было быстро посмотреть каждый продукт серии;
- оставили хлебные крошки для более быстрой ориентации по сайту;
- кратко, но полно и структурированно представляем информацию о доставке и оплате;
- СТА разместили так, чтобы она попадала на первый экран.
Корзина
Мы создали корзину в формате окна pop-up. Это позволяет пользователям просматривать выбранные товары, находясь на любой странице сайта, а также сворачивать корзину без необходимости возвращаться на предыдущие страницы.
Сама корзина содержит только необходимую информацию и выполнена в стандартах индустрии. Для того чтобы пользователи не путали кнопку удаления товара из корзины с кнопкой закрытия вкладки корзины, вместо крестиков мы использовали иконки мусорной корзины.
Также мы добавили инструмент cross-sale: блок «с этими товарами покупают». Так покупатель может обратить внимание на другой товар соответствующего сегмента и добавить его к своей покупке или изменить выбранный товар на лучшую опцию.
Также мы добавили loading bar, который показывает сумму, на которую осталось выбрать товар, чтобы получить бесплатную доставку. Это решение избавляет покупателей от лишних подсчетов и служит определенным стимулом к увеличению суммы покупки.
Страница оформления заказа
Чекаут занимает только одну страницу — клиентам нужно заполнить несколько пунктов, чтобы закончить процесс покупки. То есть мы создали «чистый интерфейс», требующий от пользователей минимум времени и усилий. Также даже на этом этапе пользователи могут выбрать вариант быстрого заказа.
В адаптивной версии чекаут также сделали максимально коротким, он занимает всего 2 экрана.
Результаты редизайна интернет-магазина World of Comics по RSR подходу
Команде Турум-бурум удалось создать дизайн интернет-магазина:
- подчеркивает преимущества представленной продукции;
- придает ощущение принадлежности к отдельному сообществу;
- создает эмоциональную связь между компанией и клиентом.
Мы создали дизайн страниц сайта в минималистическом стиле, разработали кастомные изображения, расставили правильные акценты, выбрали нужный Tone of Voice и получили крутой тематический интернет-магазин, который полностью удовлетворяет потребности целевой аудитории и выполняет задачи бизнеса.
Нам удалось добиться этого результата благодаря тесной коммуникации с заказчиком на протяжении всей работы над проектом, а также экспертности наших специалистов, которые являются фанатами гик-культуры.