Разбор кейса: дизайн цифрового журнала

Эта статья была написана в рамках UX-буткемпа Ironhack в марте 2022 года. Задача состояла в следующем: спроектировать отзывчивую онлайн-платформу для журнала.

Задача

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

Решение

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

Дизайн-процесс

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

Исследование пользователей

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

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

Опрос

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

Возраст:

18 -29

Основные цели:

Вдохновение, поиск модных тенденций, покупка одежды.

Журналы, которые они читают:

Vogue, Elle, GQ, Cosmopolitan, Hypebeast, Harpers Bazaar

Что расстраивает:

Сложный процесс навигации, невозможно найти нужный контент

Инсайты:

Изображения очень важны: броские изображения привлекают внимание пользователей и побуждают их заходить на страницы статей
Вероятно, надо добавить категорию "Тренды" (большинство пользователей пытаются найти соответствующий контент)
Более узкие категории контента облегчают выбор статей
Аккуратный упорядоченный внешний вид делает визуальный опыт более приятным

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

Карта эмпатии

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

Карта пути пользователя

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

Как мы видим ниже, главными болевыми точками оказались следующие:

невозможно найти статью о "последних трендах" и
сложно ориентироваться на сайте.

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

Постановка проблемы

На основе карты пути пользователя и персоны мы сформулировали проблему, вопрос “Как бы мы могли?” (How might we — HMW) и гипотезу, прежде чем перейти к следующему этапу.

Пользовательский сценарий

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

‍

Визуальный конкурентный анализ

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

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

Основные конкуренты:

VOGUE
GQ
ELLE

Еще один эффективный метод исследования рынка — создание мудбордов конкурентов для определения атрибутов бренда. Мудборд позволяет отразить впечатления клиента от взаимодействия с брендом или продуктом.

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

"Люди покупают не товары и услуги. Они покупают отношения, истории и магию." Сет Годин

Мы можем представить эти отношения в виде простого уравнения:

Принципы CRAP

Контраст (C — contrast), повторение (R — reperirion), выравнивание (A — alignment) и близость (P — proximity). При помощи этих четырех элементов мы смогли придать нашему журналу безупречный внешний вид и привлечь внимание читателей. Чтобы отработать указанные принципы и понять, на какие аспекты следует обратить больше внимания, мы решили проанализировать сайт нашего конкурента и разобрать каждый из них.

Мудборд

Далее мы решили разработать визуальную идентичность бренда. Каждый из нас создал мудборд, а затем мы объединили лучшие идеи в один финальный вариант.

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

Стайлгайд

Типографика

Поскольку перед нами стояла задача создать минималистичный модный онлайн-журнал, мы хотели убедиться, что типографика выглядит аккуратно и стильно, а текстовый контент легко читается. Чтобы добиться нужного эффекта, мы выбрали шрифт Cinzel (Google Fonts). Это позволило нам создать четкую иерархию и достичь общего графического баланса.

Цвет

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

Благодаря белому фону дизайн получился аккуратным и минималистичным.

Для текстов были выбраны 3 цвета: приглушенный черный, серый и белый.

Скетч и низкодетализированный прототип (low-fi)

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

Среднедетализированный прототип (mid-fi)

Наш среднедетализированный прототип получился намного более подробным, поэтому мы смогли визуализировать весь путь пользователя. Мы создали 3 mid-fi прототипа: мобильную, десктопную и планшетную версии.

Высокодетализированный прототип (hi-fi)

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

Чтобы сохранить единообразие и минималистичный вид, в мобильной версии мы решили использовать гамбургер-меню.

Дальнейшие шаги

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