Как мы за три месяца сделали дизайн и запустили медиа о медицине: кейс Pinkman и «Купрум»

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

В нашем кейсе — подробности о том, как медицинская тематика повлияла на дизайн и почему ребята ушли от серьезной и «стерильной» подачи текстов.

Весной 2020 года к нам обратилась команда «Севергрупп Медицины» — продуктовой IT-компании, занимающейся проектами в сфере здоровья, в том числе для сети частных клиник. Компания — инвестиционный проект одноименного холдинга.

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

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

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

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

Когда мы начали изучать рынок и работать над структурой, то поняли, что лучше разбить процесс на два этапа — сначала запустить базовую, MVP-версию, затем доделать все задуманное. Клиент согласился с таким подходом, и за два оставшихся месяца мы утвердили структуру, разработали дизайн, запрограммировали и выкатили первую версию.

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

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

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

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

Нам также были интересны неотраслевые медиа. Например, сервис «Яндекс.Кью» показал, как можно организовать диалог между экспертами и пользователями — такой функционал планировался на сайте. Лайфстайл-медиа A Year of Conscious Practice стало примером оригинального интерактивного дизайна, который помогает задержать пользователя на странице.

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

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

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

В результате появился список разделов и модулей, вошедших в MVP-версию медиа:

Для каждого типа страниц мы подобрали референсы из популярных российских медиа: Reminder, The Village, Strelka Mag, Arzamas, Blueprint, Т—Ж и других. Нам было важно использовать приемы верстки, которые были бы привычны читателям, — чтобы при переключении с другого медиаресурса на Купрум им было комфортно.

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

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

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

1. Цветовая вариативность. Для того, чтобы уйти от «стерильной» подачи материалов о здоровье, мы придумали набор из шести цветовых тем. Они разделяют контент на сайте как визуально, так и концептуально: для каждой рубрики можно выбрать палитру, которая определяет внешний вид страницы.

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

3. Блочность: страницы рубрик и страницы материалов собираются из блоков и элементов в соответствии с готовыми шаблонами.

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

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

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

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

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

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

Как правило, вид всех элементов на мобильных экранах унифицируется — они подаются в виде карточек. При этом мы хотели привнести в мобильную версию интересные, непривычные детали. Самым ярким элементом стало меню в плакатном стиле, которое занимает весь экран.

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

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

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

Автор текста: Бугаева Анна