SMALL SCREEN INTERFACE DESIGN

Falcon's wrist gadget

UX Design |UX Research | Visual Design

Problem

Design a working prototype of Falcon's wrist gadget(which he uses to control his fighter drone Redwing) that focuses on all of the instances in the Marvel movies where he uses his that device. 

Solution 

Performed User task and environmental analysis of Falcon and designed a prototype of the application focusing on two interactions. 

  • Controlling the navigation of redwing during flight 
  • Shooting through the redwing

Duration 

Jan 2018 - May 2018

My Role

Interaction Designer

My Process

Falcon1Artboard 1@2x
FalconArtboard 1@2x

PRE-RESEARCH

Motivation

Science and Fiction are typically opposite words – Science is based on facts, while on the other hand, fiction is Imaginary! Yet the movies belonging to this genre are amongst the most liked movies by the people around the world. Why? The answer is simple - Sci-fi movies sell the future! Believe it or not, most of the products/gadgets in today’s world are inspired by the sci-fi movies from the past E.g. Motorola StarTAC - the first ever mobile phone inspired by a fictional Star Trek communicator used in the movie ‘Star Trek’.
I am a big fan of Sci-Fi movie as I love to see the way they portray the evolution of technology in the future. This is one of the strong reason for my design & engineering academic background. With the help of this project, I wish to connect the strings between the current drone operation techniques with the one which is showed in the movie Captain America: The Civil War with the help of ‘Falcon’ and his fighter drone – ‘Redwing’.

UX RESEARCH

User Analysis

Sam Wilson, is a 37-year-old former US air-force paratrooper who retired from his duty and began helping the soldiers to deal with post-traumatic disorders. Being highly educated and having good years of experience in the US air-force as a paratrooper, Sam Wilson has a great interest in technology and exoskeletons that can fly. His alter ego i.e. Falcon is a superhero and is a member of Avengers team (a fictional superheroes team conceptualized by Marvel comics) Sam believes in technology and has no superpowers.

captainamericaimagestill42

Sam Wilson as a normal person chatting with someone.

captain-america-civil-war-falcon-sam-wilson-jacket-1-555×350

Sam Wilson as Falcon in his Falcon suit.

18 FACTS ABOUT SAM A.K.A. FALCON

  • He is fit and agile.
  • He has a good knowledge of technology
  • He is an analytical thinker
  • He is very confident in his work
  • He is familiar with fighting tactics (Boxing, wrestling, etc.).
  • He is trained in gun shooting
  • He is trained in flying jetpacks
  • He always wears a google which gives him information about the environment
  • He has 2 machine guns on his wrist device.
  • He keeps patience even in a combat mode and tries to give his best
  • He knows how to use a parachute
  • He is a retired Airforce paratrooper
  • He works for the people who have a post-traumatic stress disorder
  • His jetpack makes him faster than an actual jet.
  • He increases the momentum of his strikes (guns/ missiles) by increasing the speed of his jetpack
  • To achieve the power of vision as the real falcon does, he uses goggles which can zoom in and detect the smallest of the creatures on the ground.
  • He has a good sense of humor
  • He is a right-handed person

UX RESEARCH

Task Analysis

Next step in the process was to perform tasks analysis. As mentioned in the motivation section, I focused only on the tasks which are specific to navigation and shooting through the redwing. 

I. Navigation Control

Following are the series of subtasks Falcon performs in order to control the navigation of Redwing:

  1. Opens the touchscreen Interface.
  2. Presses a button to launch the RedWing.
  3. Uses arrow keys to move in a direction.
HTA-01

Hierarchical Task Analysis representing how Falcon controls the navigation of Redwing

II. Shooting at the target through Redwing

Following are the series of subtasks Falcon performs in order to shoot at the target through Redwing:

  1. Take an aimer from the menu on his hand interface by touching it.

  2. Move it to the target by touch and drag

  3. Shoot by pressing a button

HTA-02

Hierarchical Task Analysis representing how Falcon shoots at the targets through Redwing 

Things I wish I knew

  • How does Falcon analyze the video data he receives from the Falcon. 
  • How does Falcon control the Camera of the Redwing?
  • Is there any on-screen firing/shooting option?

UX RESEARCH

Environmental Analysis

Being a superhero, it is expected from Falcon to be operational in all kinds of environment, be it during the daytime or during the night; in the scorching heat of summers or during the snowfalls in winter;  in the dry climate or during rains. Considering these factors, I watched the movies where Falcon operated his Redwing and came up with the following Environmental Analysis:

environment Analsys-06

Light

Falcon can use his Redwing during the day-time as well as during the night.  

environment Analsys-03

Noise

The sound conditions around falcon could be noisy (due to the public), silent (is he is alone in the room) or calm or soothing (if he is in the party where the artist is playing the piano.)

environment Analsys-04

Temperature

The temperature can be normal i.e. 65 - 70 deg. F or it can be as cold as 20 deg. F or as hot as 85 deg. F

environment Analsys-02

Moisture

The Humidity can be more during rains and snowfall while on the other hand climate can be dry during summers.

environment Analsys-05

Wind Speed

The most important factor for both Falcon and his Redwing. The wind speed could be as bad as 30 mph during windstorms and during such times, Falcon and his redwing will not be operational. 

environment Analsys-01

Other Constraints

Other external factors could be:
1. Falcon is tied 
2. Falcon's hand is injured during combat mode
3. Redwing is damaged by enemies

UX RESEARCH

Empathy Mapping

For designing the interface of Falcon's wrist gadget (which controls the drone), I felt it is important to empathize Falcon and understand his feeling about performing this task. I created 2 empathy maps for the two tasks which I identified during the tasks analysis phase. 

I. Navigation Control

Empathy maps-01

Empathy Map representing Falcon's emotions while controlling the navigation of Redwing

II. Shooting at the target through Redwing

Empathy maps-02

Empathy map showing Falcon's emotions while shooting through the Redwing

The story so far...

The Figure below represents an extraordinaire card which describes Sam Wilson. The image on the right is the alter ego of Sam i.e. Falcon. The image describes the emotions he is feeling on his face. It also describes the environment around falcon where he works. The top image on the right describes the alternate scene. This image talks about Sam as a person; he works for the people with  from post-traumatic disorders. The two images contrast each other in the emotions they reflect and the environment the user works in. The picture on the left bottom describes a surprising trait of Sam that he is, at times, funny and casual with his team members. Probably his sense of humor would be a factor which motivates him to keep doing the good work for the society even if it deals with blood and death. The image in the circle magnifies the interface which he uses to perform various tasks, one of which is navigating the Redwing and shooting through the Redwing. 

extraordinaire

Extraordinaire card for Sam Wilson a.k.a. Falcon

Challenges 

Based on the about research, I identified 4 challenges in designing the interface for Falcon's wrist gadget. 

challenges-01

One Finger operation

Since the device is mounted on his left hand, the falcon cannot use the fingers of his left hand to operate his device. The option left is using the fingers of the Right hand. Again, since humans are not well advanced in using two different fingers of the same hand in different ways, the interface should be designed in such a way that it can be accessed with only one finger. 

Dependency on Goggles

In the movie Captain America: Civil War, there are scenes which show that Redwing's camera data is streamed on Falcon's goggles. But, in real life, if the data is projected on the person's goggles, it would make the person, practically blind to the environment around him. My challenge was to remove his dependency on his goggles to operate Redwing. 

challenges-02
challenges-03

More space for live footage

Challenge #2 clearly stated that goggles cannot be used to project the live footage captured from Redwing. The other option was to consider the wrist gadget's screen for projecting the footage. The challenge now was to design the interface in such a way that the control should take as less screen space as possible. 

Shape of Redwing

This fighter drone was not the usual drones like DJi Phantom, Go Pro Karma which can move in all the four directions of the vertical plane without moving forward. This drone was designed to resemble Falcon bird which cannot turn right or left in a vertical plane without moving forward. 

challenges-04

UX RESEARCH

Exploratory Research

Designing controls for the Redwing was a difficult task for me as I had to think about all the three axes of a 3-dimensional plane. I wanted to understand two important things before designing the interface of the Wrist gadget which would control Redwing.

I. How does the fighter jet/airplane work?

As the Redwing resembled the shape of a typical aircraft, I realized that the mechanical working of Redwing would be similar to the fighter jet/airplane. I took help of the following video to understand the working of airplane. 

Credits: How do airplanes fly?[video].Directed by Sabin Mathew. Learn Engineering(2015). 

Following is the data I extracted from the video: 

flight-09

Move up (ascend)

To take off or to increase altitude, pull the Aileron Control towards yourself. 

flight-08

Move down (descend)

Pull down the flap and slot controls

flight-06

Turn Right

Move the Aileron control towards  the right

flight-07

Turn Left

Move the Aileron control towards  the left

II. How are drones controlled?  

Traditional drones have 4 propellers which are mounted in a vertical plane. This gives them the freedom of moving as well as turning in a particular direction. I wanted to understand the working of controllers used for operating those drones and reuse those techniques in my designs. I watched the following video for gathering the data: 

Credits: DJI Phantom 3 Standard Complete Staters Tutorial[video]. Tripecollie(2016).

Following is the data I extracted from the video: 

drone-10

Move up 

Move the left joystick ahead

drone-13

Move Down

Pull the left joystick behind

drone-11

Rotate Left

Pull the left joystick to left

drone-12

Rotate Right

Pull the left joystick to right

drone-15

Move ahead

Pull the right joystick ahead

drone-14

Move back

Pull the right joystick behind

drone-16

Move left

Pull the right joystick to left

drone-17

Move Right

Pull the left joystick right

UX DESIGN

Low Fidelity Prototype

I began sketching the screen with basic elements like direction controls, elevation controls, weapon menu, etc. Initially, I designed the screens with respect to the subtasks mentioned n the hierarchical tasks analysis performed before. I purposely kept the screen shape as a horizontal trapezoid so that it could fit on Falcon's wrist. But in later versions, I decided to change the shape to that of a rectangle and reduced the size of the screen so that it could fit on Falcon's left wrist. 

Untitled-6-04

Evolution and Refinement

revisions

Images of the final prototype(Version 4)

Design Considerations

descon-05

Navigation controls have motion locks which will hold Redwing in a particular motion so that user can access other controls on the screen.

descon-06

A dashboard in the top shows Altitude, Directions, Compass, and Speed. This bar will give all the vital information about Redwing to the Falcon, helping him to control the Redwing.

descon-07

The controls provided to Falcon are given shadow to show depth. This will visually separate Redwing's footage from the controls, thus making them visible on any background color. 

descon-08

More icons are used than text so that the size of the controls can be reduced. This will provide more space for the video footage recorded from Redwing.

descon-09

Screen controls can be mistakenly touched during combat mode. Mechanical buttons will subject Falcon to put more effort in pressing the button in order to perform these operations. 

descon-10

Status/Notification bar pops up during the following scenarios:
Errors | Information | greeting Falcon | Weapon usage | Danger. 

NightVision-18

Night Vision controls designed in Red to contrast the green toned background footage captured from Night Vision Camera. 

UX DESIGN

High Fidelity Prototype

I created a high fidelity prototype using Adobe Experience Design. The images shown in the background is shown for representational purpose. Ideally, the background will show the live footage captured from Redwing's Camera. 

Conclusion

This project helped me to understand the process of User Experience Design. I loved performing User, Tasks and Environment Analysis. These techniques helped me in portraying almost all the scenarios where falcon and redwing would work. Thus, I could design a reliable interface which would aid Falcon in all the probable scenarios.

Working on designing an interface for a single user has its own pros and cons. Since I had to focus only on one user, my research work was substantially reduced, and I could dive deep into the scenarios where Falcon would use his Redwing. Another plus point of working for a single user is the product is tailored according to one single user and that reduces our efforts as a designer. For example, I choose Red and Black for designing the interface because Falcon already has an established identity system having Red and Black color.

On the other hand, since I designed this device only for a single user, I could not design a generalized design which can be used by a large group of people. For eg, Falcon has a constraint of the device being mounted on his right hand, but there might be many other users whose both hands would be free while operating such drones. 

Presently, we do not have any screen interface to control drones. Neither we have drones which could carry weapons on them and can be used in combat operations. In future, if such drones are created, they can be used as surveillance drones by army and military groups. Since the nature of work of Falcon and soldiers is almost similar, I feel my research would prove useful in designing the interface for such drones.

 

Portfolio by

Copyrights reserved 2019

Drop me a message

prasadpatil028@gmail.com

Find me on 

LinkedIn-Icon
social-62-512 (1)
b ehance
dribbble-icon-1-logo-png-transparent