Дизайн Points Party

О проекте

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

Особое внимание стоило уделить созданию визуально простого и привлекательного дизайна с понятной навигацией, ненавязчиво направляющей юзера к получению полезной для него информации и дополнительным составляющим монетизации бизнеса клиента: новостная подписка, банковские офферы, доступ к закрытой группе в Discord.

Структура

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

Дизайн-концепция

Клиент особо подчеркнул, что ему важно, чтобы сайт “ВЫГЛЯДЕЛ ХОРОШО”. Мы выбрали mobile-first подход и предложили свою концепцию на примере главной страницы и списка статей, с разными вариантами основного цветового градиента, стиля иконок и сетки элементов. С первой же итерации концепт был принят клиентом безоговорочно, нам осталось только применить предпочтительное оформление деталей — и дизайн двух страниц был готов.

Дальше работа над дизайном шла в постоянном ритме: после презентации и согласования мобильного отображения страницы адаптировали под десктоп и параллельно собирали UI-kit.

Главная страница

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

Форма подписки

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

Статьи

Удобная для восприятия и делающая акцент на визуальном контенте сетка делает пользователя ближе к его мечте о путешествиях. 

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

Кредитные карты

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

Сообщество

Страница рассказывает, какие преимущества можно получить, присоединившись к закрытой Discord-группе и получив доступ к эксклюзивной информации.

Системные страницы

В наших правилах обеспечивать проект полным набором дизайн-материалов в едином стиле, поэтому фронтенд-команда получила также дизайн страниц ошибки 404 и 500, поиска по сайту, политики конфиденциальности, шаблона новостной рассылки, Open Graph превью.

 

UI-kit

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

Логотип

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