Исправляем ошибки в дизайне главной страницы сайта Bank of America

Мои цели

Некоторые цели я определил сразу, другие — после исследования. Вот они:

• упростить страницу и сделать ее удобнее,
• доработать пользовательский интерфейс с учетом результатов UX-исследований,
• попрактиковаться в UI-дизайне.

Кабинетное исследование

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

Прежде чем приступить к выполнению задачи, я провел исследование, чтобы больше узнать о клиентах Bank of America. Согласно данным Statista его аудитория преимущественно состоит из людей в возрасте от 30 до 49 лет (30,86%), а клиенты в возрасте от 50 до 64 лет составляют 12,77% аудитории.

На основе этих данных я сделал следующие выводы:

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

Найденные проблемы

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

Краткое руководство по стилю

1. Сетка

В дизайне были использованы 2 разные сетки на основе базовой 8-пиксельной сетки. Все расстояния кратны 8, благодаря чему интерфейс выглядит гармонично.

Первая сетка: 12 колонок, ширина колонки 72px, межколонное расстояние — 32px. Вторая сетка: ряды высотой 8px, расстояние между ними — 8px.

2. Типографика

Я остановил свой выбор на Inter, шрифте без засечек.

3. Цветовая палитра

Основу цветовой палитры составили цвета бренда и цвета, использованные на оригинальном сайте.

Вайрфреймы

1. Низкой детализации

2. Средней детализации

Результат

Заключение

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