Asgård Festival
Our school project for the Front-end elective involved developing two digital web solutions for a festival, using two different API’s.
This documentation presents and validates our work throughout the project timeline. It covers the theories, methods, and tools employed to create our final solutions. Our journey consisted of key stages: research, translation, ideation, prototyping, development, and testing.
Although some tools we utilized expired, the webpage may not function optimally. However, I will showcase the entire process, including mockups of the final solution.
KEYWORDS: research, benchmarking, personas, eco model, ideation, figma, wireframes, 5 second test, design refining, mockups, sitemap, responsive web, reactJS, tailwind, motion mover
Project Overview
My Role
I actively participated in various stages, including ideation, research, development, wireframing, design, styling, and testing
About Project
The goal of the project is to create branding and website for imaginary client, Asgård Festival.
Our project was divided into two distinct parts.
The first part involved creating a dynamic website that dynamically updated its content using data from the database. This allowed us to provide an immersive and personalized user experience.
In the second part, we focused on implementing a user registration and login system, enhancing the website’s functionality and security.
Throughout the development process, we conducted extensive UX research to ensure that our design and functional decisions were well-informed and user-centered.
The Problem Area
In the highly competitive festival landscape, establishing a strong and unique branding strategy is paramount to stand out from the crowd.
We envisioned our festival with vibrant colors and striking contrasts, aiming to facilitate brand recognition and merchandise development.
However, our journey encountered a notable technical obstacle: merging two separate APIs. One API held valuable stage information while the other contained essential band/artist data. Overcoming this challenge and seamlessly integrating these diverse data sources became a primary focus for us.
Problem Formulation
“How can we develop a robust and distinctive digital web solution that sets our festival apart from competitors, while ensuring a consistent representation of our festival’s unique personality and meeting the client’s requirements?”
Development
Process
Tools
Creative tools: Miro, Jamboard, Illustrator, BMC, Moodboard, Style tile, Sketches
Communication: Microsoft Teams, Messenger, WhatsApp
File management: Sharepoint, Google Drive
Theories
Web: Heuristic evaluation
Design: Design principles, Color Theory, Typography, Layout & composition, Gestalt laws, Crap rules, Golden Circle, Business Model Canvas, OMD
Methods
Insights, BMC, HMW’S, Analysis of data, Personas, Hypotheses, Ideation, Brainstorming, Crazy 8’s, 5 second test, Observation, Think aloud test, Prototyping
Research
Sender Research
Before creating the prototype of the festival website we wanted to have a meeting we our client to get a better understanding of our requirements and the project itself.
CLIENT DEBRIEF:
A client debrief is a summary of questions we asked our client, to get a better overview and understanding of the assignment and the requirements.
INSIGHTS:
Insights are details we as a group would not know about if we had not been in contact with our client. However, in this case, our insights are that we all have experienced different purchase flows from some of the many festival websites out there and have a good idea of how it is. Also, we got two activity diagrams regarding the purchase flow.
PROBLEMS:
Our problem or hurtled in this project is showcasing all the different artists and creating an understandable program for where and when the bands are playing. We will most likely also be struggling with making the two different APIs talk together since we want to create one digital
Business Model Canvas
The Business Model Canvas (BMC), created by Alexander Osterwalder, is a powerful tool designed to provide a comprehensive overview of the various elements of a business model.
By utilizing the BMC, we aim to gain a better understanding of our client’s festival and its intricate business aspects.
Our goal is to thoroughly analyze and explore the different components involved in creating and hosting a successful festival.
This approach enables us to increase our chances of delivering an exceptional solution that meets our client’s expectations and ensures a remarkable festival experience.
Mission Statement
In order to find our imaginary client’s mission and visions, we had to read and analyze the information given to us by our client, which had specific requirements.
However, besides those requirements, our assignment was basically up to us. We ended up spending a lot of time researching different websites to get a genialized overview of what the mission and vision are at other festivals.
The vision for all festivals including our clients is to create a safe space for all music lovers and of course to have a great festival with amazing music, beautiful stages, and awesome sound.
Mission Statement
“To present a festival that celebrates and explores music, with an aim to expand and stimulate the audience’s music taste.”
Vision Statement
» To reflect current and future trends in the music industries
» To promote and support new and upcoming artists
» To create a safe space for new and different forms of music
» To create the world’s best music festival
Market Research
During our market research, we considered the impact of COVID-19 on the festival industry, relying on data from previous years.
Ticket sales analysis of Roskilde Festival and Skanderborg Festival revealed an impressive retention rate of 94% (ii) and 97% (iii) respectively, showcasing the enthusiasm of festival-goers despite cancellations.
These festivals consistently sold out within days, indicating a significant potential market for our festival, provided we avoid scheduling conflicts with larger events in Denmark or internationally.
Competitors Analysis
In assessing our competitors, Roskilde Festival and Skanderborg Festival emerged as our primary rivals in Denmark. Roskilde Festival excels in fostering a safe and inclusive atmosphere, emphasizing respect and preventing mistreatment among attendees. They also offer a diverse range of events leading up to and during the music days.
Skanderborg Festival, while perhaps not matching Roskilde’s music lineup, distinguishes itself through exquisite camping facilities and captivating stage setups, providing a visually stunning experience for festival-goers.
Conclusion
We aim to make our client’s festival the best by combining the attractive features of Roskilde and Skanderborg festivals. Additionally, we will incorporate new trends through trend analysis, ensuring our festival stands out even more.
Trend Analysis
We have obtained a valuable report from Eventbrite (report link) regarding the impact of new trends on the festival experience.
This report highlights how these trends have transformed the festival landscape for attendees. Many of these trends align closely with our festival’s market strategy and vision.
Here are some of the pertinent trends identified in the report:
» Trend 1: Fans expect more choices and more personalized experiences
» Trend 2: Hybrid festivals attract bigger audiences and bring in more revenue
» Trend 4: Mobile technology is dramatically improving the overall attendee experience
» Trend 5: RFID technology and smart cards add value once inside the event.
Conclusion
In conclusion, our trend analysis has yielded numerous valuable insights that we will incorporate, as mentioned earlier. By implementing these trends, we anticipate a surge in ticket sales and heightened interest in our festival. This will not only keep us in line with the latest festival trends and technologies but also ensure an engaging and up-to-date festival experience for our attendees.
User Research
To gain market insights and understand our customers better, we conducted a survey using Google Analytics. This method allowed us to reach a wide audience and collect a substantial amount of data.
With 39 respondents, we obtained valuable information across six different data points. The larger the number of participants, the more reliable and generalized our conclusions can be.
The survey results are as follows:
» You are…
64.1% women, 33.1% male and 2,6% other
» How old are you?
74.4% 20-29, 10.3% 30-39, 5.1% 40-49, 5.1% 50-59, and 5.1% 60-69
» What social media platform do you spend must time on?
43.6% Instagram, 20.5% YouTube, 17.9% TikTok, 15.4% Facebook and 2.6% Twitter
» Have you ever been to a festival before?
84.6% yes and 15.4% no
» Have you ever been to a festival before?
84,7% The music/artist, 5.1% Camping facilities, 5.1% stage setup/sound and 5.1% other events
Conclusion
Analyzing the survey data, we discovered that music/artists and partying are the most important aspects of the festival for attendees. This insight guides our social media (SoMe) content strategy, emphasizing the persuasion of potential attendees. It also confirms the correct placement of the lineup on our website’s landing page, optimizing user experience (UX). Furthermore, we identified the key SoMe platforms to focus on: Instagram, YouTube, TikTok, and Facebook. Lastly, our primary target group comprises males and females between the ages of 20 and 29.
In summary, the survey helped us identify our primary target group, determine the optimal SoMe platforms for advertising, and shape the content for both our website and social media channels.
User Journey Map
To enhance the customer experience and prevent negative emotions while navigating the website or researching the festival, we have dedicated significant efforts to optimize the user experience (UX) and user interface (UI). One key improvement is the implementation of a login system within the purchase flow. This allows us to build a comprehensive attendee database, enabling us to send important messages and address customer issues promptly. Moreover, the login feature offers flexibility for customers to delay purchasing tents until they decide on sharing arrangements.
Furthermore, the login functionality facilitates the integration of the website and app, creating a cohesive digital solution. Our vision was to provide a unified experience accessible through both desktop and app versions. By logging in, attendees can seamlessly transfer their profile information between the website and app. This integration eliminates the need for users to switch between platforms, enabling them to easily access event details, such as the lineup, and display their tickets in one consolidated digital space.
Translation
About
Translation of insights into data in UX involves converting qualitative user research findings and observations into quantitative data. This process enables designers to identify patterns, trends, and user behavior metrics that inform data-driven design decisions. It bridges the gap between qualitative understanding and quantitative validation, providing valuable insights for iterative UX improvements.
Insights & HMWs
Market Research
Insights
Insight 1: Festival-goers have shown high enthusiasm and loyalty even during cancellations, indicating a strong market potential for our client’s festival.
Insight 2: Roskilde Festival’s emphasis on safety, inclusivity, and respect has been successful in creating a positive atmosphere, which we should aim to replicate.
Insight 3: Skanderborg Festival’s focus on visually stunning stages and excellent camping facilities highlights the importance of enhancing the overall festival experience.
HMW
How can we create a festival that promotes inclusivity, respect, and attendee well-being, like Roskilde Festival?
How can we design visually captivating stages and improve the festival experience, drawing inspiration from Skanderborg Festival?
How can we build a loyal community around our festival, leveraging the high retention rate of festival-goers, while also avoiding scheduling conflicts with other major events?
Trend Analysis
Insights
Insight 1: Fans now expect more choices and personalized experiences at festivals. We will offer a VIP option and host personalized events to cater to this trend
Insight 2: Incorporating foodie and beer enthusiast experiences can attract larger audiences and generate more revenue, as hybrid festivals have shown. We will focus on these aspects alongside music
Insight 3: Mobile technology is crucial for improving the attendee experience. We will develop a festival app to provide band schedules and stage information
HMW
How can we provide personalized experiences and a VIP option that cater to attendees’ preferences and enhance their festival experience?
How can we incorporate foodie and beer enthusiast experiences into our festival to attract a larger audience and generate more revenue?
How can we develop a user-friendly festival app that provides comprehensive information and enhances the attendees’ overall experience?
How can we successfully implement RFID technology and smart cards for a seamless wireless payment system, improving convenience for purchasing food and drinks during the festival?
USER Research
Insights
Insight 1: The majority of festival attendees are women, indicating the importance of considering their preferences and interests in festival planning and marketing strategies
Insight 2: The age group of 20-29 comprises the largest percentage of respondents, suggesting that targeting this demographic will likely yield the highest attendance and engagement
Insight 3: Instagram is the most popular social media platform among respondents, followed by YouTube and TikTok, indicating that focusing on these platforms for advertising and content promotion would be effective
Insight 4: The main motivations for attending festivals are the music/artists and the overall party atmosphere, underscoring the significance of curating a diverse and appealing lineup and creating an energetic and vibrant festival environment
HMW
How might we tailor our festival offerings and marketing strategies to cater to the preferences and interests of the predominantly female attendee base?
How might we enhance the festival experience for the age group of 20-29, ensuring that our lineup, activities, and overall atmosphere resonate with this demographic?
How might we leverage Instagram, YouTube, and TikTok effectively to reach and engage potential attendees, showcasing the music/artists and capturing the lively party atmosphere of our festival?
How might we optimize the lineup presentation on our website’s landing page and ensure a seamless user experience, encouraging visitors to explore further and ultimately purchase tickets?
How might we create a captivating and energetic festival environment that reflects the desires of attendees, emphasizing the music/artists and delivering an unforgettable party experience?
Platforms & Content
Social Media
The survey conducted during the sender research revealed interesting insights about our target audience. It showed that 74.4% of respondents are aged between 20 and 29 years, while 10.3% fall within the 30-39 age group. In terms of platform preference, 43.6% use Instagram, 20.5% use YouTube, 17.9% use TikTok, and 15.4% use Facebook. This information provides us with a clear understanding of the platforms where we can effectively advertise our festival, reaching a diverse range of potential attendees.
It is crucial to give equal attention to promoting both the festival’s line-up and the overall party atmosphere. These two aspects offer the greatest opportunity for exposure to potential customers on the platform.
TikTok
Our strategy will involve product placement through collaborations with influential TikTok creators. By sponsoring these influencers, we can leverage their channels to promote the festival. Additionally, we will organize competitions where participants have a chance to win festival tickets, further boosting the festival’s visibility.
YouTube
Our approach will be to create a promotional advertisement showcasing all the different aspects of the festival. From the captivating concerts to the diverse food options available, the ad will highlight the festival’s overall experience.
We will continue to focus on the dataset while considering common knowledge about the platform’s user demographics. Given that Facebook users tend to be more mature, we will place additional emphasis on promoting the festival’s line-up to attract this audience segment and encourage their attendance.
Ideation
About
Ideation in UX is the creative process of generating and exploring ideas to solve user problems. It’s a collaborative journey where designers brainstorm, sketch, and prototype concepts that inspire innovative and user-centered solutions. It fuels the UX design process, fostering innovation and driving meaningful experiences.
What we used
For the ideation process we have been using creative tools like:
– brainstorming for random ideas;
– sketches and crazy 8’s
– mood board for website
Mood Board
Our initial moodboard was created collaboratively as a group during our festival research. It aimed to capture the essence of the summer vibe through interesting fonts and colorful pages.
We gathered a variety of images, typography samples, and layouts that reflected the festival’s lively atmosphere. The chosen fonts ranged from playful to bold and modern, while vibrant colors added to the overall vibrant ambiance.
Tone of Voice
We aspire to transform our festival into an all-inclusive experience, embracing open-mindedness and giving everyone a voice.
Our vision is to create a vibrant celebration that draws inspiration from the rich tapestry of Nordic mythology, evoking a captivating summer atmosphere in the heart of Scandinavia.
By channeling the essence of the Vikings and their legendary spirit, we aim to craft an unforgettable experience where people from all walks of life can come together to revel in the magic of our festival.
Prototyping
Main principles
Our design embodies an intriguing fusion of Viking aesthetics and a vibrant summer vibe. By combining elements from Norse culture with the energy of the season, we created an irresistible blend that captures the essence of our festival. The result is an atmosphere that is both fiercely rugged and irresistibly joyful, inviting all to embrace the unique experience we offer.
Development of Visual Identity Elements
The logo holds immense significance for any festival, playing a crucial role in branding and social media campaigns. In line with our Nordic mythology theme, we named our festival Asgård Festival, after the realm of the gods. The logo cleverly incorporates runic letters, forming “AF” for Asgård Festival, adding a mystical touch.
Its simplicity makes it ideal as a watermark on social media images, subtly imprinting our festival logo in the minds of our audience.
Additionally, we created a circular logo representing the fearsome Midgard worm, symbolizing power and unity, perfect for merchandise.
Style Tile
Our style tile encapsulates a captivating union of Viking influences and the lively spirit of summer.
With a harmonious blend of Norse elements and the vibrant energy of the season, our festival’s design exudes an irresistible charm. It strikes a balance between rugged intensity and joyful exuberance, inviting everyone to embrace the distinctive experience we provide.
Wireframes
In order to foster seamless collaboration, we made a deliberate decision to commence our project by developing wireframes directly within Figma.
This approach allowed us to harness the power of real-time collaboration and leverage the platform’s intuitive design tools.
By utilizing the Style Tile, which served as our foundational guide for fonts and basic elements, we were able to effortlessly integrate these visual elements into the wireframes at their designated positions.
This early integration not only facilitated a smoother workflow but also ensured consistency and coherence across the entire design process.
High-Fidelity Homepage Wireframe
Following the development of wireframes, our next step involved crafting the primary landing page within Figma.
The purpose behind this endeavor was to conduct an initial user test prior to delving into the actual coding phase of the website.
Testing
5 Second Test
Prior to commencing the coding process, we implemented a 5 Second Test. This test aimed to rectify any potential misleading information presented on the landing page and ascertain whether users could quickly grasp the website’s essence as a festival platform within the brief 5-second glance they were provided. By employing this test, we ensured that the landing page effectively conveyed the festival concept even within such a limited timeframe.
Test results
» What kind of website do you think this is?
8 out of 9 people answered it was a music/festival website
» What products do you think are sold on the website?
8 out of 9 people answered tickets for the festival
» What was your initial thought about the website?
Most answers were positive, only one answered it was a lot of information
» What grabbed your attention when you looked at the website?
7 out of 9 people answered the line-up part of the website
» What words/sentences stood out for when you looked at the website?
6 out of 9 people answered Arctic Monkeys, while the remaining 3 answered other band names
Conclusion
Based on the results of the 5-second test conducted on 9 individuals, along with desk research and analysis of other festival sites, we can confidently affirm that our festival website layout effectively conveys the intended message of being a festival platform upon initial viewing. With this confirmation, we can proceed with finalizing the layout and continue developing the remaining sections of the prototype. Having a comprehensive blueprint of our client’s digital solution will greatly assist us during the coding phase of the actual website.
Technical Documentation
Tools
Frameworks: React, Tailwind
Dependencies: React icons, Framer Motion, React-router, Axios
Database: Strapi (back-end), Heroku (deployment)
Other: Netlify (deployment front-end), Node.js, Git, GitHub
About
The website was developed using React, a robust JavaScript library, and styled using Tailwind, a highly versatile CSS framework.
To establish a solid foundation, we utilized Strapi as the base for our content management system. For seamless deployment of the back-end server, we leveraged the capabilities of Heroku.
To incorporate captivating animations, we employed Framer Motion, a React library renowned for its animation functionalities.
Although some tools we utilized expired, the webpage may not function optimally.
Challenges
As this was our first React project of significant scale, we encountered a range of challenges throughout the development process. We found Tailwind to be a valuable addition to our project, as it provided a convenient method of implementing styling through classes directly within the HTML content, resulting in a streamlined workflow.
Some of the key challenges we faced included effectively working with different components and determining the necessary data to be passed on to subsequent components. Additionally, we had to navigate mapping through arrays and objects while ensuring that data could be updated dynamically based on user inputs. Another hurdle involved fetching data from the database and implementing the necessary logic to update it accordingly.
Moreover, creating a robust back-end for our database and successfully deploying it posed its own set of complexities. However, through diligent problem-solving and utilizing various resources, we overcame these obstacles and successfully implemented the required functionality.
Despite the challenges encountered, this project served as a valuable learning experience, enhancing our proficiency in React and equipping us with the skills to tackle similar endeavors in the future.
Mockups
Tools
Frameworks: React, Tailwind
Dependencies: React icons, Framer Motion, React-router, Axios
Database: Strapi (back-end), Heroku (deployment)
Other: Netlify (deployment front-end), Node.js, Git, GitHub
Conclusion
Summary
In the project, we identified our client’s problem area and created a problem formulation, enabling us to work together effectively. We utilized various tools, methods, and theories to develop our digital solution.
The process involved extensive research and user testing. Through sender research, we gained valuable insights into our client’s needs, which informed our creation of a BMC, mission, and vision statement. Primary research, including the 5-sec test and survey, provided data on the website’s initial impression and layout.
We used this data to optimize the UI/UX, particularly the ticket and line-up sections. We also developed a SoMe guide based on the test results. Market research and a complete prototype helped us determine essential features for the website.
In the translation section, we addressed potential issues in the purchasing process and emphasized the importance of a clear layout with color separation.
The technical documentation explained complex code and introduced new elements like Strapi, Tailwind CSS, and Framer Motion.
Ultimately, we fulfilled our task and problem formulation, creating a cohesive digital solution that integrates all necessary features without the need for a separate website and app platforms.
Other Projects
We Can Together Make Our Ideas a Reality
Don’t hesitate to reach out—I’m just a click away. Let’s connect and make great things happen!