На новом сайте команда SETTERS построила удобные пути для пользователей и показала уникальную визуальную идентичность Kinch Lyons
Клиент
Kinch Lyons — международная команда бизнес-психологов, которая занимается развитием кадровых ресурсов с применением инструментов психологии.
Компания разработала новый брендинг и обратилась в SETTERS, чтобы обновить сайт с учетом новой айдентики. У предыдущей версии сайта была запутанная структура, многие пользователи терялись и не доходили до целевого действия — покупки курса. Поэтому надо было поменять структуру сайта и продумать новые пути для пользователей.
Дизайн сайта
На старом сайте Kinch Lyons из айдентики был только логотип. Команда SETTERS решила показать новый брендинг клиента с помощью цветов. Команда выбрала из брендбука три оттенка: синий, розовый и черный. Они стали основными для всего сайта. Остальные цвета — оранжевый, зеленый и бежевый, использовали, чтобы визуально разделить блоки и категории.
Паттерн Kinch Lyons составлен из очертания стрелки, которая используется в логотипе. Так как паттерны обычно состоят из большого количества графических элементов, чтобы не перегрузить сайт дизайнеры использовали одиночный элемент стрелки. Она не привлекает много внимания, но отражает новую айдентику.
Структура сайта
На старом сайте много информации дублировалось. А путь пользователя до покупки курса был запутанным. Например, на старом сайте клиента было два раздела — Certification (курсы) и Upcoming events (приближающиеся события). Информация в этих разделах почти полностью дублировалось, только в Upcoming events были курсы, на которые можно записаться сейчас, а в Certification — все.
С главной страницы пользователь мог пойти двумя путями. Первый: перейти в раздел Get certified (получить сертификат), попасть на вкладку со всеми курсами, а дальше открыть страницу с информацией о понравившемся курсе. Второй: зайти в раздел Events (события), попасть на страницу с актуальными курсами, а после выбора курса на страницу с регистрацией.
Команда упростила путь пользователя — объединила все курсы в один раздел с возможностью фильтрации. На главной странице добавили блок с актуальными курсами, чтобы выделить события, которые проходят сейчас. И упростили покупку курсов — сделать это можно прямо с карточки курса.
Также дублировались разделы Articles и News: на главной и в меню они назывались по-разному, но это была одна и та же страница. Команда сделала общий раздел Connection, где находится все, связанное с контентом, — Articles и Videos.
Чтобы выстроить удобные пути для пользователей сайта, команда глубоко погрузилась в бизнес клиента. Так как профессиональная терминология не всегда корректно переводится на русский, нужно было разобраться с нюансами курсов и их категориями.
Обычно корпоративные сайты с бизнес-тематикой выглядят слишком сухо и строго. Благодаря цветовому сочетанию, плавным анимациям, и нестандартным композиционным решениям, команда создала удобный сайт, который подчеркивает экспертность и индивидуальность Kinch Lyons. Это о людях, их тёплом и легком общении, а также о новых открытиях для себя.
Премии
Новый сайт Kinch Lyons выиграл награду в октябре 2022 года на Awwwards Honorable Mention — международная премия для веб-дизайнеров и разработчиков. И взял награды премии CSS Awards в номинациях Special KUDOS, UX award, UI award, Innovation Award.
Команда
Digital producer: Даша Белая
Арт-директор: Сергей Борцов
GH Lead UX/UI designer: Аня Пронина
UX/UI-дизайнер: Вадим Мовчан
Account manager: Ярослав Былинкин
Web-production: Methodzero
🤞♥️
Дальше — больше🤞🏻
Какая стильная работа 👍
)
Стиль во всём 😎
веб-дизайнеры разве еще живы?
а Цой?)
только Анита
Ну вообще-то не так давно Цой выпустил песню "аниме".
Так что да, жив.
А они умерли? Мидджорней все захватила?
Они продолжают делать классные и очень качественные вещи. Сайт Kinch Lyons — классный тому пример 😏
Ребята, привет)
Отличная работа с цветом вышла. Не поленился и зашел на сайт компании — вживую сайт выглядит действительно супер :)
Субъективно, кажется, что слишком много анимаций в блоке «How KinchLyons works with you». Это особенно заметно, когда скроллишь страницу и курсор попадет последовательно на плашки. И каждая плашка разворачивается и сворачивается))
В остальном, как и говорил выше, выглядит круто. Понравилось еще, как использовали линии + тонкие начертания текста. Обычно подобные приемы выглядят грязно, но у вас удалось сделать это визуально приятно!)
Максим, здравствуйте! Спасибо за интерес, умение заметить классные моменты и поделиться своим видением — очень ценим🤞🏻
Сайт получился действительно стильный!
Скажите пожалуйста, почему вы выбрали для него именно
Webflow и какие у него преимущества относительно Tilda?
И каким CMS вы в основном отдаете предпочтение?
Спасибо и желаю успехов и развития вашему агенству!
Здравствуйте! Спасибо за тёплые слова, нам очень приятно 😎
У нас были ограничены сроки — разработка на Webflow помогла нам их оптимизировать.
Анимации и эффекты, которые были заложены в дизайне, хорошо и плавно реализовались в Webflow, поэтому был сделан выбор в пользу него. Сайт довольно простой, он не содержит большое количество интеграций и сложные административные панели, поэтому No-code в данном кейсе отлично решал нашу задачу.
При выборе CMS мы исходим из задачи — они всегда разные. Мы работаем с разными CMS и фреймворками, в последнее время был удачный опыт со Strapi👌🏻
Все довольно понятно, читаемо
Хорошая работа)
Спасибо за поддержку! Команде будет очень приятно ❤️
Круто!
Не будем с этим спорить 😎
отличная работа проделана ,сделано со вкусом
Лучший комплимент для команды!
1). Сайт выдержан в ярких, насыщенных цветах. В связи с этим меня удивил чёрный, похоронный цвет кнопки. Я бы сделал тот же розовый. Смотрится контрастно.
Смущает текст "Welcome to the world of better talent assessments!". Не принимайте решение за клиента, что ваш продукт лучший. Даже McDonald's не пишет в своих рекламных баннерах, что их гамбургер самый вкусный. Попробуйте написать "развиваем кадровые ресурсы".
Ваш задача как продавца — предоставить пользователю характеристики вашего товара и позволить ему решать cамостоятельно, хороший у вас продукт или нет.
2). В блоке "upcoming certification" во второй колонке слайдера из-за переполнения контента тот уехал в невидимую область. Пропишите колонке overflow: auto;
Стрелки навигации слишком далеко от слайдера. К тому же если по ним кликнуть 2 раза, то почему-то у меня выделяется текст "All courses" на кнопке ниже.
3). Липкий header выглядит слишком навязчиво. Как муха, которую я не могу прихлопнуть. Попробуйте уменьшить у него отступ сверху.
Уберите лого слева. Оно только мешает. Не беспокойтесь о том, что якобы конструкция не будет сбалансированной из-за этого. Текст в центре и гамбургер справа уравновешивают друг друга и так. Я бы липкий header вообще убрал бы. Или сделал бы так, чтобы он отображался только при скролле вверх.
4). На главной странице много типографики, при этом всего лишь одно фото (парень с девушкой) и то оно наполовину прикрыто. Психология — работа с людьми. Добавьте в блок "our clients say" видеоотзывы вместо простыни текста. Заголовок как раз подходящий: наши клиенты ГОВОРЯТ. Говорят, не пишут.
Да, я знаю, что, например, в about у вас есть крутые фотки. Но главная страница на то и называется главной, что она важнее всех остальных.
5). Копирайт в подвале почему-то 2022 года.
А в целом сайт очень хорош. Сделан с любовью. Анимации плавные, эпилепсии не вызывают.
Здравствуйте! Спасибо за внимание к кейсу и его деталям. Мы даже поделились вашим разбором с командой, которая работала над проектом 😏
Понимаем, о чём вы говорите, но во многом вопросы по контенту (визуальному и письменному) опираются на четкие ТЗ клиента.
Еще раз спасибо за подробный разбор и желаем вам классных проектов!
И вам дальнейших успехов!
Насчёт ТЗ понимаю. Если клиента не получается переубедить, я делаю так, как он говорит. Даже если это фигня.
Как-то размещал ядовито-зелёный текст на розовом фоне для визитки, из-за чего у меня без шуток шли слёзы (из-за дикого контраста бившего прям по глазам). А клиент ещё говорил "Во-во, так и надо".
Разница вкусов — дело такое 🤪