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

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

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

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

Улучшили UX для сайта «Нильсон Авто»

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

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

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

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

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

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

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

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

  • представили в хедере сразу три бизнеса, добавили адрес;
  • предусмотрели слайдер, на первом баннере разместили позиционирование и описание отраслей бизнеса;
  • добавили подробную навигацию, чтобы не приходилось скроллить сайт. Теперь она отражает каждый раздел сайта. Разместили список услуг АТЦ: у каждой из них будет своя страница с подробным описанием;
  • сделали так, чтобы марки ремонтируемых авто сразу попадали в поле зрения — так можно проще заинтересовать водителя. Если нажать на марку автомобиля, кнопка изменится под название. Например, «Записаться на ремонт Fiat Ducato». Также всплывёт модальное окно с предложением по ремонту автомобиля выбранной марки — так обращение становится персонализированным .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подготовили лаконичный и стильный редизайн сайта Jamilco

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рекомендуем Antro как надёжного и профессионального подрядчика в дизайне и разработке eCommerce-решений. Полностью довольны результатами нашего сотрудничества

Александр Соколов, руководитель группы проектов eCommerce в ДжамильКо

Сделали информативным сайт «Профессора Фрейда»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не удивляйтесь, что отзывы одинаковые — это скриншот прототипа<br />
Не удивляйтесь, что отзывы одинаковые — это скриншот прототипа

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

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

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

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

Вместо итогов

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

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

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

131
102 комментария

Неприятное трицветие, агрессивное

10
Ответить

Наверно, я могу согласиться, что на баннере действительно может создаваться такое впечатление. Это около-пилотная версия. Кстати, на сайте сейчас более чистый вариант)

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

1
Ответить

Клёвый формат, без душнилова, чисто позалипать в картинки))

9
Ответить

Так оно и подразумевалось)

1
Ответить

Рай для тех, кто не любит читать)

Ответить

Хорошо сделано и понятно обосновано. Реально видно, что сайты стали информативнее, их стало легче читать.

5
Ответить

Я бы сказал на сайтах появилось, что читать😄😄

Ответить