Milwaukee Pride Parade

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’t 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’t any true “competitors” 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

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.

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’s needs, especially as they’d 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.