Atelier #40. Как мы создали систему для модного журнала в ОАЭ
Журналы существуют давно. Vogue, Tatler, Esquire - это бренды, которые десятилетиями формировали визуальную культуру глянца. Но бумага уходит, а цифра остается. И вот перед нами стоит задача: спроектировать онлайн-издание, у которого нет физической версии, зато есть своя редакция, закрытый пул авторов и амбиции выглядеть так, чтобы читатель почувствовал - это серьезно.
Меня зовут Олег Николаев. Я продуктовый дизайнер, работаю над упаковкой digital-продуктов: стратегия, айдентика, интерфейсы.
В Telegram делюсь кейсами, разборами и практическими гайдами по дизайну продуктов
О проекте
Клиент пришел с идеей создать электронный журнал - издание с собственной редакцией и авторами, которые проходят отбор. Никакого UGC, никакого "пиши кто хочет". Только верифицированные авторы, только редактура, только контент с претензией на качество.
Монетизация строилась на двух столпах: рекламные баннеры для широкой аудитории и платная подписка для тех, кто хочет читать все и без ограничений. Часть статей была открыта бесплатно - как витрина, часть закрыта за пейволом. Классическая модель, которую используют крупные медиа по всему миру, но в российском сегменте реализованная, мягко говоря, без особой любви к пользователю.
Задача была понятна: спроектировать интерфейс, в котором удобно читать, легко найти нужное, а монетизация встроена органично и не раздражает.
Сбор мудборда и визуальное направление
Любой проект у меня начинается с мудборда. Это не просто "собрать красивые картинки" - это способ синхронизироваться с клиентом до того, как ты потратил время на дизайн, который окажется "не тем".
Мы смотрели на крупные зарубежные издания - The Atlantic, New Yorker, Monocle. Смотрели на то, как они работают с типографикой, с воздухом, с иерархией материалов. Параллельно изучали, что делает российский рынок онлайн-медиа - и там картина оказалась предсказуемо менее вдохновляющей.
По итогу мудборда стало ясно: клиент хочет сдержанную, но не скучную эстетику. Без агрессивных цветов, без перегруженных макетов. Журнал должен читаться как журнал, а не как новостной агрегатор.
Анализ конкурентов
После того как визуальное направление было согласовано, мы провели ревью конкурентов. Смотрели не только на визуал, но и на логику: как устроена навигация, как реализован пейвол, как работает регистрация, где и как показывается реклама.
Выяснилось несколько вещей. Большинство отечественных онлайн-изданий либо игнорируют мобильную аудиторию на уровне UX, либо просто адаптируют десктопную версию без переосмысления. Пейвол реализован агрессивно и непрозрачно - пользователь не понимает, за что платит и что именно получит. Реклама расставлена хаотично и сбивает фокус при чтении.
Все это стало нашим антипримером - списком того, что делать точно не нужно.
UX-логика и прототип
Следующий шаг - проектирование пользовательского пути. Мы прошли по основным сценариям: новый пользователь, который пришел с поиска и попал на закрытую статью; подписчик, который читает регулярно; случайный читатель, который просматривает ленту без регистрации.
Для каждого сценария мы выстроили логику поведения и определили точки принятия решений - где пользователь должен зарегистрироваться, где ему предложить подписку, как показать ценность платного контента, не раздражая при этом тех, кто пока не готов платить.
Прототип согласовывали итерационно. Это важно - не показывать сразу финальную версию, а двигаться от грубых вайрфреймов к более детализированным. Клиент успевал давать обратную связь на каждом этапе, и это экономило время обоим.
UI-дизайн
Когда прототип был согласован, мы перешли к визуальной части. Типографика здесь играла первую роль - журнал существует ради текста, и если текст неудобно читать, остальное не имеет значения. Мы подбирали шрифтовые пары, тестировали размеры и межстрочные интервалы, работали с иерархией заголовков и подзаголовков.
Рекламные блоки встраивались в макет как часть дизайна, а не как инородный элемент. Это решение требует больше времени на проектирование, зато пользователь воспринимает рекламу менее агрессивно, что в долгосрочной перспективе влияет на поведение аудитории.
Пейвол был реализован мягко: пользователь видит начало статьи, понимает ценность материала, а потом получает предложение продолжить за подпиской с понятным объяснением, что именно он получает.
Тестирование и A/B
Один из этапов, которым я особенно доволен в этом проекте, - это работа с фокус-группой. Мы собрали небольшую группу потенциальных пользователей и дали им работать с прототипом в режиме реального взаимодействия, без подсказок.
Наблюдение за тем, как люди теряются в навигации или не понимают, что статья платная - это бесценно. Ни один дизайнер не может предсказать все сценарии поведения пользователя, сидя за компьютером.
A/B тестирование помогло выявить конкретные слабые места: один из вариантов расположения кнопки подписки работал значительно хуже, навигационный паттерн в мобильной версии вызывал путаницу у части аудитории. Все это было зафиксировано и исправлено до передачи в разработку.
Результат
Разработкой занималась отдельная команда, поэтому я не могу оперировать цифрами по трафику или конверсии - это честно, и я не буду выдумывать метрики там, где их нет. Но то, что я могу сказать: мы сдали проект, который прошел через полноценный цикл проектирования, включая тестирование с реальными пользователями. Клиент получил не просто красивые макеты, а обоснованные решения с документацией по UX-логике.
Это редкость на рынке, где большинство дизайнеров останавливаются на этапе "нарисовали красиво".
Работаю с продуктами от стратегии до релиза: айдентика, интерфейсы, упаковка. Если у вас стартап, ребрендинг или просто ощущение, что "что-то не то" - пишите в Telegram.
Разберем задачу, я скажу, что можно сделать и сколько это займет. Консультация бесплатна и крайне полезна.
Подписывайся - делюсь бесплатными кейсами, гайдами по дизайну и разбором процессов
Основная соц сеть:
📲 Телеграм канал - мой главный источник контента (кейсы, разбор, личный опыт).
🎨 Dribbble - портфолио и свежие проекты.
🎨 Behance - портфолио и свежие проекты.