• R.U.L.S. 'Home screen' (Paper prototype).
    R.U.L.S. 'Home screen' (Paper prototype).
  • R.U.L.S. application flow.
    R.U.L.S. application flow.
  • iPhone 'Tap & Slide' paper prototype for easy usability studies.
    iPhone 'Tap & Slide' paper prototype for easy usability studies.
  • R.U.L.S. App Logo - Referee. Umpire. Linesman. Signals.
    R.U.L.S. App Logo - Referee. Umpire. Linesman. Signals.
  • First iteration: screen mockups.
    First iteration: screen mockups.


‘R.U.L.S. – Refree. Umpire. Linesman. Signals.’ is a mobile app (paper prototype) that strives to decode the hand signals and gestures made by referees in sports. The app was designed as a part of my Cultural Relevance & Awareness class during my graduate program.


Photo Credit: Business Insider (NBC Sports)

The rules for professional sports are unique and can be difficult to follow. Trying to figure out the hand-gestures or signals of the referees is a common problem for many spectators of sports – for newbies and even avid sports fans.

What: The mobile app RULS is designed to help explain the meaning of the ‘rule of sport’ that pertains or is represented by the hand signal or gesture. These signals may represent anything, including scores, fouls, violations, ejections, outs, etc.

Photo & Text Credit: NBA.comWho: The RULS app is designed to  cater to the major sports leagues of North America — NFL, NBA, MLB, NHL and MLS.

If analyzed from the perspective of personas: For a newbie it would help them learn the rules and understand the hand gestures. For an avid fan who is unfamiliar with a particular gesture or who wants clarification on the application of a specific rule in a sport. RULS could also be used as a “cheat sheet” for referees looking to brush up on their knowledgePhoto Credit: Slowbuddy.com


How: The app is designed for users to quickly and easily find the hand signal or the rule through several different methods – recording, gesturing, browsing or quick searching. It displays the name of the rule, an explanation, its representative hand signal, and a series of images demonstrating the signal, as well as links to video clips.

Paper Prototype:

Using the concept of the Activity Theory Triangle I analyzed the different aspects surrounding the problem. From there I was able to visualize how a user might search for a hand signal, how I wanted to display information about the signal and the corresponding rule, and the breakdown/flow of the application (seen in the corresponding flowchart below).

The first iteration of the paper prototype captured a lot necessary functionality. After only a few observations and walking throughs with users, some major flaws and inconsistencies were brought to light. Below are some of the improvements addressed in the 2nd iteration of the paper prototype.

  • Quick Search (on Home screen) – the quick search works like the browse option, however it allows users to search for key words, such as a sport, a name of a rule, and the description of the hand signal made by a referee. This quick search adds to the speed and ease of use for those who already have a vague idea of what they want to find.
  • Record Name and Icon (Home screen) – the record red circle icon was felt to be too ambiguous. A simpler and more synonymous video camera icon was used instead. Additionally, the record name was changed to “Capture” to accurately represent the purpose and functionality.
  • Gesture Icon (Home screen) – the gesture hand with phone was removed and replaced with a simpler open hand. Many people felt that the original hand and phone symbol representing “gesture” was too complicated. A simpler icon would represent the term gesture and the functionality in a better manner.
  • Back Button/Icon – A back button was added to the top left corner of each of the screens in the app to allow users to easily go back and re-do or make changes to their search of a rule or hand signal.
  • Record and Gesture Functionality – Originally the screens had too many steps to record a referee gesture or hand signal. The functionality was simplified and made more intuitive by allowing the “recording” of the Capture or Gesture functionality to commence after selecting the icon from the Homepage, instead of being a 2 step and 2 screen process. Additionally, the icons on the Capture and Gesture screen were changed to be “Stop” and “Re-do”, so that users could stop their recording and then analyze the recorded hand signals or re-record if they made a mistake.


MBA/MA in Design Leadership
Cultural Relevance and Awareness
June – July 2014


• May 29, 2014

Comments are closed.