Как сделать сайт лучше: показываем на 3 кейсах

Привет, это Antro. В формате «до — после» доказываем, что дизайн — это не просто картинки. Хотя картинок будет много.

Мы часто публикуем кейсы, в которых подробно рассказываем о проектах. Каждую деталь обосновываем, как и клиенту: даём ссылки на исследования, подтверждаем эффективность решения статистикой. В этой статье мы показываем кейсы в лёгком и понятном формате, наглядно и без тонны подробностей. Разобрали три сайта компаний: «Нильсон Авто», Jamilco и «Профессор Фрейд».

В июне 2022 к нам обратился «Нильсон Авто». Компания ремонтирует грузовые и дизельные машины, производит и продаёт автозапчасти. Это три бизнеса, которые развивались с разными названиями и айдентикой.

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

Переработали главный экран

Раньше он выглядел так:

У старого экрана было несколько проблем:

На новом главном экране внесли изменения:

Сделали виды работ подробнее и аккуратнее

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

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

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

Рассказали, как работает «Нильсон Авто»

Блок «Как мы работаем» — хороший раздел прошлого сайта. В нём компания рассказывала о преимуществах, которые есть у техцентра. Весь блок состоял из текста: пользователь нажимал на кнопки с принципами работы, а рядом читал описание. Решение неочевидное: прежде чем прочитать текст нужно было догадаться, что надписи кликабельные.

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

Объяснили, почему нужно выбрать «Нильсон Авто»

На старом сайте был блок «Почему мы». В нём рассказывали о главных выгодах сотрудничества с компанией. Блок повторял те же ошибки, что и раздел с видами работ — неконтрастный текст, отсутствовало единое оформление. Строчки с описанием были слишком длинными — читать предложения было слишком сложно.

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

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

Рассказали об акциях

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

Добавили социальное подтверждение

На сайте рассказали о команде, показали настоящие фотографии. Это создаёт больше доверия: водитель сможет представить, кто будет ремонтировать его авто. Увидит, что за сервисом стоят настоящие люди — это дополнительно эмоционально расположит покупателя.

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

После нашей работы сайт значительно изменился:

ДжамильКо — компания, которая поставляет и реализует люксовые бренды одежды в России. Это бизнес, который объединяет 2 500 сотрудников, 350 партнёров и 250 магазинов по всей стране: New Balance, Juicy Couture, Lee, Timberland, Wolford и других брендов. Мы с прошлого года сотрудничаем с компанией, и за это время поработали с многими задачами. В этот раз расскажем о редизайне сайта самого ДжамильКо.

Главная цель — рассказать о компании и брендах, с которыми она сотрудничает. Донести основные преимущества и ценности для партнёров.

Переработали первый экран

Так главная выглядела раньше:

Старый экран уже не соответствовал духу компании. Он был слишком серьёзным, неинформативным: чтобы узнать о брендах, с которыми сотрудничает «ДжамильКо», нужно было нажимать на слайдер — многие пользователи не станут этого делать

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

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

Рассказали о компании

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

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

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

Отразили, что происходит в компании. С помощью блока «ДжамильКо» может делиться новостями и приглашать аудиторию на свои мероприятия.

Показали бренды

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

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

Закрыли HR-задачи

С помощью сайта компания привлекала новых сотрудников. Раньше HR был посвящён один блок с призывом к действию и кнопкой «Подробнее». Чтобы работа в компании была привлекательнее, мы добавили больше деталей к описанию.

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

Добавили блок для партнёров

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

В дизайне сайта мы не гнались за «вау-эффектом». Делали оформление сдержанным и стильным — так показали серьёзность компании. Дизайн вышел плавным, но динамичным: избегали острых углов, резких изломов, а вёрстку подготовили разнообразной. Не использовали ярких цветов: задействовали спокойные, молочные оттенки. По странице легко понять, чем занимается компания, как начать с ней работать — это главная цель, которую мы реализовывали в дизайне.

Клиенту понравился результат — нам даже написали рекомендательное письмо от компании. Вот главная цитата из него:

Закончили проект несколько лет назад, но показываем только сейчас. Профессор Фрейд — бизнес, состоящий из трёх частей: сигарный клуб, магазин сигар и табачных изделий, ресторан. Компания обратилась к нам, чтобы переработать сайт — старая версия казалась слишком консервативной.

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

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

Переделали главную

Оставили название и позиционирование. Сделали оформление, свойственное премиальным брендам: шрифт с засечками, лаконичный дизайн.

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

Подобрали шрифтовую пару. Для заголовков — современная антиква, для остального текста — гротескный шрифт Proxima Nova.

Заменили навигацию: вместо «каталог» подписали «магазин», вместо «клуб» — «сигарный клуб». Чтобы пользователь, который впервые зашёл на сайт, получил больше информации и понял, что к чему. Сделали акцент на кнопке «Забронировать», ведь в первую очередь посетители заходят на сайт ради клуба

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

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

Каждое направление бизнеса мы раскрыли отдельными экранами. Описали ключевые преимущества, добавили экранам микроанимации — текст и картинки постепенно вылезают снизу по мере прокрутки страницы.

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

Для экрана ресторана добавили карусель с фотографиями. Компания работает в премиальном сегменте, где многое решает внешний вид. Фото обстановки помогают пользователю оценить уровень заведения.

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

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

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

В новой концепции мы сохранили лоск, свойственный премиальному сегменту, но при этом отошли от излишнего «историзма» в дизайне. Если прежнее оформление скорее напоминало консервативную газету, то новое — современное деловое издание.

Мы попробовали новый лёгкий формат с обзором наших кейсов. Постарались сделать его интерактивным, добавить много картинок, показать сравнение. Если вам нравится читать более подробные кейсы с исследованиями, этапами работы и подробными описаниями:

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