Work in Progress 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.
The Challenge
Race organizers and announcers need a mobile and easy-to-use app for live race results. Laptops are currently a solution, but are intended to remain stationary, and in most cases, need to remain plugged-in for all-day use.
The Solution
To bring a race results announcement tool bringing together the power of web services and desktop software, straight into a native app built for both mobile and tablet use. This will ultimately provide flexibility and a longer lasting tool (tablet/mobile) for staff.
My Role
- Lead UI/UX Designer, Prototyper and UI Development
Team & Stakeholders
- Senior Software Developer
- Project Manager
Tools Used
- Adobe Illustrator, Photoshop & XD
- Microsoft Visual Studio
- Xamarin.Forms / XAML
- Apple Xcode
- Android Studio
Establishing the Usage Scenario
A race event, in most cases, begins early in the morning. The event organizers have most likely already setup the day before, and their day begins even before the sun comes up. It is crucial that things must already be in place as there is barely any prep time come race day. The same goes for the race event timing company. The timing crew comes prepared with equipment quickly unloaded, deployed, powered-up and ready-to-go. As the time start time approaches, race entrants are toeing the line, with fingers on their GPS watches waiting for the 3-2-1 go ahead. The announcer is doing their job, and getting the cold, but pumped-up runners excited to tackle their next challenge in setting a new personal record that they have been training hard for. Before you know it, a minute remains, the countdown begins and the entrants are off.
The elite top place finishers will be crossing the finish line in about 15 minutes. Given this situation, the announcer and timing team needs to be ready to announce the well-deserving top place finishers. This is where the RM Timing App comes into play.
User Research
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.
Task Analysis
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.
Defining the Top-Level Functions
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.
LOOK UP RESULTS
- Search via Name or BIB #
- View the Result
- Share the Result
ANNOUNCE LIVE RESULTS
- View Streaming Results
- View Finisher Notes
- Manual Entry (Backup)
CONFIGURE APP SETTINGS
- Select Results Provider and Event
- Configure Display/Misc Settings
- Lock App Feature
High-Fidelity Storyboard
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.
Designing around the current visual language
A brand guide and visual design system was already in place, so the overall aesthetic needed to be unified with the sales website, customer dashboard and desktop software application. The main goal was to keep the current design language consistent for this app. Thus, the color palette, typography and UI element styles were brought over to keep brand consistency within the different digital properties.
Improvements from Prototyping
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.
Key Takeaways
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.