Click here to view the Figma Prototype

The problem

Fallen Star is a suburban style blue house planted on a corner of UCSD's engineering building. Before the pandemic, visitors could take the elevator, look inside the house, and experience a unique sense of vertigo integral to the meaning of the art installation. However, as of recent times, the installation has been closed to the public and is only accessible via appointment.

‍

About the Project

‍For this project, I worked with a group of 5 (me included) to design and construct a kiosk that solved some kind of problem. We chose to tackle the inaccessibility of the Fallen Star art installation on the UCSD campus.

‍

User Research ‍

My group and I conducted surveys and various user interviews to identify the user needs that weren't being fulfilled. We found that many undergrad students on the UCSD campus wanted to visit the art installation, but didn't know how.

‍

‍

Prototyping

In order to fulfill this need, we constructed a panoramic view using Figma and also supplemented the experience with information about the artist's intentions and background.

‍

‍

In addition to the Virtual Tour, we added a section for booking appointments to the Figma prototype.

For the physical location and design of the kiosk, we mounted a small house on top of a simple and durable platform for the kiosk, and placed it within viewing distance of the art installation.

‍

‍

For the style guide of the UI of the kiosk itself, I first put together a moodboard for inspiration, and later pitched a suburban blue themed style guide to my team that shaped the final aesthetic direction.

For extra visual flair, I also illustrated animated icons, a looping animation of the house falling through the air, and the racoon mascot for the Figma.

User Testing

While testing the prototype, we found that users frequently didn't realize that the garden area outside of the house was a panorama, and could be dragged across in order to look around.

As a result, people would miss out on some of the info in the garden and would only have a limited view of the space. We remedied this in our final prototype with an animation that described the dragging motion.

We also found that users would try to exit from info overlays by tapping elsewhere on the scene. In our first iteration, users were required to tap on the information icon to close the overlay, but we updated it to be more flexible by closing the overlay if any place on the screen was tapped.

The Final Design

This is the assembled kiosk and the Figma prototype displayed on an iPad! Users seemed to enjoy the virtual tour, and multiple people asked us additional questions about making real appointments for the installation (a Figma prototype is still a prototype, after all).

This kiosk was a great opportunity for me to delve deeper into user research and involve myself in the process from ideation to prototype. I also gained a better sense of what prototype details were important in user testing and which weren't, e.g. using a tablet instead of a laptop for demos vs animating a keyboard in Figma.

‍

‍