Четыре вызова дизайна для БВШД: дедлайн, структура, второй подрядчик и креатив
Меня зовут Миша Розов, я основатель и Chief Design Officer дизайн-лаборатории интерфейсов Pinkman. Год назад к нам пришла Британская Высшая Школа Дизайна с задачей — сделать редизайн сайта. Для любой дизайн-студии реализовать подобный проект — стратегически важная и крутая история, тем более, что я сам выпускник БВШД.
У нас было несколько вызовов и сложностей, связанных с проектом, о которых я расскажу ниже.
БВШД – флагманская школа университета креативных индустрий Universal University в России. Основана в 2003 году. Специализируется на обучении в сферах дизайна, визуальных искусств, моды, бизнеса и маркетинга. Школа предлагает формат высшего образования, дополнительного профессионального образования, интенсивные курсы. Особенности обучения в БВШД – творческая среда, большое количество практики, международный преподавательский состав.
Нам было важно, чтобы над проектом нового сайта Британки работали именно выпускники. Мы рассматривали несколько агентств, но в условиях ограниченного времени на проект быстрее всего мы договорились с Pinkman.
Задача
Сделать новый дизайн, сохранив фирменный стиль, структурировать объемы информации и предоставить ее в удобном виде, чтобы повысить посещаемость сайта.
Челлендж №1: структура сайта
Клиент сделал подробную аналитику по всему сайту, из которой выяснилось, что ⅔ сайта – мертвые страницы.
Главная проблема старой версии – отсутствие понятной внутренней структуры. Новые страницы добавлялись бессистемно, поэтому информацию невозможно было найти без прямой ссылки, что сильно влияло на конверсию. На каких-то страницах вообще была нулевая посещаемость, плюс, было сложно сориентироваться среди большого объема информации и подобрать себе курс.
Мы начали с того, что перелопатили всю структуру. В этом нам помогли две вещи. Во-первых, мы очень часто встречались с заказчиком: тесные коммуникации позволяют понять, какие есть боли и как их решить. Во-вторых, наш дизайнер пообщался с выпускниками и студентами и узнал, как они видят все со стороны.Структуру мы собирали от общего к частному, а потом уже накладывали на нее сайт.
Челлендж №2: сам дизайн
БВШД знаменита своими студентами. Когда человек говорит «Я учился в Британке» – тебе сразу понятно, чего стоит от него ожидать. Клиент хотел дизайн, который бы показывал, что они не просто академическое учебное заведение, но еще и про людей.
Нам нужно было учитывать фирменный стиль БВШД, который придумала студия Ильи Рудермана в 2015 году. Это отражения, яркая градиентная заливка и шрифт Graphik. Мы решили развить эту тему дальше – так родился динамический градиент на главной и в некоторых заголовках. Наша команда вынесла на первый план функциональность. Мы обновили систему навигации, сделали простой тест, который упрощает выбор и автоматически выводит подходящие программы.
При создании дизайна мы взяли в основу два принципа: атомарность и швейцарский стиль.
Атомарный дизайн – это система небольших элементов, атомов, которые можно использовать повторно и комбинировать друг с другом. В данном случае атомы – это самые маленькие составные интерфейса: кнопки, поля ввода, флажки, шрифт. Соединяя атомы вы получаете молекулу – более крупный объект на сайте, например, кнопку и поле ввода. Соединяя несколько молекул вы получаете крупный объект на сайте. А уже из них можно создать каркас страницы. Атомарный подход мы использовали для работы над внутренней структурой сайта: аккуратно сверстали блоки в Figma и составили из них страницы.
Швейцарский стиль пришел в веб из графики. Его основные черты – простота восприятия, контрастные цвета, шрифты без засечек, подчеркивание модульной сетки, читабельность, асимметрия, свободное пространство, абстрактные и геометрические формы без декоративных элементов. От швейцарского стиля мы взяли простоту и функциональность, шрифт как основной элемент графики, свободное пространство – «воздух» в верстке и подчеркнули модульную сетку.
Челлендж №3: время
На старте мы неверно оценили масштаб работы: ее оказалось больше, чем мы планировали. Студия не могла сделать дизайн плохо – прессинг от индустрии мотивировал выкладываться еще больше.
Да, нам удалось создать дизайн за три месяца, но команда работала на надрыве. Сейчас я понимаю, что нужно было предложить более медленный темп, который был бы комфортнее для команды.
Челлендж №4: второй подрядчик
У заказчика есть подрядчик по бэкенду, с которым он сотрудничает с 2015 года – Группа МАХАОН. На этом проекте мы работали вместе. Несмотря на плотную коммуникацию с коллегами, у нас случился фейл: МАХАОН не подключили на раннем этапе разработки сайта, поэтому мы не были в курсе некоторых нюансов. Когда наша команда показала готовый вариант, оказалось, что интегрировать его в бэкэнд нельзя. Пришлось вылезать за рамки бюджета и переделывать все в срочном режиме. Да, мы все справились и получилась отличная работа, но не скажу, что такой формат сотрудничества эффективен. Чаще всего это – головная боль для разработчиков и дизайнеров, которая чревата дополнительной оплатой.
Я сам очень горжусь сайтом, который получился. За него мы получили несколько наград: первое место в категории «Лучший сайт образовательного учреждения» на премии «Золотой сайт» в 2020 году и второе место в схожей номинации «Тэглайн».
Взгляд со стороны разработчика: как сделать классный проект с другим подрядчиком и не поругаться
Мы как раз больше продакшн, поэтому часто работаем над сайтом вместе с другим подрядчиком, который делает дизайн. Главный нюанс в такой работе – это подготовка макетов. А в случае с БВШД еще и качество frontend’а. И то и то было сделано профессионально.
Если речь идет не о разработке нового проекта, а о редизайне текущего, то советую подключать программистов уже на этапе разработки прототипов, чтобы учесть на этом этапе особенности текущей структуры и логику сайта, которая не всегда лежит на поверхности. Нюанс дизайна БВШД был еще в том, что сайт имел сложную логику ценообразования и должен был быть интегрирован с внешними системами, например, с 1С. Поэтому коммуникация команды дизайнеров и разработчиков была важна уже на этапе аналитики и прототипов.
Мы коммуницировали в «Битрикс24». В задачу были подключены все заинтересованные лица – менеджер со стороны заказчика, менеджер и тимлид от PINKMAN, менеджер и тимлид от Группы МАХАОН. Багфиксинг был в Trello. Весь код хранился и передавался через git. Доработки и обновления – тоже, что позволяло быстро накатывать изменения по верстке на сайт.
Если вы – заказчик, который собирается работать с двумя командами сразу, то:
1. Назначьте внутри своей компании единственное ответственное лицо, которое будет коммуницировать с подрядчиками. В противном случае будет анархия в коммуникации.
2. Соберите всех на старте, чтобы наладить коммуникацию между всеми участниками и подрядчиками. Привлекайте разработчиков как можно раньше.
3. Спланируйте сроки всех этапов и обозначьте общий дедлайн для всего проекта. Это спасет от ситуации, когда подрядчик не выполнил первый этап в срок, заняв 80% времени проекта, оставив коллегам на выполнение 20%.
Мнение заказчика
В начале 2019 года перед Британкой встала задача по редизайну сайта. Мы понимали, что продуктов у Школы становилось всё больше, а каркас главной страницы уже не позволял нам в полной мере управлять вниманием аудитории.
Британка сама по себе сложный для российского рынка продукт: у нас есть много программ и курсов, включая полностью англоязычный британский бакалавриат. То есть один сайт должен быть максимально полезным и для родителей, и для 30-летних специалистов, и для студентов, которые идут за первым образованием. Мы понимали, что особое внимание в работе над сайтом школы дизайна должно уделяться визуальной составляющей: он должен создавать wow-эффект.
Проанализировав огромный массив данных относительно того, как пользователи «ходят» по нашему сайту и какие разделы востребованы больше всего, отдел маркетинговых коммуникаций переработал структуру сайта. В этой задаче была и подзадача, так как англоязычная версия сайта, рассчитанная на международную аудиторию, не до конца повторяет русскоязычную версию: таким образом, мы как бы строили заново два сайта параллельно.
Еще одна цель, которую мы преследовали, — создание максимально человекоцентричного сайта. Ничего не говорит громче о вузе, чем его студенты и выпускники. Помимо понятной навигации по сайту, нам хотелось дать максимальный простор для шоукейса проектов и историй молодых дизайнеров и художников, которые меняют индустрию.
В новом сайте я кайфую от трех вещей:
— он построен не на галлюцинациях, а на аналитике;
— он стал интересным c точки зрения контента — теперь на главной странице можно познакомиться с выпускниками и их историями, подписаться на диверсифицированную рассылку, послушать подкаст Британки и записаться на любое открытое событие;
— он стал визуально классным: палитра цветов, динамические элементы, программатик, наш фирменный шрифт, — наконец всё сошлось воедино, чтобы отразить динамичную атмосферу творчества и инноваций, которыми дышит Британка каждый день.