Комментарии
Очень девчачий интернет-магазин со сменой цветов и милыми анимациями
Результат Процесс
«Ну такооой, красивенький!»
Очень девчачий интернет-магазин со сменой цветов и милыми анимациями
Lakk&Roll — интернет-магазин, где есть всё для ногтей: уходовые средства, декоративные лаки, базовые покрытия и гель-лаки. Заказчик планировал обновить корпоративный портал, но в ходе работы над проектом появились новые возможности для бизнеса, отчего проект перерос в полноценный е-коммерс, для которого мы не только создали удобный и мимимишный сайт, но и придумали логотип и название.
Задачи
Учитывая смену ориентиров в проекте, потребовалось создать удобный и функциональный интернет-магазин для мастеров и конечных потребителей. Поэтому задачи были следующими:



  1. Создать оптимальную структуру интернет-магазина, чтобы посетители легко могли найти нужную информацию.

  2. Сделать акцент на брендах и их преимуществах.

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

  4. Заманивать пользователей на сайт индивидуальными предложениями и рекомендациями.

  5. Сделать адаптивную версию максимально крутой и удобной, ведь сейчас потребители часто заказывают в интернет-магазинах именно с телефонов.
Аналитика
Основные посетители сайта — начинающие мастера и профессионалы в поисках идей, салоны красоты, ищущие выгодное сотрудничество и расширяющие ассортимент, и конечные потребители их услуг.

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

Внутри карточки товара есть раздел с инструкцией по применению — он пригодится и начинающим мастерам, и тем, кто делает маникюр в домашних условиях. Также есть видео, на котором показано, как ложится покрытие.
Ещё в карточке товара есть вкладка «награды», где указываются премии и награждения от профессиональных и авторитетных СМИ. Отзывы покупателей в блоке слева помогут пользователям сложить полноценное впечатление о продукте.
Дизайн
Заказчик хотел чего-то нетипичного — он предоставил хорошие примеры для визуального брифа: с наложениями фотографий друг на друга, нестандартной сеткой и вариантами цветов.
Из-за того, что у нового бизнес-направления на момент создания проекта не было даже названия (не говоря о лого и фирменном стиле), а макет без лого и нейминга смотрелся незавершенным, наш арт-директор придумал название Lakk&Roll и разместил его на финальном макете перед показом клиенту.
Это как рок-н-ролл, только про лак :) На макет просилось какое-то шрифтовое написание, и я придумал случайный нейм. И хотя сначала заказчик немного сомневался, в итоге название ему понравилось и стало частью проекта.

Евгений
Арт-директор
Мы предложили два цветовых варианта — более смелый и пастельный. И хотя пастельная гамма была ближе заказчику, оба варианта получились настолько классными, что клиенту было сложно определиться. В рассуждениях на демо вместе с ним мы придумали фишку — возможность полностью менять цвета в промо-блоке в зависимости от сезона и трендов, но на тот момент не знали, как ее реализовать в рамках сроков, бюджета и технических возможностей. А на этапе разработки мы взяли и запилили смену цветов вообще ВЕЗДЕ:)
Меняющийся фон — фишка главной страницы, а цветные подложки в карточках товара поддерживают общую концепцию со сменой цветов:
Смена цветов на главной (видео)
Цветные подложки в карточках товара
С дизайном работали быстро и слаженно: мы предлагали какие-то фишки клиенту, он предлагал нам в ответ. В итоге получились совместные классные идеи. На визуальном брифе всё подробно проговорили, поэтому у дизайнера не возникло никаких вопросов при работе. Итоговый макет на стороне клиента сразу одобрили.

Кристина
Руководитель проекта
Разработка
В проекте много приятной микроанимации: это и цветной прелоадер, и наплывающие друг на друга блоки на главной, и появляющиеся капельки при наведении на товар в каталоге. Из мимимишных мелочей также есть бьющиеся сердечки «в избранное», закрашивающиеся кнопки, прыгающий контент и всплывающее окно с номером телефона.
Микроанимации на сайте (видео)
Заказчику понравилась идея с цветными фонами, и он хотел управлять цветом и, в зависимости от трендов и сезона, самостоятельно менять настроение сайта: как на главной, так  и на  внутренних страницах. Так в административной панели появился дополнительный функционал:
На следующем этапе планируется заменить цвета в фильтре на картинки или даже гифки :) Сейчас они не учитывают особенности продукции (например, непонятно, куда отнести лак с блёстками).

Кристина
Руководитель проекта
Для профессионалов очень важен объём бутылька, как и цена, поэтому мы настроили фильтр по этим параметрам.
Фильтрация в каталоге (видео)
Адаптив был одной из важнейших задач проекта. Заказчик хотел, чтобы сайтом было удобно пользоваться со смартфона и сразу там же можно было заказать товар. Адаптив получился приятным и без ущерба юзабилити.
Проект получился очень «девчачьим» :) Мы в студии залипаем на анимашки, кнопочки и капельки лака — прям вау. В планах запустить блог и, возможно, интерактив — но это уже другая история:)

Кристина
Руководитель проекта
С самого начала работы по проекту у меня складывалось впечатление, что в студии читают мои мысли. Очень хорошо отработали ребята, которые поняли, что именно мы хотели бы получить в итоге — они точно уловили основную мысль и сделали всё чётко от дизайна до готового сайта.

Павел Новиков
Директор по развитию Lakk&Roll
Готовый проект