Building the Pride in London app

Building the Pride in London app gave Red Badger the incredible opportunity to deliver an experience that would reach the community that make Pride happen year round.

In late January, we kicked off the project with a workshop to define our product vision. This served as our North Star, the means by which we could prioritise our backlog and ensure the team were focused and aligned to the same goal.

If at any point throughout the product cycle we were to realise our features didn’t help fulfil our vision it would prompt us to take a step back and re-align.

With our cross-functional team and our stakeholders, we reviewed the previous year’s online survey. From this we defined our users’ jobs, pains, and gains, directly feeding into the product vision:

'The Pride app is a place to promote and showcase the diversity of the Pride in London 2018 festival and parade, helping users to discover events, plan and get involved in Pride simply and easily.'

This immediately gave us some key ideas to focus on:

• A filterable events listing page
• The ability to save events
• A place to serve key information about the parade
• The ability to support Pride in London via donations and volunteering

Early wireframes helped communicate the UX direction back to the team and stakeholders in a quick and iterative way.

Insights from real users

While we were fortunate enough to have access to previous years’ metrics, we knew this didn’t give us an in-depth understanding of the experience of the Pride community.

Early on in our ‘Discovery’ stage, we invited seven members of the community to the Red Badger office to share their experiences of Pride in London before, during and after the festival.

The people we interviewed had a range of relationships with Pride; one had been an active member of the community since they first went to New York Pride in the 80’s; another had been to Pride all over Europe, and others were more recent attendees to the London event. 

Over the session, we heard about the whole range of emotions they encountered: not only the excitement around planning the event with their friends and the overwhelming atmosphere of happiness but also the frustrations they encountered.

These pains were crucial in opening up opportunities for us to design a better experience. 

Some findings from the previous year, in particular, stood out: 70% of users only opened the app a few times, with more than 20% of the respondents downloading the app just for the Parade weekend itself.

The focus group revealed that people associated Pride with the Parade Day and some users referred to the product as a ‘Parade app.’ Early on we knew that it was necessary to boldly communicate the four week timeline of the festival if it was going to meet its full potential for users.

Overall, the feedback from the focus group was invaluable and provided us with actionable ways forward. 

Early branding direction from the Pride Labs workshop, surfacing the timeline of the festival

Identifying improvements, and making them happen

UXD reviews helped us make dramatic improvements to the design and experience of the app.

The event list in the previous design was dominated by full-width images and while these looked great, they detracted from the event details.

While being chronologically listed, the listing page didn’t show the time of events. Without this information, users had to dive into event pages from the listing before they could be sure that they could attend an event.

Talking to users about their habits on services like Airbnb, we discovered it was common to treat the saving function as a shortlisting exercise. From the listing page, they would save as many potential places to stay, which they would come to later refine.

Surfacing key information and event times at a higher level for the Pride in London app allows users to start refining their search without the need for jumping between an event list and event pages.

Previous year’s app and early wireframe for Event Listing Page. App in production far right.

The challenges and the rewards

Building a mobile app was a fantastic experience for our designers, but one that also had its challenges for a team more familiar with building responsively for the web.

Much of the useful feedback came from frequent ‘GOOB-ing’ (Get out of the building). This cornerstone of Lean UX allowed us to make incremental improvements to the journey throughout the product’s life cycle. In May, the team organised a more structured ‘Usability Lab’.

This surfaced some key problems: iPhone owners were struggling to apply their selection of filters, leaving one user so frustrated that they quit the app and re-launched it.

Earlier interface on the left and updated version on the right after usability testing

While Android users were familiar with confirming their filter selection with a primary button, iPhone users would ordinarily return to their previous screen to bring these filters into effect.

This behaviour for iPhone users is so automatic that they were effectively blinded to the “Cancel” button we had designed. Taking this feedback forward, we designed and tested an interface that would work for both sets of users.

Hello, World!

Speaking to users right from the start, we discovered what features would provide the most value and by frequently testing the app we gathered crucial insights along the way.

This continual cycle of observation and refinement allowed us to build a product with our users so that it worked to meet their needs. 

Over time we layered the evolving brand into the designs, making it not only function intuitively but feel bold, playful and proud.

From the micro-interactions of the pulsing heart through to the navigation structure, it's been a wonderful journey for the designers to have been a part of. We're so excited to have contributed to the app and finally have it reach the hands of the wider community.

Pride Parade is now over but you can still download the Pride in London app for iOS app store or Android app store. Check back for updates for next year's Pride Parade.