As part of their 10th anniversary celebration, Bristol Pride recently revealed their new website redesigned by Bristol-based studio Atomic Smash. People for Research decided to join in on the celebration by launching a donation campaign on social media and raising awareness about the Peace House project, but that’s not all. We also invited Megan Howell, User Experience Designer at Atomic Smash, to walk us through the process her team went through when redesigning the Bristol Pride website.
After 10 years working towards equality and against discrimination, Bristol Pride has become a beacon of social diversity, attracting a growing number of users to their website. This meant that, by late 2018, their online platform was in need of a revamp, a project that Atomic Smash grabbed with both hands, delivering a user-friendly website in time for Pride 2019.
When diving into the initial research stage, the key problem we uncovered was how to ensure the website had a purpose when the festival was not running. While Pride festival is a two-week event there are a large number of other events that continue to happen throughout the year as part of their extended programme, so this meant that the website should continue to provide value when the festival had finished.
At Atomic Smash, we begin every website project with a kick-off meeting, with the following objectives:
+ To uncover the scale of the project
+ To understand the client’s general requirements and vision
+ To organise and design our research and recruit for the workshop we planned to facilitate
As a user-driven studio, we do not deliver a website project unless there has been extensive research to understand the client’s users and their needs. We believe in giving users a voice, so we created user needs and stories based on all of our research, so we could see the breadth of what we were designing and how many features we needed to design for.
We started by doing a review: this included crawling the previous Bristol Pride website and reviewing the site’s structure in preparation for a card sort with Daryn Carter, CEO of Bristol Pride and Diversity Careers, to improve the platform’s navigation findability. The results of this online task were carried through to full-day workshop with Bristol Pride and some of their volunteers, where we uncovered the following solutions to improve the website:
+ Designing an events system that could not only filter by event type, but which could categorise and display events subject to whether they occurred during the festival fortnight or not.
+ Adding in flexible content on the homepage to push festival-specific and/or generic content depending on the time of year.
+ Updating the back-end so that the Pride team could make simple changes to the website following the festival, giving the site a new life between celebrations.
At this stage, we also researched other festival platforms to understand what other Pride websites do well and not so well. The main focus was held on their events’ systems and how they showcase their programmes, as well as understanding what happens to their websites during the time the festival is not on. Focussing on the technical side, we did some digging around event ticketing systems to find out which platforms would integrate well with WordPress.
🌈 Initial steps
Following the workshop, we carried out a number of tasks and research techniques in order to create a MoSCoW prioritisation document to use as a reference when wireframing.
We see our MoSCoW document as a list of all of our users’ voices that we can refer back to when wireframing, designing and developing, to ensure we are delivering a user-centred website that answers our users’ needs. Our MoSCoW prioritisation document, along with our wireframes, are the elements that form the basis of our projects – these are then passed on to our design team, who develop the visual features and hand over to the developers.
During the MoSCoW prioritisation session (using a scale of Must, Should, Could, Would), we use our user needs/stories document to prioritise the needs of the internal users, along with Daryn’s help. We do this so we can collaboratively vote on what features/sections of the website need to be designed and developed.
🌈 Researching with the right users
As Bristol Pride is a charity, they rely heavily on their volunteers to give up their time and skills to help make Pride happen. Because of this, Daryn had a huge list of people we could talk to and bring along to our workshop so that we could get a wide range of user feedback at once. We managed to organise a diverse workshop, including a designer, fundraiser, a community director, and a trustee.
Because of Bristol Pride’s dedication to the community and Daryn’s network, it was easy to find a selection of people who would give up their time in order to help us. However, not every project is like this.
When we do not know who might be relevant to bring to our workshops, we use a couple of methods to recruit, one being using People for Research to recruit for us – where they undergo a process of understanding our design brief and the types of users we are looking for. Another option is to use our small user testing panel to select suitable candidates.
We tend to hold two workshops, one with the project’s stakeholders, which will include people from all parts of the company, as well as a workshop with their users.
🌈 Accessibility at the start of the process
When we begin a project we take time to explain to the client how important it is to ensure websites are accessible and that great design is more than just nice aesthetics, and that the goal is to design for inclusion.
Our team also explains that we are designing for their content and their story and that, without knowing the audience and the content, it is very difficult to design something that is user-friendly and engaging.
As a studio, we tend to have more knowledge about accessibility than our clients, so it’s our job to explain to them the value of inclusive design. Alongside raising awareness, we continuously research and implement new ways to make our websites more accessible: we spend time learning new skills that can make our websites more inclusive, in order to ensure we are improving our offering and the quality of the products we put out there.
🌈 Prototyping and designing
Following the workshop and initial research, we then moved to the ideation and wireframing stage, producing a comprehensive wireframe that solved as many user stories voted on during the MoSCoW session as possible.
We took an approach where we would design two website states: ‘Festival On’ for when the festival was on, but also ‘Festival Off’ for when the festival was off so that we could ensure both times of the year were catered for, and simultaneously ensuring that the user journey was not affected due to the time of year.
After agreeing on the prototyping structure, we moved on to the look and feel of the website’s front-end user interface. Bristol Pride already had a vibrant visual identity that resonates with the community, so we wanted to make sure the website was designed in line with this, adding some extra tech-based visual flair like colourful animations that make the platform more dynamic.
🌈 Final product
Now that Bristol Pride have a bespoke WordPress platform to work on top of, our relationship will move into one where we have regular check-ins to see how the website is performing and put in place actions and plans to help the festival to keep their digital marketing moving forwards.
As well as having regular meetings with the Bristol Pride team, we will also be hosting and maintaining the WordPress platform for their website going forwards. Websites are ever evolving systems and this type of ongoing relationship is crucial to ensure that the online platform keeps performing well and stays secure.
If you would like to find out more about our in-house participant recruitment service for user research or usability testing get in touch on 0117 921 0008 or info@peopleforresearch.co.uk.
At People for Research, we recruit participants for UX and usability testing and market research. We work with award winning UX agencies across the UK and partner up with a number of end clients who are leading the way with in-house user experience and insight.
