CyberHUD for Raytheon
In the Fall of 2018, four other computer science seniors and I were selected to work on a Raytheon senior design project. When my senior design team first sat down with Alfonso Lopez, our corporate sponsor, he pitched us the idea of building an experience that would tie augmented reality with cybersecurity to “see” the technological world around us that normally goes unnoticed. While this technology could lend itself to more devious uses like hacking, as a group we wanted to explore the possibilities of the everyday uses of AR for a wider audience.
We ended up landing on building an iPhone application, dubbed CyberHUD, that would provide a means of interacting with networks and device data on an AR interface. This app could provide support technicians with a better understanding of the locations and details of the many interconnected nodes in the network as well as allow everyday folk locate nearby public networks.
UI & UX
As the lead UI designer for the project, my task was to design and implement the user interface for the application. I initially pictured a crisp, flat design that would not distract away from the AR elements. Using graphics similar to Google Maps markers, “beacons” would signify to the user the real-world location of networks and devices.
Main Screen Menu
I began with designing the main screen menu as most of the options would be accessed directly through there. The radial menu was placed at the bottom center of the screen for maximum accessibility for both left and right-handed mobile users. When pressed, I wanted the radial menu to expand to display the new options and subsequently contract to hide the options when pressed again. Crisp, descriptive icons represent the options for easy initial recognition of the button function.
Add Device View
Adding user-defined devices for others to view needs to be easy to do through the app. The interface needed to quick and easy to comprehend while only allowing users to input information they would know; latitude, longitude, and the devices unique ID in the database are off limits and are provided either by the phone’s GPS or generated by the database.
The add device view was designed with the knowledge that screen space is limited and that mobile navigation of interfaces can be tricky. Every input field fits onto the screen without the need to scroll down. Text is large and easy to read and the selected input field highlights to increase accessibility. The buttons are prominent and a confirmation/error message appears on adding a device to alert the user of the system status.
Beacons
Arguably, the most important aspect of the app is the network and device beacons. The beacons needed to be easily recognizable against the background and from each other as well as exist within a 3D space.
The final beacon design differentiates between data types both throught color and symbol differences for quick identification. These beacons exist as flat objects on a 3D plane that billboard towards the camera to give the effect of 2D icons on the screen that scale in size depending on the user’s distance away from the location. These images can then be tapped to access further information about the network/device at that location.
Details View
When a beacon is tapped, a pop-up appears to display information about the device or network. The background behind the pop-up is darkened and faded to indicate the pop-up needs to be closed before accessing anything else while still allowing the user to see the AR elements below. Specific information about each network and device is delivered in a succinct and clear way, and the edit and close buttons are prominent enough so that the user understands the next actions they can take.
Editing Details View
After nailing down the design of the add device view, the last interface to tackle was editing device details view. The interface matches the interface of adding a device to draw a connection to visible changes being made to displayed data. Information that is uneditable, the latitude and longitude of the device, can only be updated to the current GPS location of the device for ease of use. All other information is displayed as filled in input fields for easy changes.
