Проблема Бренд давно и успешно присутствует на рынке, у него уже есть основной сайт с устоявшейся визуальной системой и пользовательскими паттернами. Запуская отдельный цифровой продукт — необходимо было сохранить стилистическую преемственность и узнаваемость бренда, но при этом не копировать старый интерфейс. Задача заключалась в том, чтобы найти баланс между надёжностью и брутальностью нового направления и привычными элементами интерфейса, не превращая новый продукт в клон существующего и не размывая бренд-идентичность, при этом подчеркнуть индивидуальность и характер нового направления.
Так выглядела главная страница сайта до начала работ Процесс работы Анализ и исследования — изучение вводных данных, требований заказчика и пользовательских сценариев; Прототипирование — создание и анимирование экранов будущего сайта; Разработка дизайн-концепции — первая визуализация интерфейса; Презентация и обсуждение — защита дизайн-макетов перед командой и клиентом, обработка полученного фидбека; Проработка адаптивов — проработка макетов под разные разрешения экранов; Ревью — проверка сверстанных страниц на соответствие дизайн-макетам. Анализ и исследования Первым этапом стал аудит юзабилити и визуальной части сайта «СИЯЙ авто»: определила, какие элементы стоит сохранить, а какие — переработать. Параллельно провела анализ конкурентов, работающих с займами под залог авто и мотоциклов, а также сервисы крупных Fintech-компаний. Отобрала удачные паттерны и адаптировала их под задачи автоломбарда — для повышения удобства и эффективности.
Я опиралась на подход JTBD, что помогло сфокусироваться не на функциях ради функций, а на реальных задачах пользователей. Эта концепция позволила создать продукт, который действительно закрывает их потребности.
На основе аналитики сформулировала более 30 гипотез по улучшению сайта, большая часть которых была успешно реализована в новом интерфейсе, что позволило создать сервис, полностью отвечающий ожиданиям целевой аудитории.
Прототипирование Я детально проработала 16 страниц кликабельных прототипов, охватив ключевые пользовательские сценарии. Особое внимание уделила логике переходов и взаимосвязи между основным сайтом ломбарда и разделом автоломбарда — чтобы пользователь воспринимал сервис как цельную и понятную систему.
Разработка дизайн-концепции Чтобы передать характер автотематики, я выбрала тёмную визуальную основу. Сохранила узнаваемые паттерны и фирменный акцентный цвет, чтобы обеспечить визуальную преемственность с основным сайтом ломбарда, так пользователи сразу видят связь с основным брендом и доверяют новому продукту уже при первом контакте. Добавила 3D-элементы и поработала над структурой страницы: пользователь легко найдёт выгодные тарифы, рассчитает условия займа, узнает об этапах оформления и специальных предложениях для владельцев премиум-транспорта.
Ключевые моменты: Займ под залог автомобиля / ПТС — пользователь может оценить транспорт, ознакомиться с тарифами, условиями и списком необходимых документов. Также на странице размещён удобный калькулятор займа, с помощью которого можно быстро рассчитать ориентировочные условия; Онлайн-оценка авто — эта идея появилась на этапе аналитики. Удалось сократить процесс до четырёх простых вопросов — оценка занимает не больше минуты и основывается на реальных предложениях с рынка; Выездная оценка — если нет возможности приехать в офис, специалист сам выезжает к пользователю, проводит оценку на месте и сразу озвучивает результат. Презентация и обсуждение Готовую дизайн-концепцию я представила команде и клиенту. Мы обсудили ключевые решения, собрали фидбек и уточнили детали, важные для запуска. По итогам встречи внесла точечные правки — чтобы финальный макет учитывал как бизнес-цели, так и ожидания пользователей.
Для эффективного развития и поддержки проекта в рамках созданных гайдлайнов я разработала библиотеку компонентов и стилей, обеспечивающую единообразие и удобство в работе.
Проработка адаптивов После согласования десктопной версии я перешла к адаптивам. По техническому заданию нужно было подготовить макеты для двух ключевых разрешений — 1440px и 390px. Я адаптировала около 20 экранов, сохранив структуру и функциональность десктопного интерфейса. Все макеты были переданы в разработку — с учётом особенностей мобильного сценария и требований к верстке.
Дизайн-ревью На финальном этапе я провела дизайн-ревью свёрстанных страниц. Сравнивала готовую вёрстку с утверждёнными макетами в Figma: проверяла размеры, отступы, цвета и общее соответствие. Особое внимание уделила деталям и точности, чтобы финальный результат выглядел так, как было задумано в дизайне.
В результате проекта был успешно запущен новый digital-продукт, который полностью отражает новое направление бизнеса «СИЯЙ Ломбард». Созданный интерфейс сочетает визуальную преемственность бренда с индивидуальным стилем автоломбарда. Благодаря удобной навигации, простоте оформления займа и тщательно продуманным сценариям взаимодействия, новый сайт эффективно решает задачи пользователей и усиливает позиционирование бренда на рынке. Подготовленная мной дизайн-система позволит легко масштабировать продукт, развивать новые направления и сохранять визуальную целостность интерфейса в будущем.
