Interaction Designer & STEM Educator
portfolioproject_Split Screen copy 4.png

App Design

Motion designs to compliment a proposed competition enhancing app. 

Katlin Walsh - Interaction Designer & STEM Educator

Header_Split Screen.png

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. 

 
 
 
Style Tile_Storyboard.png
Style Tile_Storyboard.png

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 01: Home Screen

 Wireframe 02: Detail Screen

Wireframe 02: Detail Screen

 Wireframe 03: Summary Screen

Wireframe 03: Summary Screen

 
 
 
Wireframe22_Split Screen.png

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. 

Style Tile_Blue Timer.png
Style Tile_Red Timer.png
 
 
Style Tile_Red Timer.png
Style Tile_Blue Wins.png

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. 

 
Katlin_1.gif