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, and et 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.

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 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 the Belgrade Beer Fest in the top 10 festivals preferred by brewers and beer lovers, preserving great popularity and serving as a great travel destination.

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 planned to attend.

From the Business side, besides obvious cancellation, 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 the schedule, lineup, and stages are not visible.

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

Having that in mind, I was able to identify the ideal position for my festival where I can stand up among many others happening around the world, but next to the most prominent ones 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 conducted 8 interviews to gain information about our users, their goals, and expectations. 

What I wanted to know?

1. Higher understanding of how users spend their time at 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 are they 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 from the website.

2. Users are complaining about endless lines and crowds! The festival is free, and therefore, the number 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 musicians

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 the website!

3. Livestream! Make it happen

Affinity map

In the next stage, I had to organize the collected data into 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, during, 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 charge.

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 reasons for coming are music, company, and good local beer. The user persona concept helped me focus on our users’ mental model.

Journey Map

I accompanied Alex on his journey from the moment he decided to attend the beer festival until the end, observing his behavior throughout.

The Journey Map allowed me to visualize his relationship with the festival, including the experiences he had. This helped me identify his pain points and potential opportunities for improvement.

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 into the Microsite.

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

Pains:

• He spends han our 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 performance 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, depending on the pass, free beer or more.

• Beer passes will be used via barcode.

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

• Users can watch the 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 designed to assist attendees of the Belgrade Beer Fest by providing the following features:

• Purchase passes in advance and use them to get free beer via QR code on your phone.

• Stay updated on the concerts and the festival schedule throughh the interactive lineup page

• Navigate the attendee with the map integrated into the App, with marked stages

• Enjoy live coverage of the Beer Fest from the comfort of your home through the microsite

Value Proposition Statement

The Beer Fest Belgrade Microsite will help attendees avoid long lines by offering different types of passes (tickets), allowing them to enjoy great music on time and make the most of their experience with beer. This exceptional service aims to enhance their overall happiness and satisfaction.

Microsite’s key features: 

Before Festival 

• Purchase a Beer Fest Pass and get free beer! 

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 the Microsite.

Additionally, the passes will cater to tourists visiting from other countries, enabling them to pay in their currency and use the passes seamlessly at 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 a mobile version.

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

As for the “After the event” or during the event, users can use both devices to watcha 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 integrate 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

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 the Belgrade Beer Fest would considerably reach out to many more beer lovers and those who love rock and roll.

Medium Article