SMALL SCREEN INTERFACE DESIGN
Falcon's wrist gadget
UX Design |UX Research | Visual Design
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.
Performed User task and environmental analysis of Falcon and designed a prototype of the application focusing on two interactions.
Jan 2018 - May 2018
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’.
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.
Sam Wilson as a normal person chatting with someone.
Sam Wilson as Falcon in his Falcon suit.
18 FACTS ABOUT SAM A.K.A. FALCON
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:
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:
Take an aimer from the menu on his hand interface by touching it.
Move it to the target by touch and drag
Shoot by pressing a button
Hierarchical Task Analysis representing how Falcon shoots at the targets through Redwing
Things I wish I knew
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:
Falcon can use his Redwing during the day-time as well as during the night.
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.)
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
The Humidity can be more during rains and snowfall while on the other hand climate can be dry during summers.
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.
Other external factors could be:
1. Falcon is tied
2. Falcon's hand is injured during combat mode
3. Redwing is damaged by enemies
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 Map representing Falcon's emotions while controlling the navigation of Redwing
II. Shooting at the target through Redwing
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 card for Sam Wilson a.k.a. Falcon
Based on the about research, I identified 4 challenges in designing the interface for Falcon's wrist gadget.
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.
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.
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:
Move up (ascend)
To take off or to increase altitude, pull the Aileron Control towards yourself.
Move down (descend)
Pull down the flap and slot controls
Move the Aileron control towards the right
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:
Move the left joystick ahead
Pull the left joystick behind
Pull the left joystick to left
Pull the left joystick to right
Pull the right joystick ahead
Pull the right joystick behind
Pull the right joystick to left
Pull the left joystick right
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.
Evolution and Refinement
Images of the final prototype(Version 4)
Navigation controls have motion locks which will hold Redwing in a particular motion so that user can access other controls on the screen.
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.
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.
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.
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.
Status/Notification bar pops up during the following scenarios:
Errors | Information | greeting Falcon | Weapon usage | Danger.
Night Vision controls designed in Red to contrast the green toned background footage captured from Night Vision Camera.
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.
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.