Kind Tough Baits — рыболовные приманки ручной работы

За 5 месяцев сделали брендинг и запустили интернет-магазин на Tilda, который за 3 месяца органически вышел в топ поисковой выдачи и начал продавать
Клиент

Kind Tough Baits

Отрасль

Товары ручной работы

Рыболовство

Тип проекта

Интернет-магазин

Брендинг

Сроки проекта

60 рабочих дней

Год запуска

2023

Ссылка на сайт

Вводные

О клиенте

Индивидуальный предприниматель Александр Гончаров более Х лет занимается рыбной ловлей и созданием авторских приманок для джерковой ловли.

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

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

Цель

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

Задача

  • Собрать требования и пожелания клиента
  • Изучить нишу
  • Разработать логотип и фирменный стиль
  • Продумать структуру сайта
  • Собрать прототип сайта
  • Придумать дизайн-концепцию
  • Разработать интернет-магазин на Tilda
  • Подготовить контент, обработать изображения
  • Настроить SEO-оптимизацию
  • Подключить эквайринг
  • Заставка для видео
  • Визитки, магниты, брендирование лодки

Структура и прототипы сайта

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

Его видение очень нам импонировало, но мы держали в головах, что всё-таки сайт в конечном счёте должен быть нацелен на продажу приманок. Иначе бы у нас получился какой-то некоммерческий проект о мастерах с маленькой витриной приманок где-нибудь в районе футера. Мы постарались переосмыслить эту идею так, чтобы сохранить баланс между коммерческой целью и авторской идентичностью.

У клиента уже был оплаченный аккаунт Tilda, там он вёл свой личный блог с историями о путешествиях и рыбалке. Перед обращением к нам он даже выбрал для будущего сайта один из шаблонов, который ему визуально понравился. Дальше мы перешли в плоскость фигмы. Клиент был настолько вовлечён в процесс, что сам набросал очень грубые вайрфреймы для основных страниц, и к нашему удивлению, этого хватило для дальнейшей работы. Мы очень много коммуницировали с клиентом вживую, поэтому потребности в «вылизанных» артефактах не возникло. Мы обсуждали идеи прямо на этом черновике.

У нас не было планов на какой-то большой сайт со сложной структурой. Наоборот, всё должно быть максимально доступно. И здесь началось самое интересное. Концепция, которую мы выбрали, подразумевала необходимость «подружить» приманки одновременно с категориями, к которым они относятся, и с мастерами, которые их изготовили. Наш UX/UI дизайнер долго размышлял, как это лучше сделать с учётом ограничений на работу с товарами в Tilda и сохранением лёгкости администрирования каталога.

Дизайн-концепция

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

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

Также мы добавили немного «крафтовости» за счёт брызгов краски и использования паттерна от коврика для резки, которым пользуются мастера при изготовлении своих приманок. Кстати, акцентный ярко-голубой цвет продиктован цветом именно такого коврика.

Концепт первого экрана

Мы решили собирать концепт сразу в Tilda. Поскольку важно было выделить не только приманки, но и самих мастеров, мы предложили на главном экране разместить слайдер с фотографиями мастеров и переходом на страницу с ними. Ниже мы разместили «бегущую строку» с разнообразными приманками мастеров, таким образом мы показали одновременно и сами товары, и людей, которые их делают.

Разработка сайта

Остальные экраны и страницы мы также стали сразу собирать в Tilda. В силу тесной коммуникации с заказчиком, нам не нужно было отдельно согласовывать макеты, мы работали непосредственно с конечным продуктом.
При разработке мы активно использовали кастомный CSS-код, чтобы гибко настраивать внешний вид функциональных блоков с товарами и корзиной.

Каталог приманок

Ключевой технической сложностью было корректно настроить и синхронизировать вывод нужных товаров на разных страницах и в разных местах.

Приманки выводились на главную страницу, в общем каталоге, на страницах отдельных категорий, а также на страницах мастеров.

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

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

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

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

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

Страница мастера

Для каждого мастера была сделана страница с его биографией, фотографиями и витриной приманок.

Доставка и оплата

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

Страница 404

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

Анимация загрузки сайта

Чтобы сделать сайт ещё более эффектным и уникальным, мы сделали из логотипа полноценный загрузочный экран — прелоадер.

Заключительные настройки

Перед запуском сайта мы настроили базовое SEO (заголовки и описания страниц, ключевые слова), настроили отправку данных с форм и заказов с корзины на почту и в телеграм клиента. Подключили оплату на сайте через эквайринг Т-Банка.

Подготовка контента

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

Результат

Через полтора месяца после запуска сайт начал выходить в топ поисковой выдачи по ключевым запросам и выдавать невероятные показатели. Каждый день на него заходили Х человек и изучали сайт в среднем по 20-40 минут. Но ещё не решались на покупку, вероятно потому что бренд только появился, и у него ещё не успела сформироваться репутация. Спустя три месяца с запуска сайта начались первые продажи. И это чисто органический рост с минимальными рекламными вложениями.

Отзыв клиента

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

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

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

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

Александр Гончаров

Мастер по изготовлению приманок

Комментарий студии

Неподдельная любовь заказчика к своему делу зарядила нас продумать этот проект до максимально возможных мелочей, сделать его понятным и удобным почти для любого пользователя и при этом сохранить исходную идею и смыслы, заложенные в основу проекта. Хочу отметить, что внешний вид получился хорошим во многом благодаря качественному контенту, который Александр смог предоставить.

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

Николай Ткаченко

Дизайнер

Команда проекта

Константин Кропотин

Константин Кропотин

Арт-директор
Алексей Патрикеев

Алексей Патрикеев

Дизайнер
Николай Ткаченко

Николай Ткаченко

Дизайнер

Стек технологий

Figma
Tilda
CSS3
Adobe Photoshop
Adobe Illustrator

Давайте начнём восхождение

Расскажите о проекте или свяжитесь с нами по телефону почте или в телеграм
Либо можно сразу заполнить бриф:
Как вас зовут?
+7 999 999 99 99
Ваша компания
Email
Что вас интересует? *
Примерный бюджет *
Кратко опишите задачу
Откуда вы о нас узнали?
Я осознанно делюсь своими персональными данными

Заполните все обязательные поля