Привет, Хабр! На связи Юлия Жидкова, тимлид команды продуктового дизайна «МосТрансПроекта». В одной из прошлых статей мой коллега Руслан рассказывал о создании сервиса по оценке транспортной доступности жилых комплексов «Узнай про ЖК». Сегодня я расскажу, как мы разрабатывали дизайн сервиса, какие проблемы пришлось решать и почему «Узнай про ЖК» сегодня выглядит именно так, а не иначе.

Вначале было слово и слово было «методика»

«Узнай про ЖК» — сервис оценки транспортной доступности для жилых комплексов Москвы, построенных с 2022 года. Он предоставляет информацию о состоянии двора, наличии подземной парковки, пешей доступности до различных объектов в пределах 10-30 минут, а также доступности городского транспорта. Сервис агрегирует 35 показателей и формирует две оценки: рейтинг географической доступности ЖК и рейтинг инфраструктуры, созданной застройщиком для жильцов.

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

Основная концепция и смысл дизайна родились в результате очередного мозгового штурма: мы решили сделать основной ценностью удобный и понятный рейтинг жилых комплексов (как «Кинопоиск», только лучше). Именно это и стало отправной точкой для дальнейшей работы над визуальной составляющей проекта.

Глобально перед нами стояло три проблемы:

Во-первых, в отличие от того же «Кинопоиска», у нас было два рейтинга, разных по смыслу и содержанию. Это значит, что на страницах сервиса должно быть два акцента, причем равнозначных. Такая дуальность могла привести, с одной стороны, к распылению внимания пользователя, а с другой, к концентрации только на одном рейтинге при полном игнорировании второго.

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

Три кита дизайн-процесса

Первым делом пришлось преодолеть искушение сразу же начать рисовать страницы, макеты и иконки. Чтобы не потеряться в пространстве смыслов и запросов, мы решили четко следовать дизайн-процессу.

На первом этапе нужно было провести исследование и пропустить проект через продуктовый фрейм «ЧТО — ЧТОБЫ ЧТО — ДЛЯ КОГО», определив его целевую аудиторию и способы использования, а также выявить ключевых конкурентов. Даже если вам кажется, что здесь всё очевидно и понятно, не пропускайте этот этап, он поможет вам навести порядок в голове и четко структурировать всю дальнейшую работу.

1.«ЧТО»

Следуя намеченного плану, мы определили, что именно делаем. Наш продукт — это каталог жилых комплексов, а главная ценность — рейтинг с объективными оценками их транспортной доступности.

2.«ЧТОБЫ ЧТО»

Чтобы дать пользователям честную оценку ЖК и отчасти мотивировать застройщика проектировать лучшую транспортную инфраструктуру своих жилых комплексов.

3.«ДЛЯ КОГО»

Первоначально мы прикинули, кто и зачем может пользоваться нашим сервисом, а затем подкрепили наши предположения исследованиями, которые запускали вместе с «Цианом». Так было выделено две группы пользователей:

1)Непосредственные пользователи: покупатели квартир в новостройках, т.е. те, кто уже выбирает себе квартиру, «мечтатели», которые пока не могут позволить себе жилье, но активно изучают разные варианты и ситуацию на рынке, а также инвесторы, покупающие недвижимость для вложения средств.

2)Потенциальные пользователи: все жители Москвы, застройщики, эксперты в сфере строительства и транспорта, пользователи площадок-агрегаторов недвижимости («Циан», «Авито», «Домклик», ДОМ.РФ и т.д.).

Дизайн прототипом красен

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

Например, мы сразу определили, что нашими ключевыми страницами должны стать общий каталог жилых комплектов (одна из главных точек входа в сервис), а также страница отдельного жилого комплекса, которая доносит до пользователя основную ценность продукта. У последней было три основных функции:

• Показать цифры рейтинга и раскрыть их содержание;

• Раскрыть составляющие каждого рейтинга;

• Визуализировать критерии на карте.

• Для этого пришлось плотно поработать с текстами и перевести термины и понятия транспортной аналитики на более простой, доступный всем пользователям язык. Например, вот так выглядела таблица с перечнем критериев оценки одной из первых версий методики:

А вот так — первый прототип страницы жилого комплекса. Главное на ней – это оценки рейтингов с критериями:

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

Уходим от абстракций

И, наконец, третий этап дизайн-процесса — разработка визуальной концепции. После того, как мы создали общий макет продукта и разбили всю информацию по блокам, нужно было сделать его «живым»: подчеркнуть главное, определить композицию, цвета и шрифты, иконки. Одним словом, сделать сервис приятным для глаз и интуитивно понятным для пользователей.

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

Но с этим возникла проблема. Символов было два, и это создавало определенное неудобство. Если бы рейтинг был один, мы могли везде использовать единую иконку – символ одновременно и рейтинга, и самого сервиса. Но в нашем случае визуальная часть сильно зависела от функциональной, а по методике расчета рейтингов ставить жилому комплексу лишь одну оценку было некорректно. Тогда бы получалось, что мы оцениваем застройщиков по критериям, на которые те никак не могут повлиять: местоположение жилого комплекса, близость к разным объектам транспортной инфраструктуры, метро, остановки городского транспорта и т.д. В то же время есть внутренние удобства ЖК — парковки, пешеходные связи, безопасность движения. На эти факторы застройщик уже может повлиять, а значит их нужно оценивать отдельно.

Тогда мы придумали уникальные иконки сразу для двух рейтингов: местоположение ЖК и мероприятия застройщика (при запуске сервиса они назывались именно так). При этом выстроить рейтинги иерархично было нельзя, ведь важны обе оценки. Они должны быть равнозначными, но при этом визуально отличаться друг от друга. Для этого мы выбрали два основных средства: форма и цвет. В первой итерации символы выглядели следующим образом:

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

• Оценка местоположения ЖК: отсылка к пину (англ. «pin» — точка на карте);

• Инфраструктура ЖК (всё, что происходит внутри территории, сконцентрировано в одном месте и связано с действиями застройщика): символ немного похож на шестеренку, отражает механизм и процесс работы застройщика с инфраструктурой.

Два значка круто объединялись в единый общий символ/логотип продукта.

Нам самим эти иконки очень нравились, но интервью с нашими потенциальными пользователями показали, что символы слишком абстрактные, их сложно привязать к конкретным смыслам. Мы задали еще несколько вопросов целевой аудитории, проанализировали обратную связь и приняли решение немного снизить уровень абстракции элементов (то есть степень их отвлеченности от объектов реального мира). В нашем случае минимальной абстракцией будет здание с близлежащей территорией и булавка на карте, а максимальной — простые формы геометрических фигур (точка, круг, квадрат и т.п.).

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

Вот так шла эволюция наших иконок, от более простых и абстрактных к более сложным и детализированным:

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

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

Вот так выглядела страница жилого комплекса на момент запуска сервиса.

Критерии рейтингов сгруппировали по смыслу и выделили их на карте выбранными цветами. Точечные объекты — станции метро, автобусные и трамвайные остановки и т.д. — отображались как пины. Уже на старте работы сервис строил маршруты от ЖК до этих точек.

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

Кроме того, наглядно показали разницу между хорошим и плохим жилым комплексом на вот таких иллюстрациях.

Что в итоге?

В январе следующего года «Узнай про ЖК» исполнится три года. Недавно в каталог сервиса вошли 52 новых жилых комплекса, всего их 552. Сейчас у пользователей есть надежный и удобный инструмент для оценки жилья по всем транспортным параметрам.

 Без четкого продуктового подхода создать такой инструмент было бы невозможно. При его разработке мы поэтапно решали встающие перед нами задачи: изучали методику, оформляли структуру сервиса, прорабатывали детали и создавали функционально удобный продукт. На каждом этапе особое внимание уделяли обратной связи и реакции пользователей, дорабатывали и усовершенствовали макет и детали. И сегодня мы продолжаем улучшать сервис, проводя исследования, улучшая пользовательский опыт и добавляя новый функционал.

 А вам нравится текущий дизайн «Узнай про ЖК»? Удобно ли пользоваться сервисом?  Рейтинг транспортной доступности можно посмотреть тут. Ждем ваших комментариев. Готовы обсудить и поделиться своими соображениями.