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

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

- Собрать требования и пожелания клиента

- Изучить нишу

- Разработать логотип и фирменный стиль

- Продумать структуру сайта

- Собрать прототип сайта

- Придумать дизайн-концепцию

- Разработать интернет-магазин на Tilda

- Подготовить контент, обработать изображения

- Настроить SEO-оптимизацию

- Подключить эквайринг

- Заставка для видео

- Визитки, магниты, брендирование лодки

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

Название для бренда подобрал сам заказчик — Kind Tough Baits. Логотип должен быть узнаваемым, передавать ощущение ручной работы, крафта и ассоциироваться с рыбалкой. Поэтому мы решили отразить в логотипе непосредственно само изделие — приманку.

Дизайнер отрисовал три варианта логотипа:

Заказчику понравился третий вариант. Но поскольку под данным брендом будут распространяться товары разных мастеров, мы решили, что будет справедливо указать в логотипе самого основателя бренда и мастера — нашего клиента. Поэтому мы добавили внутрь знак «KT» — это инициалы цехового псевдонима заказчика. Кроме того, мы вписали логотип в круг, добавили немного деталей и надпись Hand Made.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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