Історія успіху Fotoklok: як юзабіліті та SEO забезпечили +30% трафіку та +25% конверсій

Що найбільше потрібно сайту, щоб запам’ятатися?  Розумне SEO, юзабіліті, що демонструє надійність бренду, ефективна реклама в Google Ads і велике серце. 

Ось історія зростання вебсайту... або навіть історія тісної співпраці між шведською компанією Fotoklok, SEO-агентством TopDog та UX/UI компанією Турум-бурум.

Спойлер: як і будь-яка хороша історія, ця об’єднала побажання клієнта, бізнес-потреби, вимоги 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 та на сторінках сайту;

• Створила SEO-оптимізований UX та контент, зробивши сторінки більш релевантними, надійними та орієнтованими на конверсію, при цьому задовольнивши вимоги Google;

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

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

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

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

Навігація: швидкі шляхи, видима довіра, задоволені клієнти

Навігація задає тон, тому вона була ретельно продумана з урахуванням усіх вимог клієнта та команди TopDog, а також найкращих практик. Основна увага приділялася довірі.

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

Головне меню розташоване по центру для зручного перегляду, а підкатегорії з мініатюрами відкриваються при наведенні курсора, що дає користувачам швидкі візуальні підказки.

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

Результат: Легка навігація, яка відчувається надійною та простою, допомагає клієнтам розпочати свої проєкти за лічені секунди на будь-якому пристрої.

{{block}}

Сторінки категорій: повага до шведських традицій та практичний дизайн

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

Візьмемо, наприклад, Studentskylt. У Швеції випускні таблички з дитячими фотографіями — улюблена традиція і символ дорослішання. Необхідно було переробити сторінку так, щоб вона відображала цю теплоту, але залишалася практичною для користувачів, які роблять великі замовлення.

Тому найважливішу інформацію залишили на першому плані:

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

Для Fotobok та Fotokalender використовували ту саму структуру, але адаптували макети відповідно до особливостей продукту:

• Блоки, що демонструють якість та матеріали;
• Відгуки клієнтів як соціальний доказ;
• Фото/відео галерея, щоб надати категоріям більш «живого» й людяного вигляду.

Інші категорії мають ту саму структуру, але в більш спрощеному вигляді: лаконічні, інформативні картки товарів, легка пагінація, промо-позначки там, де це доречно.

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

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

Сторінка продукту: чітке та ретельне інформування користувачів

Сторінка товару — це місце, яке наближає користувача до цільової дії. Тому вона має бути простою, надійною та надихаючою. Стара версія сторінки не надавала достатньо інформації про сам продукт, що сповільняло рух користувача по воронці.

Тому сторінка товару була перероблена з урахуванням трьох основних принципів:

1. Чіткість вибору: великі зображення в каруселі; формати продукції, показані у вигляді візуальних карток замість тексту; слайдер мініатюр з опцією відео, щоб користувачі могли побачити реальний продукт. Блок «Пов'язані продукти» утримує увагу клієнтів і допомагає знайти те, що їм підходить.
2. Пояснення процесу: етапи замовлення ілюстровані іконками — всього три кроки: завантажте фото, персоналізуйте, отримайте через 48 годин.
3. Елементи трастовості та конверсії: фото та відгуки клієнтів як соціальний доказ, значки якості та нагород як підтвердження надійності, акценти на перевагах, іконки безпечної оплати та яскраві заклики до дії — усе розміщено в ключових точках сторінки, щоб зняти сумніви та спростити шлях до покупки.

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

Міцний фундамент для подальшого розвитку та масштабування 

Дизайн ключових сторінок був лише частиною історії. Щоб Fotoklok міг продовжувати розвиватися, не втрачаючи ідентичності бренду, ми також підготували UI Kit. Він включає основні елементи, такі як типографіка, кнопки, іконки, палітри кольорів та компоненти, що можуть бути використані повторно, — і все це в усіх можливих станах.

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

{{block}}

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

Редизайн Fotoklok був не просто про оновлену візуальну складову — він став способом поєднати щиру місію компанії з більш плавним і надійним користувацьким досвідом в онлайні. У співпраці з TopDog ми оптимізували дизайн, контент і структуру, щоб зробити сайт водночас дружнім для користувачів і стабільним для Google.

Результати були очевидні й вражаючі:

• +30% зростання трафіку з Google

«На графіку нижче показано рейтинги Fotoklok за словом «fotokalender» у шведському індексі. Графік чітко показує, що у них є проблема з Google. Рейтинги сильно коливаються. Як бачите, після реалізації проєкту рейтинги стабілізувалися. Правильний контент знаходиться на правильному місці. Графік також показує стабільний, але повільний висхідний тренд у рейтингах за цим словом». 

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

• +25% підвищення конверсії

Ці результати були досягнуті не лише завдяки дизайну. Вони стали результатом тісної співпраці: Fotoklok визначив свої побажання, TopDog керував SEO та впровадженням нового дизайну, а наша команда перетворила вимоги на користувацький досвід, який дійсно працює.

Відгук:

«Ми підійшли до SEO комплексно, разом із TopDog і Турум-бурум, особливо сфокусувавшись на UX SEO та картографуванні користувацьких шляхів. Аналізуючи, як відвідувачі пересуваються сайтом, перебудувавши інформаційну архітектуру та оптимізувавши дизайн і контент, ми збільшили трафік із Google на 30% і підвищили конверсію на 25%. Це стало нашим найуспішнішим сезоном за всю історію за обсягом доходу.»

— Матс Ольссон, PO, Fotoklok