Robotics App Proposal
Mobile, UX, Motion Design, Animation
Proposed Client
FIRST Robotics Competition Teams
Teammates
Katlin Walsh
Duration
5 Weeks
My Roles
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.
App Goals
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
Audience
Students in the FIRST Robotics Competition range from age 14-17, with varying degrees of experience.
Location
Competitions take place in school gyms, with varying seating accessibility.
Branding
FIRST Robotics' brand standards are largely focused on a two colour scheme with neutral colours as supporting elements.
02 Wireframes
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.
Unified Layouts
The final layout combines elements from both the home screen and the detail screen to unify the app in a consistent layout.
Wireframe 01: Home Screen
Wireframe 02: Detail Screen
Wireframe 03: Summary Screen
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.
Micro-animation
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.
Reflected Layouts
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.
Micro-Animation
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
Match Winner!
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.
Micro-Animation
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.
