Получить короткое описание с:
ChatGPT
Мы скопировали промпт в ваш буфер обмена. Просто вставьте его в AI-инструмент, чтобы получить краткое резюме этой статьи.
Перейти в Chat GPT
Gemini
Мы скопировали промпт в ваш буфер обмена. Просто вставьте его в AI-инструмент, чтобы получить краткое резюме этой статьи.
Перейти в Gemini
Grok
Claude

Что необходимо сайту, чтобы запомниться в первую очередь?  Разумное SEO, юзабилити, демонстрирующее надежность бренда, эффективная реклама в Google Ads и большое сердце. 

Это история роста веб-сайта... или даже история тесного сотрудничества между шведской компанией Fotoklok, SEO-агентством TopDog и UX/UI-компанией Turumburum.

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

Fotoklok: история и задачи

Fotoklok помогает людям сохранять свои воспоминания с 2010 года. Компания из Скине, Швеция, специализируется на создании фотокниг, календарей, студенческих значков и других продуктов, которые ценятся как подарки и долговечные сувениры.

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

  1. Дизайн был устаревшим и уже плохо отражал сильные стороны бренда. 
  2. Поведение пользователей выглядело разрозненным: одно сообщение передавалось на сайте, другое — вне его. Общая навигация была фрагментированной, разбитой на части, которые плохо были связаны между собой, особенно для посетителей, пришедших на сайт из Google. 
  3. Новый контент ещё не был интегрирован в UX удобным и приятным образом.
  4. Незначительные, но критически важные технические проблемы замедляли производительность. 
  5. Главное — позиции по ключевым темам, таким как «fotobok» и «fotokalender», были нестабильными, что негативно сказывалось как на видимости, так и на конверсиях.

Именно тогда объединились три стороны:

  • Матс, владелец продукта Fotoklok и предприниматель с более чем 15 стартапами за плечами. Он задал направление и обозначил бизнес-потребности. Его приоритеты: стабильный трафик, более плавный процесс продаж и сайт, который действительно отражает надежность и преимущества Fotoklok.
  • Кристиан, генеральный директор TopDog, привнёс опыт в сфере SEO. Руководя бутик-агентством в Швеции, его команда ставила целью стабилизировать позиции, устранить технические препятствия и согласовать восприятие Google о Fotoklok с его реальным авторитетом. Ключевую роль в этом процессе сыграл SEO-специалист Вова, который занимался SEO-работой и её внедрением.
  • А наша команда Турум-бурум взяла на себя работу над UX/UI. Мы учли пожелания клиента и требования TopDog и создали унифицированную дизайн-систему для бесстрессового масштабирования.

Это стало отправной точкой сотрудничества, направленного на оптимизацию цифрового пути Fotoklok в соответствии с миссией компании и обеспечением того, чтобы Google и клиенты могли это увидеть.

SEO-решения, которые помогли увеличить трафик на 30%

 TopDog начали сотрудничество с Fotoklok. Вот краткий итог их наблюдений:

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

Учитывая это, агентство TopDog:

  • Разработало чёткий план требований к сайту, который стал основой для его переработки (стал частью работы Ту);
  • Согласовало сообщения и преимущества в результатах поиска Google и на страницах сайта;
Пример результатов поиска Google после улучшения SEO
  • Создало SEO-оптимизированный UX и контент, которые сделали страницы более релевантными, надёжными и ориентированными на конверсии, при этом удовлетворив требования Google;
Главная страница до SEO-оптимизации
SEO улучшило UX и контент главной страницы Fotoklok
  • Исправили технические проблемы, чтобы обеспечить стабильные позиции и надежную работу даже в периоды пиковых нагрузок.

Дизайнерские решения, которые помогли увеличить конверсию на 25%

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

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

Навигация: быстрые пути, видимое доверие, довольные клиенты

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

Заголовок был упрощён для большей ясности: логотип теперь размещён рядом с элементами, вызывающими доверие, а основные действия (проекты, вход/регистрация, корзина) доступны одним касанием благодаря понятным и привычным иконкам.

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

Навигация по сайту и меню без миниатюр до редизайна
Вид навигации и меню после редизайна: реализованы миниатюры и удобная структура

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

Навигация и меню в мобильной версии сайта до редизайна
Навигация и меню в мобильной версии сайта после редизайна

Результат: Простая и надежная навигация помогает клиентам начать свои проекты за считанные секунды на любом устройстве.

{{block}}

Страницы категорий: уважение к шведским традициям и практичный дизайн

Мы переработали все страницы категорий, но особое внимание уделили Studentskylt, Fotobok и Fotokalender — основным категориям, тесно связанным со шведскими традициями и сезонным спросом. 

Возьмём, к примеру, Studentskylt. В Швеции выпускные таблички с детскими фотографиями — любимая традиция и символ взросления. Было необходимо переработать страницу так, чтобы она передавала это тепло и в то же время оставалась удобной для пользователей, оформляющих крупные заказы.

Поэтому самую важную информацию оставили на первом плане:

  • Краткие акценты на преимуществах с иконками.
  • Виджет Trustpilot для повышения доверия;
  • Карточки продуктов с каруселью изображений, ценой, коротким описанием, отметками о скидках и яркой кнопкой «Дизайн»; 
  • Пагинация сделала просмотр простым и удобным.
Категория Fotoklok alpha до редизайна
Категория Fotoklok alpha после редизайна

Для Fotobok и Fotokalender использовали ту же структуру, но адаптировали макеты в соответствии с особенностями продукта:

  • Блоки, демонстрирующие качество и материалы;
  • Отзывы клиентов как социальное доказательство;
  • Фото- и видеогалерея, придающая категориям более «живой» и человечный вид.

Другие категории имеют ту же структуру, но в более упрощённом виде: лаконичные, информативные карточки товаров, удобная пагинация, промо-метки там, где это уместно.

Стандартная категория Fotoklok до редизайна
Обычная категория Fotoklok после редизайна

Ради баланса позиций в поиске и юзабилити SEO-тексты и блоки с часто задаваемыми вопросами (FAQ) оставили на всех страницах категорий, но спрятали их под ссылками «Читать далее», чтобы пользователи сначала видели самую важную информацию, а Google всё равно получал необходимый контент. 

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

Карточка товара: чёткое и тщательное информирование пользователей

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

Поэтому страница товара была переработана с учётом трёх основных принципов:

  1. Чёткость выбора: большие изображения в карусели; форматы продукции, представленные в виде визуальных карточек, а не текста; слайдер миниатюр с видеоопцией, чтобы пользователи могли увидеть реальный продукт. Блок «Связанные продукты» удерживает внимание клиентов и помогает им найти то, что подходит.
  2. Объяснение процесса: этапы заказа иллюстрированы иконками — всего три шага: загрузите фото, персонализируйте, получите заказ через 48 часов.
  3. Элементы доверия и конверсии: фото и отзывы клиентов как социальное доказательство, значки качества и награды как подтверждение надежности, акценты на преимуществах, иконки безопасной оплаты и яркие призывы к действию — всё размещено в ключевых точках страницы, чтобы устранить сомнения и упростить путь к покупке.
Страница товара Fotoklok до редизайна
Карточка товара Fotoklok после редизайна

Результат: Простая и понятная страница товара с продуманной структурой и исчерпывающей информацией о продукте, что позволяет пользователям без усилий перейти от идеи к заказу.

Надёжный фундамент для дальнейшего развития и масштабирования 

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

UI kit (дизайн-система), которую Turumburum создали для Fotoklok

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

{{block}}

Результаты улучшения SEO и удобства использования: рост трафика, повышение конверсии, удовлетворённость клиентов

Редизайн Fotoklok стал не просто обновлением визуальной составляющей — он послужил способом объединить искреннюю миссию компании с более плавным и надёжным пользовательским опытом онлайн. В сотрудничестве с TopDog мы оптимизировали дизайн, контент и структуру сайта, чтобы сделать его одновременно удобным для пользователей и стабильным для Google.

Результаты были очевидными и впечатляющими:

  • +30% рост трафика из Google

На графике ниже показаны рейтинги Fotoklok по слову «fotokalender» в шведском индексе. График наглядно демонстрирует, что у них существует проблема с Google: рейтинги сильно колеблются. Как видно, после реализации проекта рейтинги стабилизировались. Правильный контент размещён в правильном месте. График также демонстрирует стабильный, но медленный восходящий тренд в позициях по этому запросу. 

— Кристиан Рудольф, генеральный директор Topdog

График трафика, оборота и конверсии Fotoklok за последние 5 лет

Диаграмма видимости от Ahrefs, отображающая высокий сезонный фактор Fotoklok и влияние проекта на SEO

  • +25% рост конверсии
Главная страница Fotoklok после редизайна

Эти результаты были достигнуты не только благодаря дизайну. Они стали результатом тесного сотрудничества: Fotoklok сформулировал свои пожелания, TopDog взял на себя управление SEO и внедрение нового дизайна, а наша команда преобразовала эти требования в пользовательский опыт, который действительно работает.

Отзыв:

«Мы подошли к SEO комплексно, совместно с TopDog и Турум-бурум, особенно сосредоточившись на UX SEO и картировании пользовательских путей». Анализируя путь посетителей по сайту, перестроив информационную архитектуру и оптимизировав дизайн и контент, мы увеличили трафик из Google на 30% и повысили конверсию на 25%. Это был наш самый успешный сезон за всю историю по объему дохода.
— Матс Ольссон, PO, Fotoklok

Часті запити та питання (FAQ)

Хотите узнать, как повысить конверсию в ритейле?
Ответ — оптимизация интерфейса. Не знаете, с чего начать? Свяжитесь с нами, и мы вам поможем!
This is some text inside of a div block.
This is some text inside of a div block.

Поделиться постом в:

Вера
Вера — копирайтер и редактор, которая тщательно прорабатывает каждую публикацию, помогая лучше понять мир UX/UI, CRO и электронной коммерции, а также ознакомиться с последними трендами.

Больше кейсов от турум-бурум?

Ознакомьтесь с нашим портфолио из различных сфер бизнеса.

Смотреть портфолио

Напишите нам, и начнем сотрудничество!

Ваше сообщение было отправлено! Мы свяжемся с вами как можно скорее

Отправить ещё одну заявку
Doublecheck your form data please