UX/UI Case Study: Curated Event Microsite

Implemented by Ironhack Miami

In this case study I’ll showcase my process and concept of an Event Microsite for an already existing event.

Project Contributor: Robert Zamora

Info & Brief

Everyone one has been to an event at some point in their life; whether it’s in person or digital. As technology progresses, this changes the way we interactive and experience these events.

I was tasked to design a ready-to-build responsive microsite for a festival of my choice that will be taking place in the near future. Keeping mind that the site is essentially released in a one-year cycle and there are different phases to an event.

Deliverables

• Pre-Event phase of the site or variation
• During the event phase of the site or variation
• Post-Event phase of the site or variation
• UX Research
• MVP
• User Flow (one per phase)
• Site Map
• Sketches & Mid-Fi Wireframes
• UI Process
• Design System
• Responsive Hi-Fi’s
• Hi-Fi Interactive Prototype

Client

III Points Logo

The even that I chose was III Points. An annual music festival in Miami showcasing underground electronic, indie, hip-hop, and experimental music genres. All the while showcasing the juxtaposition of art, technology and music.

Research

Market Research

I began by doing some market research on music festivals and how they are produced. I wanted to find out what makes a successful music festival, what made users return to these popular festivals, and what makes each festival unique.

Quotes from Market Research

I found insights in that popular headliners are what draws the attention, but the experience and “vibe” is what has people returning each year.

Competitor Analysis

From within in the market research I recognized three major competitors to III points in the Miami music festival market:

Each had their own specific branding that drew certain crowds. I broke down, in a feature analysis, what was the common ground between the three and what were some missing.

Feature Competitor Analysis

Market Position Map

I then constructed a market position map, honed in on the points between the concepts of Mainstream Vs Underground music, as well as, showcasing only music Vs music + more [exhibits].

User Interviews

I interviewed 5 individuals about their experiences with music festivals, expectations they’ve had for before, during, and after, pain points, and if they had ever been to III points before.

User Interview Quotes

Affinity Diagram

Using the qualitative data from the interviews, I created an affinity diagram to organize my results and find the underling issues/ themes.

This gave me the overarching idea that this is all encapsulates the EXPERIENCE of the festival.

With that I came up with the following insights:

Before- Concerns about organization and gathering information

• What am I getting in to
• How much
• Who’s going to be there
• What’s the Vibe

During- Locations and performance schedules

• Food options
• Set times
• Map

After- Remembering and keeping culture (What brings you back)

• Emphasizing the experience
• Products to remember occasion
• Incentives to return; discount options, future shows, related festivals

User Persona & Journey Map

Using the qualitative data from my interviews I constructed my Primary User Person Vibing Veronica. She has gone to festivals since she was old enough to go, and has gone to a music festivals every year since her first.

She wants to enjoy the music and entire experience; seeing artists, exhibits, and discovering new music. First she needs to see who’s playing, buy tickets, and make some great memories during her time before and after the festival.

Current User Journey Map

I then plotted Veronica’s motivations, frustrations, wants and needs for this website using a User Journey Map.

Define

With the market and user research complete, I then began defining the data and insights.

Problem Statement & HMW

I created three How Might We questions and a problem statement, to encapsulate Veronica’s problems and act as a focus to my ideations.

Problem Statement & How Might We questions

Value Proposition & Jobs-To-Be-Done

From the statement and how might we’s, I then constructed my Value proposition canvas to organize the pain, gains, and jobs that the product would be solving for veronica.

Value Proposition Canvas

Followed by the Jobs-To-Be done for her before, during, and after the event.

Jobs-To-Be-Done

Ideation

With that complete I then moved on to brainstorming my ideations; utilizing a mind map organize the ideas.

Mind Map

Which I then prioritized my ideas using a MOSCOW method. Organizing everything in a hierarchy on what to build first and what could be done later.

Moscow Method Chart

MVP

With all that done, I made an MVP that encapsulates what the product does and how it will help Veronica to address his paint points.

Site Map & User Flows

Now that I established my MVP, I then began to plan my site map; referencing my ideations and insights from my research. Taking in to account the features that would be available during the different phases of the site.

Site Map

Using the site map, I went on to construct the Happy Path user flows for Veronica’s interactions before, during, and after the festival.

User Flows: Before(Top), During(Left), and After(Right)

Sketches & Lo-Fi Wireframes

I then proceeded to sketch out my ideations and flows in a few lo-fi wireframes. I developed a couple of concepts that I wanted to play around with in mid-fidelity, so as to test the hierarchy and interactive flow.

Sketches & Lo-Fi Screens

Mid-Fi Wireframes

I then went on to refining and organizing the screen and flow in Mid-Fidelity. Ensuring the information architecture made sense, and tailoring the features I prioritized from my MOSCOW method.

Screenshot of Mid-Fi Wireframes

UI Process

To start my UI process, I began with a visual analysis of two of my competitors. Breaking down their UI elements in order to see how these items translates to their specific branding.

Visual Competitive Analysis

I started with Ultra, which gives a futuristic, clean, and slick mood that emphasizes on technology. This year Ultra has honed in on an outer space branding combined with bright colors like baby blue, and a soft green.

Visual Comp Analysis: Ultra Music Festival

I decided to do an additional visual analysis on Okeechobee music festival, as it a stark contrast to Ultra in terms of branding.

Okeechobee Music fest gives off an earth mother and hedonistic atmosphere. It shows this combination of nature and music with a sort of “love for all” contemporary hippie vibe.

Brand Attributes & Mood-board

Taking inspiration of how my competitors created their brands. and analyzing III points already existing website. I put together words that I felt encapsulated III points brand.

III Points Brand Attributes

Keeping these attributes in mind, I decided to make a mood board to give me inspiration for designing my style tile and design system.

Mood-board

Style Tile

With my mood-board as inspiration, I crafted this style tile. I Utilized a dark mode style, and used purples and light blues across a gradient to give a sort of holographic feeling to the UI elements.

I used Raleway to give a clean feeling that compliments the ring elements. The gradient sphere would give a sense of dimension to the site and are also contrast to the 2D feeling that the rings show.

Design System

In my design system, I took the styling further and incorporated it in the cards and navigations. I wanted the site to remain clean and have the information be the forefront of the site; with the UI elements being only complementary

Screenshot of Microsite Design System

Responsive Hi-Fi’s

With the majority of my design system complete I started my design my responsive Hi-Fi’s. I started with mobile and then progressed to larger sizes leading up to Desktop.

Hi-Fi Mobile: Screenshots & Gif

Hi-Fi Tablet: Screenshots & Gif

Prototype

The Hi-Fi interactive prototype was developed for desktop and displays both micro-interactions and animations featured on the site

If you’d like to try the interactive prototype you can check it out here.

Microsite Phases:

Pre-Event Phase:

Before the festival, the site will be used to gain information and purchase tickets. The site would include pages for:

• Artist Lineup
• Purchasing Tickets
• Guide with FAQ
• Third Party Merchandise
• Music Player: Using music of festival artists

Hi-Fi Prototype: Pre-Event Phase

During-Event Phase

During the festival, the site will focus on navigation and organizing your experience of the festival. The site will include pages for:

• Venue Map
• Exhibit & Vendor lists
• Artist Lineup Per day: Option to create personalized line up
• Purchasing Tickets
• Guide with FAQ
• Third Party Merchandise
• Music Player: Using music of festival artists

Hi-Fi Prototype: During Event Phase

Post-Event Phase

After the festival, I focused on the idea of nostalgia and wanting to return. The site is now striped down to one screen but it includes:

• Highlight photos and videos of the performances
• Newsletter subscription; to get news on upcoming related shows/ events
• Merchandise carousal with link to vendor
• Music Player: Using music of festival artists

Hi-Fi Prototype: After Event Phase

Next Steps

For next steps, I would look in to making a mobile application. This would further explore ideas of customizing the III points experience for yourself. UI elements would change every year, but the overall UX would remain the same, but optimized in an application.