Although most of my experience pertains to the design of user interfaces, I’ve had the opportunity to work on a variety of projects where I helped define what goes on under the hood. The knowledge I’ve gained from these experience has furthered my understanding about how systems work, which as made me a better practitioner of front-end UX.
This case study describes projects for the New York Hall of Science, Corcoran Sunshine, and Naked Juice where I helped define the inner workings of a system, how data moved through it, and how it manifested to users.
New York Hall of Science
Project Overview
The New York Hall of Science hired a team of professors and students from my graduate program to design and build tech-enabled playground games that taught scientific concepts to middle school students. We worked closely with NYSci curriculum development specialists to design games that met their learning goals.
Front-End Flow
Before arriving on site, teachers needed to register their students via an online portal. I designed a website that allowed teachers to create a profile and add students to their classes.
After arriving at the museum, the teacher would sign in via tablet. Each student would use the tablet to create their own profile and associate it with an RFID chip that would track their personal stats within the game. I designed this experience as well.
The first game involved going down a giant playground slide on different mats. The slide was rigged with sensors to collect data about speed and friction. The second game involved pushing a cart and using video capture to calculate inertia.
The data from these games were fed to the app so that the students could see their performance after each turn. The data was conveyed via a narrative that explained the related scientific concepts in terms of aliens trying to power their ship. I did the illustrations for the game.
Back-End Elements
In order for the games to work, the website, tablets, RFID chips, and sensors all had to be orchestrated. I worked closely with the professors who were handling the hardware and software to define the system architecture for the entire experience. I created diagrams that explained the database structure and showed which parts of the experience needed to push/pull data to/from the database at different points.
Corcoran Sunshine
Project Overview
Corcoran Sunshine had recently completed a new luxury condo development – 30 Park Place – and were looking for an impactful way to describe the neighborhood to potential investors. My team at Incredible Machines designed a projection that mapped onto an abstract sculpture of downtown Manhattan by Carol Egan.
Front-End Flow
The projection-mapped sculpture was the centerpiece of the building’s sales center. Agents would be able to control the projection in real time via a tablet as they described amenities and attractions nearby. The projection would have it’s own CMS that Corcoran could use to update visual assets and language as needed.
Back-End Elements
The content of the projection needed to be easy for the client to manage long-term. The CMS we created needed to accommodate some key pieces of functionality:
- Accept photo imports
- Associate titles and captions to the photos
- Plot the photos onto the sculpture in a way that aligned with the actual map of lower Manhattan as much as possible
I worked closely with the developers on my team to define the data and application architecture for the CMS and diagrammed it in a way that the client could understand.
I then wireframed the CMS and helped write the HTML and CSS to implement it.
Naked Juice
Project Overview
Naked Juice wanted to create an experiential installation that highlighted the ingredients included in two new products. My team at Incredible Machines designed and built an interactive vegetable garden full of the ingredients which grew in downtown Chicago for two months.
Front-End Flow
People could interact with the garden both in person and virtually. We had wired up the plants to behave like circuits, so we could trigger responses whenever a person touched a plant. Responses were both audio and visual – the plants emitted noises that conveyed their “mood” (which took into account environmental factors as well). Corresponding messages were displayed on digital signage. People could also engage virtually via social media – Tweeting at the garden with words like “water”, “rain”, or “thirsty” would turn on the sprinkler system. The entire experience was streamed live on the web for the duration of the project.
Back-End Elements
When designing the interactions between plants humans, we had to decide when a plant would give a certain response. I worked on the logic for when a plant would trigger different sounds and messages on the tablet signage based on the cadence of interactions and the presence of certain environmental factors.
I also designed the layout of the garden itself and how the hardware would be distributed throughout the enclosure. I had to consider where certain plants would sit in relation to the sprinklers, taking into account the fact that different plants need different amounts of water. Signage that used tablets needed to be near a power source, as did the speakers and web cam. I created diagrams that laid out the entire system for us to follow during install.
