Пример UI в разработке сайта для мероприятия


28.12.2019 Время чтения - 5 минут 149

В проекте этой недели нам снова пришлось работать самостоятельно. Первой задачей было выбрать событие и создать для него микросайт с грамотным UI.

На неделе проекта главной новостью был фестиваль Super Bock em Stock (SBS), который должен был состоятся в скором времени. Я слышал о нем раньше, но я никогда там не был, поэтому мне пришлось провести расследование.

ЧАСТЬ I: Понимание контекста

Итак, что это такое?

  • SBS — это двухдневный инди-рок музыкальный фестиваль, который проходит в Лиссабоне.
  • Он проходит раз в год в ноябре (это один из немногих зимних фестивалей в Португалии).
  • Артисты, которые играют там, в основном начинающие .
  • Во время фестиваля проходит около 50 концертов.
  • Фестиваль проводят в разных местах на Авенида да Либердаде, таких как старые театры.
  • В нем принимают участие около 15 000 человек (это намного меньше, чем в крупных португальских фестивалях, которые посещают около 100 000 человек).
  • Его спонсором выступает Super Bock, одна из крупнейших пивных компаний Португалии.

ЧАСТЬ II: Определить для кого я работаю

После этого я узнал, кто являются участниками фестиваля, почему они хотят туда попасть и какие у них отзывы о данном фестивале. Я взял интервью у 5 участниках SBS и после этого смог создать Persona SBS.

SBS’s Persona

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

 «Большое достижение для меня — это когда я даю послушать кому-то песню, а они говорят, что раньше ее не слышали»

С данной информации я смог развить свой HMW-вопрос (How Might We): «Как мы можем помочь Francisco узнать имена неизвестных ему исполнителей на  Super Bock em Stock?»

 ЧАСТЬ III: Генерация идей

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

Я начал с анализа текущего фестиваля и понял, что он очень ориентирован на бренд. Super Bock имеет очень сильные позиции в Португалии и спонсирует другие фестивали, такие как Super Bock Super Rock, один из крупнейших в Португалии. Тем не менее, этот фестиваль отличается целью по сравнению с SBS, но логотип получился очень похожи.

Логотип Super Bock Super Rock справа и логотип Super Bock em Stock слева

Я считаю, что у SBS огромный потенциал, есть своя атмосфера и цель, поэтому я решил заняться брендингом фестиваля.

Взгляд на действо

Я начал с того, что собрал несколько фотографий фестиваля, чтобы понять, что люди видят и чувствуют на нем.

После этого я определил элементы, которые могли бы представлять бренд и соответствовать тому, что люди ждут от фестиваля:

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

Ограниченный. Люди, которые посещают этот фестиваль, не являются мейнстримом, поэтому важно дать им ощущение того, что они являются частью чего-то исключительного.

После того, как я собрал эту доску для настроения, я провел тест для 5 человек, чтобы понять, были ли мои идеи эффективными. Ключевыми словами в ответах сопровождались сообщением, которое я как раз хотел передать:

АНДЕРГРАУНД / ХИПСТРЕРСКИЕ / ЭМОЦИОНАЛЬНЫЕ / УСИЛИТЕЛЬНЫЕ / НОЧНЫЕ / КЛАССИЧЕСКИЕ / ЭЛИТНЫЕ

Я также создал новый логотип, который лучше отражает эти ценности:

Характеристики

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

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

ЧАСТЬ IV: Строим все что придумали!

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

Перед событием

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

 Во время мероприятия

  • Я решил создать адаптивную версию сайта, так как зритель вряд ли не возьмет свой ноутбук на концерт.
  • Во время фестиваля у него будет доступ к новому разделу: «Живи сейчас». В этом разделе он может увидеть, какие артисты играют в данный момент, какие будут играть дальше, и подготовиться к выступлению, перейдя на определенную сцену с запасом времени.
  • Он может фильтровать этот список по этапам, что поможет ему в случае, если идет дождь, и он не хочет ходить слишком много или если он хочет знать, какой артист играет следующим в месте, где он находится.
  •  Если он на концерте и не знает артиста, он может посмотреть дополнительную информацию о нем. А поскольку Shazam часто не может распознавать песни на концертах, существует список Spotify, который показывает песни, которые исполняет артист в режиме реального времени (но песни показываются только когда артист начинает играть, чтобы не портить сет-лист).

После события

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

Заключение

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

Оригинал статьи.

Читайте также: Парадокс выбора – Netflix