Рост в два раза: как мы переосмыслили дизайн портала о Москве и увеличили время на сайте
Если вы любите гулять по Москве, то наверняка замечали таблички с QR-кодами на исторических зданиях. Именно с них в 2013 году началось развитие портала «Узнай Москву» — интерактивного городского гида, где собраны описания зданий и памятников культуры. QR-коды стали одной из точек входа на сайт, который долгое время служил онлайн-энциклопедией для тех, кто из офлайна заглядывал в онлайн, чтобы больше узнать о конкретной достопримечательности.
Со временем портал превратился в полноценный культурно-архитектурный туристический сайт для жителей и гостей Москвы. Сегодня «Узнай Москву» содержит описания более 3000 зданий, памятников и музеев, а для любителей гулять пешком — свыше 180 тематических маршрутов и более 85 квестов.
Такое разнообразие контента и форматов со временем повлияло на удобство сайта – визуально он устарел, пользователям стало все сложнее находить нужную информацию, разделы стали сложными и неинформативными.
Поэтому мы провели полный редизайн сайта, чтобы сделать портал не только современным и красивым, но прежде всего удобным и интуитивно понятным для пользователей.
Ниже – наш рассказ о том, как изменился дизайн главной страницы и разделов сайта, какой новый функционал удалось реализовать и как нам удалось учесть идеи и пожелания пользователей.
Зачем понадобился редизайн
Идея редизайна зрела давно, но окончательно сформировалась после проведения в 2019 году качественного исследования среди посетителей портала. Индекс удовлетворенности на тот момент был достаточно высоким – 8,4. Однако в ходе глубокого UX-исследования пользователи отметили и массу неудобств:
· в разделах было недостаточно информации, а фотографии объектов нередко оказывались некачественными;
· найти нужный объект было сложно;
· фильтры и карта были неудобными;
· материал сайта не был четко структурирован и рассортирован.
Благодаря изучению пользовательского опыта, трудностей, с которыми сталкиваются люди, и обратной связи с предложениями по доработке разделов сайта стало понятно, что редизайн коснется как декстопной версии портала, так и мобильного приложения.
Визуально и функционально
Основная задача, которая стояла перед командой разработки – раскрыть на главной странице все варианты использования портала, сделать ее привлекательной, интерактивной и «живой». Затем, на следующем этапе предстояло выполнить все страницы сайта в едином стиле с главной страницей.
Дизайн главной страницы портала «Узнай Москву» подготовила студия Артемия Лебедева. Специалисты полностью переосмыслили визуальную подачу:
- страница портала стала «живой», с каждым элементом страницы можно взаимодействовать;
- карта города стала более информативной: здания и места отмечены тематическими иконками музея или памятника, при приближении у самых популярных объектов раскрывается фотография в миниатюре;
- у страницы каждого объекта на сайте появилось превью с основной информацией. Если раньше здесь отображались только название, адрес и рейтинг, то теперь указаны ближайшая станция метро и расстояние до достопримечательности, а также доступность аудиогида, видео или виртуального тура.
После того, как главная страница была готова, остальные разделы портала были приведены к единому стилю, сделаны функциональные доработки внутри портала. Основная задача, которую предстояло решить на этом этапе – сделать сайт интуитивно понятным для пользователей.
Также мы обновили и улучшили функцию поиска. Теперь найти интересующее здание, памятник или маршрут можно не только по его названию, но и по адресу или ближайшей станции метро. Для этого достаточно нажать на значок лупы, который можно найти в каждом разделе сайта.
Изменились и основные разделы — так, «Личности» дополнили специальным фильтром «Династии», а в разделе «Маршруты» появилась фильтрация по видам путеводителей. Например, по паркам и усадьбам, району, историческим местам. А квесты в одноименном разделе теперь можно фильтровать по тематике.
В новой версии портала появилась еще одна востребованная функция — возможность проложить наиболее короткий пеший маршрут по городу. Пользователь может открыть страницу интересующего объекта, а затем нажать на кнопку «Проложить маршрут». Навигатор в том числе подсчитает, сколько времени займет путь.
Идеи по доработке функционала регулярно предлагают и сами пользователи. Все предложения жителей в рамках краудсорсинг-проекта на портале «Активный гражданин» добавляются в план и реализуются силами внутренней разработки.
В этом году часть идей на основе пожеланий жителей уже реализована:
- на портале добавлено пять детских маршрутов (специальный фильтр «Для детей»), контент для детей будет пополняться;
- в раздел «Здания» добавлен фильтр «Московская реставрация», с его помощью можно увидеть объекты, отреставрированные с 2011 по 2020 год, с фотографиями до и после реставрации;
- в описании улиц и проспектов добавлена информация об их истории;
- в разделе «Личности» добавлен фильтр «Архитекторы», он содержит карточки каждой из перечисленных личностей;
- на портале и в приложении реализована синхронизация с Яндекс.Картами.
Измерили результат
После всех изменений, интерфейс портала стал более интуитивным, пользователям стало проще находить информацию и планировать маршруты для прогулок, проложить к ним короткий маршрут, а также воспользоваться новыми фильтрами в разделах сервиса. Разделы сайта стали визуально понятнее и логичнее, это заметно в том числе и на тепловых картах. Пользователи сразу находят нужный раздел, понимают, где расположен поиск и все необходимые кнопки.
Сейчас мы уже видим измеримый результат проведенной работы: после релиза обновленной версии портала время, проведенное на сайте, выросло вдвое. С июля прошлого года порталом воспользовались 3,3 миллиона раз.
Результат ощутим и в просмотрах конкретных разделов. Существенный рост показали «Спецпроекты» (в 14 раз), и «Дайджест новостей» (в 6 раз), «Квесты» — в 2,4 раза.
Одновременно с масштабным редизайном портала велась работа и по обновлению мобильного приложения. Скачать и попробовать его вы можете уже сейчас в App Store и Google Play
А о том, как это было сделано – в нашем следующем материале. Не переключайтесь!