Now in its 14th year, UK Games Expo (UKGE) is the largest Hobby Games Convention in the UK. A fun event appealing to families as well as the enthusiast, the expo runs over three days every year at the NEC in Birmingham and in 2019 catered for over 25,000 attendees. The event has grown year on year, in no small part due to the team leveraging technology to automate and create efficiencies that make life easier not just for staff and volunteers, but for the end-users too. Right up our street!
When Tony Hyams, Director at UKGE, first approached Ethical Pixels, it was with a very clear goal in mind. Whilst the ukgamesexpo.co.uk website was perfectly functional, it had become dated over time and increasingly difficult for some people to use. Most importantly, the web had been doing what the web relentlessly does, and evolved significantly. The major shift was that nearly 50% of global internet traffic were browsing from mobile devices, and the site was not responsive, mobile-friendly or optimised for touch interfaces.
UKGE also made use of a native app to handle a lot of the interactive functionality at the expo, such as helping people to find their way around, participating in awards voting and event logistics. This had become costly and tricky to keep updated.
Tony had recently read an article about Progressive Web Apps (PWAs) and how the latest browsers and websites can combine a responsive web experience with the functionality of a native app. UKGE bravely decided that a step change was needed, and that time and investment should be put into bringing the site up to date. The care and consideration UKGE have for their visitors meant that the User Experience (UX) was always going to be paramount, so they started looking for companies to pitch solutions based on this simple brief.
As such, it was decided that design would be done using a mobile-first approach. By starting with mobile devices and viewports, we consider the bare minimum UI required for full functionality (as screen real-estate is limited) and can build upon it from there for other devices, as opposed to starting at full resolution and cutting functionalty for reasons of space.
In this case study, we’re going to explore the end-to-end process employed for the UK Games Expo Website, and how a user-centred design approach can make all the difference.
The process:
(click to skip to a section)
User Research
Persona Creation
User Stories (requirements)
Information Architecture
Wireframing and Design
Working with Development
Completing the feedback loop
User Research
Our first workshop with the team at UKGE was a great start – not all of our clients make endless amounts of Haribo available after all! We started off by trying to absorb as much knowledge and anecdotal evidence about users of the UK Games Expo site as possible, and there was a lot to digest. Over the course of 14 years, the expo evolved and the website and custom back-end system evolved alongside it. This resulted in a lot of niche use cases to try to understand and interpret.
This is also where having a fresh pair of eyes can really help. Ethical Pixels’ Managing Director often talks about how ‘useful ignorance’ can help this process. When a website, system or process grows alongside you, it can be difficult to see the wood for the trees.
Between all of us, we thought we knew what the requirements were, but this only takes a project so far. Good UX begins with research, so we undertook to involve UKGE’s real-world users in the process.
Breaking down users into the broadest possible groups (Generic site users, Visitors to the expo, Exhibitors and Volunteers) we undertook to get feedback from people within these groups on their experiences and pains with the current site. Using the UKGE database, we sent out invitations to appropriate audiences asking them to complete a brief questionnaire and give their feedback on the current site.
There are different ways to gather feedback, but we’re quite fond of Google Forms for cheap and easy capture of straightforward responses and combination into Google Sheets for analysis. We created web forms for each audience. The forms were designed to draw out:
- How users would rate the current site (using a 4-point likert scale that forced audiences to fall on one side of a positive/negative divide)
- Why they rated the site as they did (positive or negative)
- What they typically use the site for
- What they feel is missing from the site and what they’d like to see more of
- Demographics and typical behaviours
The form also asked if they would be willing to answer more questions, give more feedback, or whether they’d be willing to participate in future user testing and refinement of ideas. The forms received a total of 374 responses, and it’s a testament to the UKGE following that 68% opted in to follow up contact and future user research.
The responses were standardised into categories (open form entry creates a lot of varieties upon a theme) and the responses certainly validated some of the initial reasoning for starting the redesign – namely that the site wasn’t mobile-friendly. However, the responses also threw up some fresh ideas:
- A large proportion of respondents (46%) found the site difficult to navigate
- Several users felt that finding their way around a venue like the NEC was tricky and some interactive map and search functionality would improve things significantly
- A good number of users attend to participate in specific events, and event planning would help them out.
- Although Exhibitor and Volunteer experience is critical to the smooth running of the event, the majority of site users are Visitors and the key functionality used was buying tickets and looking up exhibitor details
Persona creation
Having immersed ourselves in the gaming mindset and now armed with +1 in both anecdotal knowledge from the UKGE team and first-hand feedback from site users, we started to condense the details of the people who fed back into documents known as personas – representative examples of each user type.
Personas are a really useful tool to refer to in user-centred design, as they help us to not only categorise who requirements are aimed at but to keep the whole team focused on the end-user when it comes to interpreting these requirements and building solutions. Ultimately, we created several persona varieties:
- Visitor
- First timer
- Returning
- Families
- Game Designers
- Exhibitors
- First timer
- Returning
- Co-exhibitor
- Volunteer
Requirements definition
As we now understood who the users were, it was imperative to that each requirement tied back to a user or their needs and that (going into the design phase) each interface would correspond to at least one requirement, if not more.
By condensing the user stories and matching against different combinations of the personas, we defined 96 distinct user stories relating to 16 user groups, all based upon the personas and research undertaken at the start.
User stories are a great way to write requirements so that those reading them and building solutions will always associate them with the end-user. It’s even easier when someone asks ‘what’s a first-time visitor?’ and you can whip out a persona to show them!
User stories are formatted as follows:
As a type of user I want to do this action so that I can achieve this objective.
Information Architecture
It turns out that running an event the size of the UK Games Expo is pretty tricky and involves lots of logistical information. Who knew?
In our experience, when you’re dealing with a large site that contains vast amounts of information to digest, not to mention plenty of interactive functionality beyond that, you have to know which pages are which and keep track of things in the run-up to (and after) launch.
The first part of a usable website is good navigation. The practice of Information Architecture (IA) is all about grouping things in such a way that the maximum number of people would also logically group them in a similar way. This leads to a navigational structure that feels intuitive to the largest possible audience.
As such, we took over UKGE’s Kidderminster offices for the day, laying out the old site on the majority of the walls. In true UX fashion, the working group then spent the day arguing (not always heatedly) about what should go where.
Involving people in the categorisation of information allows people to voice why they think things belong together, and for others to challenge it. This exercise is known as card sorting. Beginning with an open sort (basically a free for all) we then started to define groups that would become central pillars of the site navigation and then refine and test with other users. As you expand the groups and test solutions with closed sorting (top-level categories already defined), it’s possible to become more certain of how groups perceive and categorise information.
Card sorting helped to define the structure for the new site, and create a structure that was easier for people to navigate, correlated to what they needed at the time. The eventual ultimate sitemap featured 187 distinct static URLs, excluding dynamic pages such as event listings, map pages, news or user-submitted content.
Wireframing and Design
For most designers, this is the main event! Colours, alignments and kerning. However, for us, this is the time when we start to come up with ideas and then build upon them almost immediately.
It may seem counter-intuitive, but we’re very proud to say all our ideas start on paper and evolve from there. We don’t open Photoshop until we’re far enough along with sketches, and we don’t write a single line of code until we know what designs look like. In this way, we eliminate a huge amount of rework by visualising and evaluating different versions of a design before implementing it.
By iterating ideas from sketches into designs, we were able to use a combination of tools to share ideas, gather feedback and create final designs. Sketches were evolved into designs using tools which included valuable live-editing of the mobile-first interfaces on an appropriate device. It’s easy to get lost creating mobile interfaces on a desktop, so why not create on the intended device itself?
Subsequently, we made use of InVision for its collaborative capabilities in facilitating discussion, feedback and easy replacement of the ever-evolving designs. From this point, when we had signed off interfaces, it was time to start involving a developer sourced from UKGE’s gaming ranks, Tom Usher.
Working with PWA developers
Between Tom and Ethical Pixels, we agreed to introduce GitLab to the project equation, tracking progress on each requirement, page and the underlying content.
In fact, using the basic issue and Kanban-style tracking, we created and resolved over 300 issues. Furthermore, now we’ve all been through the process and implemented solutions using this approach, there is enough familiarity for continuing day-to-day work in this way, as well as the introduction of a DevOps toolkit into ongoing processes.
This process is tumultuous and typically involves small wobbles from the client, falling back on what they know and old patterns. Thankfully, we had a great client in UKGE, who (aware of this) were more than receptive to discussion and explanation. On occasion, concerns were valid and amendments were made (UX is a process after all) and other times, the design reasoning stood the test of scrutiny:
On phone:
Larry: *explanation of design reasoning*
Tony: “Larry’s just told me to ****** off, we’ll keep it like it is!”
GitLab also facilitated some spirited discussion on the implementation of certain features, where we always try to facilitate the largest number of users. UX is, after all, an inclusive process, designed to do the best for the maximum number of people.
Ultimately, the first iteration of the site was put live in time for December 2019, so that UKGE’s customers could benefit from the new journey flow for ticket purchasing and to plan their visit to the upcoming expo.
Work isn’t done, however. In the typical expo cycle, information becomes available at different times of the year when it is agreed. Upcoming features will include an interactive show map, more personalisation tools within the accounts of Visitors and Exhibitors, and a refined information flow for Volunteers.
Completing the feedback loop
Ethical Pixels and UKGE share the view that a good website isn’t just something you put live and forget about. It’s an ongoing effort to nurture and maintain the site and its users. As such, we will continue to listen, learn and evolve the site as necessary over time.
We have installed behavioural analytics tools that will help everyone involved to understand how different people are using the site, and most importantly, we are proactively asking for more feedback on different user journeys on an ongoing basis.
Results
Thankfully, the comments from the UKGE team highlight the impact the project has had:
Summary
Ultimately, as we’ve previously touched on, this project isn’t over. The team at UKGE know that a website isn’t a ‘put live and forget’ thing – it’s like tending a garden – it requires constant effort to maintain. As such, we’ll be keeping an eye on things and making refinements over the coming weeks and months as we get a better understanding of how people interact with the site.
We’d like to say a sincere thanks to Tony, Richard, Kate, Finny and Tess at UKGE for being so welcoming to us over the course of the project. It’s been a pleasure to work with you all, not to mention with Tom on the development side of things.
Find out more about the UX consultancy we can offer.
Contact us to find out how UX can make your website easier to use and keep visitors engaged.
