Разработка UX/UI дизайна для ПочтаБанк

Разработка UX/UI дизайна для ПочтаБанк

Рассказ от первого лица, арт-директора, специалиста по проектированию, UI\UX дизайнера Виктории:

 

Летом мне довелось поработать над проектом для компании ПочтаБанк. А именно над разделом о финансовой грамотности для населения.



00.jpg


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


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

    • Люди в возрасте 30-55 лет с доходом 15-60 тыс.руб. Это основная часть рабочего населения.

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

       

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

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

       

    • Студенты.

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

       

    • Активные пользователи интернета. Люди в возрасте 25-45 лет, работающие в сфере связанной с IT.

     

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

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



    11.jpg


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

    -Михаил Шляпников в возрасте 45-ти лет. Собственник малого бизнеса с доходом выше среднего. Для него важна надежность продукта, удобство использования и адекватный сервис

    -Анастасия Кузнецова, девушка 28-ми лет. Работает менеджером по продажам, средний уровень дохода. Основными требованиями к продукту являются: лимит, вежливые сотрудники банка и минимум документов.

     


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


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


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



    44.jpg


  • Анализ сайтов конкурентов
  • Выявление тенденций и трендов пройдено, но не стоит забывать и о конкурентах. По прошествии предыдущих этапов, я занялась поиском и анализом их сайтов.

    В тройку конкурентов, которых я проанализировала, вошли:


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

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

       

    • www.finprosto.ru

    Данный сайт сделан при участии Сбербанка. Имеется адаптивная версия. Интересно представлена информация (в виде уроков). Деление информации на практическую и теоритическую часть, которое несет в себе большое кол-во информации. Однако, и у этого сайта есть минусы: отсутствие хорошей типографики (многие шрифты не читаемы), большое кол-во текста и мало иллюстраций, не очень удобная структура у главной страницы и страницы статьи.

     

    Выводы:

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

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

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



    22.jpg


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


  • Создание дизайна

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

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



33.jpg



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


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


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


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


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

И все это закреплено перечнем услуг от банка по данной категории.

       



 

Проект 2017 года
Готовы обсудить проект?
Готовы обсудить проект?
Заполняя данную форму вы принимаете условия Пользовательского соглашения об использовании сайта, в том числе в части обработки и использования персональных данных