The Brief
The pitchbuilder was part of the new design and build for STM’s new websites. This feature would need to take the functionality of the current version and make it suitable for mobile devices.
User Experience
The old pitchbuilder was simply too long. To complete the largest pitch the user would need to go through 12 steps. To solve this I categorized the features together. The likes of colour, fence and gate type would be one step, and the features such as netball, basketball courts and running tracks would be another. Reducing the total steps from 12 down to 4.
Services
Website design, User Interface and Experience
This project was created during my time at VIA Creative
Design and Approach
This new approach to the user experience influenced the overall design of the pitch builder. Features with multiple variations such as the gates and fence height could use sliders. While features like the tennis courts and lighting (which needed a yes or no answer) could use a switch. The simplified design allows users to customize several features at once before progressing onto the next step in the process.
The below examples show the larger sports pitches, which includes more options. Followed by a playground, which are used in schools.
Once the design is complete, users can enter their information and STM will be notified.
Responsive design
Using the sliders and switches meant they were suitable for mobile devices. This approach means the functionality of the full pitchbuilder works on the mobile version of the website with relatively few adjustments.
