Исторически ФСК и ДСК были построены на разных дизайн-системах, что усложняло дизайн и разработку. Многие компоненты решали одинаковые задачи, назывались по-разному и путали дизайнеров и разработчиков в работе над одинаковыми страницами на разных сайтах
Я взял на себя задачу по созданию единой универсальной дизайн-системы. Для этого я собрал обратную связь от команды, согласовал изменения с разработчиками и проработал общую архитектуру
За 4+ месяцев мы провели анализ всех сущностей в двух ДС, объединили компоненты и синхронизировали дизайн и разработку
Теперь у двух схожих сайтов одна дизайн-система на токенах. По словам разработчиков, это решение экономит время вдвое в работе над двумя сайтами
Собирая обратную связь от дизайнеров, я получил положительный фидбэк: работать с новой дизайн-системой стало проще и удобнее
Контекст
В исходном интерфейсе выбор был разбит на отдельные блоки, которые занимали много места. Мы пересмотрели сценарий и представление схемы. Решение нужно было подготовить для разных жилых комплексов, поэтому в задачу входили и интерфейс, и требования к графике
Роль
Я начинал эту задачу как дизайнер и продолжил как лид: отвечал за общий вижн решения задачи, коммуникацию с ФСК и арт-дирекшн дизайнера: комментарии и правки, помощь в поиске решения
Зачем нужна схема
При выборе квартиры важно понимать, где находится дом, что расположено рядом и куда выходят окна. На 3D-визуализации часть окружения может выпадать из кадра или перекрываться зданиями — это зависит от ракурса
Поэтому мы предложили схему, на которой можно показать расположение корпусов, дороги и инфраструктуру вокруг. От общего вида жилого комплекса покупатель переходит к конкретному корпусу и доступным квартирам
Решение
После нескольких итераций согласовали интерактивную схему на белом фоне. На ней выделили блоки и корпуса, показали дорожные развязки, метро, детские сады, школы и парки
Схему рисовали вручную. Чтобы применять решение в других жилых комплексах, мы также подготовили требования к контенту для тех, кто будет отрисовывать следующие схемы
После выбора корпуса покупатель видит его секции и доступные квартиры. По нажатию на квартиру открывается краткая информация, из которой можно перейти в её карточку.
Так схема связывает расположение дома с выбором конкретной квартиры: сначала покупатель рассматривает комплекс и окружение, затем переходит к предложениям в интересующем корпусе
