As one of the largest sports pitch bookers in the UK and the Netherlands, Powerleague rents their pitches and courts for a variety of sports, in addition to offering parties, events and venue hire.
With a number of complex user journeys across their digital ecosystem, they challenged our team to overhaul their website and mobile app. They wanted to improve their user experience and increase revenue.
- Lead time:
- 10 Months
- Sector:
- Sport & Leisure
- Target Type:
- B2B & B2C
- Demographic:
- Sport Players, Parents & Corporate
- Website Goal:
- Increase Bookings & Consolidate Business
- Services:
- UX Design, UI Design, Mobile App, Website, Digital Marketing
- Scope
- Figma UX Wireframe Prototypes
- Figma UI Design Prototypes
- Website & Booking Flow
- Mobile App
- WordPress
- React Native Development
- API Consultation & Mapping
- Booking API Integration
- SEO Strategy
- Resource
- 1 x Creative Director
- 1 x UX Designer
- 1 x UI Designer
- 1 x Technical Lead
- 2 x WordPress Developers
- 2 x Backend Developers
- 1 x React Native Developer
- 1 x Digital Marketing Specialist
- 2 x Quality Assurance Testers
- 1 x Technical Project Manager
The challenge
Powerleague has a ginormous amount of data stored in their backend booking system, with millions of possible combinations of venues, events, pitches, time slots and booking add ons. Our challenge was to dynamically present this to their customers, creating a seamless user experience that felt simple and intuitive.
There was a huge opportunity to increase Powerleague’s conversion rate and order value, boosting digital revenue. We needed to reinvent Powerleague’s website and mobile app, delivering a market leading design that performed.
By taking a headless approach and integrating both interfaces with Powerleague’s booking engine, we would move Powerleague towards an omni-channel user experience where customers receive consistent data and user experiences across their online and offline channels.
Our approach
We began the UX phase of the project with a research process were we assessed complex booking flows from other sectors. We focused on user journeys that managed large amounts of data and multiple booking options such as the travel and entertainment industries.
Utilising our insights from the research phase, we began structuring the user journeys for the new website and mobile app. Both interfaces incorporated different functionality but needed to utilise the same underlying structure and design system for consistency.
Our UX team developed the wireframes into clickable design prototypes that represented the final website and app designs.
Our design and development teams collaborated to streamline the user experience, deliver dynamic information to customers, and automate as much as possible within the interfaces.
The search
We introduced a new search function with IP detection to suggest venues in the user’s local area. The results will automatically pull through 2 comparable venues alongside the user selected venue so a user can compare pricing and availability.
Powerleague has multiple different booking flows and acceptance criteria based on the booking type and venue. For example, football pitch bookings can only be made 10 days before the date of hire. The website and app is designed and coded to automatically handle Powerleague’s booking conditions to streamline the process for their customers.
Super venues
Certain Powerleague venues are Super Venues that offer additional services and facilities. The new user experience highlights these venues and dynamically adapts the booking flows and options in accordance with the venues.
Data visualisation
Our UX team created a calendar view to visually represent the availability and pricing available during the booking flows.
The booking flow
The new UX design streamlines the booking flow, using visual representations of data to reduce the number of screens. A calendar view is used to represent the variable pricing and, as the most popular booking slots, the peak slots are automatically shown first.
Each team typically has an ‘organiser’ who books the pitches. Block bookings were introduced so customers can secure regular time slots at discounted rates, reducing the admin effort required to organise the team and make the booking, and increasing repeat bookings.
Add ons have also been introduced during the checkout flow, enabling teams to pre-order food and drink at the venue. This increases order value and enables teams to split the full payment via Powerleague’s split payment function, making their pitch hire experience more enjoyable on the day – no more chasing team members for money!
API integration
The availability of dynamic data is pivotal to the success of the new UX design. As such, we needed to ensure that the website and mobile app could seamlessly send and retrieve information to and from Powerleague’s booking engine.
Our developers worked closely with our designers to create an API brief for Powerleague’s booking software team. Our internal developers collaborated with Powerleague’s team to develop the endpoints and test that the information was passed successfully between the systems.
Brand evolution
We evolved Powerleague’s brand for use on the app and website, creating dynamic brand elements, and introducing shape and form to elevate the design.
Cache
The new website is cached every 2 hours to provide up-to-date information while maintaining rapid load speeds.
Megamenu structure
The new menu structure ensures that information is accessible to customers.
Map visualisation
A map view is used to showcase venue locations and availability within the search results.
Achieving omni-channel with a headless approach
Following a rigorous technical review, a headless solution was selected for the project delivery. Our developers created a React Native mobile app and WordPress website that integrate seamlessly with Powerleague’s backend booking system.
This approach provides the greatest dexterity, enabling us to deliver innovative and high quality user experiences while pulling data from a consistent backend data source. Powerleague’s customers receive the same information and booking experience online, offline, and across their digital customer touch points, achieving an omni-channel experience.
The website
Powerleague needed to increase their visibility in the UK and the Netherlands and challenged us to deliver a website that would enable them to be found in search engines. The new website is built in line with an SEO strategy and includes targeted content in English and Dutch to effectively target both audiences.
The website was developed to include IP detection to direct users to their regional content and our SEO team mapped the hreflang tags to signal page equivalencies to search engines.
The mobile app
Our UX designers created a UX design to be displayed on small screens, managing the complexity of the booking flows and the large quantities of data to be presented.
The app needed to introduce some new functionality that was exclusive to mobile, including Football Leagues and a Player Marketplace.
The Player Marketplace offers a solution to the challenge faced by many teams when they’re a team member down. The marketplace enables teams to find players and players to find teams. Each player and team is scored in a top trumps style based on their ability, timekeeping and overall experience.
Our development team built the app in React Native and integrated the with Powerleague’s booking system to deliver a high quality mobile experience.
