Редизайн сайта Президента России

Здравствуйте, меня зовут Александр Бакалов. Я занимаюсь разработкой продающий сайтов и интернет-магазинов. В этом кейсе я хочу подробно рассказать о том, как я разработал редизайн сайта Президента России. В тексте ниже я опишу логику своих действий и подробно освещу причины выбора тех или иных решений в интерфейсе.

Другие работы вы можете посмотреть по ссылке: bakalov.su/portfolio

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

Как-то раз, читая одну новостную статью, я впервые зашел на сайт kremlin.ru и начал сразу же изучать сайт с точки зрения UX. Походив по сайту в районе 10-15 минут я обнаружил несколько мест, которые можно было бы улучшить и благополучно забыл об этом сайте.

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

Ищут нормативно-правовые акты, касающиеся их зоны ответственности

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

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

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

Ищут информацию в первоисточнике

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

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

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

Хотят написать обращение президенту или в администрацию президента

Боль – сейчас очень тяжело найти на сайте раздел, где можно написать письмо. Для неподготовленного человека поиск может затянуться надолго.

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

Как мы решаем эту потребность: выносим в главное меню пункт «написать письмо», что сразу же облегчат поиск этого раздела. При написании письма даем человеку возможность подключить уведомления об ответе на email или в мессенджеры. А также все письма и ответы на них хранятся в личном кабинете пользователя. Настроить уведомления также можно в личном кабинете.

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

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

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

Углы в дизайне. Я принял решение отказаться от угловатого дизайна действующего президентского сайта и сделать края чуть закругленными. Я выбрал радиус закругления, равный 7:

Стрелки для перехода в пост. На главной странице я решил не делать стандартных кнопок, которые говорят о необходимости нажать на нее, чтобы открыть новость. Я решил сделать вот такие стрелки:

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

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

Меню сайта. Если вы проанализируете меню на действующим сайте, то обнаружите многие второстепенные пункты, которые вынесены в главное меню:

1. Первая ошибка на действующем сайте. Раздел «события» и «видео и фото» разделены, хотя фото и видео в любом случае относятся к какой-либо новости:

2. Второй промах – второстепенный раздел «структура» зачем-то присутствует в главном меню, хотя этот раздел не является столь востребованным, как все остальные:

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

Человек хочет найти какой-то материал и переходит через пункт на главном меню в раздел «Поиск»:

Он видит перед собой все последние новости сайта, включая документы и обычные события. В пункте «выберите рубрику» выделен пункт «все»:

На переднем плане представлены самые частые элементы для поиска: строка для вбивания ключевых слов, а также возможность выбрать рубрику для поиска: «новости», «документы», «поручения» или «все»:

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

За счет своего размера и контрастного темно-синего цвета данный элемент имеет хороший вес на этой странице и его очень легко может заметить даже неподготовленный человек:

При нажатии на значок, открывается фильтр:

При этом сам контент и строка поиска чуть смещаются вправо:

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

Вторым после сортировки идет фильтр с выбором дат публикации. Так как очень часто при поиске архивных записей человек знает примерный диапазон выхода новости:

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

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

Пятым и шестым представлены фильтры, позволяющие выбрать номер документа или ответственное лицо:

Эти фильтры представлены только при выборе категории поиска «все»:

При открытии фильтра с выбором пункта поиска «новости», такие фильтры отсутствуют за ненадобностью. Фильтр по время поиска по разделу «новости»:

При этом во время выбора рубрики поиска «документы» или «поручения», данные пункты в фильтре снова появляются. Фильтр во время поиска по разделу «документы»:

После выбора всех пунктов фильтра, у человека есть выбор:

1. Либо просто увидеть результаты поиска – нажать на «Применить фильть».

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

2. Или же увидеть результаты поиска, но перед этим подписаться на уведомления об обновлениях в этом фильтре – нажать «Подписаться на этот фильтр».В этом случае, вы будете получать уведомления о новых записях, которые соответствуют параметрам этого фильтра. Уведомления могут приходить на email или в один из мессенджеров:

Итак, если вы решили все-таки подписаться на уведомления фильтра. Для этого вам нужно:

1. Задать определенные параметры фильтра и нажать в конце на кнопку «Подписаться на этот фильтр»:

2. Затем перед вами откроется модальное окно, где вам нужно будет ввести название этого фильтра:

3. После введения названия и нажатия кнопки «далее» вам нужно будет выбрать место, куда вы хотите получить уведомления. Это может быть электронная почта или один из представленных ниже мессенджеров:

4. После выбора места для получения уведомлений, вы авторизуетесь через выбранный для получения уведомлений сервис. В случае в email'ом – подтверждаете его через письмо, приходящее на почту:

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

6. У человека вместо фильтра появляется возможность быстро переключаться между уже созданными ранее фильтрами. Это может быть удобно, если вы имеете несколько фильтров на разные темы:

7. Для создания нового фильтра у авторизованного человека есть возможность добавить на кнопку «добавить»:

8. При нажатии на кнопку «добавить», поверх настроек по выбору фильтра появляется развернутый фильтр:

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

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

- Изменить параметры фильтра

- Изменить место уведомлений (например, вместо электронной почты выбрать Телеграм)

- Удалить ненужный фильтр при необходимости

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

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

1. Чтобы войти в него, вам нужно быть авторизованным на сайте. Затем вам нужно нажать на иконку в правом углу сайта и перед вами откроется небольшое модальное окно:

Из этого модального окна вы сразу можете попасть в два самых востребованных раздела:

- Общие настройки

- Раздел с письмами и созданными фильтрами

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

2. Зайдя на главную страницу личного кабинета, вы можете увидеть свой логин, email и телефон. При необходимости вы можете сразу же их поменять, нажав на кнопку «сохранить изменения» после обновления данных:

3. Перейдя в раздел «уведомления» вы можете подключить или отключить уведомления о письмах или фильтрах:

Ниже человек может подключить социальные сети и мессенджеры для получения уведомлений:

4. Переходим в раздел «фильтры и письма». Здесь вы можете:
- Поменять название фильтра
- Изменить его настройки
- В один клик подключить или отключить уведомления отдельного фильтра
- Удалить фильтр

Эти действия обозначены подсознательно понятными для человека иконками, что сильно экономит пространство и делает интерфейс более чистым и приятным:

А также в этом разделе вы можете увидеть все письма Президенту или администрации президента, которые были вам отправлены. Здесь же вы можете посмотреть дату отправки письма и прочитать ответ на письмо:

5. В разделе «изменить пароль» вы можете поменять пароль от своего аккаунта. Для этого вам нужно ввести старый пароль и два раза повторить новый пароль:

Раздел «Новости» позволяет производить быстрый поиск по новостям при помощи фильтра. Данный раздел имеет свои небольшие отличия от других разделов.

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

Вот такой концепт сайта президента я создал. Безусловно, я не проработал каждую страницу раздела, вроде «написать письмо» или «контакты». Это было сделано мной специально, так как я хотел сделать акцент именно на ключевых задачах сайта – фильтрах, уведомлениях и личном кабинете. Именно эти ключевые функции и определяют удобство сайта.

Большое спасибо что прочитали мой кейс до конца. Буду рад обратной связи и конструктивной критике!

Если что, то со мной вы можете связаться через мою страницу ВКонтакте: vk.com/id_abakalov