Our team needed to tackle multiple challenges for different use cases. Race organizers and event timers needed an all-in-one platform for setting up race registration, results and management all through a robust, enterprise level dashboard. Race participants needed to register for races and view event results, all through user-friendly and responsive web-based UIs.
RM Races Live was built to accommodate all the needs in the aforementioned, all through a user-friendly interface. Our team designed and built working solutions through the use of modern web technologies, to provide a service that is still used around the world. The scope of the project was tackled through an agile and iterative, design and development process. Features were were built-in over the scope of several years.
Team & Stakeholders
Focusing on the core functions
- Race Registration User Interface and Flow
- Race Results User Interface and Flow
- Race Event Dashboard User Interface and Flow
For each, my role consisted of researching and wire-framing alongside the PM, leading the design of low and high-fidelity comps, leading the the preparation of responsive HTML/CSS templates for prototyping, and finally the implementation of my templates into the ASP.NET MVC project alongside the leader full-stack developer. The template implementation also included full device testing and troubleshooting across all modern browsers and operating systems.
Responsive Design and Usability
Since this web service caters to a varying range of users, young and old, it was a given we would face a disparity in the platforms used to view the site. The current Google Analytics data even showed a slice of users still utilizing Internet Explorer 7/8 (and even IE6!) at the time. Thus, we agreed to make the choice and stick with Twitter Bootstrap version 3 for proper support for these legacy browsers.
Race Event Registration
The race registration process was probably the toughest UI task for this entire project. A checkout process for race registration is not as simple as your average shopping cart. Think of it as an e-commerce shopping cart, but 2 times, or 3 times or even 4 times the length! It all depends on how many race participants you are actually signing up for.
Take this typical case, for example: A user chooses a 5k race, selects an included medium size race shirt, fills out emergency information, fills out a race waiver, fills out a custom questionnaire provided by the race organizer, provides cell phone number information for automatic notifications, chooses to donate some change to a great cause, and then finally… maybe they decide to add an additional shirt at extra cost. However, it doesn’t stop there: they are going to add 3 more family members! As you can imagine, this checkout flow can be very long.
Whichever way you slice it, this was in fact the flow for race registration, and so we needed to design and develop an interface that would support this many possible pieces.
Race Event Results
This is by far the most visited page on this website application. Views over the course of a race weekend can range anywhere from a couple hundred to over 30,000+ unique visitors from around the world hitting the page all within a several hours time frame. We designed this page for quickly viewing and finding of results whether it be desktop or mobile devices. In addition, it was a top priority to keep this page highly performant, and as a result, page load testing was constantly on top of our list.
Race Event Details
The event details listing had a focus on page semantics, SEO optimization, and all the main call-to-action links listed for web crawlers to properly perform their indexing tasks. This page also gave us the idea of offering a custom theme styling feature in the admin dashboard so that event organizers can match the branding of their event.
Structured Data Implementation
I implemented the structured data Event Schema described in the schema.org spec. This consisted of integrating the JSON template into the layout header, followed by placing in the proper dynamically filled tokens provided to me by the full-stack developer. The structured markup for an Event schema was also applied to the main content layout div.
Custom Theme Styling
Custom styling per event page was a feature we introduced as a selling point for our platform. This was done via a dashboard configuration feature which allowed custom colors (via color picker or hex code), and the uploading of hero background images to the event page. On the front-end, this was all then applied via an inline CSS styles declared at the top of the page to override the global variables.
Race Event Dashboard
The event dashboard was a key screen for providing some of the most common and key performance indicators for a race organizers race event. It was crucial to put emphasis and primary figures such as entrants registered, days left til the event and sales totals breakdowns. Event Settings in RM Races Live consisted of many options and configurations, so we made sure to breakdown this main section into primary categories on the left-hand menu.
Event settings turned out to be a long list, so proper breaking apart of sections and creating menu groupings were necessary.
A Need for an Overview
Rather than going to each section and seeing what your event settings were, I suggested to create a Settings Overview section directly on an event dashboard. A summarized overview of what items were activated and their values all in one screen found to be very helpful.