RM Timing Systems Product Design

User Experience User Interface

An event racing app utilized by race announcers and race organizers on-site, at a live event. It’s main purpose is to connect to an event results processing provider which feeds real-time race stats to the end-user. This is a 2.0 major version update.

RM Timing Systems Product Design

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
  • Live Event Field Study

Brainstorming & Wireframing

  • Task Analysis
  • Defining User Goals
  • Defining User Journeys
  • Defining Technical Criteria

Design & Prototyping

I worked alongside the project manager to define the main user types for this app. It is targeted towards a specific audience, in this case the endurance race community, and each type had certain desires in mind. From this we can begin to have a basis for defining functionality.

Based on the drafted user types and personas, we were then able to to start brainstorming on the main functions, or tasks, that each user would go about seeking while using the app. At this point, we gather feedback directly from end-users through direct email questionnaire and phone conference meetings.

From task analysis, we can define the initial main top-level functionality expected by the app’s users. This will also serve as the skeleton for our wire-frame and in-app menu system.

After gathering research, setting the tasks and wire-framing with the team, I then get to the fun part: design. High-fidelity designs and prototyping were created with Adobe Illustrator and Adobe XD.

Feedback & Iteration

Feedback Gathering

  • Live, in-person User Testing - I had several opportunities to help time at live race events and was able to see how timers and announcers used our app.
  • Post User Feedback - Key feedback notes from initial field tests was to have optimal legibility in outdoor settings (contrast) and an easy-to-use announcer "streamer".
  • Feature Improvements - The app initially was spec'd to integrate with a single race event service provider. However with this new version, we now needed to the ability connect with other services. Thus, a "connect to provider" step process was conceived.

Updates & Evolution

  • Contrast is Key - Designing an interface that needed to be legible in outdoor settings was a new challenge. I was use to testing UI designs indoors, so this project brought about new territory.
  • Clarity = Speed in Discovery - Providing clear and clean aesthetic is always a priority for designers, but even more so for this app. During a prototype test at a live event, I realized that an event announcer literally had to read and announce information quickly.
  • Feature Growth - The version 2.0 of this app is bringing about some great improvement over the first. But still, clients are requesting new features for future releases. Hence, we are preparing for the UI to adapt for growth.

Next steps…