Дизайн-конструктор для университета СПбГУ
Кейс  •  UX/UI дизайн  •  Дизайн-система  •  2017
СПбГУ — современный Российский университет с богатой историей и объемом данных в интернете, которые требуют системного подхода и постоянного обновления. Задача — создать полноценный дизайн-конструктор для всей экосистемы огромного института, разработать руководства и рекомендации для наполнения и поддержки. 

Моя часть 

Это долгосрочная работа над дизайном по разработанной совместно СПбГУ и студии Deasign Russia проектной документации. В мои компетенцию входил работа с полученными данными на стадии UX-исследования, анализ современных подходов к созданию подобных проектов для университетов по всему миру, создание дизайн-концепции, дизайн адаптивных шаблонов, разработка дизайн-системы, работа с командой разработки.
UX-исследования
Все UX-исследования проводились на стороне команды СПбГУ и студии, но анализ полученных данных, и основные выводы необходимо было воплощать уже на стадии дизайн-макетов.

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

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

Более 400 % зафиксирован рост числа пользователей смартфонов среди посетителей сайта СПбГУ с 2013 года.

Источник: spbu.ru

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

Так же для этапа дизайн необходимо было проанализировать все прототипы, логику их построения и продумать адаптацию для всех основных устройств.
Дизайн
Первый этап дизайна — подготовка дизайн-концепции, отличной от всех сайтов университетов России, США и Европы. Сайт должен выделятся на фоне конкурентов, и соответствовать историческому духу. После согласования со всеми участниками проекта началась работа по дизайну шаблонов конструктора сайта. 

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

Пример адаптации шаблона текстовой страницы для событий и публикаций

Основная сложность этапа дизайна — стилистически согласовать в конструкторе десятки блоков, стилей текста и видов шаблонов. При этом важно помнить про удобство контент-менеджера, и разнообразность добавляемого материала. 
На версии для планшетов сайт отлично воспринимается в вертикальной и горизонтальной ориентации, первые окна просмотра содержат всю важную информацию, а длительная работа с сайтом не утомляет пользователя. 
Мобильная версия сайта СПбГУ предоставляет пользователям все материалы, отвечает современным паттернам поведения и пользовательского опыта — с телефона сайтом удобно пользоваться.
Результат работы
По итогам запуска и длительной работы по наполнению проект собрал массу положительных отзывов как профессиональной аудитории так и конечного пользователя. Для сайта нарисовано более 100 адаптивных шаблонов и руководства по созданию и наполнению страниц.

Сайт занял третье место «Рейтинга Рунета 2017» в категории «Культура, искусство, общество».
Back to Top