The Design Brief

Create a microsite with a one-year life cycle and incorporate a feature that will add value and improve user experience. The microsite will be stored in the central platform’s archive after this period. 

The Goal

The goal is to help Belgrade BeerFest by designing a responsive website that will be user-friendly and easy to navigate to book a pass via bar code, follow the Concert(s) live, and follow the lineup in real time - get notifications directly from the website.

I will include features such as multiple passes selection, news, and live stream - all four stages- and follow the lineup in real-time.

Project Plan

The site will offer features that attract visitors for the total lifecycle of the process, before, during, and after the festival. By offering features that positively impact the visitors during these three pivotal interactions the hope is to generate enough buzz around the experience.

My Role

• UX/UI Design

• UX Research

• Web Design

• Branding

Tools

• Figma

• Adobe XD

• Invision

• Photoshop

• Miro

• Useberry

Secondary Research & Lean UX Canvas

Secondary Research - About the Festival

Belgrade Beer Fest is a festival of beer in Belgrade, Serbia. Since 2003. The Festival is held annually over four days each August as a showcase event for more than 500 local and regional beer producers. In addition to domestic and foreign brews, the Festival features live music performances each evening. The Festival is entirely free of charge!

The Festival organization team collaborated with local public transportation, so the free rides are available during the festival.

Belgrade Beer fest is a part of the Best Beer Festivals community that promotes brewers conferences and Festivals worldwide.

They included Belgrade Beer Fest in the top 10 festivals preferred by brewers and beer lovers, preserving great popularity and serving as great travel destinations.

Business & Customers

Research provided that Beer Festivals' visitors are mainly interested in music, fun, and beer selection with promotional prices.
They would love to have all the information in one place and considering that the festival is free, tickets and accessibility are not an issue.

What concerns them are long lines at the entrance and on brewers' stands, and from a few years ago, after the festival included more stages with performers, users were worried they would miss a concert they plan to attend.

From the Business side, besides obvious cancelation, Belgrade Beer Fest is hoping to have more visitors next year and an excellent music lineup that will bring more sponsors, both local and foreign.

Upstanding Microsite can bring Beer and music lovers back together in 2021 with innovations.

Competitive Analysis

Belgrade Beer Fest has plenty of time to organize an exceptional event for users. The first thing to do is explore other Beer festivals worldwide, their concepts, offers, media presence, and websites. That way, I can learn how my microsite can stand out from competitors.

I intentionally included two indirect competitors to have a better perspective and to determine possible microsite features.

Considering only Beer Festivals I noticed:

• Music events are happening around the world, but schedule, lineup, stages are not visible.

• Festivals are entrance free, but there is no information about beer selection, prices, and announcements so the user can plan activities.

Having that in mind, I was able to identify the ideal position for my festival where can stand up among many others happening around the world but next to most prominent one like Coachella and EDC.

Interviews&Survey

According to Don Norman, the human centered design process starts with a good understanding of people and the needs that the design is intended to meet.

I distributed a survey on my social network and in Slack, and conduct 8 interviews to gain informations about our users, their goals and expectation. 

What I wanted to Know?

1. Higher understanding of how users spend their time on the Festival?

2. What is the most important for them when attending the festival?

3. What is bothering them?

4. How do they interact with the website? Do they find it useful?

5. From where they are gathering their Info?

Viber & TypeForm

While I conducted my interview via Viber, I thought I would try to use Typeform as a way to collect the data, since the program gives you multi-view results, it seemed more efficient. So I performed the interviews and inputted the information into Typeform.

Important Facts!

1. 70% of users gather information from social media and TV commercials. They don’t get information on the website.

2. Users are complaining about endless lines and crowds! The festival is free, and therefore the amount of visitors is sometimes out of control. The security is still there, but based on the nature of the festival, sometimes visitors give up.

3. Users would like to know who is performing and when so they can plan their activities.

4. And the number one problem is endless waiting in lines in front of beer stands.

5. Some users would like to watch some concerts later on or enjoy the music in the privacy of their homes.

Recommendations coming from visitors and musician

1. Add tickets, affordable! That would help with the crowd, just a bit.

2. Add more info on the website. Make sure to buy tickets via website!

3. Livestream! Make it happen

Affinity map

In the next stage, I had to organize collected data in groups based on their natural relationship. From there, I was able to identify user pain points, what they are seeking, and what they are interested in before, at, and after the event.

Here are some insights:

• Users would like to find everything in one place since information is coming from different sides (Facebook, Instagram, Tv Commercials)

• Users would like to know who is performing and when so they can plan the activities.

• They would like to watch the festival Online.

• And the number one problem is endless waiting in lines in front of beer stands and at the entrance since the festival is free of charges.

User Persona

I created a user persona based on my research. 

He is a millennial who likes to go to the beer fest and spend some time with friends. The main reason for coming are music, company, and good local beer. The user persona concept helped me focus on our user’s mental model.

Journey Map

I took Alex on a journey from the moment he decided to attend the beer fest till the end, observing how he behaves.

Journey Map helped me visualize an individual relationship with a product, in this case, the festival, and experiences and identify my users' pains and possible opportunities.

Ideation

Working alone on this project, I started collecting all the notes I made from the discover and define phase. Then connect them, distinguish, and focus on possible good ideas that might be incorporated in Microsite.

From there, I was able to define crucial problems the user is facing and recognized pains and gains: 

Pains:

• He spends hour waiting to get in since it is overcrowded

• He spends more time in lines waiting for beer.

• He misses a concert, wandering from stage to stage.

• He is looking for a performances online after the festival, but no luck!

Gains:

• Helpful website before, during, and after the event.

• The experience that will make the user come tomorrow and next year.

Opportunities

• Attendees can get a pass before the festival that will allow them, depends on the pass, free beer or more.

• Beer passes will be used via Bar Code.

• Users can follow the live line-up and know who is playing, on what stage in every moment.

• Users can watch festival live in real time.

Moscow Method

I had to prioritize this point and decide why particular features are providing value at this moment. 

Feature prioritization is another essential part of the Design Thinking Process because it requires us to concentrate on the ideas that matter the most to the stakeholders and users.

The Minimum Viable Product

My MVP is a micro-website that will help Belgrade Beer Fest attendees to:

• Get passes purchased before the event and used to get free beer via QR code on the phone.

• Follow concert and schedule via interactive lineup page

• Navigate themself on the site using map integrated into App, with marked stages

• Follow the Beer fest live on microsite at the cozynes of your home.
  

Value Proposition Statement

Beer Fest Belgrade Microsite will help attendees avoid endless lines with Different types of passes (tickets) so that they can enjoy good music right on time, beer, and make the most of their time. This exceptional experience will make them happy and satisfied.

Microsite’s key features: 

Before Festival 

• Purchase Beer Fest Pass and get free beer, on Microsite. 

During Festival

• Navigate themself with an Interactive map and follow the lineup in real-time and check your “All you can drink pass” expenses

After

• Watch the performances online on Microsite.

I want to mention that Pass can help tourists visiting from other countries, pay in their currency, and use the Pass without problem on the event. 

Prototype

Quick reminder, the main idea was to show how the user interacts with the microsite before and during, and after the event (watching livestream) — considering that, I intentionally created a desktop version and mobile version.

Users can purchase Pass on desktop, but phone and QR serve as payment methods during the event.

As for the “After the event” or during the even, users can use both devices to watch live stream.

Low-Fi

I started with an idea in my mind, and following the “happy path,” I sketched a couple of solutions and ran user tests to find the best way to integrating the newly defined functions. At this phase of the design process, user feedback was crucial to eliminate pain points and enhance usability and existing features.

Mid Fi Prototype

After usability tests, with 3 testers that were good, I created Mid Fi with some improvements.

I used Maze to test the mid-fi prototype, explaining the tasks to my testers. Even though testers could “get the pass” and “check line up,” I discovered the problem and what can be changed.

Usability Test

1. During the purchase of the QR code, I realized there is one extra page that confused people.

2. Do they wonder where the QR code will be? On their page or mail?

3. The Dropdown menu on the phone version was too long and confusing

4. Map and Live Line up were too small.

Visual Guide

Since, Belgrade Beer fest already has a website, and I wanted to follow the current visual identity (that had been changing over the years).

I used some photos from the event and created my first mood board with brand attributes the festival described itself.

The test results were disappointing from “mixed messages”, “dull”, “boring”, “even zombie attacks”. I had to step away from the original platform and create something new that will positively impact users.

The new Mood board had photos from Pexels and Unsplash (and some from original website), and I decided to experiment with brighter colors, and add new logo on top of the mood board.

Brand Attributes

After desirability test, i could just add new attributes next to the one I already had in mind

Logo

Team work is Always the best! My classmate and friend Andrew Roig, amazing graphic designer created Logo for Belgrade Beer fest! This was inspiring and set standard for future design!
Please check roigcreative.com

Design System

With the logo on board, typography, color selection, and defined UI, I created blocks and components and brought Hi-Fi products to life.

Hi-Fi Prototype Desktop

The desktop version shows the first happy path where the user gets a QR code for one day.

Screen 1: User opens, explores Beer Fest website (Lineup and Beer Fest movie), User than select button Passes

Screen 2: Beer Fest Passes page opens and user explore the passes

Screen 2: User selects 4 days VIP pass

Screen 3: User reads all terms&condicions

Screen 4: User Selects Guest Checkout

Screen 5: User Fill the Information , select payment method and donate $1 to charity

Screen 6: User Review the cart

Screen 7: User receives the Pass with 4 free drinks

Hi-Fi Phone version

User has interaction on the phone during the Festival:

Screen 1: User brows the Homepage

Screen 2: Display menu - User selects Live

Screen 3: User Selects Livestream

Screen 4: User watches Performers on 4 different stages

User is NOW at the Festival:

Screen 5: User clicks On live Lineup

Screen 6: User observe the upcoming concerts on 4 stages

Screen 7: User add the notifications next to the prefered artist

Screen 8: User is back to Homepage, and selects Profile

Screen 9: User shows the barcode to get the free beer

Screen 10: Phone vibrates - nUser get a notification about the upcoming concert

Learnings

• Test as many times, with as many people!

• Include people in your project. They put another perspective and inspire you to be better and get out of your comfort zone.

• Play with colors.

Next Steps

Creating a website for the Local festival was my first individual project done in Ten days.
Besides developing more pages, creating an App for Belgrade Beer Fest would considerably reach out to many more beer lovers and those who love rock and roll.

Medium Article