AI Glasses
A one year research project during my masters degree in Human Centered Interaction - 2021- 2022
AI | Product Design | User Interface Prototyping and Development | Product Visualization |
UX Design | Research | Motion Design | Video Production
Imagine, you are driving a car and your glasses can tell you the directions or give details of a building or .
Hard to image right? let’s discuss this with an example of a super hero!
-
This document contains the development of the device named the EDITH. The objective was to research on a science fiction product based on movies or novels and make it a reality. I was inspired by the Spiderman movie and created a user interface for AI glasses called EDITH. My version of how a user can interact with a device and the problems it can address for the user is included in the project. The gadget is voice operated, and the project includes a number of phases that I went through before creating a video prototype.
-
UX Research | UI/UX Design | Product Design | User Research | Animator
-
UI/UX Design | Empathy mapping | Task Analysis | User Research | Brainstorming | Role-storming | Prototyping | Animation | Video Making | Sketching | Developing Personas and Scenarios
-
Adobe Photoshop | Procreate | Adobe Premiere Pro | Microsoft Powerpoint
Overview.
The device I chose is Tony Stark’s Augmented reality defense and security system “EDITH” who has access to people’s information and satellite defense and security. This is in the form of regular sun glasses. The glasses can identify people when you look at through them and the system shares all the information about the person, it can also view its information on all telecommunication networks.
Through this process, I have identified that interfaces designed for Spiderman ( Peter parker) must be discrete, easily accessible at all times, and support fast interactions. Given the high risk of danger in his profession, it is crucial that these interfaces be designed to minimize errors.
Originally, to interact with the device, one has to wear it, the system detects who is wearing the glasses and authenticate the person. The glasses have microphone attached through which only the person wearing the glasses can hear to the system, everything could be seen on the screen on the glass, and to interact voice is used to give commands to EDITH.
This is how the device looks
Source : Movie – Spiderman Far From home
Gathering User Data
User Analysis.
The device is Tony Stark’s Augmented reality defense and security system “EDITH” who has access to people’s information and satellite defense and security. This is in the form of regular glasses. The glasses are worn by Spiderman in the movie SPIDERMAN – FAR FROM HOME. He goes by the name of Peter Parker in the movie and is an every-man character that spends part of his day chasing criminals, and part of his day dealing with regular life.
Task Analysis.
TASK 1
To stop the drone attack and conform if the bad guy was dead. To fight and defeat the bad guy, the user had to wear the glasses to call of the drones which were activated. This could happen only if the device recognizes the user and then listens to the command.
TASK 2
To delete a message from friends phone. When user first saw the device, he had no idea how to use it. But since it were a glasses, he assumed that it needs to be work on the eyes. And the user then started interacting one by one.
TASK 3
Fight the criminal through recognizing them launching the attack. This a day to day hobby of spiderman, to locate criminals, identify them, know their collaborations and eliminate them all by handing them over to the police or killing them.
Enviroment Analysis.
TASK 1
The temperature is 60 Degree Fahrenheit. He was in side the building, so he could hear little noises of drone attacks and fire outside. The user was under great pressure as there was thousands of drones outside making illusions of a monster and harming and creating destruction to the city. Inside the building he was fighting with hundreds of drone, and had to seek his glasses back by fighting with the them and their main leader. User was exhausted and was wearing the glasses. There is lot of chaos outside and also, the glasses of the building is breaking and people are shouting and running.
TASK 2
In this situation the user was in the bus. The temperature was normal , it was around 60 degree Fahrenheit outside. The speed of the car was fast, which made it difficult for the user to handle the device as it fell down when there was a break. The bus was on the hill, where there was a risk of bus falling down as it lost its balance. There were 10- 15 students in the bus which was targeted by a fire attack, therefor spider man had to assure that the fire attack is stopped and also, the picture is deleted before it is shared. The user was in a great pressure to perform the task. There are lot of noises as all the students are scared due to the rash driving and scare of falling.
TASK 3
In this situation the user uses the device at his ease. It is night and the temperature is 48 degrees outside. He is on the top of the building where no one can see him, but he can see the entire city through the glasses. He is sitting and looking through the glasses, with no urgency and pressure to stop the attack or launch the attack. It is windy as he is on top of the building but quite and there is no one shouting or no sound of traffic
Visualising User Data
Extraordinaire card.
The photos above were selected with my user in mind. The first major scene is Spiderman rescuing people. I picked this photograph as the main scene because I wanted to convey how brave and helpful, he is. With all of his abilities, he rescues the world and aids people. I took a photo of Spider Man doing inventions in his actual life for the alternate scene. He is enthusiastic in many aspects of science and enjoys developing new technology. I want to demonstrate that, in addition to being powerful, he is also intelligent and has a solid understanding of technology.
In this surprising scene, Peter Parker (Spiderman) is seen conducting action without his costume, which is highly implausible because he prefers to conceal his true identity within the suit. In my detail scene image, I've included a shot of Peter Parker wearing the glasses, and we can see that all he needs is voice to engage with the technology.
Main Scene – The user is saving the general public, which is his main character. That he is brave and helpful and does anything to save the world and people.
Alternate Scene – We can see the user is a nerd, who like to invent and make new technologies
Detail scene – This has been chosen a detailed scene to show how the user use the devices, he spends good amount of time to understand and know about new technologies, new devices etc
Surprising seen – User is never seen performing stunts and action without a suit as he does not want to come under limelight. Hence this has been selected as surprising seen that he can still perform with his powers without his suit.
Selecting Screen
The screen that I am going forward is an augmented reality screen.
Where the entire world is seen as a screen. The user cannot touch it, but only view through the glasses and the entire environment with act as screen. Voice is used to interact with the screen, the screen has all the information that can be communicated through voice and not by touch. The size of the screen will be equal to the view of the user. The AR screen is feasible for my user as his tasks depends on fighting, swinging across the building etc. Screens that need to pulled off the pockets or suit will not be feasible for his has his hands will be busy fighting or throwing webs. Thus, I feel the screen should be the glasses itself. Whatever the user see through the glasses becomes the screen for him.
Prototyping
Task from the movie.
To delete a picture from friends phone
I had a basic notion of how I wanted the screens to operate and some feedback ideas, but drawing them out helped me fine-tune some of my ideas. Drawing them out was simple and a quick task. Here I was able to draw what I think without any constraints. Designing Low fidelity prototype helped me think more about the interface.
Medium Fedility Prototype.
Transitioning, states, animations, design, and navigation are all examples of sophisticated behaviors that may be explored with medium fidelity prototype. I discovered several components of my first design to be awkward and difficult when I went through my medium quality prototype to test it. Because of PowerPoint's versatility, I was able to make quick and low-effort changes to these features when I discovered "bugs" or impediments in their interactions. This was quite helpful in keeping the creative process going forward. When there was a gap in my understanding regarding a specific action or result, though, I found it aggravating. Finding lessons and examples of how to obtain what I wanted got quite time consuming.
Story Design
Setup
Once upon a time there was
city there was a gang that used to commit heists. They had robbed banks of money and gold, kidnapped people for money and murdered a handful of individuals and taken their money, making them the city's most sought criminals. their next aim was to loot a bank during the day and take 10 million with them. They were, however, armed to the teeth and outfitted with cutting-edge technology, making it impossible for the authorities to apprehend them.
Every day
The members of the organization used to disguise themselves by altering their appearance and clothing. They had a hideout that the cops couldn't find.
Event
One day
They staged a bank heist on a beautiful day, held the bank staff hostage, and stole $27 million from the bank, as planned. This is going to be their most daring theft ever. To apprehend them, police set up a perimeter around the city and guarded all of the city's major banks. However, by disguising themselves, the gang was able to get access to the bank. They were armed to the teeth, and no one knew what they were capable of.
Consequence
Therefore / Because of that
The city was under a lot of stress since their money was on the line, people were afraid because more than 50 employees were being kept inside the bank, and the population was living in terror.
People have high aspirations for government officials as well as Spider-Man, who is constantly on hand to help the common population. Spiderman was aware that the thieves were returning, and he was keeping an eye on the city in the hopes of detaining them and handing them over to the authorities.
Resolution
Until Finally
Spiderman put on his new tony start glasses and was able to scan everything in front of him. When he saw that a robbery had occurred two streets away from where he was. He dashed towards the structure, but the burglars had already taken and fled the scene by the time he arrived. He spotted their vehicle and pursued them. He was able to track them down to their hiding location. When he arrived at their hideout, he waited and acquired all of the information he could about their weapons, the amount of money they had, the number of individuals participating, and their personal information. By this time, Spiderman had gathered all of the information and had shared it with government authorities. With Spiderman's aid, the police were able to apprehend the criminals.
Storyboarding & Script
The type of story board that I did was Sketching storyboarding. The story board were created using the App procreate - an I Pad software where we can draw and create drawings. This was done using I Pad and the drawings were done using apple pencil.
Storyboard worksheet was used to evaluate the story boards. This evaluation was done by one of the peer in my class. She helped me analyzing each story and filled the worksheet for me. According to which I was able to make the changes. Storyboarding was interesting yet a difficult part of the assignment. Creating each board and selecting each one of them to keep in your final video requires lot of critical thinking. I was able to learn what storyboards I needed for my project and how to create a wonderful tale before beginning to film a movie by reading. I struggled with the storytelling component of the project at first, and I couldn't understand how writing these stories linked to our gadgets since the main focus seemed to be on the story rather than the device itself. However, after I started storyboarding and removing unneeded elements from my stories, it became evident that the purpose and value of this portion of the project was to envisage how the gadget would be used in the real world without having to test it with a physical prototype. This strategy helped me to see how my user's environment may integrate technology into their workflow, as well as how its utilization would aid the story plot elements and the user.
Video Production
The process.
All of my animated story boards were created using the Procreate software for iPad. Procreate is a program that allows us to draw with a pencil and then lay out the sketches to create animations. These storyboards were animated to my specifications. After animating the needed storyboard, I compiled all of the boards into a PowerPoint presentation. After that, a few finishing animations were added to PowerPoint before it was converted to MP4. Murf, an internet software, was used to create the voice. The text was converted to audio using this program. I chose an adult voice for narration, a robotic voice for the gadget, and a little boy voice for the user because there was an opportunity to use other voices. Post This cropping of the video and joining of the audio was done on Adobe Premiere Pro.
The in-class evaluation was helpful in determining which screen animations I could use with each version. It helped me add animation where it was needed and remove animation that was unnecessary. I was able to comprehend the good and bad elements of my video each time thanks to the in-class progression. Which aided me in producing the greatest final versions. I was also evaluated on the voice I added; several of my colleagues advised me to have a discussion, which made sense and increased the overall understanding of my movie.
Final Video.
Post my medium Fidelity screens were finalized I started with the process of making a video. The used Procreate to animate each green which then was collated on PowerPoint and exported as MP4. After that the voice recording which, I converted from the software called Murf was exported. The final voice and Mp3 was finalized after editing each one for 3 times. I had Voice and the video in Mp4 format after 3 version, I joined them in Adobe Premier pro. Some edits like cropping, mixing and syncing were then made in premier pro to get the final output.
The Making of - Catch the robbers.
What if this is a reality, we can easily get direction to the places without looking at car screen (best for bike), we can know more about the things we see on the way, maybe get to know about the danger on the road way ahead of the time.
LET’S MAKE FUTURE AMAZING!