Разработка продуктовых страниц

СберНПФ позволяет гражданам накапливать средства, заключая договор негосударственного пенсионного обеспечения и внося добровольные взносы. Эти средства инвестируются фондом для получения дохода, который затем увеличивает накопления и формирует негосударственную пенсию.

О продукте:

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

Обновить UX/UI страниц сайта на основании данных исследований, акцентировать внимание на главном продукте - Программа долгосрочных сбережений

Задача:

Проблематики:

Лид-дизайнер, ответственный за UX/UI сайта фонда

Мои активности:

TTFA -18%

CSAT 9.35

Средняя удовлетворенность респондентов сайтом НПФ

Команда будущих экспертов

Единая дизайн-система

Построила общую дизайн-систему для сайта и личного кабинета клиента фонда

Управляла командой junior-дизайнеров на протяжении всего проекта

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

Ключевые результаты:

Артефакты конкурентного анализа

Ключевые слова и атрибуты для создания визуала

Флоу to be для перевода средств ОПС

Выявленные проблемы в сценариях

Дизайн всех страниц в 3-х разрешених

Иллюстрации сгенерированные в Midjourney

Вайрфреймы флоу Получения выплаты

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

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

К нам подключился отдел аналитики, провел юзабилити-тестирование старого дизайна сайта и составил CJM по всем путям пользователя, а так же по итогам исследований составил флоу to be, в котором уже можно было увидеть возможности для оптимизации нескольких сценариев. Я изучила огромное количество информации, вынесла проблемные точки и предложила свои рекомендации по улучшению пользовательского пути.

Для создания дизайн-концепции я опиралась не только на примеры сайтов фондов, но и на другие российские и зарубежные финтех продукты, а также на различные современные дизайн решения в других сферах. Вместе с командой мы собрали первые варианты дизайн-концепции и утвердили одну из них с заказчиком. Далее предстояла масштабная работа с анализом и сборкой вайрфреймов для всех страниц. По данным аналитики 74% пользователей смотрят сайт с мобильного телефона, поэтому мы решили идти по mobile-first подходу.

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

Так как для проведения операций со своими накоплениями пользователю необходимо заходить в личный кабинет, нужно было обеспечить ему непрерывный флоу от изучения информации на сайте к действию — переводу средств в фонд. Для этого я предложила сделать единую дизайн-систему для сайта и для личного кабинета — чтобы пользователь не ощущал перехода. Мы регулярно взаимодействовали с командой ЛК чтобы привести дизайн-систему к общему виду. В итоге мы создали единую систему, которая помогает пользователю взаимодействовать с продуктом без барьеров.

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

На этапе дизайна было важно определиться со стилистикой 3D иллюстраций. Мы решили акцентировать спокойствие и дружелюбность продукта с помощью мягких скругленных образов, составили подходящий промпт для midjourney и сгенерировали более 20 card-иллюстраций.

После согласования дизайна наша команда собрала полный кликабельный прототип сайта для передачи в разработку в 3-х разрешениях — Destop, Tablet и Mobile.

Конкурентный анализ по блокам и вайрфреймы основных продуктов

Варианты дизайн-концепции