Работы Блог Контакты
Работы Блог Контакты

UX/UI улучшения для интернет-магазина лечебной косметики

девушка

UX/UI улучшения для интернет-магазина лечебной косметики

Создали удобную современную версию интернет-магазина на основе существующей: обновили дизайн, улучшили UX и модернизировали интерфейс
девушка
Ниша
Интернет-магазин лечебной и эстетической косметики из Франции и Западной Европы
Сегмент
Медицина и здоровье Интернет-магазины
В2С
Выполненные работы
UX и UI улучшения сайта
Переход на адаптивную версию сайта
Услуги
Разработка и поддержка
Дизайн
Гео
Россия
Период
01.10.2023 - 31.12.2023

Что значит UX/UI?

В веб-дизайне от соблюдения принципов UX и UI зависит визуальное восприятие, логика и функциональность сайта.

User Experience (UX) берёт во внимание “пользовательский опыт”, и от качества UX-дизайна зависят впечатления, которые останутся у пользователя после взаимодействия с сайтом. Если веб-ресурс понятен и логичен, если на нём легко находить нужную информацию и совершать целевые действия, то вероятность оформления заказа и новых визитов возрастает.

User Interface (UI) отвечает за пользовательский интерфейс. Сюда входит внешний вид сайта: композиция, цветовые решения, шрифты и другое визуальное наполнение. Важно, чтобы все элементы сайта сочетались друг с другом, были читаемы и эстетичны. Также именно UI-дизайн передаёт характер бренда и делает сайт узнаваемым.

О клиенте

Интернет-магазин FrenchPharmacy занимается продажей лечебной и эстетической косметики. В магазине представлено более 20 марок продукции, а карточки товаров распределены по разным категориям.

Запрос клиента

У компании был работающий, созданный в 2018 году сайт. Однако из-за неадаптивного интерфейса (отдельно мобильная и десктопная версии) и устаревших решений:

  • возникали сложности в работе сайта;
  • сайт выглядел несовременно;
  • функционально сайт был неудобным для пользователей;

Заказчик прокомментировал проблему так:

avatar
Владимир Орестов
Руководитель интернет-магазина French Pharmacy
кавычки

«Неработающий сайт денег не приносит».

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

Аналитика и исследования

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

1. Обновление UI решений

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

интро хедер
карточка товара

2. Адаптация UX решений

Интерфейс выглядел запутанно даже при беглом знакомстве, особенно в части фильтрации каталога:

фильтры

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

Регистрация пользователя:

Регистрация пользователя

Чтобы упростить процесс и улучшить пользовательские ощущения, мы запланировали снизить количество данных до минимума.

3. Налаживание исправной работы на различных устройствах

Переданный в работу сайт плохо подстраивался под различные размеры экранов, скрывая часть контента и навигации. Это значительно затрудняло взаимодействие с ресурсом. Предстояло выстроить адаптивный интерфейс с учётом всех типов экранов.

Мы уделили отдельное внимание доработке десктоп и мобильной версий, поскольку именно ими пользуется большая часть посетителей сайта.

Выводы на основе исследования

Для совершенствования функциональности и дизайна сайта предстояли следующие работы:

  1. адаптация дизайна под различные экраны и типы устройств;
  2. устранение трудностей во взаимодействии с ресурсом доработкой UX решений;
  3. улучшение впечатлений от пользования сайтом исправлением UI решений.

Реализация проекта

После выявления проблем мы определили список необходимых действий, расставили приоритеты и командой приступили к переработке веб-продукта.

Что делали в направлении UX

UX: Доработали элементы фильтрации в каталоге

Для улучшения пользовательского опыта мы изменили расположение фильтров.

  • Мы разделили вторичные фильтры и “тег”-фильтры между собой. Это разграничивает логику функциональных элементов на визуальном уровне, позволяя эффективнее пользоваться возможностями сайта.
  • В облаке тегов мы исправили количество элементов. Мы занесли фиксированное значение с возможностью “посмотреть все”. Такое решение уменьшает нагрузку интерфейса и позволяет сместить акцент внимания непосредственно на каталог.

Было:

фильтры до

Стало:

фильтры после

UX: Упростили регистрацию

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

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

Было:

регистрация до

Стало:

регистрация после

Что делали в направлении UI

UI: Переработали навигацию

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

Было:

навигация до

Стало:

навигация после

UI: Обновили интерфейс основного меню

Для облегчения восприятия навигации мы улучшили верстку текста.

Было:

верстка навигации до

Стало:

верстка навигации после

UI: Изменили главную страницу

Для улучшения визуальной составляющей сайта мы:

  • Изменили слайдер на главной странице;
  • Переработали блок “хиты продаж”;
  • Переработали вторичные блоки на главной странице.

Этими решениями мы усовершенствовали эстетическое восприятия сайта и избавились от ощущения посещения “старого магазина”.

Было:

главный слайдер до

Стало:

главный слайдер после

Было:

хиты продаж до

Стало:

хиты продаж после

Было:

советы до

Стало:

советы после

UI: Доработали интерфейс каталога

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

Было:

карточка до

Стало:

карточка после

UI: Доработали карточки товаров

Обновили дизайн в карточке товара согласно дизайн-коду: минимум акцента на интерфейс при максимальном акценте на фотографии товара.

Было:

карточка до

Стало:

карточка после

Также мы улучшили раздел с описанием товара использованием табов: разделили контент на несколько секций, что позволяет быстро находить нужную информацию без дополнительных “скроллов”.

табы

Итог UI и UX доработок

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

Про адаптивную версию сайта

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

Так выглядит версия для ПК каталога товаров:

каталог для пк

Версия для каталога товаров Ipad:

каталог для ipad

Мобильная версия каталога товаров:

каталог для мобилок

Внедрение адаптивной версии сайта несёт за собой не только удобство для пользователя — такое решение ускоряет в 2 раза внедрение изменений, а также экономит до 30% бюджета на последующих доработках.

Заключение

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

Руководитель интернет-проектов и директор French Pharmacy Владимир Орестов как заказчик комментирует этот проект так:

avatar
Владимир Орестов
Руководитель интернет-магазина French Pharmacy
кавычки

“Благодаря вашей команде дизайнеров, верстальщиков, программистов во главе с Дмитрием Сильновым нам удалось перейти на адаптивную версию. Также мы обновили дизайн до современного и повысили степень удобства нахождения на сайте для наших клиентов с учётом накопившихся недочётов”.

Читайте полную версию отзыва French Pharmacy по этой и другим оказанным услугам.

Хотите увеличить конверсию сайта?

Исследуем, выявим слабые стороны и предложим рекомендации по улучшению
Давайте знакомиться!
Пожалуйста, введите ваш телефон
Пожалуйста, введите вашу Эл. почту

Услуги
Контекстная реклама
Таргетированная реклама
Веб-аналитика
Настройка Yandex DataLens
Запуск и продвижение на Маркетплейсах
SEO-продвижение
Создание сайтов
Техническая поддержка
Комплексное обслуживание
Интеграция Планфикса
Performance-маркетинг
Кейсы
Компания
О нас
Вакансии
Блог
Контакты
+7 495 109-25-54
+7 495 109-25-54
Агентство «Информбокс»
Самара, Стара-Загора 96 «Б», офис 37
info@iboxmail.ru