bird-logo-yandex@2x

Редизайн KP.RU

Новостной портал KP.RU — один из лидеров среди средств массовой информации
в России. Возникла задача обновить портал kp.ru с учетом изменившейся специфики подачи материалов, возросших объемов
и технологических возможностей редакции

KP.RU — is a major Russian newspaper and a leader among digital media outlets. The demand for changes and finding new ways to serve the information has increased, so it gave us a challenge to give the website a new look. 

Категория: Web design, UX
Дата: 2015-2016
Роль: проектирование, арт-дирекшн, дизайн

Category: web design, UX
Date: 2015-2016
Role: prototyping, art-direction, design

Начало работы

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

old-kp
Проблема №1

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

Проблема №2

Большая шапка, которая содержит всю рубрикацию и множество лишних элементов

Проблема №3

Несоответствие визуальным стандартам и трендам, моральное устаревание

Проблема №4

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

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

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

3-items222

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

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

Персона 3 — увлеченный человек. Его интересует только его узкий интерес: полезности, лайф-хаки, обзоры, тест-драйвы и мнения экспертов в области. В функционале страниц может быть заложено оповещение о новых материалах, маркировка прочитанных и непрочитанных и тому подобное

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

all-of-them11

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

Главная страница состоит из трех основных колонок

  • «Бесконечная» новостная колонка, которая может раскрываться в детальный вид, с фото, текстом и вспомогательными блоками

  • Центральная колонка с Картиной дня, рубрицированными анонсами, блоками фото, видео, колумнистами и другими блоками

  • Правая колонка - преимущественно для рекламы, партнерских блоков и виджетов

Анонсы в центральной колонке могут принимать разный вид, выстраиваясь в комбинации по одному, два и три анонса в ряд. Так же есть вариант «Фичера» - с более крупной и акцентированной подачей

main-page@1x

Раздел, меню, новостная лента

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

3-screens@1x

Страница статьи

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

Article-2@1x

Помимо стандартного шаблона статьи, были разработаны шаблоны для лонгридов, и фото-историй.

Article-1@1x
Article-3@2x

Страница 404

Страница 404 предлагает пользователю дальнейший сценарий действий: искать по сайту, обратиться в поддержку, или смотреть материалы с главной страницы а так же партнерские материалы

404 new-pagee@1x

Блоки и формы

В сайт в любом месте могут встраиваться дополнительные блоки разного характера: формы, алерты, оповещения, второстепенные (контекстные) меню и т.д. 

random-blocks@1x

Igor Kochmala

2019 | Web design, art direction, product design, UX/UI

Contact

fmflks@gmail.com
+7 (909) 684-37-26

🙌 Let us be friends 

Facebook
Instagram
Linkedin