Robotics App Proposal
Mobile, UX, Motion Design, Animation
FIRST Robotics Competition Teams
UX Designer, Project Manager, Content Creator
00 Problem Overview
FRC: Paper Wasters
The FIRST Robotics Competition requires students to analyze performance of teams, filling out 400 sheets of paper to be recorded in 6 hours.
Reduce time running between maintenance area of a competition and the playing field, increasing communication between team and overall robot quality.
01 User Research
Students: Novice & Experienced
Students in the FIRST Robotics Competition range from age 14-17, with varying degrees of experience.
Competitions take place in school gyms, with varying seating accessibility.
FIRST Robotics' brand standards are largely focused on a two colour scheme with neutral colours as supporting elements.
FRC Match Timer App
High Energy Users
The app screen was divided in half in a dynamic motion to maintain the high energy feeling of the competitions. Reflected layouts were maintained for text elements to connect screens together from one function to the next.
Bold Element to Grab Attention
As a user typically doesn't have time to look at both the phone and the competition in front of them, a bold area in the middle of the screen was utilized to grab attention at key points in a match.
The final layout combines elements from both the home screen and the detail screen to unify the app in a consistent layout.
03 Static Design
Red VS Blue
One Choice at a Time
The user is greeted with only two options on the screen, either Red Alliance or Blue Alliance. As a user is typically only interested in rooting for a particular alliance colour, the information for both alliances is not required at the same time. Should the user select the Red Alliance screen, the remaining content is pushed diagonally right off of the screen.
Attention To Branding
A combination of FIRST's base colours were used with supporting shades to create a monochromatic colour scheme per side of the screen.
The user uses their finger to swipe in the direction of their alliance, selecting either red or blue. Once selected, the text elements react to the user's touch, transitioning into the next screen.
03 Static Design
Ready to Go
Front and Center
As the intended audience uses the app with divided attention, the countdown timer is the most bold element in the center of the screen. The countdown timer only animates three seconds leading up to the match, saving on battery life and grabbing attention only when needed.
Individual layouts were created to represent both the red and blue alliances during a match. Match information and assigned team number is displayed in the corner of the screen, reminding the user of key information.
The counter animates dynamically in the center of the screen as the MC counts down to the start of the match, allowing the user to begin recording match information.
03 Static Design
Bringing it home
The match ends, displaying the winner and resetting the app to the home screen. As a match occurs every 5 minutes during a competition, the app resets to the home screen for the user to easily restart the process.
The match ends using reversed animations previously used when selecting an alliance colour, however a circular element reveals the match winner, allowing the user to quickly review the results of the match before restarting the process
04 Final Piece
UX Motion Designs
The animations represented below demonstrate the proposed app with micro-animations. All animation were created using Adobe After Effect, while layouts were created using Adobe Illustrator.
BEyond: Paper Savers
Moving forward, the app would integrate micro-animations related to recording team data as well as indicating match winners and timings. This would allow a team to completely eliminate the need for paper scouting methods when analyzing strategy at an FRC Event.