Главное Свежее Вакансии Образование
😼
Выбор
редакции
915 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как мы создавали интернет-магазин для гиков: Кейс FUNDUK

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

В 2016 году к нам обратились представители одной консалтинговой компании с идеей создать оригинальный интернет-магазин электроники для гиков.

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

b_5c4826aebdbbf.jpg

С чего все начиналось...

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

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

Сильные стороны: Первоначально мы определили с заказчиками сильные стороны будущего интернет-магазина. Вот чем он должен был брать аудиторию:

  • широкий ассортимент товара,
  • программа лояльности,
  • особая целевая аудитория,
  • конкурентоспособные цены,
  • экспертность в своей отрасли.

Затем нарисовали полный портрет будущего клиента.

Целевая аудитория: Фановая - ценители «железа», геймеры, охотники за последними технологическими новинками.

Технология: CMS Битрикс.

Как мы добавили "фановость" в дизайн Funduk

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

Выиграл вариант «Funduk». Название магазина предоставило широкое поле для ассоциаций, что натолкнуло на мысль подкрепить дизайн яркими элементами:

  • Вход в личный кабинет оформили в виде дупла белки

b_5c4826af50ded.jpg

  • Добавили фановые иконки с изображением белки и орехов

b_5c4826afa6a57.jpg

Это придало интернет-магазину целостность и особый характер.

  • Отдельно проработали анимацию для облегчения дальнейшего этапа верстки.
  • Оформили сообщение об ошибке 404

b_5c4826aff04c3.jpg

Щелкаем сложные задачи, как орешки...

Вот некоторые решения, которые мы внедрили, чтобы создать необычный интернет-магазин электроники.

Боковая панель меню

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

b_5c4826b08ced8.jpg

Интерактивная левая боковая панель

На странице корзины боковое меню информирует об условиях возврата товара и бонусах.

b_5c4826b115e43.jpg

Вот так в боковой панели корзины появляется информация о условиях возврата и бонусах

Техноблог - упор на контент

Наличие у заказчиков контент-плана и маркетинговой стратегии¸ позволило уделить особое внимание техно блогу, качественно проработать его структуру. Теперь у посетителя есть возможность выбрать тематику материалов, подписаться на новости, поделиться информацией в соцсетях. Наиболее обсуждаемые статьи мы вынесли отдельной категорией.b_5c4826b19b94d.jpg

Мы расположили статьи блога удобной плиткой

Карточка товара

Ориентируясь на молодежную целевую аудиторию, мы создали карточку товара в виде лендинга, на котором собраны фото продукта с разных ракурсов и подробное описание характеристик продукта. Все это подкрепили обзорами и статьями о товаре. Если покупателю нужны подробности, достаточно прокрутить страницу вниз или выбрать в боковой панели интересующий пункт – «Характеристики», «Описание», «Отзывы», «Доставка и оплата», «Похожие товары».b_5c4826b2465d8.jpg

Вот так выглядит карточка товара в интернет-магазине Funduk

Покупка товара в кредит

Мы проработали 3 варианта покупки товара:

  • просто добавить в корзину,
  • купить в один клик,
  • кредит и рассрочка.

Тяжелый функционал по кредитам был хорошо реализован в разработке.

Таким образом мы смогли показать преимущество Funduk, а именно собственную кредитную программу и возможность оформления других банковских кредитов.

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

b_5c4826b2b5be6.jpg

Доступные кредитные предложения при покупке часов в магазине Funduk

Фильтры

Наличие четкого контент-плана у заказчика помогло максимально подробно проработать систему фильтров, сделать ее понятной и удобной для пользователя. Функционал выполнен в виде плиточной структуры без зазоров, которая легко адаптируется под мобильные устройства. b_5c4826b33405c.jpg

Так выглядит плиточная система на странице выдачи товара

Что в результате?

Вот так наша команда Турум-бурум спроектировала удобный интерфейс, создала "фановый" дизайн и разработала уникальный интернет-магазин для стартапа Funduk. Это позволило заказчику уверенно зайти на рынок, конкурировать с китами отрасли и развивать свой бизнес. Сегодня Funduk посещает более 150 000 человек ежемесячно, в Киеве уже открыта первая оффлайн точка, выполненная в дизайне интернет-магазина, и собственный сервисный центр.

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Pepperbox Media
Цифровой декаданс и поиск N-го измерения
Иероним Б.
Хотел сперва вас застебать за интонации будто школьную работу очень хорошо выполнили. Но вы действительно очень неплохо сделали магазин. Я очень предвзято отношусь к Битриксу (ненавижу) , но тут он меня не выбесил совершенно. Вполне по человечески заказ оформляется. Единственный косяк у вас в моб версии (андроид, хром). Меню раскрывающееся не дает толком скролить. Начинаешь скроллить, потом поднимаешь палец и срабатывает нажатие.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.