The Challenge
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.
The Solution
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.
My Role
- Lead UI/UX Designer, Prototyper and UI Development
Team & Stakeholders
- Lead Full-Stack Developer
- Project Manager
Tools Used
- Adobe Illustrator, Photoshop & XD
- HTML, CSS/SASS, JS, JQUERY
- Microsoft Visual Studio
- Microsoft Azure
- Google Analytics and Webmaster Tools
- Facebook Pixel
- Google PageSpeed Insights and Pingdom
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.
Organization
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.
Ongoing Improvements and Optimization
Continuous Integration and Delivery
GIT version control, with separate branches were utilized within our team. Communication with the lead full-stack developer was key in making sure we were developing, integrating and testing in parallel. I learned to merge and commit changes, deploy to staging sites on Azure, and even swap stages to live.
Performance Optimization
Our team prided itself on having a performant web service. Our team became captivated with scoring high on services like PageSpeed Insights. On my end, I experimented with methods like css/script bundling, code minification, image format optimization and inlining techniques.
Test and Test Again
First pushes of a release were almost never final pushes. We found bugs that needed to be addressed, and experiences that needed re-visiting from a design standpoint. Thus, user testing was an ongoing process and was the key to a quality experience. We tested on Windows, Mac, all modern browsers on desktop and mobile, and even the dreaded legacy Internet Explorers.
Key Takeaways
Documentation Helps
When it comes to front-end development, other professionals can agree that code comments can help immensely. I've learned that adding simple descriptions as to why we coded sections certain ways can greatly reduce development time.
Clear Content Design
Aesthetically pleasing design layouts and pretty pictures aren't always the answer to successful design. When working on this web service, I've come to realize clear and concise content design (proper messaging and context) helps drive the user first and foremost. This can help with Call to Actions, or guidance with a step process.
Design Systems are Effective
Working on a larger-scale web service can easily become unwieldy from a design and development perspective. From the start, I've gotten better at maintaining and organizing our core design system, stylesheets and media repository.