VISUAL AND
INTERACTION DESIGN
COVERLAB UX/UI Web Design Mock-ups and Prototypes
Summer 2022 - Present
As Visual and Interaction designer for ITRE, working with COVERLAB and the Geospatial Analytics and Decision Management Group (GADA), I set out to improve the user experience of COVERLAB's webpages by making suggestions to site navigation during collaborative team meetings, and then designing mock-ups that incorporate our team's agreed upon suggestions, with the goal to always to balance user-friendliness with the needs of the North Carolina state troopers.
I was brought in to the GADA team to brainstorm an updated navigation menu design for the COVERLAB Analytics webpage. I came up with the idea of using a collapsible side menu, rather than a top navigation bar used in the current webpage. I mocked-up several drafts in Adobe XD that incorporated the collapsible side menu idea, while also pitching a new COVERLAB Analytics homepage.
For both the new Analytics homepage, and later the “Special Projects” webpage redesign, I incorporated card designs that would later be implemented across multiple different ITRE web design projects. These content cards reveal additional content on hover: in the case of COVERLAB Analytics’ homepage, the cards would display information pertaining to their respective group of sub-pages, with links to the sub-pages themselves. The cards in the “Special Projects” page served a similar purpose, displaying the respective information and links pertaining to each of COVERLAB’s six “special projects” when the user hovered over the cards.
COVERLAB Special Projects Page Mock-up
ITRE NCDOT DOA Airports
User Interface Redesign
Winter-Spring 2022
Describe your image
Describe your image
Describe your image
Describe your image
Describe your image
Describe your image
As of version 1.13.0, the user interface has been retooled for better UI flow, to help expand accessibility to those at ITRE not familiar with Unity3D, and to showcase new features.
The feature that allows for future proofing simulations is the ability for users to drag-and-drop spreadsheets into the project. Those spreadsheets will then be copied and stored inside a folder that spawns on the user’s Desktop whenever a file is dropped into the project. Upon loading the project, all files in that folder are instinctively read and then stored, along with airport route spreadsheets stored internally, into another spreadsheet that spawns on the user's desktop. Users that drag spreadsheets into the project have to be aware of the file type, since the project only reads CSV files, and the way the information is stored, since the project has been programmed to read files in a specific way.
​
If the user has no files to upload, or if there is an airport already uploaded into the project that the user requires, then they can just select an airport from the dropdown menu, placed below the “Drag-and-Drop” icon.
​
Airports List, only accessible through “Drag-and-Drop” or the popup menu, displays all of the airports that the project currently reads. In addition, every entry, including the ones that cannot be removed from “Airport List” can be altered to account for any changes that were made to that airport since the Version 1.13.0. For example, if an airport in the list has since been upgraded from a general airport to a commercial airport, then the user can change that designation by toggling the right dropdown from “General” to “Commercial” setting for that airport. If an airport has since changed it’s name, or if a name needs to be added, since it’s either new or outside of North Carolina, then the user can type any changes into the far-left input field.
​
After selecting their airport of choice, the “Drag-and-Drop” section of the menu will transition to “Map Selection,” where the user can then choose which map to display the simulation: either on an US map or on a World Map. Each map choice will also give the user an additional choice of “Create Image,” which spawns routes as rays, or “Create Animation,” which spawns routes as plane animations.
​
If the user wants to make additional tweaks to the simulation, they have the option to access the popup menu, which can be toggled on and off by pressing the ESC key. The popup menu can be accessed from any scene available to the user within the project.