Motion, UI, & UX

During this project, I learned much about how to use figma and how to design UI elements. For my kiosk that I designed, I created an interactive map for an animal shelter that allows people to find and search for pets more easily. I went into the project with the aim to not only create an experience prototype, but to also try to create as much as the final product as possible, from designing the map to making the map kinda zoomable. I went in with pretty high ambitions as I do with most projects, and I think for once I actually came close to what I wanted to do. I basically created the whole UI and made it semi-functionable.

To make my prototype as functionable as possible, I signed up for the variant prototyping beta for Figma which allowed me to make it so things will change when you hover or click on them. This proved to be vital to my prototype, as it allowed for a more interactive experience for the user and made things feel much more responsive. In the beginning of the project I didn’t know much about the variants or components nor the prototyping, so I essentially had to start from scratch after I learned about them. If I did this project again I would use the components from the start as it would streamline my work by a ton.

This project taught me a lot about UI design as well as the program itself. Before I did this I never would have thought about how important it is to make things responsive and feel interactable, like buttons changing color when you click or hover, or making things look different if they’re buttons. One thing that I did notice when people were trying out my prototype, was that they were struggling to find thighs when they weren’t labeled, and in the future I would try to work this into my design better, so it's clear what each button does, rather than trying to make things as clean looking as possible. To better create a UI in the future I would also try to make things a little more intuitive, rather than having the map simply be the page you start on, I would also try to make it clear that that’s the case by labeling things and making the buttons more apparent.