Создание дизайна
интернет-магазина косметики
Клиент
Romanovamakeup - российский бренд декоративной косметики и накладных ресниц
Задача
Редизайн онлайн-магазина
Romanovamakeup - российский бренд декоративной косметики и накладных ресниц.
Через несколько лет после запуска онлайн-магазина в России собственница бренда Ольга Романова решила обновить дизайн сайта.

В Beauty-сегменте крайне важна упаковка, поэтому Romanovamakeup требовался современный красивый удобный и, главное, продающий интернет-магазин, отражающий философию бренда.
Почему брендинг и дизайн сайта важны?
Главная цель брендинга компании — выделиться, запомниться и создать положительный образ у потребителей. Выбранное название должно отражать философию компании, быть оригинальным и запоминающимся, вызывать положительные ассоциации и эмоции у клиентов.

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

Web-дизайн (UX/UI) — это многогранная концепция, которая включает множество дисциплин: интерактивный дизайн, информационную архитектуру, визуальный дизайн, юзабилити и взаимодействие между человеком и компьютером.

Это не только "красивый" внешний вид, но и функциональность и удобство сайта для пользователя.

UX ― это функционал интерфейса, UI ― его внешний вид.

Дизайн сайта влияет на следующие показатели:
  • время пребывания на сайте;
  • глубина просмотра;
  • конверсия сайта;
  • продвижение сайта;
  • влияние на репутацию компании, повышение конкурентноспособности.
ШАГ 1
Интервью и анализ компании
Над созданием дизайна сайта работает команда из маркетолога, веб-дизайнера, веб-аналитика и разработчика.

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

Мы провели вводное интервью с командой e-commerce Romanovamakeup, в течение которого структурировали информацию по следующим пунктам:

  • стоящие перед бизнесом задачи и основные проблемы;
  • продукты, услуги — сильные и слабые стороны;
  • основные характеристики целевой аудитории и жизненный цикл клиента;
  • рекламные активности и тенденции рынка, которые клиент занет;
  • недостатки и преимущества в сравнении с конкурентами;
  • методика продаж, сезонность;
  • визуальные предпочтения по дизайну.
Далее мы более детально рассмотрели целевую аудиторию и конкурентов.
ШАГ 2
Анализ целевой аудитории
В рамках стратегии мы провели детальный анализ целевой аудитории: пол, возраст, интересы, устройства, потребности и задачи, бюджет и частоту покупок и прочие весомые характеристики.

На основании этих данных мы составили путь клиента от входа на сайт до покупки (CJM), который мы учитывали при дальнейшем брендинге и редизайне сайта.

Изучили какими сайтами привыкла пользоваться целевая аудитория, какие интерфейсы им наиболее удобны.
Изучили конкурентов, нашли лучшие примеры из других стран.
Сопоставили полученные данные с нашим опытом.
ШАГ 3
Анализ конкурентов
Мы проанализировали сайты конкурентов, а также сайты лидеров рынка в других странах чтобы еще лучше понять потребности целевой аудитории и ассортимент, найти "фишки" и собрать весь необходимый функционал воедино.

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

Анализировали коммерческие показатели, позиции на рынке и представленность в интернете.
ШАГ 4
UX/UI аудит
Перед началом работы над дизайном мы провели UX/UI аудит существующего онлайн-магазина, чтобы оценить имеющийся сайт на удобство, понятность, функциональность и составить список доработок для увеличения продаж.

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

На основе этих исследований составили файл с рекомендациями по доработкам UX/XI сайта для увеличения продаж. Подробнее об этом рассказываем в этом кейсе >
ШАГ 5
Прототипирование
Romanovamakeup.com был создан на платформе Bitrix, поэтому мы учитывали особенности этой платформы при прототипировании.

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

После проведенных исследований и полученных вводных по дизайну от собственницы, маркетолог собрал прототип сайта на базе маркетингового пути клиента с учетом UX-аудита и передал прототип web-дизайнеру на создание концепций дизайна.
    ШАГ 6
    Создание концепции дизайна
    Дизайн сайтов мы всегда делаем на платформе Figma.

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

    Мы создали несколько вариантов главной страницы, вместе с клиентом выбрали лучший. Важно, что дизайн сайта должен отображать ДНК бренда.

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

    К счастью, в Romanovamakeup фото- и видео- контент на высоком уровне.

    Дизайн сайтов мы всегда делаем на платформе Figma.
    ШАГ 7
    Отрисовка страниц в утвержденном дизайне
    После финального согласования дизайна главной страницы сайта мы собрали UI kit - документ для дизайнера и разработчика, где указаны все элементы дизайна: цвета, шрифты, логотип, фавикон, кнопки и все остальные элементы дизайн-системы в различных состояниях.

    В соотвествии с утвержденным UI kit и прототипами дизайнер создал дизайн всех страниц сайта.

    Особенности созданного дизайна:
    • Простое и понятное распределение контента и светлые тона облегчают восприятие информации;
    • Анимация изображения и кнопки при загрузке страницы привлекает внимание клиента;
    • Есть возможность разместить видео в первом экране, что еще больше вовлекает посетителя магазина;
    • Отсутствие фона верхнего меню создает легкость дизайна и затягивает клиента в атмосферу бренда, как бы стирает границу между клиентом и брендом;
    • Главная страница удобно сегментирована тематически: посетителю сразу доступны текущие акции, переключение языка и валюты и, конечно, всегда перед глазами каталог.
    • Верхнее меню сайта содержит минимальное количество ключевых разделов, чтобы клиент смог быстро сориентироваться в навигации, и закрепляется при прокрутке для быстрого доступа к основным разделам магазина;
    • Текстовые названия стандартных разделов Поиск, Личный кабинет, Избранное, Корзина заменены на понятные иконки;
    • Кнопка с анимированным фоном также не отвлекает от главного изображения;
    • Оповещение о cookies не раздражает, так как размещено на полупрозрачном фоне;— Форма подписки на новости открыта при первом входе клиента на сайт и закрыта при последующих входах. Но оповещение о возможности подписки зафиксировано на экране, поэтому клиент об этом не забудет;
    • Все фишки присутствуют и в мобильной версии магазина.
    Современный дизайн подразумевает максимальную передачу смыслов через изображения, поэтому все тексты сокращены до необходимого минимума.

    А фото и видео-контент, наоборот используется максимально.

    Приятная ненавязчивая анимация поддерживает визуальную воздушность и значительно оживляет сайт.

    К тому же, порциальная выдача контента акцентирует внимание посетителя на ключевых тезисах.
    В каталоге товара фотографии также крупные и в ПК версии анимированы: при наведении меняется фото товара, появляется цена, иконка для добавления в Избранное, стрелки для быстрого просмотра всех фото товара.
      Для Beauty-магазинов очень важны крупные изображения чтобы клиент смог подробно рассмотреть товар. В карточке товара Romanovamakeup фотографии и видео товаров максимально крупные и перелистываются при скроллинге страницы.

      И, конечно, соблюдены все требования к функциональности карточки товара:
      — Удобно скомпоновано текстовое описание товара;
      — Превью-переключатель цветов товара;
      — Возможность предзаказа если товара нет в наличии и другое.
        Еще больше изображений из этого проекта в галерее ниже:
        ШАГ 8
        Что дальше
        После того как мы сделали дизайн сайта, мы подготовили техническое задание для разработки сайта, об этом расскажем в следующем кейсе :)
        Закажите Бесплатную стратегическую консультацию
        для роста ваших продаж
        Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности
        svetlana@zubova.online