About Me
Contact
Improving usability and elevating design
Contribution:
User Research, Web Design
Tools:
Figma, Adobe Illustrator, Maze
Stakeholders:
Kris Voveris (Executive Director), Board Members
View Live Website
an easy and enjoyable experience
Problem:
There were three separate websites being managed, one for the actual festival, one for sponsors, and one for event archives. Not only was this expensive to maintain, it also caused user confusion and resulted in difficulties for users finding relevant information.
My Role:
As the dedicated designer for this project, I collaborated closely with the executive director and other board members to make sure priorities and expectations were always aligned. I also made sure to set up metrics to help track the success of the festival and website launch.
What I did:
✓ Consolidated 3 websites into 1 cohesive site
✓ Simplified navigation for users
✓ Refreshed the design
What that resulted in:
Increase in Engagement
The website redesign has received positive feedback from festival stakeholders and real-life users through surveys and word of mouth. An engagement rate of 53.5% was reached in the months where the event was advertised and featured on the site*.
KPI Setting (from scratch)
As there was no data on previous website usage at all, I decided to set up google analytics on the new website in order to start tracking key metrics and set up KPI’s to understand how users used the site. The results for the month of December**:
*The new website was launched in November**I chose to highlight December because it is the month where the event was held and the site had the most traffic
***Conversion rate is calculated with total users and tickets sold
Cost Savings
After researching various platform options, I opted for Cargo as they offered free services to non-profits. The elimination of hosting, platform and 2 extra domain costs resulted in a reduction of website costs by 90%. Given the limited budget and manpower, these savings were key in allocating additional funds to programming efforts.
The starting point
I had a face-to-face meeting with the executive director to discuss the requirements for the new design, gaining a deeper understanding of the distinct purposes of each of the three separate sites:
Festival Content:
The aesthetic of the festival website changed with each iteration of the festival. This was the biggest reason why a separate site for the festival was made.
Event Archive & Sponsor Info:
Targeted at sponsors and funding bodies, this site had more detailed information about the organization and a repository of past editions of the website.
Digital Archive:
Created to house the digital edition of the website during the pandemic, this site's design was well liked by users.
Understanding what worked and didn’t work for users
Getting the user research data
I conducted interviews with both previous attendees and newcomers to New Forms festival. The primary user group identified were 25-40 year old creative professionals and casual workers engaged in the underground music scene.
The goal was to understand what information users need and the experience potential attendees were seeking in order to decide their interest in attending an event.
Notable Quotes
"Every time someone talks about New Forms, they say its like this multimedia thing which I find confusing. Is it a music thing? What is it?"
"I found the site a little bit confusing. Especially the part that was about their programs. It's sort of hard to know what is happening when and where."
"I found the site a little bit confusing. Especially the part that was about their programs. It's sort of hard to know what is happening when and where."
Key Insights
- The user research revealed confusion among interviewees when accessing and navigating the site to find information such as ticket links, lineups and location
- Newer users were unclear about what New Forms really is
- Accessing the website through a search engine was confusing due to 3 separate sites showing up
- As most users accessed the website through instagram on their phones, a mobile-first design is very important
- Assessing the vibe of the festival was mentioned, often by viewing past events and lineups
Designing for Kara - this persona was developed from the user research to have a clearer image of who I was designing for and what their needs are
Mapping out the existing user touchpoints and user journey
Website Discovery Process
- The current process involved users clicking on three separate links to different websites which was a big pain point when trying to access the site from Instagram
- If a user wasn't able to find the correct link on social media, they would do a google search which would only lead them to the same issue, already frustrating the user before they reached the site*
Ticket Purchase Process
- The conversion point is located on the ticket page where a CTA will lead the user to a third party site called showpass that facilitates the purchase
- Though the process of purchasing a ticket is straightforward, the old site had separate pages for different programming dates that made it a confusing for users to easily access information on lineup, timetable and location.
*These issues would be easily resolved once the websites were consolidatedStoryboard - I used this to better understand the user’s experience
Initial mobile screen sketch
Simplifying the information architecture
Making it easy for users to navigate the site
Based on the pain points identified in the research and user journey, I wanted to focus on the following priorities for the website design:
Initial Mobile Mid-Fi Wireframes
Final Desktop Mid-Fi Wireframes
Wireframing the design
Homepage considerations
I wanted to make sure that there was a concise introduction about the organization in order to familiarize new users immediately, and feature some past events for users to quickly scan.
Sticky left-hand menu
- The decision to have a fixed left-hand menu on the desktop was to allow users to easily navigate between pages more easily
- We wanted to encourage users to explore various pages and content on the site seamlessly no matter how far the user has scrolled down
Page structure
A consistent structure with a prominent header and concise paragraph on each page was designed to make the information look more clean and organized and easy to read, with a large image box added to balance out the text
Stakeholder feedback
After showing the mockups to the director and board, there was a strong preference towards a more editorial style layout since it looked more organized.
Since each edition of the festival has a distinct aesthetic, I also wanted to create a design that would be flexible enough to allow for easy background and color changes- for example the background and text can be easily changed*
*Given the limited budget and manpower, reducing the need for a developer or dedicated web designer is important
Style Guide
Incorporating the existing aesthetic
- After speaking with the executive director to define what look and aesthetic they were aiming for, we decided to keep the core colors and font the same to honor the existing New Forms identity, drawing a lot of inspiration from the NF Digital site for the color palette.
- By playing around with the background through incorporating gradients and textures, I wanted to achieve a clean minimal look that felt modern and fresh.
A note on the Transform page
For the latest installment of New Forms called Transform, I wanted to incorporate the aesthetics of our collaborators- so far the design has proven to be flexible and easy to modify for design changes.
Homepage - Desktop
Homepage - Mobile
Final homepage design
Ticket Page - Desktop
Ticket Page - Mobile
Final ticket page design
Ticket Page - Desktop
Ticket Page - Mobile
Final event page design
NF Digital Page - Desktop
NF Digital Page - Mobile
Final NF digital archive design
Usability Testing
Due to time constraints, we launched the site without conducting a formal usability test. However, I conducted an unmoderated usability test on the live site using Maze in order to get ongoing user feedback to inform iterations that might need to be made.
Methodology
I tested 2 scenarios which were:
- Finding the ticket link to purchase a ticket through showpass
- Finding
the archive to find more information on past events
Some notable quotes:
“I like the general style of the website, it looks very cool and modern. In terms of purchasing a ticket, the link was a bit hidden so I missed it and scrolled a bit before clicking.”
“On the first page I felt the description text style under the photos to be kinda hard to read.”
Though most of the results were positive regarding the design and navigation, there was still room for improvement:
- All users noted that some of the backgrounds were too distracting
- Some of the gallery animations were too quick and made it difficult for users to see
- Ticket purchase button and reporting tool button not visible enough
- Increasing the body font to make it easier to read
Key Changes
After taking into account the user feedback the following changes were made:
Having limited time made me realize how crucial it is to quickly launch a basic version of the product. This way, I could get feedback from users right away and make improvements fast
- Making the CTA more visible is extremely important and featuring it on multiple pages could improve the user experience
Testing assumptions earlier by doing a short unmoderated usability test before launching could further improve user experience
Tracking the success of the website
As there was no user data captured on any of the previous three websites, establishing a benchmark for user interactions and engagement was challenging.
By implementing google analytics on the new site, I was able to have a better understanding of how users were using the site and set up some metrics designed to measure the success of events and campaigns and monitor website usage. Some of the metrics and KPI’s recorded from December*:
*I chose to highlight December because it is the month where the event was held and the site had the most traffic**Within industry benchmark for live events (see sources below)
Some insights
This only further highlights the importance of a mobile-first design and could indicate some opportunities to further optimize the mobile experience for users.
Users who came from organic search (predominantly google) had the second highest engagement rate (66%) and conversion rate (16%). Users who came directly had the lowest engagement rate (42.4%) and conversion rate (12.9%).
Since Instagram appears to be the strongest driver for engagement, there might be an opportunity to highlight some Instagram content on the site to drive engagement for users who weren’t referred- for example adding an Instagram snippet on the homepage. Incorporating Instagram content may boost the chance of users discovering mutual friends who follow the page, thereby increasing the likelihood of event attendance.
Interestingly, views per user were highest for the Archive page which could indicate an opportunity to feature it more on social channels to increase views, as this could allow new users to become more familiarized with New Forms.
There could be an opportunity to experiment with different types of content to boost engagement for users coming directly- perhaps introducing more fresh content such as artist specific materials in the form of mixes and interviews?
*Source: Fathom Analytics (Engagement Rate), Audience View (Conversion Rate)