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
- Lead UI/UX Designer, Prototyper and UI Development
Team & Stakeholders
- Senior Software Developer
- Project Manager
- Client / Partner
Tools Used
- Adobe Illustrator & XD
- Microsoft Visual Studio
- WPF/XAML layout, styling and resource dictionaries
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
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.