RM Races Live - SaaS Event Platform
A web-based platform for the endurance race industry. This full-fledged race event management and results platform contains features ranging from online registration, results processing and data tracking all through a robust dashboard. As the service became widely adopted, new tools, features and integrations were added to meet customer needs.
- Edward Margallo
- Paul Oliveira (Lead Full-Stack Dev)
- Greg Richards (Product Owner)
- Principal Product Designer
- Design Systems Lead
- Front-end UI Developer
- Lead Full-Stack Developer
- Product Owner
- Customers / Event Timers
Planning & Wireframing
Research & Analysis
- User Research (Interviews)
- Competitive Analysis
- Heuristic Analysis
- Live Event Field Study
Brainstorming & Wireframing
- Task Analysis
- Defining User Goals
- Defining User Journeys
- Defining Technical Criteria
Process & Design
Event Management Dashboard
- Defining the key, top-level data that most event managers need to see for tracking and managing a race event.
- Showcasing information in a way that is not overwhelming, visually pleasing and consumable at first glance.
- Product owner defined specifications - The product owner initially defined all necessary items to showcase to the end-user
- Heuristics and Best Practices - I led the brainstorming of information architecture and presentation on the dashboard.
- Client Interviews - Immediate feedback was gathered from our first batch of users
Users have the ability to see the most common settings in one shot, which provides greater visibility.
Quick “edit” links, for easier to find settings. This provided better discoverability.
Universal Event Header and Sub Navigation - present on each event setting page, with key information and “quick jump” links.
Event Results Detail Page
To present race event finisher information in a readable and searchable format. The biggest challenge is the amount of columns a data set can have, along with the possibility of a long list of participant categories. While this is already a challenge for desktop, it provides an even greater challenge for mobile view.
- Client Interviews - We analyzed what functions most athletes would utilize when looking at a results page
- Competitive Analysis - We jotted down the main components that made up other existing results services.
Designing and developing a UI for a webpage that is fast-loading, accessible and usable regardless of device type
The UI has all top level sections above the fold so the user can immediately spot the function they need
Only top finishers, per category, are present at first. Additional entrants are loaded via AJAX when a search is performed, or when pagination is triggered.
Result Search Kiosk
Event managers needing a common solution to allow participants to quickly search for their race results directly after they complete their event. The kiosk would be self-serve via a fixed laptop station and/or a tablet device readily available at a timing tent.
- Context Usage - Understanding the environment and context scenario for the tool would allow us kick-off an MVP product
- Device Delivery - We needed to define the possible device types that would deliver on the experience. This would be crucial in proper design and development
- Presentation - Contrast was key since there was possibility of this UI being used outdoors, so we stuck to a simply dark grey and white theme.
A simple and user-friendly, web-based UI was made for a quick lookup experience. The tool was essentially a Single Page Application that contained a sole function.
The layout was crafted for optimal presentation on iPad horizontal screen orientations. The UI components were optimized for a touch-friendly interaction, with bigger font sizing.
Contrast was key since there was possibility of this UI being used outdoors, so we stuck to a simple very dark grey and white theme.
Key Takeaways & Iteration
Consistency is Key
- Especially in larger scale software UI’s that begin to scale rapidly. As new features and section are added, designs and developers can easily lose sight and control of the visual design language. Our component library provided the conistency needed as the platform grew.
Study the User
- Simply watching over the shoulders of end-users interfacing with the tools at live events, quickly provided the team with valuable information on software usage and patterns. With this feedback we were able to quickly iterate on design sprints.
Thoroughly Test and QA
- As a growing company, we began to establish best-practices for quality assurance and deployment. From a design standpoint, I established my own process of performing thorough design checks on a staging site before our changes were deployed live.