Кейс: редизайн сайта Урало-Сибирского Института Бизнеса
Урало–Сибирский Институт Бизнеса (USIB) – надежный, профессиональный и престижный институт повышения бизнес-квалификации, лидер на рынке Урало-Сибирского региона. Перед нами стояла задача – разработать для него новый дизайн сайта. Рассказываем о нашей дизайн-концепции: зачем нужна видимая сетка, в чем польза силовой линии и контраста контента, а также для чего сайту «воздух».
Немного предыстории
С заказчиком у нас сложилась уже небольшая история. Полугодом ранее мы разрабатывали стартап – онлайн-площадку «Sense» с услугами специалистов, обладающих паранормальными способностями. Позже заказчик обратился к нам с другим запросом – сделать редизайн сайта института бизнеса «USIB» с дальнейшим продвижением.
О проекте
Основная целевая аудитория – топ-менеджеры и владельцы бизнеса. Решение о приобретении курсов может приниматься собственником бизнеса, наемным руководителем или самим сотрудником (по инициативе руководителя или самостоятельно за свой счет).
USIB предлагает каждому желающему познакомиться с самыми эффективными методами управления и ведения бизнеса, принятыми во всем мире. Институт содействует развитию предпринимательского потенциала, профессиональному и личностному развитию руководителей, бизнесменов и лидеров.
Цели и задачи
Основной целью было разработать презентабельный сайт, современный и удобный в части UI и технологий, без потери наработанных ранее привилегий в сети.
Исходя из этого, мы выделили для себя следующие задачи:
- провести аудит текущего сайта, проанализировать поведение пользователей;
- спроектировать презентационную главную страницу и 16 уникальных внутренних страниц (включая сервисные страницы и модальные окна);
- разработать мобильную версию сайта как наиболее приоритетную.
С чего начинали
В первую очередь мы провели юзабилити-аудит действующего сайта, используя инструменты Яндекс.Метрики:
- изучили основные показатели метрик;
- проанализировали карту кликов и карту скролла;
- оценили поведение пользователей на сайте.
Это позволило выявить слабые места текущего сайта, а также сделать предварительные выводы и гипотезы для разработки качественного дизайна.
На сайте практически отсутствовала адаптивная верстка, не соблюдались основные принципы юзабилити, были очевидные проблемы с типографикой. В целом дизайн всего сайта выглядел морально устаревшим.
Как зарождалась концепция
На следующем этапе мы проанализировали конкурентов:
- прямых (сайты бизнес-школ, предпринимательских институтов и высших школ экономики);
- косвенных (сайты высших учебных заведений, повышения квалификации и переподготовки).
Анализ позволил увидеть, что многие конкуренты не уделяют должного внимания визуалу – сайты давно не обновлялись и тоже морально устарели. Поэтому мы решили сделать ставку на дизайн, как основное конкурентное преимущество.
В чем основная идея
В основу нашей идеи лег тренд с использованием видимой сетки. Такой визуальный прием делает дизайн сайта более упорядоченным и упрощает просмотр контента, отделяя один раздел от другого.
Используемый в концепции контраст размеров, цветов и форм решает основные задачи:
- помогает найти необходимую информацию, сохраняя концентрацию пользователя
- приводит к целевому действию
- создает дополнительный эмоциональный эффект
Также наша концепция предполагает наличие свободного пространства («воздуха»), что подразумевает соблюдение закономерностей при работе с контрастами.
Такой подход в совокупности можно назвать «принципом бутика» – в дорогих магазинах вещи не теснятся на вешалке в узких проходах, у каждого предмета есть достаточное пространство вокруг, чтобы на него обратили внимание. Поскольку ЦА проекта – люди обеспеченные, готовые платить и получать услуги премиум-качества, мы предположили, что этот посыл будет подсознательно считываться на уровне дизайна.
Фирменный стиль
За основу фирменного стиля мы взяли брендбук заказчика, соблюдая рекомендации по использованию шрифтов, логотипа, цветов и других визуальных элементов.
Цветовая палитра состоит из двух акцентных цветов – основного бордового и вспомогательного гранатового. Основной цвет символизирует солидность, уверенность, консерватизм; ассоциируется со стабильностью и устойчивостью. Вспомогательный цвет – символ смелости и решительности.
Что касается типографики – использовали фирменные шрифты из брендбука, разработав иерархию в соответствии с правилами типографики.
Что получилось
Главная страница
В рамках Desktop-версии для главной страницы вместо стандартных решений мы предложили смелое, на наш взгляд, презентационное решение, которое позволило выделиться на фоне конкурентов.
Календарь событий и запись
Особое внимание уделено календарю событий. Простой и понятный интерфейс дает возможность быстро выбрать программу и записаться в несколько кликов. Чем ближе по дате старт программы, тем выше она в списке. Акценты на датах облегчают восприятие.
Внутренние страницы сайта
Одной из особенностей концепции является смещение силовой линии заголовков. Хлебные крошки, заголовки страниц и блоков выровнены по одной линии, которая визуально фокусирует внимание пользователя вдоль себя. Именно эти элементы в первую очередь сканируются пользователем при просмотре страницы (иначе говоря, применили F-паттерн сканирования информации).
Мобильная версия
Анализ текущего сайта показал, что бoльшая часть трафика – визиты со смартфонов (65,5% от общего числа посетителей). Поэтому при разработке адаптивных макетов особое внимание уделили мобильной версии сайта.
Дизайн для адаптивных версий получился более классическим и упрощенным. При этом все страницы сайта сохранили полную функциональность. Каждый блок приобрел наиболее удобное решение для использования на мобильных устройствах, с учетом лучших практик юзабилити.
И в заключении…
Хотелось бы отметить, что отклоняясь от стандартных решений, нам уже на уровне дизайна удается транслировать пользователям уникальность USIB:
- творческое, нестандартное мышление (асимметрия, динамика композиции);
- интеллект и точность (направляющие линии, которые упорядочивают на первый взгляд хаотичные элементы в каждом блоке).
Этот образ считывается подсознательно, пользователю нет необходимости его разгадывать. В этом и заключается одна из основных задач дизайна – дополнить собой контент таким образом, чтобы сложился образ компании.
Несколько цитат из его интервью журналисту Александру Плющеву.
— Смотри на Арсена Маркаряна — парень рубит бабки миллионами. 70.000 человек и каждый платит по 1500 рублей в месяц! — А почему бы и нам так не зарабатывать?
Вопрос не в том, можно ли, а в том, КАК?— и эта статья вам все расскажет
Интервью с Михаилом и Натальей Грин, сооснователями Squad2
Содержание статьи:
1. Как произошла атака: изощрённая схема с мультиподписью
2. Реакция руководства ByBit: образцовый пример кризис-менеджмента
3. Реакция конкурентов: неоднозначная поддержка индустрии
4. Важный момент: для обычного пользователя риски минимальные
5. Банкран vs. взлом: в чём фундаментальная разница
6. Что делать пользователям ByBit…
Как понять, что мешает вашему сайту приносить больше клиентов? В Яндекс.Метрике появилась возможность сравнивать свой сайт с конкурентами. Это помогает не просто видеть цифры, а понимать, где вы можете доработать сайт и получить больше клиентов. Разбираем как её включить и как применять на практике
Олег Терновой нашел, как применить военную технологию mesh-сетей для гражданского назначения. Вместе с единомышленниками — выходцами из академической среды — ученый основал компанию Ternex. И теперь они обеспечивают Wi-Fi в Алтайском крае и планируют выйти на всероссийский рынок.
В эпоху цифровизации, когда каждый день приносит что-то новое, некоторые люди воспринимают эти изменения с опасением. Чаще всего такие страхи напрасны и возникают из-за непонимания, как работают технологии. Стоит один раз разобраться – и тревога уходит, уступая место удобству и эффективности. Рассмотрим на примере электронной подписи.
На реальном примере покажу, как в агентстве отслеживаем результаты менеджеров в переговорах с помощью AI ассистента
Очень интересно и понятно. Спасибо
Спасибо Вам за обратную связь!
Оо, классно сделали! 😍
Наш дизайн-отдел очень рад таким отзывам))
Смотрится дорого и лаконично
Правильно ли я понял, что вы слабые места определили по количественным метрикам и не проверяли это качественными методами?
В статье отражены основные методы аналитики, но далеко не все. В первую очередь анализировали статистику (метрики) и поведение пользователей на уже существующем сайте. В роли качественного метода исследования было проведено интервью с фокус-группой заказчика на презентации первых концепций – это помогло понять мотивы целевой аудитории и выдвинуть гипотезы (пишем об этом в главе "В чем основная идея").