Milwaukee Pride Parade

Overview

The Milwaukee Pride Parade was founded in 2005 and has been in continuous operation since with the mission to provide a family fun oriented celebration of LGBT Pride for the citizens of South East Wisconsin and Milwaukee. They are a 501(c)4 non-profit organization run by an all volunteer Board of Directors and Staff. The annual event is entirely funded by sponsorships and parade entrants. For the 2023 parade, there was a need to streamline the registration process. Previously the sponsorship and registration process was managed via email threads, which was confusing and time-consuming to manage for the board and troublesome for sponsors and entrants.

How do we streamline the registration process for entrants and sponsors? My solution was to implement individual forms on the website to easier manage and track details and payments.

My contribution

User research UX design UX writing Copywriting

The team

1 脳 product manager 1 脳 product designer 2 脳 engineers

Year

2023

Discovery

Auditing the current website

I began the project with a heuristic analysis of the website to identify usability issues and gain any other insights before redesigning. I also performed a mock signup to better understand the flow and process users would go through. This is where most of my focus was.

Highlights:聽

  • There wasn鈥檛 a confirmation email sent after registering as a sponsor, volunteer or parade entrant 鈥 this should be added to the sign-up flow as the last step
  • Text heavy page for parade guidelines 鈥 simplify or break up text with images, brand or format differently to reduce cognitive load
  • Some forms are Google Forms that direct you off the website experience 鈥 forms should be integrated within the website
  • Branding and colors lack consistency 鈥 fix accessibility issues with button hover colors for brand consistency

Eyeing the friendly competition

While there aren鈥檛 any true 鈥渃ompetitors鈥 for the parade, I still found it a helpful exercise to explore and see what other pride parade websites in cities of similar populations looked like. When I was doing my analysis, I mostly wanted to focus on the registration process for volunteering, sponsorships and entering the parade as a float. I also noted other elements like user interface, menu navigation and mobile responsiveness. Something I did have to keep in mind during my evaluation was that the Milwaukee Pride Parade is a separate entity than the festival. In many other cities, they are operated under one entity, so the website content may differ. I focused my examination on the parade element.

Main Takeaways:

  • Use of photography throughout is key to showing what to expect at the parade
  • UI is simple and modern with bold and bright brand colors
  • Menu nav includes separate application forms for volunteers, sponsors and parade entry
No items found.

Define

Defining users

I was able to get a better idea of who the users were after having a working session with board members.

Users tend to fall into four categories:

  1. Spectator
  2. Volunteer
  3. Sponsor
  4. Parade Entry

With the priority focus being streamlining registration for entrants and sponsors, I created two user personas to support further design decisions as we went forward. For these, I was able to get even more insight into the traits and personalities of those who sign up to be in the parade and those who handle sponsorships at local and regional companies.

Making the flow logical and sitemap simple

With a simple website structure and content already in place, I made some minor but impactful edits to ensure easy navigation to the registration forms. The previous website navigation had separate forms for sponsorship, parade entry and volunteering. However, there were instances in the past where sponsors make their payment but do not also pay for a parade entry. Sponsorships and parade entry was integrated into the same form so we could rectify this user error.

Ideate

Creating low and high fidelity wireframes

I took into consideration the newly created user personas compiled with insights from user research and put together low and mid fidelity wireframes to begin concepting layout before taking it online.

A focus on the forms

A unique element and focus to this project was the forms to streamline and manage sponsorships and parade entries. In order to ensure collection and management of who has submitted payments for sponsor packages and signing up to have a spot in the parade, an out of the box form builder that could be embedded and integrated into the website. Squarespace has a built in form block and there are many others that I researched to analyze what would work best for the board鈥檚 needs, especially as they鈥檇 be accessing and managing the processes. Jotform was what I recommended to the board, since it was an out of the box solution that would work best for them and they approved the use of it.

Lighten content-heavy pages

The previous website ultimately was very content heavy, especially when it came to sponsorship details and parade guidelines. I used accordion dropdowns to hide certain content sections and elements, which reduced cognitive load and allowed for breathing room in the whitespace.

Testing

Test driving the registration processes

Utilizing the board and previous entrants and sponsors, the forms were tested for ease of use and efficiency. After testing, we did make some minor revisions to further streamline the experience.聽

With various options and selections to check when registering between parade entries and sponsorship levels, those who selected sponsorships automatically get an entry to march in the parade. This solved for the previous error of sponsors not paying separately to also march. The forms also included features like error messages and custom confirmation emails. These were specifically tested for, making sure all edge cases would be addressed to prevent any user errors. Each year, the registration process continues to evolve, so the form has been iterated upon.

No items found.

Outcome

So, how did we do?

Now in its second year of using the new forms, this simple but effective addition automated processes for registration, payment, email confirmation and inbound inquiries to provide efficiency and led to a 35% increase in sponsorship funds for the 2023 parade. This year, they saw a 28% increase.聽

What did I learn?

  • Small change, big impact 鈥 while the enhancements made may seem insignificant, this had a proven impact with the 2024 parade having the most ever parade entries and continuous increases in sponsorship funding.聽
  • Work with you鈥檝e got 鈥 working with a non-profit in this instance meant to be nimble and resourceful, using tools at my disposal. With no budget for development, other digital out of the box software solutions worked for what the board was trying to achieve.