Цветы, трава и шипы: как мы сделали редизайн сайта сами для себя

Получилось дерзко, смело и очень юзабилити.

Мы в «Палиндроме» делаем много качественных лендингов и редизайнов для клиентов. Решили обновить сайт и для себя. Как мы это сделали и что получилось — рассказываем в статье. Читайте, смотрите картинки, наслаждайтесь, вдохновляйтесь, отдыхайте глазами и любите.

История стара как мир диджитала — хотели повысить конверсию в заявки. Мы провели аудит и выяснили, что кнопка «написать нам» в правом верхнем углу приносит мало кликов.

Мы получали отзывы, что старый сайт «непонятный». Он классно отражал наши дизайнерские умения: был красивым, смелым и привлекающим внимание. Мы видели, как другие компании копируют его элементы.

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

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

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

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

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

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

Параллельно команда собирала мудборды и искала интересные механики.

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

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

На этом же этапе продумали вёрстку. Основные принципы:

На основе этих принципов появилась главная страница. Её задача — привлекать внимание с первых секунд. Мы придумали механику интерактивных элементов с числами, которые раскрывают дополнительную информацию при наведении курсора.

Если навести на цифру, откроется текст. Например, под единицей скрывается «Контент-агентство №1 по версии Tagline». Что спрятано под остальными цифрами, ищите на сайте.

Особое внимание уделили мобильной версии сайта, чтобы обеспечить безупречный пользовательский опыт на всех устройствах. Дизайн адаптируется под различные экраны, сохраняя при этом эстетическую целостность и функциональность.

Наш старый лендинг хорошо отражал ценности «Палиндрома»: смелость и качество. Этот характер хотелось сохранить и на новом многостраничнике.

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

Задачу передать настроение бренда сыграли иллюстрации. Иллюстраторы нарисовали много всего красивого.

При создании иллюстраций опирались на три ключевых принципа:

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

Для основного шрифта выбрали Suisse Int’l. Хороший вариант, когда нужно поддержать другие, декоративные шрифты в фирменном стиле, особенно с резкими штрихами. Его графика визуально придаёт ToV бренда спокойствие профессионализма.

Нам было важно протестировать сайт: как он воспринимается, не сложно ли по нему перемещаться и что можно сделать, чтобы стало лучше.

Для теста мы отобрали участников разного пола в возрасте от 20 до 35 лет, работающих в диджитале. Затем с каждым из участников провели звонок, на котором они выполнили четыре задания и ответили на сколько вопросов.

Все данные собрали в таблице и вот какой результат получили.

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

Придерживались нашего ToV, ориентировались на редполитику. У «Палиндрома» бодрый, бойкий, дружелюбный язык — но без перегибов и панибратства.

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

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

Мы добавили в текст сообщений эмоции, чтобы общение было более человечным. Например, в разделе с кейсами кнопка для заявки звучит как «Хочу так же!».

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

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

Место для благодарности команде, которая трудилась над редизайном:

Дизайн и иллюстрации
Даша Циденкова
Галя Горбунова
Катя Свиридова
Наташа Габис
Артём Лукьянов
Лаура Хлыстова
Тася Козлова

Разработка и тестирование

Лёша Стасенко
Лёша Никитченко
Ильгиз Мавлютов
Антон Заболотников
Егор Степанов
Даша Гулевская

Редакция

Юля Коханова

Корректура
Ира Михеева

Менеджмент
Маша Климентьева

Кейс подготовили:

Редактор Кристина Руф
Дизайнер Юлия Журавлёва