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

Эта статья была написана в рамках 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

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

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

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

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

Мудборд Vogue
Принципы CRAP

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

Мудборд

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

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

                 

Стайлгайд

Типографика

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

Цвет

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

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

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

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

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

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

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

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

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

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

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

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

Основные выводы

Благодаря этому проекту мы узнали:

  • Насколько важно использовать компоненты при разработке прототипа
  • Как применять методологию атомарного дизайна

Надеемся, вам было интересно! Спасибо за внимание.

Источник:
medium.com
arrow