Event Microsite Design Sprint Case Study // Ironhack UX/UI Project #4

Photo by Kelsey Knight on Unsplash

Overview

Brief: Design a ready-to-build responsive website for a festival of your choice that will take place this year.

Role: This is a project conducted during Ironhack’s immersive UX/UI bootcamp and was completed by myself, Matt Dutton, and my teammate Kellie Parker.

Timeframe: 4 day design sprint

Tools Used: Figma, Useberry

Problem & Goal

In this challenge we were tasked with creating an event concept of our own choosing and to create a microsite for that event that includes one unique feature. This feature will add value to the end user with insights gained from thorough user and industry research.

The Process

Discovery: Business Analysis

We began by analyzing our proposed festival against our competitors, both direct and indirect. To do this we first utilized the lean UX canvas to get the big picture of what we were building, why we were building it and who we were building it for. This is a living document and we came back to it several times throughout our process to refine our goals. From this canvas our goal was to understand the initial business problems, the desired business outcomes, who the user base may be, and what benefits they will receive.

After setting the stage with the lean UX Canvas we began to analyze the competition via a feature comparison chart. This type of analysis goes beyond just assessing which of the competitors have the features we’re interested in building, the point is to quantify the value of those features based on how they’ll help us differentiate our product from the competition. The companies listed on the chart varied in the types of events they were in size and scope. Some of which were smaller sized food festivals such as the Denver Food & Wine Festival and Central Florida Veg Fest, while others were giant music festivals, Bonnaroo and Governor’s Ball. Because of the varied types of events we were analyzing it gave us a broad perspective of what features they offered. Our top discovery from this tool is that much of our festival competition did not offer sustainability efforts as a top priority.

After understanding the different features our competition had in place at their festivals we mapped those competitors out on a market positioning chart. This chart helps us determine where there’s a blue ocean. In other words, where there’s opportunity to grow with little to no competition. This is where we settled on the event we would be putting together, a sustainably focused food festival. We were able to define the axis of the market positioning chart by referring to our competitive feature analysis and grouping like features together to determine where the competitors stood in the market place.

User Research

User research is so important to the design thinking process because of the insights we gained from real people who attend events like the one we are planning. This is extremely helpful to empathize with our users to see where the real pain points during a festival are. Some quotes from the interviews:

“I try and use the recycling bins that they have, a lot of the time though they’re overflowing and it ends up on the ground.”

“Oh my god I love nothing more than to see a big trash can providing the certainty to me that I don’t have to worry about littering.”

“It’s really just a whole bunch of people coming together to form a community for a few days, I love it.”

The key takeaways from the interviews were that:

  • Users cared about sustainability at big festivals
  • Users actively seek out the proper trash receptacles for their garbage
  • Users biggest pain point was waiting in various lines that took a long time

While gathering qualitative data is important. We also sent out a survey to potential users to gain some more insight. We had about 50 responses to our survey and discovered that just like our interviewees a majority of survey respondents are aware of the environmental impact large festivals have and they feel there can be a better effort to be more eco friendly. Some of the key statistics from the survey were:

  • 54% of survey respondents don’t feel like there are enough recycling cans at large events.
  • 86% of survey respondents say they seek out recycling when they are at a large event
  • 76% of survey respondents avoid food waste because they know of the environmental impact it has.

Define

In the define stage of the design thinking process we used tools to help us analyze and find patterns amongst our data and research. We used the affinity map to look for themes or trends in the data that we collected, then we grouped those themes together to visualize and make sense of the data. This is an important tool to organize the beginning of the define phase and to gain initial understanding of who the user is, their goal, and their habits as well as other statistics compiled from secondary research. The main takeaways we received from the affinity map were that:

  • Our users cared about sustainability quite a bit
  • Users experienced other headaches as well with crowd control and waiting in lines
  • Signing up for classes/demos at a festival can be a daunting task

After completing the affinity map we pushed on creating one side of the two sided value proposition canvas. The canvas is a tool which can help ensure that a product or service is positioned around what the customer values and needs. By first listing the customers’ jobs, or things that they look to complete while at the festival, and then the job’s pain points and gain points we can gain further insight for a valuable feature. The main takeaways we received from the canvas were that:

  • There are plenty of pain points the user experiences throughout a festival, from purchasing food to finding the schedule of events
  • The user needs more value out of their experience of going to a festival to relieve these pain points

From the information that we gathered up until this point we created our user persona, Sustainable Sam. As someone who cares about being more healthy, sustainable, and connecting with his community. The purpose of creating a user persona is to make a realistic representation of our user group. The persona is based on the qualitative and quantitative data we have gathered as it is only as good as the research behind it. The key takeaways we received from the persona were that:

  • Our user group was in the range of 25 to 34 years old
  • They enjoyed social events
  • They cared for their community and the environment around them

Now that we understood who our user is and what they are looking for in a festival we created a current state user journey map. The purpose of the journey map is to showcase the largest pain points of a user who is attending a festival without the assistance of our product. This shows where there can be opportunities for design to really solve the user’s biggest needs. Most of the pain points were concentrated within the festival itself, like not being able to find the recycling receptacles, waiting on line and missing out on scheduled events. The takeaways we distilled from this were that:

  • There was an opportunity for design at all stages of the festival, before, during and after
  • Further empathizing with the customer through there typical journey had our minds racing with ideas on how to solve their problems

Now that we have conducted research and sorted through a few different mapping tools to visualize where the user is struggling the most, we went to define the problems and turn them into how might we opportunities. The problem statements we were able to define were:

A user who is attending a festival is having difficulty navigating to the event because they do not have the proper information available to them.

A user who is consuming food and beverage at a festival needs a way to find recycling bins because they are aware of the environmental impact large events have.

A user who is looking to sign up for demo classes needs a way to view the class schedule and sign up process because they may miss important information they were seeking.

The problem statements we then turned into actionable “how might we” questions. Those questions we posed were:

How might we help a user who is finding difficulty in navigating the event?

How might we show the user information about the recycling bins around the festival so they can have a better impact on the environment?

How might we provide the user the information and reminders to sign up for classes/demos so they can attend?

Now we have finally come to the ideation step in our design process. We were on a strict time constraint at this point in the process and only allowed ourselves 25 minutes to come up with the best ideas we can conjure. Some of those ideas were:

  • Offer a scheduling system for classes and demos on sustainability
  • Have a system in place for users to check their purchases post event to learn more about the vendors they bought from
  • Amongst many others, in total we came up with 31 unique ideas

Develop

We took our ideas from our brainstorming session to develop and prioritize the features we would like to include in our micro site. First we mapped out our ideas and an impact versus effort chart. This really helped us visualize what features we could include in our site based on the value they would bring. The purpose of this tool is to align business cost versus business effort to see what of our ideas seemed to be the most feasible.

We then took that information from the impact versus effort chart and turned to the MOSCOW chart. This chart really helps single out the top features we plan on having in the minimum viable product. It also shows some features we should have but may have to wait because they aren’t as much of a priority, and some other features I could have but the effort for the value they create is not equal.

Our must have ideas included:

  • Provide information about sustainability
  • Offer personal event tracking of purchases
  • Offer more detailed vendor information so users can stay connected to them post event
  • Offer a virtual schedule for users to sign up for classes

And after going through the MoSCoW chart we pivoted. Up until this point we focused our research and findings on the impact that festivals had on the environment; but through the ideation stage we had a hard time coming up with a sustainability focused feature that wasn’t something as simple like a map of garbage cans. It didn’t really answer some issues we heard during our interviews. So we backtracked and shifted our focus to keeping users connected to sustainable vendors after the event. From this pivot we added problem statement number four, which is focused on a way for users to stay connected to vendors post event as a way to continue supporting their community.

“A user who is attending a food event needs a way to stay connected to vendors because they want to continue to support their community and stay eco conscious.”

From this we also had an additional “how might we’’ statement. So how might we keep users informed after the event ends this is one? This is when we went back to our brainstorming board to ideate on a feature that would help users with this problem, which will be revealed in our MVP.

After these changes we went into the business side of our value proposition canvas. This lists our products and services with the potential gain creators and pain relievers to find if our microsite will be a product market fit for our users. We do do this by filling out the products and services the business will offer to ease the pains and show the gain creators our services will create.

So to recap our problems before we move into our MVP, we discovered that:

  • Users are having difficulty staying connected to vendors after the event ends
  • They are possibly missing classes or demos at the event puts on because of poor scheduling
  • They are having a difficult time finding the right way to throw out the garbage

Now that we have compiled and analyzed our research, empathized with our user, and brainstormed on ideas to solve the biggest pain points we were ready to reveal out minimum viable product, MVP, for both the event microsite and the MVP of the festival itself.

  • The MVP is a micro site that offers a main feature of a mobile wallet via an electronic wristband to allow users to speed up the payment process, check into classes, wait and virtual lines and receive information after the event ends.
  • The MVP of our festival is an event that focuses on preserving our planet by reducing pollution and waste by adopting eco friendly practices.

Both of our MVP statements led us to the value proposition statement, which summarizes the value we will bring to users. Our key features will help users enjoy the whole experience by reducing time spent waiting in line and paying for items and increase the sustainability knowledge of event attendees. The statement reads:

  • Our wristband payment and event tracking systems help festival attendees enjoy the whole experience of the event by reducing time spent paying for items and increasing sustainability awareness and knowledge of local restaurants

Now that we knew what our MVP was going to be we went to work in laying out how our microsite would work, first by creating a site map. The purpose of creating the site map is to logically lay out our pages to visualize how the happy path would work for our desired user.

After completing the site map we then went on to create two user flows. The reason why we created two happy path user flows is to complete a task before the event, loading your wristband with your mobile wallet, and two to find out information about the vendors the user purchased items from post-event.

Flow #1
Flow #2

Deliver

We used visual benchmarking from our competition sites like the New York Wine and Food Festival to create our initial mockups. It’s important to keep in mind the user’s mental models when creating these mockups so users feel familiar with our product even though they haven’t used it before. Overall testers were confused about some of the ontology included in these mockups. For instance the event overview option we had on the my account page caused some issues resulting in a 34% misclick rate. One user stating:

“I didn’t really understand what event overview was. It seemed like somewhere to get date, times, and locations.”

For our mid-fi mockups we took the feedback we received from the lo fi testing and did some refining. We still had some more confusion with the ontology during our mid-fi test. Users had comments with the wording on the my account menu page so we really had to think of better wording for each of those sections. While the misclick rate went up to 43% we did receive happier feedback from our testers. One stating:

“I enjoyed the layout and things were easier to find to complete the tasks”

Now that we completed our lo-fi and mid-fi testing we are moving on to our branding. We initially set out with three brand attributes in mind:

  1. Down to Earth
  2. Visionary
  3. Sustainable

We also completed some visual competitive analysis, comparing how other festivals approached their brands.

We took some inspiration from each of these competitors listed in the photo below to hone in on our mood board.

The purpose of the mood board is to show patterns, colors and textures we have an affinity towards that we felt matched out brand attributes. We confirmed this by completing desirability tests, asking others how the mood board made them feel and how the brand attached to it would be defined. It was very successful with one user stating:

“It gives me the feelings of health and comfort, and the overall theme speaks to sustainability.”

Now that we have completed desirability tests and defined our brand attributes we put together our atomic design inventory. This is an important step in the UI design process to gather all of the icons, typefaces, buttons, colors, text fields, and more so that building out hi-fi mockups is seamless.

After putting together our brand we moved into the hi-fi mockups, time to make things look pretty! We chose the earthy and sustainable themed colors of tan, dark green, brown and wine red. The pages came together quickly thanks to our atomic design inventory and we were able to show the two user flows in our demo walkthrough. While we didn’t complete usability tests on these mock-ups we learned our ontology mistakes through the usability tests we conducted.

Success and Failure Metrics

Of course with every project there are success and failure metrics to consider. If we are successful at adding value for the user there will be:

  • Adoption of the mobile wallet feature
  • Tracking of event purchases and engagement with vendors post-event
  • Rise in ticket sales for our event

Some failures could be noted as:

  • No adoption of the virtual wallet
  • Long waiting times for food and beverages due to people having pay with card or cash
  • No repeat attendance
  • No communication from event-goers with vendors after the event ends

Key Learnings

We learned a lot during this short sprint, most importantly that it’s okay to pivot when necessary. Without taking that leap at the end of our ideation phase we may not have delivered as valuable of a product to our users. Of course there can be more done to test out of this is a feature that is something that people would use. We would love to test our hi-fi mockups for usability yo see if we fixed our ontology issues. Being in front of the testers when they are going through the prototypes is also a key learning, this really shows where users struggle as opposed to just sending a link and receiving percentage results.

Conclusions

Overall this was the most difficult week of the bootcamp yet and the most inspiring. The design thinking process is long but worth it in the end when there is value for the user you’re creating the experience for. I look forward to the second half of the Ironhack program with more exciting projects to come! Thanks for reading!

--

--

--

Full Time UX Student @ Ironhack Jan. 2021!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

So, why AppScreens?

How to Make A Website Redesign Successful: A Marketing Consultant’s Perspective

Monster List of UX Books: September 2019 Updates

EPUB & PDF Ebook The Professional Practice of Architectural Working Drawings | EBOOK ONLINE…

Monster List of UX Books: July 2020 Updates

11 Feng shu Roof Shapes For Houses Colors Meaning, Impact

READ/DOWNLOAD!* The Definitive Guide to DaVinci Re

Becoming a designer: What is UI/UX design?

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
Matt Dutton

Matt Dutton

Full Time UX Student @ Ironhack Jan. 2021!

More from Medium

UI/UX Case Study : Nigero Kanji

Case Study of Fasax

24-Hours Laundromat in Balikpapan UX/UI Design Case Study

UX Case Study — Redesign Latest News of Donation App: Kitabisa