Event Microsite Presentation Outline

Covid has affected everyone, and live events that rely on audiences for financial survival aren’t excluded.

Did you know that since Covid Live Venues from Church Services to Strip Clubs, have started using Drive In’s to host their events?

The Challenge

Our Ironhack Challenge for Week #5 in this four day sprint was to create an event microsite for our client, Hypnotic, a fictional Music Concert Company.

My West Coast homegirls 🙌 aka Lucie, Kat, and myself, will walk you through the Agile Design Thinking Process we embarked on to find data and use design and innovation to address our Customers needs and desires.

Our hope is that we are able to find the area of Opportunity for Hypnotic (our fictional company). For this project we chose to focus on drive in venues, to meet the real needs and wants of Live Concert Customers during this Pandemic Era.

The Design Process consists of 5 stages: Empathize, Define, Ideate, Prototype, and Testing. To accurately Empathize with our Users we used the Lean UX Canvas to start conduction our Business Analysis.

Lean UX

Lean UX is a tool used to reduce waste, or pains for the business and user while providing value to both.The main takeaways were that the Business Problem affected the Music Industry, Drive-ins, and In-Person Concerts. Similar Pains were affecting Individuals as well as groups of people.

Competitive Feature Comparison

To further our Business Analysis we used the Competitive Feature Comparison tool to try to uncover Opportunities for Design between Hypnotic and current Competitors. The next tool in our Business Analysis was the Competitive Feature Comparison framework, to further compare the similarities and differences of the competitors.

The three categories that uncovered an Opportunity for Design were: Personalized Service, “At Risk” Options, and Amenities availability.

Market Positioning Chart

Our next step was to gather further data analysis using the Market Positioning Chart. The Value of using the Market Positioning Chart is being able to Compare Multiple Competitors in the Market to identify differences, strengths, and weaknesses and unveil a “Blue Ocean” of Business Opportunity & Innovation.

The Takeaways of Chart #1 was the Blue Ocean in Bargain & New Technology amongst Competitors.

The Takeaways from Chart #2 was the Blue Ocean in Innovative Service & Very Safe for Users Health.

The next and final step to our Discover Stage is User Research. The User Research Tool used helps to discover the targeted User, the Needs and Pain points of our user; as well as the goals, tasks, and habits of our user. Our User Research was conducted using both Quantitative & Qualitative Data to gain further insights into our Users pains and gains.

Quantitative Data

There were a total of 50 Respondents from our Surveys. Out of those 50, our most valuable insights were that the majority of our Users were getting information about upcoming events from the Web Browser (88%) or an App (50%). The most popular music choice of our Users was EDM at 58%.

Qualitative Data

“ My Favorite part is definitely the audio and production quality. Nothing beats bass and lasers.”-Aivas

The Qualitative Data consisted of a total of six interviews. All of our interviewees stated that the drive-ins they experienced were for social purposes and to find a source of relaxation. But that Audio and Video Quality were their main needs and pain points when not met with their expectations.

The Define Stage was our next tool to use. Consisting of Affinity Mapping, Value Proposition Canvas, User Persona, and User Journey Mapping. The Define Stage helps to narrow down the Pains and Gains of our User and look for the Top Insights that we find from our data.

Affinity Map

Using the data in the discovery phase, we created an Affinity Map which allows us to organize the data and discover the trends and patterns from our Users. It also helps to ensure that we meet the physical, social & emotional needs of our users. The takeaways were that people want access to an affordable, social, and safe event. But that if any of these needs are compromised, the users feel anxious and less likely to attend future events. They were also frustrated with the lack of safe events currently available at this time.

Value Proposition Canvas-Customer Profile

We could now use the data to create a Value Proposition Map for our Users. This tool aids in organizing their Pains, Gains, and Jobs to be Done. While continuing to stay focused on their social and emotional desires. The Takeaways were that our users want to gain an enjoyable, sociable experience that has a sense of community. The Jobs to be Done not only were directed towards enjoying music but more into socializing and safety as well. Their current pains are the availability of these kinds of events during Covid. Even when the events are available, they are concerned about their safety and the audio/video quality is poor.

User Persona

To bring back the human feel to all this information, we created a Persona, “EDM Emily”. Emily’s characteristics are derived from the data we collected, so she is a real representation of our users mental models. The main insights came from her needs, which are having a safe, social, quality, and personalized experience at a live concert event. Her frustrations reflect that her needs have not been met by any currently available experience.

User Journey Map

Using our Persona User, EDM Emily, we will create an ideal experience using a User Journey Map. The value of the journey map is to analyze the ways in which her current experience is lacking. We are then able to focus on the negative parts of her experience because those pain points are opportunities for design. This journey follows the stages of her seeking a music show up to leaving the event. Her three biggest pain points were in the phase of looking for the event, during the event, as well as entering and exiting the event.

Empathy Map

To ensure that our team was accurately representing our User and to gain deeper insight through data we collaborated and made an Empathy Map. The purpose of the Empathy Map is to ensure understanding and gain deeper insight. This solidified the user type as people who love going to live music events, but currently feel isolated because they can’t access these type of events.

Problem Statements & HMW’s

The next step was to translate all this data into How Might We statements to properly address the Users pains indicated in the User Journey Map and the other data accumulated with the other tools previously mentioned. Then we reworded them each into three separate How Might We statements to address the Problem in our Users Journey.

Problem Statement: For the first problem of our Users frustration with the lack of logistical public safety information pre, during, and post-event.

How might we provide logistical public safety information regarding all phases of the event?

Problem Statement: For the second problem of our Users desire for higher quality and customizable entertainment experience, with premier audio and visuals, as well as reliable customer service.

How might we offer premier audio and visual quality as well as reliable customer service in a highly-customizable entertaining experience?

Problem Statement: For the third problem of our Users are having trouble navigating to, through, and leaving the event, while understanding where they are supposed to go.

How might we provide logistical public safety information regarding all phases of the event?

Now that there is a precise target on what problems to address for our user we can have a team brainstorming session commonly known as Ideation . That’s the most fun stage in my opinion. We time-boxed ourselves for 15 minutes and came up with as many ideas as we possibly could; no matter how far out.

Let's see how many ideas we can come up with.


Our team came up with 90 Ideas during our brainstorming session! We were able to hone in on common ideas to cluster a common concept that would address these problems for our Users.

MoSCoW Method

The MoSCoW Method allowed us to narrow down & classify our brainstormed Ideas into four categories. The Takeaways were the Categories we divided our ideation into. The Must-Have’s were A Event Navigation, FAQ, Premium Sound, Reachable assistance, Clear event information, and an Organized venue with arrival and leave times displayed. The Should Have’s consisted of alot of innovative tech ideas like a Virtual Assistant option on the site. The most popular of our Could Have ideas was an Artist Walk Through.

Now we can compile our Main Job Story and Main Feature Story for our Jobs to be Done.

Our Main Job Story is when the user is feeling quarantine fatigue, they want to be able to attend a premier drive-in concert with clear safety guidelines, so they can enjoy live music safely. Which gives them peace of mind about their decision.

Our Main Feature Story is when a user wants to attend a concert, our feature will help them stay informed on safety protocols during the process, navigate their experience while also enjoying an innovative and personalized time. This makes them feel in control of the entire process and satisfied with their selections.

Value Proposition Canvas-Product Market Fit

The Value Proposition Canvas-Product Market Fit tool is used to brainstorm Gain Creators, which is how our Product or Services create benefits the customer needs and expects. The Pain Relievers describe how our Product or Services reduce negative emotions, undesired situations, or risks that the customer may experience when getting the job done. The major takeaways were that pain relievers lied within clearer communicaton on safety measures and protocols throughout the users experience, as well as higher quality of audio/video accompanied with higher quality services customizable to our users needs.


Now to compile all this data into a MVP, or Most Viable Product. To properly address the three most prominent pain points of our User we created two MVP’s. One for the Event and the other for our Product.

Our Event MVP is a drive-in live music event that provides users with clear safety guidelines, so they can have an intimate and safe space to enjoy their music. This MVP addresses our users pains frustrations with logistical information and safety information througout the event

Our Product MVP is a microsite that allows the users to stay informed on safety protocols during the process, to navigate their experience, while enjoying an innovative and personalized time.

The product MVP will also solve the problem our Users are having with trouble navigating throughout the process of the event with an interactive map. As well as our users needs for reliable customer service.

Looking back after the project, I realize that more focus on features to ensure the audio and video where surperb and higher quality than norm could have been a point to address more precisely. We did add a additional speaker rental feature but could have pin pointed this area of opportunity more precisely to adequately address this pain points relevance to our Users. But, this was a four day sprint so details are a luxury that we didn’t have much time for.

Site Map

Our Site Map gave a rough draft to our User Flow to give visual auditing to ensure accurate transferring to our Flow Chart.

Our User Flow Chart is a visual outline of our Users journey through a Happy Path with our micrositeThis tool visually represents the User as they interact with Content within Tasks and with the Decision Logic to complete those tasks, with the addition of our new microsite at all stages of their journey.

We finally enter the Delivery Stage. The Deliver Stage is where we create the prototypes for the microsite with the use of Usability Tests to find out problematic areas and whether to pivot or persevere based our test results. Lo-Fi, Mid-Fi, and Hi-Fidelity Prototypes and testing will be made to see how our User uses our new microsite. We will also have Visual Competitive Analysis, Moodboards, and Style Tiles with Desirability Tests.

Lo & Mid Fi’s

Our Lo fi consisted of three flows of our users to address our three main problems within our Users journey. The flow of ordering tickets, and being at the event, and requiring either non emergency help or requesting food and drinks.

For the Usability Test we had 7 testers. Our most problematic screen was the event page with 92.9% Misclick rate and 35.20 seconds as time spent on the screen. Users stated that they wanted to scroll for navigation and “wanted to pick their options” for the event. We decided to perserve because this issue would be addressed in Mid Fi/Hi Fi.

The Mid Fi Wireframe had seven testers with a misclick rate of 40% and time spent at 17.1 seconds for the same screen. Our testers stated that “they wanted to add all of their picks to see what was available.” Our users were expecting the mid-fi to be more functional and were confused by the map. We noted that for the hi-fi, those drop down menus should be our microinteractions. Additionally, we learned that we would have to change our map to a more clear image.

Visual Competitve Analysis

Our Visual Competitive Analysis was from Insomniac, one of our main competitors. We were able to do some visual benchmarking to see what our competitors are doing on their sites, as well as what they aren’t doing. This helps us guide our High Fi in the direction of our blue Ocean market of Bargain & New Technology and Innovative Service & Very Safe for Users Health.

Brand Attributes

Our Brand Attibutes help us give personality traits to our brand. We chose for Hynotic’s microsite to be: Wholesome, Cheerful, Daring, Spirited, and Up-to-date.We felt these traits appropriatey personafied our general census of Users.

Another new tool was the Moodboard with Desirability Testing. The Moodboard is a digital collage of images, materials, typography, and other design elements that are put into a format that represents the final designs style. This is the final image of our collaborated mood board. During Desirability Testing one of our 5 testers stated “It looks exciting. Like something I would want to go to!”

Yet another new and wonderful tool we learned to use a Style Tile. The Style Tile is used as a visual reference for the website. Style Tiles use fonts, colors, and specific styles to make colletions and other areas of UI defined in a story book manner. The Tile makes it easy for collaboration and teamwork when building out the deliverable.

Our Atomic Design included the basic elements of the UI and its components. By breaking down the Atoms, Molecules, Organisms, Templates, and Pages it gave us an organized and clear model to build out our High Fi with reusable building blocks of our interface that we could all use. We did narrow down our color range to the three basic neon colors that appealed to users from the Style Tile. One of our users stated they “thought the yellow was too bright” so we changed the color to be less bright and more visusally appealing to the user. We also brightened the pink in the logo to make the name clearer while not overbearing.

Our Final Result is the High Fi of our Microsite drive in, named Hypnotic.

Hypnotic’s site prides itself on aiding it’s Customers in staying informed while helping the Customer Navigate througout the event.

Hynotic’s microsite offers innovative and personalized experiences tailored to the Customers desires with custom options for Food & Drink Services and added amenities like renting a speaker or buying neon lights. You can even add speciality decorations to your designated pod/parking area.

Safety protocol is reviewed prior to ticket purchase as well as prohibited lists of what is not allowed at Hypnotic’s events. There are strict COVID guidelines and procedures adhered to at the event to ensure the safety and enjoyment of all attendees.


Overall I was so grateful for the wonderful teammates I had working on this final team project. The main takeaway I got from this challenge was the importance of collaborative effort and team work, and how that applies to the UX/UI Designer Position. Even if I end up being the only designer in the department at my future job, I see how valuabe input can be from teammates. When you’re in the midst of the project it’s easy to think there’s an even flow to the UI of the Mid and High Fi especially (my lo fi’s are primal at best).

But with the use of Desirabilty Testing throughout this challenge with different tools, it has helped us carry our brand attributes or, as the kids say, “vibe” of our user to our user; and the more input you have from users, even teammembers the better.

Making sure we are communicating visually what we represent, is what will make our users come to our site. Ensuring the most personable, positive experience they have had, is what will make them continue to come back.

And if their anything like “EDM Emily”…their going to tell their friends.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Coco Griffin

Coco Griffin

Christian and mother of six thats been through all of lifes hicks