Edward Margallo

RM Timing Systems Software

Live A Windows-based desktop application that works with RFID hardware to time on-site at live race events. The software offered a wide range of features such as database file importing, creation and management, user editing, robust reporting tools and as well as seamless integration with popular event services.

The Challenge

There was already a couple of existing event timing software companies existing in the market, but we found they all seemed to lack some key features when it came to web integration, broader hardware integration, more reporting features and a modern looking UI. We were determined to provide all of these features through the RM Timing Systems desktop application.

The Solution

The RM Timing Software was designed to offer the basics of a event timing solution, but further expanded on the feature set. A robust set of reporting tools, entrant management, configuration for multiple hardware setups, online integration with third-party services and a clean UI was packaged into this powerful application. In addition, we utilized the latest in Windows Presentation Foundation to support ultra HD displays.

My Role

Team & Stakeholders

Tools Used

Pushing the possibilities of event timing tech

RM Timing Systems became a game-changing event timing software application used on the big stage. It not only provided the core functionalities of your standard timing system package, but it also pushed the envelope by offering third-party integrations, robust reporting and support for various types of timing hardware.

I worked on all facets of the software, but for the sake of keeping this use case focused, I will primarily discuss my contributions to the following sections:

  • Import Entrant UI and Flow
  • View Database UI and Flow
  • Account Settings UI and Flow
  • Online Storage UI 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 front-end development of WPF/XAML layouts for the Windows based app and working in conjunction with the lead software developer to get UI interactions and functionalities hooked up,

Feature: Importing Entrants

The software revolved around the handling of race participant databases. The Import Entrants UI was best handled with a step-process approach. Starting with¬† source file selection, you would then move on to mapping the file’s columns to the corresponding column headings set in the software. This way the software knows which data attaches to the proper header. The Fixing tab would allow for the chance to fix any potential errors before finally performing the final import.

Feature: View Database

A database viewer was crucial for the event timer. It was essentially considered the “advanced editing mode”. Beside the basic functions of searching and pagination, we decided that a tabbed UI would be neat to save different “custom views” for the event timer. This allowed for filtration and faster access to the the data needed with a simple click of a tab.

Feature: Account Settings

The Account Settings tab was similar to a account or profile tab found in a basic web service/app. We applied a tabbed interface to toggle through the different sections pertaining to a registered end-user. We also utilized modal, or popup dialogs, for focused call to actions, such as adding payment methods.

Feature: Online Storage

The RM Timing Software relied on saving the database locally to disk first, but it also allowed for the data to be pushed to RM Timing Systems own online storage cloud service as well. The process was simple: by using a step process, the user would provide the basic information to identify the event, then they would choose the proper save options via a checkbox list, and finally the data would be pushed over. The final step also gave a basic stats summary to the user. The race data would then be accessible through the RM Timing Systems online dashboard.

Key Takeaways

Learning a New Layout Language

Designing and developing the UI for this application alongside the lead developer opened up a new opportunity to learn Windows Presentation Format and XAML. XAML, which is equivalent to HTML/CSS but for Windows apps, contains it's own elements for layout, input controls, style formatting and UI interactions via data-binding.

Bringing Web Best Practices over to the Desktop

Learning a new language for UI development, I also learned that most web UX and UI design best practices can be applied to desktop apps. From the use of step processes, tabbed interfaces, popup dialogs and toast notifications, I was able to adapt to the new development environment in a timely matter.

Organizing Style Resources

Just as I mentioned about bringing over web best practices, developing a desktop app shared the same development techniques in terms of styling, asset organization and structure. XAML resource dictionaries allowed me to create base styles, section-specific styles, and image asset dictionaries for better organization.