RM Races Live - SaaS Event Platform

Product Design SaaS UI/UX HTML/CSS/JS

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.

RM Races Live - SaaS Event Platform

Overview

Credits

  • Edward Margallo
  • Paul Oliveira (Lead Full-Stack Dev)
  • Greg Richards (Product Owner)

My Role

  • Principal Product Designer
  • Design Systems Lead
  • Front-end UI Developer

Collaboration

  • Lead Full-Stack Developer
  • Product Owner
  • Customers / Event Timers

Project Gallery

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

Challenge

  • 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.

Process

  • 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

Event Results Detail Page

Challenge

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.

Process

  • 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.

Result Search Kiosk

Challenge

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.

Process

  • 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.

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.

Next steps…