Social Navigation Simulator
UCSC Interaction Dynamics Lab in Collaboration with Honda Research Institute
Duration: 2 months
Role: UI Designer
*Some elements in the mockups are blurred due to Non-Disclosure Agreement
Take a Look
These are the four main types of screens that are used within this interface. I am not at liberty to discuss specifics of what they are used for due to non-disclosure agreement. The first screen is an opening screen, the next three are different simulation modifier screens.
Client
Interaction Dynamics Lab @ UCSC
Year
2022
Project Overview
The Organization
The Interaction Dynamics Lab at University of California Santa Cruz is studying the ways in which people navigate within a given space. This simulator was created as a research tool to allow for researchers to study the social movements of people.
Project Goal
The lab has tasked me as their User Interface Designer in order to modernize and make the interface of their simulator more visually appealing. I was tasked with focusing on the control interface which would be visible to the researchers changing the simulator’s parameters.
“Make the simulator look pretty and more functional”
The original design for the simulator was outdated, not space efficient, and difficult to understand. My goal was therefore to make this beta-like design into something more polished and modern but still simple enough to understand.
*sensitive information is blacked out on the images 
The Users
Understanding who they are and how they use the simulator
The users of this simulator are all researchers. It was originally designed by these researchers without any thought into visual aesthetics or hierarchy. Thus the function is there which is the most important thing for these users but it lacks the correct visual hierarchy to make the digital workspace the most effective.
After doing a few user interviews with the research team I found that they prioritized the following things:
Space for the simulator viewing area
Consistency in how the elements are portrayed through different view states
Simplicity as to not detract from the simulator itself
Actionable Design Changes and Deliverables
Changes to the Simulator
Main Running InterfaceShrunk assets to their proper sizes for a desktop screen layout
Iconified common computer actions like going home, saving, zooming, etc.
Made edit areas collapsable to better be able to view the simulator when needed
Kept a neutral color palette for assets to not be visually intrusive
Items Given To Progress After My Departure
Design-Development Handoff Document
Outlines the specifics of every UI Asset as well as how they should be laid out on the screen
Living UI Kit
A living document I created in Figma that can be expanded and drawn upon for designing new assets and pulling from to make new screens. Contains every asset including text, colors, buttons, cards, menus, etc.
Project Limitations
I came in with limited knowledge about how the simulator is actually used in practice as this was still in prototype stages. Additionally, I had limited time to tackle every single screen of the simulator as this was for a single academic quarter. There was also no way to validate my designs at this time as it could not be implemented in the time that I worked on this project.
Client Satisfaction
“We are very grateful for the work you have done in such a short time period. The simulator looks much more visually polished.”
“The guidelines we were given will be very helpful in allowing us to further expand upon the design of this project and potentially assist in the next designer continuing your work”
*Specific names of team members not used for confidentiality reasons