
![](/portfolio/broker2broker/app_big.mp4)

![](/portfolio/broker2broker/revised_with_background.mp4)

## About Broker2Broker

In the world of commercial real estate, price comparisons (comps) are hard to come by. Unlike residential real estate, there aren't public [MLS listings](https://www.mls.com/) showing what's on sale or for lease, the price per square foot, and all the amenities to a building.

Today in the US, commercial real estate brokers have to be well connected to be able to share information with each other. One broker may have knowledge on certain properties but want more information about others for price comparisons. All this is commonly done via email.

One commercial real estate broker saw this opportunity to build a platform to make comp trading easier between brokers and needed UX expertise to build out his vision. Through the advice of the accelerator he was working with, he came to [Mutations Ltd](https://mutations.ltd/) with a vision and a PowerPoint presentation with mocks he made within PowerPoint.

With [Liana Ris](https://www.linkedin.com/in/liana-ris/)'s excellent project management skills and my UX education, we were able to provide [Broker2Broker](https://broker2broker.app/) with an interactive prototype they could bring with them to investor pitches.


## Designs

The designs and interactive prototype were made with Figma.

Two videos were requested, one to show the individual features of exploring and finding comps that could be traded, other brokers on the platform, and analytics of your own sales and leases. Then, there was the process of trading comps with another broker on the platform.

Design-wise, there was a master design with all the features then two additional designs for the two different sides of the trading process.

![](/portfolio/broker2broker/figma.jpg)
![](/portfolio/broker2broker/trading1.jpg)
![](/portfolio/broker2broker/trading2.jpg)

### Map Filters Iterations

Broker2Broker saw searching the map as the basis of its app. It's from the map from where you find comps to trade, get a better feeling of the landscape, find other brokers based on comps, etc.

We wanted to make sure we got the map and filtering right, so I made a few iterations:

| Drawer | Top bar | Full page search |
| -- | -- | -- |
| ![](/portfolio/broker2broker/map1.jpg) | ![](/portfolio/broker2broker/map2.jpeg) | ![](/portfolio/broker2broker/map3.jpeg) |

We went with a bottom pull-out drawer of filters. The most used filters would be at the top and simply pulling up the drawer would let you see all of them. Then after applying, you could pull it down to see the results.

---

Broker2Broker came to us as a new, untested idea with nothing more than a PowerPoint presentation. I can happily say that about 2 years after we worked with them, they are now funded and out of stealth, and they attribute much of that to my UX work:

> *We worked with Karina and her team at Mutations to prototype an app that we are developing for the commercial real estate industry. I would absolutely recommend Karina as we were very happy with her ability to take our concept and give it the professional look and feel that we had envisioned. In addition to the prototype, we asked her to put together a short video of how the app worked which was very helpful in our next steps to fully developing the app for commercial use. If you are trying to get an app out of the concept phase to something that is commercially viable and visually appealing, I would definitely recommend Karina and her team.* – **[Chris Crabtree](https://www.linkedin.com/in/ccrabtree/), Commercial Real Estate Broker and Founder of Broker2Broker**

> *Karina can help you turn an app idea into a design that developers can start building. She took our product concept - and powerpoint screens from my partner - and created a fantastic Figma design of our app as well as a demo movie. I plan on hiring Karina again in the near future.* – **[Jeff Starr](https://www.linkedin.com/in/jeffhstarr/), Principal & Founder at Growth Accelerators**


You can see the actual recommendations on [my LinkedIn](https://www.linkedin.com/in/karomancer/details/recommendations).

A low fidelity user experience flow to be used to pitch to VCs for a commercial real estate broker platform.

Broker2Broker UX Design


![Video of a tree with projection mapped or LED "leaves" showing varying information such as weather across the world](/portfolio/communitree/video.mp4)

How can ubiquitous computing engage and connect people to nature? We set out to answer this question by partnering with the [Pittsburgh Botanic Garden](https://pittsburghbotanicgarden.org/) to develop a concept for an interactive, ubiquitous art piece. The Pittsburgh Botanic Garden proved to be the perfect place in which to imagine future nature-based technology, as the site is still being developed as a public space. This provides the opportunity to create immersive, innovative experiences not yet seen in botanic gardens.


## Background

I took an Interaction Design Studio course as part of my [HCI undergraduate program](https://hcii.cmu.edu/) at Carnegie Mellon. Our final project for that class was a [Ubiquitous Computing](https://en.wikipedia.org/wiki/Ubiquitous_computing) experience. Our instructions was to explore and create an interactive experience in a space that does not currently use much technology.

Through a user- and garden-centered research process, we developed a concept for an interactive art display. Called the *CommuniTree*, it is a tree-shaped sculpture with leaves made of polycarbonate tiles. These leaves can change based on community behavior or artists' concepts. We developed scenarios around educating visitors on the areas of the world whose plants are featured in the garden, allowing visitors to share their experiences at the garden, and immersing visitors in stories inspired by the almost magical environment. We picked these themes because they are in line with the garden's mission statement.

## Research

Our team decided to investigate the use of technology at public parks in order to develop a ubiquitous computing system concept to support the outdoor experience.

![Slide deck of research findings about dog parks](/portfolio/communitree/researchFindings.pdf)

Ultimately, we chose to focus on the needs of the Pittsburgh Botanic Garden because the site is still being developed. The needs and behaviors of the space are still emerging and a UbiComp system could enhance the environment in unexpected ways.

We also identified extreme users for the botanic garden. These included people not there by choice (significant others, children, etc.), people with mobility issues (injured, elderly, etc.), frequent visitors, botanists, and gardeners.

| | |
| -- | -- |
| ![Photograph of index cards sorted into piles](/portfolio/communitree/forest.jpeg) | ![Photograph of index cards sorted into piles](/portfolio/communitree/gardentour.jpeg) |

## Ideation

With our intended space in mind, we went to work on developing a suitable ubiquitious computing garden installation.

### Rapid Prototyping

We rapidly developed more than 50 ideas:

1. Holographic docents
2. Harry Potter style posters to replace plaques
3. Evolutionary Pokédex
4. Pet rock to lead you around
5. *AR system*: Blaze a trail / leave breadcrumbs
6. Sentient plant friends
7. Interactive adventure story involving Mr. Oak, a sick tree. Find the right nutrients to help him out.
8. **Longer-form interactive experience**; not points or badges, but players come back multiple times (maybe 1-2 visits in each season) to experience the whole thing.
9. **Build an Ecosystem**: Exploratory puzzle experience to literally see the interdependent complexity of the local ecosystem.
10. **The Memory of the Land**: multi-layered AR visualization of the history of the area
11. Tranquil, natural experience: removes all plaques and signs, and you can wave a small thing (like a Mobil Speedpass) at a tree or plant if you want to see or hear about it.  If not, you can wander without seeing any non-natural artifacts.
12. **Tree Family Tree**: Finding activity that teaches you to “see” the forest as more than a bunch of trees that are basically all the same.
13. “Ad” for volunteer work that sits next to an invasive species and shows it springing up in time lapse to choke a tree…unless you help!
14. *Collectibles* (e.g. leaves) that can be scanned in the lobby at the end of the day to show a heat map of where you must have gone in the garden.
15. Visualization of volunteer work that went into each part of the garden. Perhaps visible “ghosts” of volunteers.
16. **Coal fairies**: “unlock” them by doing some task to clean up the area. The artifact could be amber-like.
17. Detect your personal background from the soil on your shoes; connect your background to the history and future of the space.
18. Trees separate to show you the path or some kind of illumination to create a path.
19. Pick out which tree doesn’t belong and use it to teleport to a different woodland.
20. Find a combination of plants/trees to make something, like a spell.
21. **DIY story** - track where you’ve been at the end of the visit.
22. Link to pen pals in Pangaea connected countries.
23. Connect trees you see with tree from your home neighborhood (based on info it knows about where you live, soil, etc).
24. Learn to grow something at home garden based on what you learn in the botanic garden.
25. Tie plants in the garden to foods that the person might eat.
26. Photos get automatically logged and geotagged and displayed in an online billboard.
27. Ability to ask questions and get answers about plants/wildlife in real time.
28. **Family-based quests**. Family members can race to find geocached virtual items with relevance to the site.
29. *In-context guidance for novice photographers*. Help photographers frame photos, focus, adjust settings with explanations.
30. *AR system*: Tour guide
31. Have a system vibrates when user is near an invasive species and encourages him/her to remove it. Potentially make into a competition amongst visitors.
32. Take an item/leave an item perpetual time capsule. People bring something to put in the garden and are tasked with finding something else left behind previously (could be really old if you project out to the future).
33. Enhance serenity with exercises in yoga or tai chi in appropriate parts of the garden by stepping onto serenity stones that walk you through relaxing exercises.
34. Virtual RPG in fairytale garden in which players are given a character and have to find clues based on knowledge of plants to complete the story line. Stories are based on classic fairy tales.
35. **Gardening game**: kids get virtual directions as they plant items in a garden in a competitive setting. The game would embed concepts from math and biology into the activity.
36. **Memory book**: come back to spots where you’ve had memorable moments at the garden and relive them with in-context photos, audio, ghost self (e.g. relive your wedding/engagement).
37. **Self babysitting**. Allow kids to wander by themselves while the system monitors them.
38. **Sensory souvenirs**. Ways to collect smells, sounds, and virtual pieces of the garden to take home.
39. **AR for Halloween**: Turn the forest into a haunted experience
40. **Walk buddies**: Find new friends to visit the botanic garden with? Could be for the elderly.
41. Alerts that spontaneous volunteering tasks are available/
42. Giant game of tag.
43. Transmit a texture in the garden to someone who’s not there.
44. *AR system*: Recognition and tagging of plant/tree types for learning
45. See the garden from the eyes of a small animal, from the top of a tree, etc.
46. Tree bingo.
47. *AR system*: Show unseen things (like underground limestone filtration tank)
48. Tour guide Fixtures: Not on a tour? Scarecrows or trees that can let you know what’s going on.
49. Alchemy apprenticeship.
50. Quest Map.
51. **Wild goose chase / Alice in Wonderland**: Installations/some plants have personalities and send kid on a task to find another plant. Personify plants and let them talk about themselves in an amusing, more human way while still educating kid) this is kind of like an idea above.
52. **AR LARPing Herbalism**: If you’re LARPing and you need to heal, etc., have some sort of device show you to a plant to treat your condition (e.g. Aloe treats burns, Willow bark treats pain).
53. Hub community building at Family Moments spots. For example, a device pairs people up and gives instructions on composting activity.
54. *AR system*: Animate things: fairy tale characters, show a different season. “The glasses let you see the magic and magical creatures here.”

## Affinity Diagraming

| | |
| -- | -- |
| ![Photograph of index cards sorted into piles](/portfolio/communitree/rapiddesign.jpeg) | ![Photograph of index cards sorted into piles](/portfolio/communitree/affinitydiagram.jpeg) |

In order to help focus our ideas, we used an affinity diagram to identify common audiences or types of activities.

We discovered the following groups:

- Education/Educational Games*
- Kids
- Personalization
- Collecting
- Pathfinding*
- Displays
- Sensory Experiences (nature is inherently more sensory)
- *Voluntainment*: The botanic garden needs volunteer support to run as a not-for-profit
- *Tour guide needs*: Tour guide effectiveness drives a visitor experience*
- Experience/adventure*
- Interacting with others*

**Categories with asterisks next to them represent topics we chose to pursue in the next phase: storyboarding.*

## Storyboarding

### Round 1

![Illustration of a blonde character learning to treat a wound with a plant she found](/portfolio/communitree/storyboarding.jpeg)

We developed 15 storyboards around the groups we decided to focus on, and we did speed dating rounds with three CMU students. Based on their reactions, we discarded two concepts and refined and combined the rest of our ideas into 11 new storyboards. 

The Pittsburgh Botanic Garden was not yet open to the general public, but guided tours of the Woodlands of the World section of the garden were available on select dates. The team went on two tours of the garden and interviewed expert tour guide, Frank Gricus.

Additionally, the team interviewed the garden’s Director of Development, Kitty Vagley. She explained the longterm vision of the garden, including its mission to educate, preserve the land, and display nature. 

We presented her with some of our early concepts and got her feedback about the garden’s desire to innovate in the domain. 

### Round 2

We refined our storyboards based on the first round of testing and developed 11 storyboards around three major themes:

**Immersion**
- Augmented History
- Squirrel Vision
- Breadcrumbs
- LARPing

**Education**
- Pet Rock
- Invasive Species Alert
- Nitrogen Cycle Game (2)

**Community**
- The Giving Forest
- Home Gardening
- Official Gardening App

For this round of speed dating, we recruited visitors at Phipps Botanic Garden and in the vicinity. The third round of speed dating included nature lovers from Pittsburgh and Washington DC, as well as a former camp counselor and a local LARPer.

## User testing

Twenty speed daters ranged from young children to grandparents. We interviewed botanic garden visitors as well as other likely visitors to botanic gardens in Pittsburgh and Washington, DC. Extreme users included a child who hated plants and bugs, a family of farmers, and a reluctant visitor to the garden.

![Photograph of two people talking over mocks printed on paper](/portfolio/communitree/usertesting.jpeg)

### Four Major Insights

1. *No one trusts kids, even in safe environments:*

> “[Breadcrumbs] is good for troubleshooting, but would definitely not let her kids out of her sight.” *– Grandmother, birder, and gardener*

> “A person who is bored with the tour would probably drop the rock and miss the call to the bus.” *– Phipps visitor*

2. *It is important to not detract from the flow of exploring the garden:*

> “I have technology all week. When I come to a garden I want to turn my brain off.” *– Phipps visitor*

> “The interactivity is between you and the garden not you and the device which I like. It’s not about you using some thing.” *– Reluctant Phipps visitor*

3. *It might be nice to create an experience that extends beyond the botanic garden:*

> “I’m not sure if people come back to botanic gardens regularly, but I’m certain that with this app they would.” *– CMU Student*

> “I really want to plant native species in my yard (that I don’t have) now! I could see nature appreciation clubs spawning from this” *– CMU Student*

4. *Augmented Reality may damage immersion:*

> “I birdwatch, so I find this interesting…but I’m not sure I’d want to see from their perspective though.” *– Grandmother, birder, and gardener *


### Takeaways

Our results were pretty mixed. People were hesitant to agree to technology that was too invasive. They did not like overlays on the land or glasses. 

People like getting information about gardens, but it’s difficult to convey that information without using a screen of some sort, be it a virtual one or a physical one on a phone. 

Speed daters did like immersive experiences.

Because there was no overwhelming winner amongst our ideas, we plan to revisit some ideas to increase immersion without having too much obvious technology. We’re thinking about ways to reduce the number of screens used while continuing to create a meaningful experience. This may include using devices that vibrate, produce light, or make noise.

Our plan is to refine our best immersive ideas, do a quick round of testing, and make a final decision by Thursday.

### Finding inspiration for immersion

As we began to iterate based on our data, we wanted to make sure our  UbiComp system enhances the immersive experience, supports the garden’s goals, and works in an “opt-in” fashion that will not upset those who do not want intrusive technology. 

We found inspiration in [Aaron Koblin’s work](http://www.aaronkoblin.com/). The [eCloud project](http://www.aaronkoblin.com/project/ecloud/), which used polycarbonite tiles to create a changeable art piece, was particularly helpful.

## Final ideation

Upon reviewing our data, it became clear that a major motivator for visiting botanic gardens was to see special art exhibits. We brainstormed ways to use the polycarbonite tiles in the garden to create a permanent art exhibit that reflected the garden’s values and could also change in order to entice people to return to the garden.

CommuniTree is a sculpture that mimics the shape of a tree. The leaves are polycarbonate display panels, and there is an interactive display panel on the trunk of the tree. It is flexible and adaptive in that new digital content can be created and added at any time.

### Functionality

We created storyboards to demonstrate the tree’s functionality. We focused on three ideas: education, connection, and inspiration.

#### Education

In this scenario, a family discovers the CommuniTree in the Asian Garden. It shows the weather in Japan and illustrates the connection betweengardens in Pittsburgh and Japan that share the same plant life. 

| | |
| -- | -- |
| ![Illustration of a character looking at a tree with LED screen leaves showing lightning](/portfolio/communitree/education1.jpeg) | ![Illustration of a character reading information about weather in Fukuoka on an LED screen on a tree trunk](/portfolio/communitree/education2.jpeg) |


#### Connection

The CommuniTree enhances social interactions between visitors over time by collecting photos left by garden visitors. Guests can add their own photos or just look at the display on the tree.

| | |
| -- | -- |
| ![Illustration of people looking at photos of plants on LED screen leaves on a tree](/portfolio/communitree/connection1.jpeg) | ![Illustration of people holding up their phones to transfer their pictures to a tree with LED screen leaves](/portfolio/communitree/connection2.jpeg) |

#### Connection

The CommuniTree enhances social interactions between visitors over time by collecting photos left by garden visitors. Guests can add their own photos or just look at the display on the tree.

| | |
| -- | -- |
| ![Illustration of a little character with a beret drawing in front of a tree](/portfolio/communitree/inspiration1.jpeg) | ![Illustration of a group of people gathered around a tree with an LED screen on it reading "Once upon a time..."](/portfolio/communitree/inspiration2.jpeg) |

## Concept Video

With the help of some enthusiastic students at Carnegie Mellon, we created a concept video to demonstrate the CommuniTree’s features and interactions. 

We scouted locations, created cardboard cut outs to simulate the tiles, used live actors to demonstrate interactions, and Adobe AfterEffects and Premier to add special effects. 

### Scouting for video location

Because the Pittsburgh Botanic Garden is not easily accessible, we scouted locations at nearby parks. Ultimately we chose a tree in Schenley Park. 

![Photograph of a man in an orange shirt climbing a tree](/portfolio/communitree/scouting.jpeg)

### Setting up Communitree

Once we found the location, it was time to shoot our concept video!

![Photograph of a man and a group of students looking at a script](/portfolio/communitree/process4.jpeg)

![Photograph of a girl tying string onto orange rectangles](/portfolio/communitree/process1.jpeg)
![Photograph of a tree with hanging orange rectangles](/portfolio/communitree/process3.jpeg)
![Photograph of a woman in a tree laughing while holding a camera](/portfolio/communitree/process6.jpeg)
![Photograph taken from a tree looking down at a woman laughing while holding an orange rectangle](/portfolio/communitree/process5.jpeg)

### Final video

The final video was made in Adobe AfterEffects and Premiere.

![Video of a tree with projection mapped or LED "leaves" showing varying information such as weather across the world](/portfolio/communitree/video.mp4)

An adaptive art exhibit combining technology with nature that educates, connects, and inspires visitors to interact with trees in a botanic garden

CommuniTree


![The team playing it at Wonderville](/portfolio/cosmic-courier/wonderville3.mp4)

![Interview video from the ITP showcase](/portfolio/cosmic-courier/interview.mp4)

For my New Arcade class at ITP, our final was to create a full Unity game and arcade cabinet. I worked on the controllers as well, but given this is Dribbble, I'll only show the art assets I made.

In our game “Cosmic Couriers”, you play cooperatively as a team of 3 on a ship making deliveries. Your goal as a team is to make as many deliveries as you can to the astronauts with flags before being defeated by the dangers of space.

The arcade cabinet itself is shaped like a pirate ship and has 3 stations for your teammates: one captain and two cannoneers. **The Captain** is in charge of maneuvering the ship away from enemies and to waiting customers. The two **Cannoneers** are tasked with taking down enemies that threaten your delivery operations.

I was personally in charge of defining art direction and making in-game assets. I also worked on the physical cannon controllers and exterior design via CAD and 3D printing.

## Asset Design

### Background Assets

To a space pirate, space is the ocean! So it only makes sense that in a game about space pirates, the backdrop should be a combination of ocean and space.

I created a base layer in Photoshop with compositing ocean and space photographs. Then I created illustrations of ocean ripples and waves and used that as a mask over my rasterized texture, then made my own star brush in Illustrator and finished it off with space details.

I did this a few times, and some of the results were trippier than I bargained for, but I'm largely happy with where it ended up!

![An illustration of a starry background with an ocean like pattern](/portfolio/cosmic-courier/starmap_1.jpeg)
![An illustration of a starry background with a wave like pattern](/portfolio/cosmic-courier/starmap_2.jpeg)
![An illustration of a starry background with trippy magenta stripes](/portfolio/cosmic-courier/starmap_3.jpeg)

### "Player" design

In space, the placement of masts or solar sails can be either on the top, the sides, or the bottom of the ship. That opened a lot of opportunity to put sails in non-traditional places. So initial thoughts were ships that resemble fish or sea animals like fish or narwhals.

![Sketches of fish themed pirate ships](/portfolio/cosmic-courier/sketches.jpeg)

When illustrating the ship in Adobe Illustrator, I started with the basics of the shape of the ship and the cannon placement.

The players control the cannons separately, so it was important they're visible. 

Then we had to think a bit about this world...do the ships need bubbles for oxygen over them? Do people primarily stay inside the ship or come out with astronaut suits?

We decided on the latter, and ditched the air bubble. Fins and solar sails came later, and visually act as a rudder.

![Different stages of illustrations of ship sprites](/portfolio/cosmic-courier/shipdesign.jpeg)

### Enemy Design

Our game had 3 main enemy types: 
- A police ship that chases you 
- A turret that turns to fire but is otherwise stationary
- A pirate ship that patrols an area and attacks you if you fall into its path

Each of these elements have rotating elements that have to be attached and controlled via Unity.

I chose to make the ship modernized in comparison to the others. When I think of pirates, I think of a rag tag crew that may not have the most advanced technology, whereas the police probably have corrupt funding. Maybe that's just my thinking.

The turret on the asteroid had to be distinguished from other asteroids. So I adjusted the color to be more blueish, while future asteroids were more gray.

Since you are also a pirate-like ship, the pirate ship had to be very distinct (and clearly a bad guy), so I decided to go with a red and black scheme. Since sails are showing up as fins, it made sense to do the usual skull pattern on the "fins".

![Different enemy sprite designs from cannons to enemy pirate ships](/portfolio/cosmic-courier/enemydesign.jpeg)

### Asteroids

The player needs obstacles, so what better obstacle to have in a game about space pirates than asteroids? I only illustrated four, then we programmatically scattered and adjusted color tints and sizes in Unity to give the illusion of more variety.

![Different asteroid illustrations](/portfolio/cosmic-courier/asteroids.jpeg)

### Space Chicken Pickups

The players are a ragtag group of pirates that are smuggling exotic space chickens across the galaxy.

In real life, pirates would often smuggle exotic birds, so perhaps in this universe, a chicken is exotic. I suppose it might be if farms are no longer a thing.

If the players' ship gets hit, there's a random chance that part of their chicken cargo will go flying into space and they have to retrieve it if they want to get full dubloon points at the end of the level.

Drew a few frames of the chicken trying to fly through space.

![Spritemap of a chicken with an astronaut helmet flapping](/portfolio/cosmic-courier/spacechickens.jpeg)

### Customers

In our game, the players have to smuggle space chickens to hungry customers across the galaxy.

We decided the customers would all be isolated astronauts on small, themed planets. Each customer holds up a flag with a picture of a space chicken on it.

Several themed planets are in the works, but only two so far have made it into the game.

![Illustration of little astronauts holding flags on themed planets](/portfolio/cosmic-courier/customers.jpeg)

### Skull & Crossbones

What is a smuggler/pirate game without some sort of skull and crossbones?

Because we're talking space pirates, I thought it would be funny if the crossbones also had an astronaut helmet.

Similarly, we decided that the point system in the game should be number of doubloon you get from your customers for successfully delivering space chickens. Used that skull and crossbones base to create a doubloon.

![Illustrations of adorable skulls in astronaut helmets](/portfolio/cosmic-courier/skulls.jpeg)

### Tutorial screens

Lastly, with all the assets made, we need to have a series of instruction screens like any good arcade game.

![Illustrations of tutorial screens](/portfolio/cosmic-courier/tutorialscreens.jpeg)

## Progress by group

While I was making assets, here is progress done by the entire group with my design input.

### Cabinet design
Kay and I really wanted the cabinet to resemble a pirate ship.

We were deciding together the shape the arcade cabinet would take. Taking inspiration from other popular co-op games we thought about whether it should have different sections like the Simpsons or Mutant Ninja Turtle games, and/or a sit down cocktail cabinet like multiplayer Pacman. 

We eventually decided a sit down table in the shape of a ship with the head of the table as the captain's chair and the other two as cannoneers

Sketches and CAD model by Kay:

![CAD model of a tabletop arcade cabinet in the shape of a boat](/portfolio/cosmic-courier/shipcad.jpeg)
![Sketch of an upright arcade cabinet](/portfolio/cosmic-courier/shipsketch2.jpeg)
![Sketch of a tabletop arcade cabinet](/portfolio/cosmic-courier/shipsketch3.jpeg)
![Sketch of an tabletop arcade cabinet in the shape of a boat](/portfolio/cosmic-courier/shipsketch.jpeg)


### Game design
I largely had nothing to do with this aspect other than provide my feedback on how the ship should move and the mechanics of the cannons.

Because the person sitting at the end is physically steering a wheel, I worked with Armando and we decided it made sense for the wheel to control the rotation of the entire world rather than the player ship asset itself:

![Video of boxes moving across the screen shooting red bullets](/portfolio/cosmic-courier/gameprogress1.mp4)
![Video of an ocean background rotating with boxes on top shooting red bullets](/portfolio/cosmic-courier/gameprogress2.mp4)

## Ship wheel

While Kay fabricated the wheel, Daniel and I worked on the controller itself with sensors and code. Though it sounds simple, what took awhile was figuring out how to make it work like a ships wheel. If you turn a ships wheel, it adjusts a rudder which permanently causes the ship to go in that direction until you change the position of the wheel.

In most video games, as soon as you release a wheel or key, it resets to stasis. We had to program our controller to continue to send key presses if the player had not reset the position of the wheel. 

![Video of spinning a ship wheel and seeing output on a screen](/portfolio/cosmic-courier/shipwheel.mp4)

## Cannon Controller

### Prototyping

In addition to assets and the wheel, my top priority was creating the physical controllers the cannoneeers would use on either side of the cabinet.

To figure out the ideal player interaction, I did some silly prototyping with Coke cans. My first two ideas was a modern turret like shooting experience (left)and gatling gun crank (right):

![Video of cannon cardboard prototypes](/portfolio/cosmic-courier/cardboardcannons.mp4)

I wasn't sold on either of these ideas, so what I prototyped next was to create a CAD model of a cannon to print on a platform with a handle that a player would use to swing it 180º as it sits on a potentiometer. The players would control the opposite sided cannons in this fashion.

I also made alternative models with the handles on either side, like the turret style from before.

![CAD model of a cannon on a disk with a handle sticking straight up](/portfolio/cosmic-courier/cannoncad1.jpeg)
![CAD model of a cannon on a disk with a handle sticking straight up](/portfolio/cosmic-courier/cannoncad2.jpeg)
![CAD model of a cannon on a disk with a handle sticking straight up](/portfolio/cosmic-courier/cannoncad3.jpeg)

![Video of a green haired woman with glasses with small 3D print prototypes of a cannon](/portfolio/cosmic-courier/cannonsmallprint.mp4)

### Final design

The final cannon design was 3D printed in black PLA and painted and screwed onto a CNC'ed wood. The handle was also 3D printed and screwed on from below. The cannon was removable from its base and could be moved up-and-down freely.

The bottom of the wood had a ring of felt to help a bit with scratches.

![3D print of a partly assembled miniature cannon](/portfolio/cosmic-courier/cannonprint2.jpeg)
![Video of a miniature cannon being moved around](/portfolio/cosmic-courier/cannontest.mp4)
![3D print of a partly assembled miniature cannon](/portfolio/cosmic-courier/cannonprint1.jpeg)

## Final Playtests

The final playtests before full assembly and showcasing it at Wonderville. Only 1 cannon was made at this point.

![The team testing the game out before putting on the legs](/portfolio/cosmic-courier/playtest.mp4)

![Video of the team demo-ing it for class](/portfolio/cosmic-courier/final.mp4)

## Wonderville NYC

This cabinet, alongside others in the class, were showcased at the indie arcade bar, [Wonderville](https://www.wonderville.nyc/), in Brooklyn.

![The team playing it at Wonderville](/portfolio/cosmic-courier/wonderville1.mp4)
![The team playing it at Wonderville](/portfolio/cosmic-courier/wonderville2.mp4)
![Screenshot from the game showing the player taking damage from a pirate](/portfolio/cosmic-courier/screenshot1.jpeg)
![Screenshot from the game showing the player taking damage from a pirate](/portfolio/cosmic-courier/screenshot2.jpeg)

---

You can see all the code, both Teensy (me + Daniel) and Unity (Armando) at

[Github](https://github.com/karomancer/spacepirates)

A 3-person co-op game in which players play as a space pirate crew navigating across the galaxy using alt controllers.

Cosmic Courier



![AR.mp4](/portfolio/desert-dream/AR.mp4)

For our class *Hypercinema* we had to create an interactive animated experience in AR.

We decided to do a little experimentation and wanted to create a pop-up book of surreal worlds that came to life via AR. Around the time we started this project was when AI image generative tools like Midjourney and DALL-E were released and gaining popularity, so we thought, why not leave the imagery to those tools and use its creations as inspirations for the animation work?

So first we have to decide what type of papercraft best contrasts the new-age technology of AR but is still achievable with our skillsets?

## Choosing a form factor

Because we had several options for each of our scenes, we wanted papercraft options that allowed for several scenes. Thus we thought of…

![A photograph of a popup book with a castle emerging from two pages](/portfolio/desert-dream/Untitled.png)
![A photograph of a 5-sided carousel book with winter scenes](/portfolio/desert-dream/Untitled%201.png)
![A photograph of a tunnel book with a scene of a dragonfly and flower](/portfolio/desert-dream/Untitled%202.png)

- **Pop-up Book**.
Pop-up books are a childhood favorite. Each scene could be a different spread of two pages. The only problem? They’re very hard to architect and none of us had ever made one before.
- **Carousel Book**.
During our search, we ran into carousel books, which we thought looked perfect! Though, after talking to our professor, Marianne, we found out these were also very hard to architect because of the angles involved between each of the points of the star.
- **Tunnel Book**.
Marianne suggested a tunnel book. These were getting closer to what we needed, but one thing we were concerned about with tunnel books is because of its accordion like structure, the layers aren’t always a predetermined distance apart. We were worried that this might make it more difficult to “map” the layers in AR.

### Winning Idea: Paper Theater

Ding ding ding! We have a winner!

![A photograph of a My Neighbor Totoro paper theater](/portfolio/desert-dream/Untitled%203.png)

A paper theater has all the simplicity and effect a tunnel book does, but with rigid layers are separated via spacers and are consistently the same distance apart. It makes it less collapsible, but it fit our need nicely.

## Scoping down

The original plan included different AI interpretations of 3 surreal landscapes: Forest, Ocean, and Desert.

Given our time constraints, we needed to scope down. We went from 8 scenes to 5, to 3, to 2. We stuck with a day and night vision of a surreal desert biome.

Here are some of the assets for the scenes we descoped. I largely focused on creating backgrounds using Midjourney as a base and DALL-E's outpainting tool, while Jess and Alfonsette focused more on the creatures and props:

![A surreal and dreamy forest landscape where the tree canopies become part of the sky](/portfolio/desert-dream/runner-ups/forest_background_C.png)
![Surreal looking jellyfish shaped mushrooms](/portfolio/desert-dream/runner-ups/mushroom_jellies.png)
![A set of colorful mushrooms](/portfolio/desert-dream/runner-ups/mushrooms_orange.png)

![A long landscape of an enchanted forest with magenta foliage](/portfolio/desert-dream/runner-ups/forest_background_b.jpg)
![An illustration of a glowing blue tree](/portfolio/desert-dream/runner-ups/blue_tree_2.png)
![A magestic looking stag with glowing antlers](/portfolio/desert-dream/runner-ups/DALL-E_deer.png)

![A landscape of a haunted forest with deep magentas](/portfolio/desert-dream/runner-ups/forest_background_a.jpg)
![A magical forest octopus](/portfolio/desert-dream/runner-ups/DALL-E_octopus.png)
![A 4-up of several kodama-like mushroom forest spirits](/portfolio/desert-dream/runner-ups/kodama2.png)

Given just two scenes, we concluded our paper theater would be in the form of a big 12 x 18 inch storybook, with a 12 x 12 inch top square for the day desert, and a 12 x 6 inch bottom rectangle for the night desert.

## Generating the assets

We actually chose the one biome we had no assets for yet and decided to make it a truly collaborative process.

### Day Desert

The joy of using AI to create assets is that you’ll never know what it’ll produce.

Jess wanted to make flying camels, and assumed the camels would have wings, but instead DALL-E decided to make superhero and helicopter camels. Here are a few favorites. Just look at how delighted they are to fly!

![A flying camel with very long helicopter blades, generated and extended using DALL-E](/portfolio/desert-dream/DALLE_2022-11-02_16.12.59_-__helicopter_blades_on_a_flying_camel_photorealistic_uhd.png)
![A flying Camel A](/portfolio/desert-dream/DALLE_2022-11-02_23.42.38.png)
![A flying Camel B](/portfolio/desert-dream/DALLE_2022-11-02_23.42.32.png)
![A flying Camel C](/portfolio/desert-dream/DALLE_2022-11-02_23.42.24.png)

I worked on plant life, so went with succulents and palm trees. Using Midjourney, I ended up with some photorealistic succulents that looked like animals in disguise, and a very neon looking succulent pretending to be a palm tree.

Using DALL-E's outpainting tool, I was able to take my Midjourney palm succulent and extend it further.

![This looks like a happy crab](/portfolio/desert-dream/dinosaur_succulent1.png)
![This looks like an angry crab](/portfolio/desert-dream/dinosaur_succulent2.png)
![Originally we were going for bioluminescent palm trees](/portfolio/desert-dream/karomancer_bioluminescent_desert_oasis_palm_trees_with_cacti_ne_660fdce6-0c07-4987-8992-2818b6b33bc8.png) 
![Top of the succulent tree generated with Midjourney, the trunk extended with DALL-E](/portfolio/desert-dream/DALLE_2022-10-30_19.51.36_-_photograph_of_a_succulent_desert_palm_tree_with_cyan_and_magenta_leaves_and_spikey_bark.png)

Alfonssette was in charge of the background. She tried a few styles before settling on something more realistic. Our final day landscape, followed by two runner-ups

![A near photorealistic looking desert with dunes of sand](/portfolio/desert-dream/daytime_photorealistic_desert_day_time_whimsical_dreamy_42f08c76-c852-4cef-9fd1-a06f53c64865.png)
![A surreal looking desert landscape with stippled trees and a sunset](/portfolio/desert-dream/sunset_illustration.jpg)
![A surreal desert landscape with porous trees that resemble sponges](/portfolio/desert-dream/desert2.png)

### Night Desert

We did the same process with the night one. We all really wanted bioluminescent lizards and flowers. 

Lizards created with DALL-E, flowers by Midjourney.

![We all really wanted bioluminescent lizards and flowers. Lizards created with DALL-E, flowers by Midjourney](/portfolio/desert-dream/lizards.png)
![Alfon_Medina_irregular_glowy_flowers_growing_from_the_ground._M_07c1344f-a34d-493a-89a1-008812b7d364.png](/portfolio/desert-dream/Alfon_Medina_irregular_glowy_flowers_growing_from_the_ground._M_07c1344f-a34d-493a-89a1-008812b7d364.png)
![Alfon_Medina_irregular_glowy_flowers_growing_from_the_ground._M_f2868704-1c68-40fa-8c7e-782925f86119.png](/portfolio/desert-dream/Alfon_Medina_irregular_glowy_flowers_growing_from_the_ground._M_f2868704-1c68-40fa-8c7e-782925f86119.png)


Our final night landscape, followed by two runner ups

![Our final landscape](/portfolio/desert-dream/Night_desert_final.png)
![desert1.png](/portfolio/desert-dream/desert1.png)
![desert 3.png](/portfolio/desert-dream/desert_3.png)

## Composition & Layering

We decided we wanted each of the two scenes to be 4 layers deep. The background would be cut into 3-4 layers, and the layers would be:

- 1st layer has foliage and an animal
- 2nd layer has an animal
- 3rd layer is the horizon
- 4th layer is just sky

### **Day time desert**

Our final day composition and the silhouettes of its layers, image traced in Adobe Illustrator, ready to be laser cut:

![testdesertstage.png](/portfolio/desert-dream/testdesertstage.png)
![Silhouettes of layers](/portfolio/desert-dream/Untitled%204.png)
![Untitled](/portfolio/desert-dream/Untitled%205.png)
![Untitled](/portfolio/desert-dream/Untitled%206.png)

### **Night time desert**

Our final night composition and the silhouettes of its layers, image traced in Adobe Illustrator, ready to be laser cut:

![Finaltest_nightdesertstage.png](/portfolio/desert-dream/Finaltest_nightdesertstage.png)
![Silhouettes of layers](/portfolio/desert-dream/Front_night_desert.svg)
![middle.svg](/portfolio/desert-dream/middle.svg)
![middle bg .svg](/portfolio/desert-dream/middle_bg_.svg)

## Importing into Adobe Aero

Before fabricating the final paper theater, we wanted to make sure the assets worked well together in Adobe Aero. We did a little test drive of the composition and animations.

![Video of testing the helicopter camel in Adobe Aero](/portfolio/desert-dream/VID20221109231133.mp4)
![Screenshot of moving things in Adobe Aero](/portfolio/desert-dream/IMG_3037.png)
![Screnshot of a camel floating in space](/portfolio/desert-dream/IMG_3041.PNG)
![Screenshot of the view from a camera of a woman holding up a picture in AR space](/portfolio/desert-dream/IMG_3039.png)

We used the laser cutter to make a quick prototype of the day desert out of cardboard to make sure the layers would work

![original_cd1d57b9-5912-4f27-9909-8860708bbebf_PXL_20221106_015105434.jpg](/portfolio/desert-dream/original_cd1d57b9-5912-4f27-9909-8860708bbebf_PXL_20221106_015105434.jpg)

## Final Fabrication

Once we agreed on a proof-of-concept, it was time for fabrication!

I went home to San Francisco for Halloween and grabbed paper at my favorite stationary/paper store: Flax!

They had so many types of papers with different weights! We ended up buying 2 different types of cardstock paper for the "pages". We're no experts at papercraft, so we used both to test out which was more suitable and rigid for a paper theater. The recycled paper they had was affordable with a nice "old" texture to them, so we also purchased 4 different colors of recycled paper for the book covers.

![Photograph of drawers full of paper](/portfolio/desert-dream/PXL_20221101_002933573.jpg)

We set to cut out our layers out of the cardstocks as outlined in Adobe Illustrator files. For both day and night, we were married to the laser cutter.

![Photograph of a green haired woman waiting for the laser cutter](/portfolio/desert-dream/IMG_3142.jpeg)
![Photograph of two girls making funny faces while holding up laser cut papers like a picture frame](/portfolio/desert-dream/IMG_3141.jpeg)
![Photograph of a laser cutting cardboard spacers](/portfolio/desert-dream/IMG_3152.jpeg)
![Laying out the layers](/portfolio/desert-dream/PXL_20221110_025938798.jpg)

We glued cardboard frames to the back of the cardstock to make it more rigid plus added stacked cardboard spacers in between each layer to give that paper theater look.

![Gluing the cardboard spacers onto the laser cut sheets](/portfolio/desert-dream/PXL_20221110_042644394.jpg)
![Two women discussing the construction of the book while holding up layers](/portfolio/desert-dream/IMG_3144.jpeg)
![Determining proper spacing](/portfolio/desert-dream/IMG20221109234004.jpg)
![IMG20221109234010.jpg](/portfolio/desert-dream/IMG20221109234010.jpg)

At some point we started going delirious at 2:00am and started making the book cover. I realized we mismeasured because a book's cover is actually larger than the pages within it, and my teammates weren't sure it was worth the effort to start over. At this point, we were seriously doubting our ability to make it look like a book at all.

![Two women discussing how to make the project look more like a book](/portfolio/desert-dream/IMG_3153.mov)

Honestly though? It was worth the extra effort because it really does look like a book!

![IMG20221110034206.jpg](/portfolio/desert-dream/IMG20221110034206.jpg)

![…I think it looks pretty book-like, no?](/portfolio/desert-dream/IMG20221110034211.jpg)

…I think it looks pretty book-like, no?

![Late night success!](/portfolio/desert-dream/IMG20221110052427.jpg)

Late night success!

## Playtesting

We had a playtesting session in our class, through which we got valuable feedback. Of course, we're biased to love the "oo's" and "ahh's" more than the critical feedback!

![Reactions from the “public” for the interactive book](/portfolio/desert-dream/IMG_3154.mov)

Because we had several colors of recycled paper, we decided to use the other colors for decoration, including lining the inside and adding a rope to tie it closed.

![Final working prototype](/portfolio/desert-dream/PXL_20221110_171727539.mp4)


## Documentation Lab

The efforts didn't stop at the playtest!

At the suggestion of our classmates, we brought our book to the documentation lab and got these beautiful shots.

![Some nice shots of the fabrication](/portfolio/desert-dream/2V3A4331.jpg)
![2V3A4333.jpg](/portfolio/desert-dream/2V3A4333.jpg)
![2V3A4340.jpg](/portfolio/desert-dream/2V3A4340.jpg)

The #1 thing we learned from this experience is that Alfonssette has the most beautiful hands

![The #1 thing we learned from this experience is that Alfonssette has the most beautiful hands](/portfolio/desert-dream/openbook.mp4)
![2V3A4358.jpg](/portfolio/desert-dream/2V3A4358.jpg)
![2V3A4380.jpg](/portfolio/desert-dream/2V3A4380.jpg)

![2V3A4416.jpg](/portfolio/desert-dream/2V3A4416.jpg)
![2V3A4427.jpg](/portfolio/desert-dream/2V3A4427.jpg)
![2V3A4421.jpg](/portfolio/desert-dream/2V3A4421.jpg)

![2V3A4434.jpg](/portfolio/desert-dream/2V3A4434.jpg)

![2V3A4439.jpg](/portfolio/desert-dream/2V3A4439.jpg)

Lastly, we also showed our project at the ITP Winter Showcase.

An interactive augmented reality (AR) paper theatre, using AI-generated imagery to create animations in two surreal desert landscapes.

Desert Dream

A satirical psychiatry robot that listens to a patient's woes, diagnoses them, and mechanically dispenses (fake) Pfizer medication from its mouth.

Dr. Snuggles


![](/portfolio/imperfect-foods/site.mp4)

## About Imperfect Foods
[Imperfect Foods](https://www.imperfectfoods.com/) is a grocery delivery service (and a Public Benefit Corporation) on a mission to reduce food waste. After raising their Series D ($110M) in early 2021, Imperfect needed to quickly roll out a major upgrade to their marketing site, which receives about 2 million visits/month. They approached [Mutations Ltd](https://mutations.ltd/) to help them, specifically requesting people with a lot of experience with CSS animations and "highly interactive" React components.

These are two of my specialties so I was put as technical lead on the job.

## The Project

By the time they reached out, Imperfect Foods had already invested in an extensive redesign including detailed annotated mocks. We were asked to implement their vision in React in a very modular way, creating good documentation via [Storybook](https://storybook.js.org/).

||
|--|
| ![Screenshot of some of the original mocks provided](/portfolio/imperfect-foods/mocks.jpeg) |

Due to my background in web accessibility, we also wanted to ensure each component was accessible via keyboard and screen readers.

Three of us worked on this project. I acted as technical lead and helped mentor and direct the other two people on the project. We worked on a few of the components that are currently still on their site, namely...

### Pantry Component
A carousel which simply scrolls through product categories, each slide animating with a background wipe and fade in foreground object.

This component was Cory (Jason) Alvernaz's baby, and with my help, he was able to program in the swipe animations as well as the automatic playing feature.

| | |
| -- | -- |
| ![](/portfolio/imperfect-foods/pantry.mp4) | ![](/portfolio/imperfect-foods/pantrymobile.mp4) |


### Badge Carousel
A carousel with large buttons in a semi circle along the left that users can click and see dynamic animations showing specific products.

Rob Kayson and I worked on this together, and he knocked it out of the park. The trickiest parts was animating so many disparate SVGs to work perfectly in harmony without a hitch and to align the badges perfectly in a semi circle. It was fun to dust off our high school geometry knowledge!

| | |
| -- | -- |
| ![](/portfolio/imperfect-foods/badgecarousel.mp4) | ![](/portfolio/imperfect-foods/badgecarouselmobile.mp4) | 


### Impact Slider
A highly animated slider showing how much water, food, co2, and time that could be saved for using their services.

This I did completely on my own. The scrolling numbers were done with pure JavaScript, [the code can be seen on CodePen](https://codepen.io/karomancer/pen/dyvEOae) while the rest were SVGs manipulated with CSS animations. The slider was made with `div`s, but made accessible with proper aria attributes: 

```html
<div aria-valuemin="0" aria-valuemax="2" aria-valuenow="[0|1|2]" aria-orientation="horizontal">
    ...
        <div>[1 week | 1 month | 1 year]</div>
    ...
</div>
```

| | |
| -- | -- |
| ![](/portfolio/imperfect-foods/impactslider.mp4) | ![](/portfolio/imperfect-foods/impactslidermobile.mp4) | 

--- 

If you'd like to know more, you can check out [Mutation's documentation of the same project](https://mutations.ltd/work/imperfect-foods-partnering-to-implement-interactive-new-site/) or even the website live on [Imperfect Food's main marketing page](https://www.imperfectfoods.com/).

A landing page for Imperfect Foods with interactive, animated components to illustrate impact and savings potentials.

Imperfect Foods Components


![Edited interview about the project](/portfolio/neopatch/edited_interview.mov)

![Photograph of a man looking at the LED strip along his jacket arm](/portfolio/neopatch/1-11.jpg)
![Photograph of the front of a jacket with LEDs running down the front](/portfolio/neopatch/1-2.jpg)
![Photograph of the back of a jacket with LEDs circling the hood](/portfolio/neopatch/1-7.jpg)
![Photograph of a man modeling a light up jacket](/portfolio/neopatch/1-15.jpg)

Neopatch is an interactive light-up jacket that responds to customizable snap-on RFID/NFC patches.

With this project, we envision a generous mentality in potential wearers. We hope that by offering a means of creating patches, the wearer feels enabled to be creative and wants to share their creativity with others around them. 

Not only is there an existing collectors' culture of adhering patches onto jackets, there is also a gift-giving culture in music and arts festivals. This community-oriented energy is what inspired us to create this jacket and we envision wearers gifting and trading their patch creations with one another. 

## The Plan

Our initial thought was to offer customizability through selecting colors, a basic effect, and maybe a speed.

This project is purely in a prototypal state, but we had big ambitions from the start. Here's our initial plan and where we are now in it:

- [x]  Learn to read and write to RFID/NFC tags
- [x]  Start with non-variable animations: “SAKURA”, “FIRE”, and “TWINKLE”
- [x]  Make animations with [Neopixels](https://learn.adafruit.com/adafruit-neopixel-uberguide)
    - [x]  TWINKLE
    - [x]  FIRE
    - [x]  SAKURA
- [x]  Obtain and embed into patches
- [x]  Sew lights into jacket
- [x]  Hide cables between lining and back
- [ ]  V2: Create a language to customize animations
- [ ]  V2: Create more animation types
- [ ]  V2: Create GUI to allow users to choose their effects that outputs the code
    - [ ]  Users must then use an app to write the output
- [ ]  V3: Create an app that writes straight to the chip

We did not get to V2 or V3, but we’re interested in trying!


### Bill of Materials

Here are the components purchased: 

![Screenshot of an Adafruit receipt for light strips](/portfolio/neopatch/Untitled.png)

![Screenshot of an Adafruit receipt for breadboards](/portfolio/neopatch/Untitled%201.png)

![Screenshot of an Adafruit receipt for RFID reader](/portfolio/neopatch/Untitled%202.png)

![Screenshot of an Adafruit receipt for light rings](/portfolio/neopatch/Untitled%203.png)

![Screenshot of a receipt](/portfolio/neopatch/Untitled%204.png)

![Screenshot of a receipt](/portfolio/neopatch/Untitled%205.png)

![Screenshot of a receipt](/portfolio/neopatch/Untitled%206.png)

![Screenshot of a receipt](/portfolio/neopatch/Untitled%207.png)

![Screenshot of a receipt](/portfolio/neopatch/Untitled%208.png)

![Screenshot of an Amazon order for RFID tags](/portfolio/neopatch/Untitled%209.png)

![Screenshot of an Amazon order for embroidered patches](/portfolio/neopatch/Untitled%2010.png)

Total cost ended up being around $200.

### RFID/NFC Reader Troubles

The first reader we bought ended up being only intended to unlock doors. It couldn’t write nor could it read anything other than UIDs in the header of an RFID tag.

The second reader we bought worked super well, but it was an Arduino Uno shield, so we would have been forced to use an Uno. It was also too bulky a solution for a wearable.

As they say, third times the charm! The third one we bought ended up being the best solution for our use case. It was a little more annoying to code because it didn’t really have documentation, but after [searching through the source code](https://github.com/miguelbalboa/rfid), it ended up working fine.

### NTAG216

When choosing between using RFID or NFC, we ended up going with [NTAG216s](https://www.nxp.com/products/rfid-nfc/nfc-hf/ntag-for-tags-labels/ntag-213-215-216-nfc-forum-type-2-tag-compliant-ic-with-144-504-888-bytes-user-memory:NTAG213_215_216) (NFC). NTAGs can handle 2-way communication while RFID is only 1-way.

There’s no reason we would have to have to handle the case in which we’d have to handle both directions at the same time, but we liked the interface of NTAGs.

The NTAG216s we used has 180 bytes of data, 36 of which of which is taken up by metadata in the header (such as type of NTAG, UID, and type of data, like email or phone number). It also operates on 13.56 MHz, which is what our chosen reader operates on.

To read the contents, we have to read in pages of 4 bytes each, no matter which library we used.

## Wiring & Electronics

Neopixels are pretty easy to wire up; all they require is a power, ground, and data pin. Each light is independently addressable from just a single data pin. Crazy, right?

So we went through to wire up the matrix and strands. We noticed a few things:

- Instead of being addressable like a 2D array (with rows and columns), the matrix is a singular array that snakes around. So I wrote a little helper function to help us address it like a 2D array:

```c
// Ngl, pretty proud of this one
function getCellNumber(int row, int column) {
  return row % 2 == 0 ? 8 * row + col : 8 * row + (7-col);
}
``` 
- We originally were using an Arduino Uno R3, and hilariously, it did not have enough flash memory to be able to operate all lights at once. The Uno we had has 32KB of flash memory, while the Nano 33 IoT has 256KB. We chose to switch to a different RFID/NFC reader to find a better form factor, but more importantly, so we could switch to using the Nano.

![Photograph of a coiled up roll of addressable LEDs on magenta](/portfolio/neopatch/IMG_4659.jpeg)
![Video of two people failing to get something read by the reader](/portfolio/neopatch/IMG_4661.mov)
![Video of two people testing out RFID and light animations and unable to turn it off](/portfolio/neopatch/IMG_4728.mov)

## Code

Daniel largely covered the light animations, while I covered the NFC reading and writing and fabrication. We discovered Arduino allows for its code to be separated into files, which made this software engineer that’s allergic to files larger than 300 lines happy. This ended up being how we organized our files:

![Screenshot of many tabs of code in the Arduino IDE](/portfolio/neopatch/Untitled%2012.png)

The code we wrote can be seen on GitHub:

[embed](https://github.com/karomancer/jacket)

In short, we have a `jacket` file that instantiates all variables to be used in the rest of the project. Pin numbers, num of lights, NeoPixel instantiations…the works.

`animation_x` files include the animations for each light strand and matrix per type.

`helpers_light` includes light helpers that are not specific to any animation; such as setting up lights as the NeoPixel library requires via `setup()`, casing on what is read through the NTAGs and playing the appropriate animation, clearing all lights, etc.

`helpers_nfc` is where all the reading of the NFC magic is stored. It reads page by page and constructs a message, then looks for a delimiter (`,` in our case) and strips that message of extraneous characters.

`main` is where we have our `setup()` and `loop()` functions and call methods within `helpers_x` to read NTAGs and update lights.

## Fabrication

### PoC (v0.1)

For our proof-of-concept, we first planned on where the lights should go on the jacket. We wanted to make sure that it looked good and was functional before we make any drastic fabrication moves.

![Photograph of the jacket covered with green tape marking where lights will go down the front](/portfolio/neopatch/IMG_4729.jpeg)
![Photograph of a mannequin with a jacket next to a small pedesetal](/portfolio/neopatch/PXL_20221204_012337942.PORTRAIT.jpg)
![Video of testing the jacket in a light room](/portfolio/neopatch/IMG_4739.mov)
![Video of testing the jacket in a dark room](/portfolio/neopatch/IMG_4746.mov)

### Light diffusion, embedding tags into patches (v0.2)

We used the same type of nylon silk material used for photography diffusion.

We knew it wouldn’t diffuse much because it’s too close to the lights, but it would at least be less blinding and a little nicer looking than the bare lights.

![Photograph of lights in small white nylon sheaths](/portfolio/neopatch/PXL_20221210_234422015.jpg)
![Photograph of a jacket on a mannequin with wires sticking out of it](/portfolio/neopatch/PXL_20221211_073125565.MP.jpg)
![Video of a light up jacket with wires overflowing out of it](/portfolio/neopatch/PXL_20221213_121108495.mp4)

### Cable management (v0.3)

In order to make the lights removable for washing and debugging purposes, we also decided to solder the ends of the wires into these snap-in solutions. 

We started with these wires with sockets and snaps are called that we found on the junk shelf, then seam-ripped the lining of the jacket. Lastly, I made little grommets to feed the wires through that ensure we don’t lose the snaps the lights go into.

![Photograph of a grommet hole in the breast pocket of the jacket with a neat bundle of wires sticking through it](/portfolio/neopatch/PXL_20221213_074913798.jpg)
![Photograph of a messy desk covered in wires](/portfolio/neopatch/PXL_20221210_234418703.jpg)
![Photograph of a jacket being seam-ripped](/portfolio/neopatch/PXL_20221210_220320793.jpg)
![Photograph of wires being stripped in front of a jacket](/portfolio/neopatch/PXL_20221210_234414432.jpg)

Soldered a ribbon cable onto the RFID reader itself, placed in a front breast pocket, then wires fed through the back of the jacket. Let's look at this cabling job one last time before it's all sewn into the lining.

![Photograph of the jacket with the lining seam ripped out and cables all over the back](/portfolio/neopatch/PXL_20221214_035712010.jpg)
![Photograph of a small RFID reader with a ribbon of wires soldered on](/portfolio/neopatch/PXL_20221213_141326661.jpg)
![Photograph of a light up jacket on a mannequin](/portfolio/neopatch/PXL_20221214_120239918.jpg)
![Video of the jacket lighting up on a mannequin](/portfolio/neopatch/PXL_20221214_120124626.mp4)

### Switching to a Protoboard (v0.4)

You can’t use a breadboard for a wearable because with a person’s movement, the pins get yanked right out. So we decided to go for a protoboard.


![Photograph of a ribbon of wires sitting on helping hands, ready to be soldered](/portfolio/neopatch/PXL_20221214_072031789.jpg)
![Photograph of jumper wires sticking out of a breadboard](/portfolio/neopatch/PXL_20221214_061659110.jpg)
![Photograph of soldering RFID I2C cables to a protoboard](/portfolio/neopatch/PXL_20221214_090002216.jpg)
![Photograph of a protoboard with tons of red and black wires coming from it](/portfolio/neopatch/PXL_20221214_111319700.MP.jpg)

If we were to continue working on this, we’d make a singular power and ground main lines so it wouldn’t be such a birds nest on the protoboard. For now, it works!

We also originally used a 9V battery, but we had issues with it. Even feeding it into Vin on the Arduino didn’t seem to supply enough power. We also couldn’t get the Neopixels to work on 5V even though the documentation (and the strips themselves) clearly say they should be used on 5V. We went with 3.3V instead.

We ended up switching the power source to an external battery pack last minute, so we didn’t have a great way to get into the lining from there. It’s a little ugly, but it’ll work!

## Final V1 Prototype

And with that tucked away and the external battery pack in place, we ended up with this beaut.

Features include:

- Removable battery pack with a long battery life
- Removable hood
- 6 Removable lights for easy washing and replacement
- Magnetic patches for easy attachment and detachment
- 3 Patch animations: Fire, Sakura, and Twinkle
- 4 usable pockets

I’m generally very happy with how this turned out! Didn’t get to V2 or V3 ideas, but it’s good to have aspirations.

![Video of the project at the winter showcase](/portfolio/neopatch/jacket_showcase.mp4)

![Video of Daniel showing off the jacket](/portfolio/neopatch/PXL_20221218_002149449.mp4)

Other future wishes besides V2 and V3 outlined at the start of this post:

- Would love to create a singular power and ground line to lighten the wire load in the back pocket
- Make a larger pocket for the microcontroller
- Manufacture a chip instead of using a protoboard
- Make the lining removable via snaps for easier harness debugging
- Better finishing
- Lighting on the back

A cyberpunk-styled jacket with programmable embroidered snap-on RFID patches that control LED lighting effects & animations.

Neopatch


![Video of a mobile UX flow for fueling a freight truck](/portfolio/onramp/fuelpay.mp4)

## About Onramp

The world of freight trucking is highly complex with many different actors. Truckers themselves can be part of a much larger corporate owned fleet, or can be sole proprietors themselves.

Many different aspects of a freight trucking operation include payment, and in many cases the payment method differs. Diesel purchases are often done via (company) credit card while lumper payments are done through cash or [COMCHEKs](https://www.comdata.com/products-services/comchek/). Each scenario has a large cast of actors each with their own motivations and strong financial security implications.

[Onramp](https://onrampcard.com/) is a startup aiming to enable the future of freight through payments and financial technology by automating payments and optimizing prices, efficiency, and security for all parties in the freight ecosystem.

In 2020, I worked with their CEO and founder [Michael Morris](https://www.linkedin.com/in/mdbmorris/) to develop out a few concepts for their first set of products, namely their flagship Fuel Pay product which rewards freight drivers for fueling diesel and reefer at partner diesel stations, like [Love's](https://www.loves.com/) and [Pilot Flying J](https://pilotflyingj.com/).

## Design Projects

All designs and interactive prototypes were made within Figma.

![Screenshot of a bunch of screens on Figma](/portfolio/onramp/pilotflyingj_figma.jpg)
![Screenshot of a bunch of screens on Figma](/portfolio/onramp/figma.jpg)
![Screenshot of a bunch of screens on Figma](/portfolio/onramp/cover.jpg)


### Fuelpay

Onramp's primary desired feature was a way for freight truck drivers to pay for diesel via the Onramp app or with the Onramp Card.

Onramp's goal was to partner with multiple companies in the space, such as Ryder's or Pilot Flying J, and create a points reward system similar to credit cards that incentivizes drivers to refill their diesel and [reefer fuel](https://fosterfuels.com/reefer-trailer-fueling-services) at partnering stations.

Rewards might include Walmart gift cards, free food at participating restaurants, showers, and other truck stop-specific rewards.

The flow included the trucker planning out their route on a map within the app and being directed to a participating partner fueling station. From there, they would be directed via the app to refill their diesel or reefer, pay for any additional needed services, and complete the transaction all via the app.

![Video of a mobile UX flow for fueling a freight truck](/portfolio/onramp/fuelpay.mp4)


### Lumper payments

In the freight trucking world, a [**lumper**](https://www.relaypayments.com/blog/what-is-a-lumper-and-lumper-payment) is a laborer that (un)loads cargo at the destination point.

Say you're a freight trucker that's transporting West Elm furniture across the country. Once you arrive at a West Elm, professional lumpers greet you to load and unload the furniture.

These laborers are often not hired by West Elm themselves but are rather independent contractors that are paid by the freight driver themselves. This amount is often comped by the vendor, but not always.

Because lumpers are independent professionals, they often want to be paid in cash or with [COMCHEKs](https://www.comdata.com/products-services/comchek/). ComChecks are checks created by [COMDATA](https://www.comdata.com/) that lumpers can deposit near immediately. COMDATA largely has a monopoly on lumper payments.

In addition to their FuelPay feature, Onramp wanted to explore the idea of lumper payments within their platform, so I set off to create the flow.

| Fleet: Pay a lumper | Lumper: Receive payment via SMS | Lumper: Receive payment via Email |
| -- | -- | -- | 
| ![](/portfolio/onramp/EM-PayLumper.mp4) | ![](/portfolio/onramp/EM-LumperSMS.mp4) | ![](/portfolio/onramp/EM-LumperEmail.mp4) |


A low fidelity user experience flow to automate payments for drivers in the freight ecosystem and reward drivers.

Onramp UX Design


![Video of the fox on the Patreon website](/portfolio/patreon-404-fox/video.mp4)

## Context
When I started at Patreon in March 2017, my first project was to help rebrand the whole product by June 2017. This included assisting in the tech migration from an Angular frontend stack to React, rebuilding the styling in the website to use styled-components instead of straight up CSS, and replacing colors, fonts, the logo, wordmark, and icons.

I actually tech led the creation of our design system in React, aptly named Studio.

[embed](https://studio.patreon.com/)

The project was a mess and a half with a lot of late nights. However, in the chaotic mess that was the rebrand project, [Jason Byttow](https://www.linkedin.com/in/jason-byttow-84a3974/) and I were able to slip in a fun new 404 page design.

## Patreon & Foxes
There was once a designer at Patreon named Kathy. She loved foxes and even had a tumblr in which she drew a fox a day. Since she was one of the first designers at Patreon, she brought her love of foxes to the platform and Patreon has a light fox mascot. 4xx and 5xx pages were fashioned with foxes, and the default avatar for patrons and creators are procedurally generated fox illustrations.

This was Kathy's original 404 page design:

| | |
| -- | -- |
| ![Cute 404 fox illustration on a gray background](/portfolio/patreon-404-fox/original_404.jpeg) | ![Patreon Maintenance Page with a fox illustration](/portfolio/patreon-404-fox/patreon_maintenance.jpg) |


## Techniques
The rebranded Fox was illustrated in Adobe Illustrator, with each body part as a group. CSS keyframe animations were applied to each body part, the most commonly used CSS property being transform: rotate(...). Each body part is on a regular schedule, but some are complicated with properties being defined at every 1-5% keyframe. That makes it appear more random than it is.

The only part that is truly randomized on the fox is the eyes, which uses a JavaScript randomizer function to apply and remove a class that changes the height.

The spaceship is also on clockwork keyframes, rotating around a single point, and additional rotations around its own center to appear rickety.

## A Rogue Merge Becomes a Fan Favorite
When Patreon was [doing it's rebrand](https://www.behance.net/gallery/53952451/Rebrand-with-Patreon?locale=en_US), the error pages were not part of the scope. Jason and I took advantage of that to go a little rogue and make a green field project out of it. We wanted to stay true to the fox theming of Patreon that Kathy laid out before us.

You can see the page live on the [Patreon website](https://www.patreon.com/404Page).

While the rebrand itself was [highly controversial](https://medium.com/@cooperthinks/why-the-new-patreon-brand-sucks-ee513b09dfcb), at lease the reception of the 404 page upon release was pretty positive! You know you did a good job when your random project is tweeted by the company account!


| | |
| -- | -- |
| ![Tweet by Patreon unveiling the new 404 page](/portfolio/patreon-404-fox/tweet_patreon.png) | ![Tweet by Jason Byttow, the co-collaborator of the 404 page](/portfolio/patreon-404-fox/tweet_jason.png) |
| ![Tweet by an excited creator](/portfolio/patreon-404-fox/tweet_mac.png) | ![Tweet by an excited creator](/portfolio/patreon-404-fox/tweet_kevin.png) |


## Never Enough Foxes

Even though this project was totally rogue and merged in secret, the new fox design was much beloved internally. I ended up also illustrating the fox for our maintenance page and for our creator onboarding flows. Here's a couple samples: **Construction Foxy** and **Interview Foxy**.

| | |
| -- | -- |
| ![A fox wearing a construction hat holding a wrench](/portfolio/patreon-404-fox/construction_fox.png) | ![A fox holding a microphone to the viewer](/portfolio/patreon-404-fox/interview_fox.jpeg) |


A 404-page with an animated illustrated astronaut fox made for Patreon's rebrand in 2017.

Patreon 404 Fox


![Final presentation showing research](/portfolio/playtpus-dreamtime/presentation.pdf)

## Context
At CMU, both Bachelors and Master [Human-Computer Interaction](https://hcii.cmu.edu/) students work on capstone projects to close out their education. They are the exact same with the exception that the bachelor version is a semester shorter.

The Capstone project is structured to cover the end-to-end design process of a product development lifecycle. HCI students work in teams of 4-6 students with companies ranging from nimble startups to globally recognized brands.

Working with faculty mentors and their industry partners, teams produce user research, product designs and interactive prototypes to improve or design new applications to a partner's existing technology. The project culminates with a presentation of the teams' final prototypes at the end of the summer.

Typically, students with complementary skillsets are chosen to work together. Think: a computer scientist, a designer, a psychologist, and an artist. Our group had three software people, an artist, and a psychologist. I decided to leave the software work to the other two computer people and work with the psychologist on UX interviewing, persona creation, and mapping out processes.

## About Platypus LLC
Our client for this capstone was [Platypus LLC](http://senseplatypus.com/), a local Pittsburgh startup. At the time, they produced small hover boats equipped with Android phones that autonomously travel across bodies of water. While traversing a body of water, the boats test samples of water for pH level and common contaminants, and create a map of the water for the owner of the boat to review.

Fracking is a large concern in the part of the United States that Platypus is located (near the Appalachians), so the product was created with reporting results in mind. The "heat map" graphic is useful to identify from where a contaminant might be emitting from to help identify fracking leaks.

When we first met with Platypus, they already had the hardware and the graphic making ability, but their reports were printed and mailed by snail mail at the end of the month. A month can be a long time, especially given it can take a matter of a few short days for a body of water to be completely contaminated. They wanted us to investigate whether investing resources into making a live web dashboard was worth it, and to make a prototype if we found it was.

## Interviewing
In order to investigate on behalf of Platypus, we had to find potential Platypus users to interview. We had a lot of questions given that none of us were from the Appalachians or the agricultural industry.

Some of our asks of agricultural workers were:

- How tech-savvy are they? Do they have reliable internet? Would they look at a dashboard frequently?
- How knowledgable are they about fracking? Is fracking a known quantity in their area?
- How dangerous is fracking contamination to their business? Would a contamination have a huge effect on their crops/timber/etc?

Platypus was still early in development, so they didn't have too many resources for us to lean on, so we had to get creative:
- I asked a Pittsburgh police officer if he knew anyone and he pointed us to a timberer that lives in Beaver County, PA. We drove through 2 feet of snow to visit him and interview him.
- My teammate Soyeon and I went to the Carnegie Science Center and found a hydrologist to test our low-fi mockups on.
- We all went to the Strip District Farmer's Market and found several farmers/ranchers
- We grabbed some professors and students to run through paper and low-fidelity mockups with us after having interviewed the rest

### My role
I found most of our interviewees and ran the vast majority of our contextual design interviews. I provided design feedback to my teammate Alex Rothera on his product mocks, and took his mocks into the world to gather feedback for the next iteration. I also produced a lot of the visualizations in our final presentation and report, such as the informational flow chart and the people interviewed visualization. Lastly, I did a lot of project management. I maintained the Gantt chart and scheduling, which was a natural step because a lot had to be scheduled around when user feedback would come back.

### Process pictures
![Interviewing a rancher at the Strip District Farmer's Market](/portfolio/playtpus-dreamtime/farmer_interview.jpg)

Through a friend of a friend, I found a timberer who was willing to take part in our UX research. We drove through the February snow in Pennsylvania down to Beaver County to see his day-to-day operations. While there we inquired about his knowledge of the dangers of fracking and whether his timbering operation would be interested in beta-testing the Platypus water monitoring system. Pictured here is myself and my teammate Soyeon Hwang interviewing the timberer

![Timberer Interview](/portfolio/playtpus-dreamtime/timberer_interview.jpeg)

![Lo-Fi testing with users](/portfolio/playtpus-dreamtime/hydroponist_interview.png)

Identifying the entities involved, the flow of information, and where the breakdowns are in that flow

![Flow of information](/portfolio/playtpus-dreamtime/flowchart.png)

Who we interviewed to both understand the agricultural space better but also to test the ease of our UX in our mockups.

![Interview stats 38 interviews 14 potential Platypus users](/portfolio/playtpus-dreamtime/interview_stats.png)


## Final recommendations and presentation

As part of our capstone, we made a presentation of work done for Platypus LLC to be presented to the rest of our class as part of our capstone, and includes a lot of context as to who the client is and what they are trying to accomplish. A much more generalized version of the final report we gifted the client intended for a much broader audience. The information is more focused on UX techniques used, including contextual inquiry and persona creation, and less on business recommendations. The first document on this web page is this presentation.

In addition to the presentation, we created a final recommendations report of our UX findings and gave it to our client, Platypus LLC. It covered the exploration for how we designed our medium-fidelity prototype we created and how different identified personas would use that prototype. Also explains the breakdowns we found in their existing product and user feedback on our iterations on their product.

![Final report](/portfolio/playtpus-dreamtime/final_report.pdf)


Conducting user research for autonomous boats that measure and monitor water quality in fracking heavy regions.

Platypus Water Quality Dashboard


[Glitch example](https://sewing-triptych.glitch.me/)

In spring 2020, I took Gray Area's Computer Science in Studio Art 12-Week Immersive. One of our first challenges was to make a triptych purely with CSS + HTML (no JavaScript!)

Because I am a frontend engineer professionally, I wanted to challenge myself. I made a checklist of things I wanted to accomplish:

Every pane has to use a different method of generating graphics and animation. I chose:

- **SVG.** SVG has its own markup and its (using the animateTransform and animate tags)
- **Sprite map.** Part of the reason this took me so long is that I drew my own sprite map from scratch. A is a large image file with a grid of images that each represent a keyframe in an animation. You can then use the CSS value in the animation property to flip between keyframes in one giant image.
- **CSS-only.** Make shapes and animate using only CSS, like our other assignments.

I also used this an opportunity to:

- **Utilize CSS variables.** I've actually never used plain CSS variables; I've usually used SASS or LESS ones, or JavaScript variables and something like emotion or styled-components.
-**Make it responsive.** My single div challenge looked ass awful on mobile, so wanted to ensure this one was mobile-friendly.

## Biggest issues and solutions
I couldn't get the sprite map to line up from frame-to-frame, even though I used software specifically intended to make sprite maps.

*Solution?* Some hackery including colored borders.

Also couldn't quite get the stitch and top-thread on the sewing machine pane to line up.

*Solution?* Speed up the animation so it's so fast you can't tell! :)

## Final Deliverable

Here's the project and its [code on CodePen](https://codepen.io/karomancer/pen/yLNdeXE).



A triptych illustrating the process of creating a garment using different CSS animation techniques.

Sewing Triptych

An alternative controller rhythm game in which the player plays a barista preparing café lattes by squeezing four silicone udder teats to a beat. Game programming done in Unity, controller made with a Teensy 4.1.

Udder Mayhem


![Video of an app animation](/portfolio/wowd/carousel.mp4)

## About Wowd

[Wowd Co](https://www.wowd.co/)'s goal is to help any creator build a thriving career through fan collaboration. The app and platform they've built provides creation and editing tools to allow creators to provide new value for their fans, whether through mintable autographs, small collaborative art pieces, sketches, collages, and more.

The core of their platform allows for a game of telephone, where a creator can start a piece of work and fans can jump in and add their touches, potentially continuing it on to more fans or back to the creator like a game of pong. The creator stands to earn money each step of the way.

To support collaboration amongst many people, they introduced the idea of layers, which each show a person's contribution to the work. To demonstrate this new ability, they wanted an animated onboarding flow that is fun and bold, encouraging new users to follow along and even interact with it.

## The Project

Wowd's codebase is written in [Flutter](https://flutter.dev/), a framework using the [Dart programming language](https://dart.dev/). By the time I was asked to do this project, I had already been working with Wowd on a few other bug fixes and features in their codebase and was gaining some familiarity with Dart and Flutter.

Their designer, [Nora Kako](https://www.linkedin.com/in/norakako/), already had design language and branding ironed out and had great mocks for this flow. I worked with her to iron them out further, including filling in copy. We also decided we wanted each stage to be highly animated, and she largely left the particular animations of her assets to me.

Using [Flutter's powerful animation tooling](https://docs.flutter.dev/ui/animations/tutorial), I was able to define animations both by drawing shapes straight in Flutter to manipulating SVGs that Nora provided me.

### Welcome

| | |
| -- | -- |
| ![An animated gif showing a bunch of images fading in and then scrolling off the viewport](/portfolio/wowd/wowd1.gif) | In the welcome slide, small images of actual collaborations made with the Wowd app appear and slide past the user. The hope is to showcase the work of the current userbase and to intrigue the new users to want to learn more about these strange little pieces. |

### Send a request

| | |
| -- | -- |
| ![An animated gif showing a click through of a very simplified UI with no words](/portfolio/wowd/wowd2.gif) | To educate the user on the term "Request", we simplified the UI to show the broad strokes of how to choose their desired creator and choose a collaboration to request. The glowing button was to make it clear that the request CTA is the button showing the price. |


### Create Together

| | |
| -- | -- |
| ![An animated gif showing a selfie in purple, drawings of a haircut and guitar onto the selfie in blue, then a signature in yellow](/portfolio/wowd/wowd3.gif) | To illustrate the ability to collaborate with multiple people, we animated a collaboration in progress, starting with a fan selfie then introducing another fan and their own touches. Lastly, the creator comes in and signs the piece. Each collaborator is represented by a different color. |


### See the journey

| | |
| -- | -- |
| ![An animated gif showing projector transparency like UI sifting through a layer of a selfie, a blue haircut, and a yellow signature](/portfolio/wowd/wowd4.gif) | To introduce the ideas of a progressive deliverable, we show the by-collaborator layers of the collaboration made in the prevoius step. The fan should expect not just a finished image but a video, gif, or interactive widget within the Wowd app showing the progression of collaborative efforts. |


### Let's go

| | |
| -- | -- |
| ![A screenshot of a login screen showing login options for Twitter, Facebook, or Google](/portfolio/wowd/wowd5.jpeg) | No sign up flow would be complete without a sign up and login page. There wasn't much extra that went into this other than debating which platforms to support in multi auth. These might be different now, especially after Twitter's rebranding |





An animated app onboarding experience for Wowd written in Dart with describing the how to create collaborations within the platform.

Wowd Onboarding Carousel


![Video of main interaction at showcase](/portfolio/youtopia/showcase1.mp4)

![Video of tour of experience at showcase](/portfolio/youtopia/showcase2.mp4)

For ITP's Playful Communication of Serious Research class, we had to craft an interactive experience befit for a museum that presents specific research from NYU to a broader audience.

After reading many research papers out of NYU, we chose the paper [Children's social representations of utopian societies](https://onlinelibrary.wiley.com/doi/10.1111/chso.12568?af=R) by John T. Jost and André A. Fenton.

## The Research

The paper follows 56 elementary-school aged students from Hunter College High School. The children read Lois Lowry's book [The Giver](https://en.wikipedia.org/wiki/The_Giver) before teaming up in groups of 4-5 to come up with ‘two major problems in the current society and a plan for how their utopia will eliminate these problems’.

To give them inspiration, they are taught about the [UN's 17 Sustainable Development Goals](https://sdgs.un.org/goals) and use it as a basis for creating their new societies. The children have to name their new societies, come up with a flag, and a small constitution outlining how they will address these two major problems.

Schools are sort of microcosms of our society, and there are a lot of concerns among young people about what the future looks like. It is not only interesting to let them think about possible solutions for the future but also for adults to learn from their answers and see how the future generations view the world.

We loved these aspects of the research and thought it lended itself well to an interactive experience. Just as the school challenged the children to think of and identify just two major problems in society worth solving, we thought it would be engaging to pose the same questions with some of the same material to showcase goers.

## Brainstorming

Our stated **goal** for our project was to introduce the concept of the research (comparing children’s “ideal sociality” to the UN standards of Utopia sociality) and briefly explain the history of utopia sociality, and collecting and displaying input from the visitors.

Though the research was with chlidren, our **intended audience** for our experience was for both children and adults. Since we are gathering input from the viewers, we wish for a more diverse crowd. 

For each idea we did a small sketch and gathered inspiration images from other projects.

### Idea #1: Interactive City Projection Table

Projection mapping on city block models that changes in real time to reflect audience’s votes and visualize a utopia co-created by the audience as a whole

This idea takes cues from [dotmocracy](https://dotmocracy.org/), which visualizes opinions & data gathered from the audience via dots on a canvas. The different areas of the city would correspond to UN’s 17 Sustainable Development Goals, such as a hospital representing health and wellness. The audience votes by putting tokens in corresponding areas based on their priorities of utopia.

![Illustration of people playing with a miniature city on a table with a projector](/portfolio/youtopia/idea1.png)
![A photograph of people playing with a miniature scale model of a city](/portfolio/youtopia/idea1_1.png)
![A photograph of people playing with figurines on a table projected with light](/portfolio/youtopia/idea1_2.png)
![A photograph of people moving blocks on a table with projected windows](/portfolio/youtopia/idea1_3.png)

### Idea #2: AI-Generated City Skyline Mural

Projection mural of an AI generated city skyline in which every viewer responses produces a new block. Each response is an individual exercise with a potential to contribute to the research.

Viewers will walk into a room and see a panning, parallax project mural collage of a cityscape overlayed with descriptions. After answering a few questions on the kiosk, they will see their own utopia come to life and be added to the mural. The mural would be created in realtime with text-to-image AI, likely DALL-E 2 with it's [outpainting API](https://openai.com/blog/dall-e-introducing-outpainting). 

There would be a little photobooth area to print out or digitally share a postcard of their utopia block. At the end of the experience would be a wall with projected word clouds and visualizations of peoples’ answers so you get a sense of where the majority lies.

![Illustration of people standing in front of a mural of a city on one wall and a word cloud on the other](/portfolio/youtopia/idea2.jpeg)
![Photograph of a room with kiosks lined up in front of a wall with a sky mural](/portfolio/youtopia/idea2_1.png)
![Animated panning illustration of a city](/portfolio/youtopia/idea2_2.gif)
![Video of someone using a photo kiosk at a conference](/portfolio/youtopia/idea2_3.gif)

### Idea #3: Scavenger Hunt

Scavenger hunt that encourages viewers to collaborate by finding different items referencing the research at different stations. The items have RFid tags that changes the black and white interactive mural into a colorful and lively one when brought back, as a nod to The Giver.

The clues would be constructed in a way that should be done in groups, such as giving people different colored gel photography sheets that, when overlayed, show a full picture from a page.

For this idea, we had additional goals. Namely we wanted to introduce the result and concept of the research via an activity that encourages more direct collaborative interaction.

![Animated illustration of a room of exhibits and taking a small item and placing it on a wall to illuminate part of the wall](/portfolio/youtopia/idea3.gif)
![Photograph of a wall with sculptures with some of them lit up](/portfolio/youtopia/idea3_1.png)
![Video of someone unfurling a scavenger hunt map](/portfolio/youtopia/idea3_2.gif)

## Schematics

Our group as a whole didn't have much programming experience so we ended up wanting to combine both the first and last ideas. Have a projection table with city blocks, but also have a supplemental scavenger hunt. 

From there we had to create our plan, for both the exact user flow as well as the implementation and execution plan.

### User Flow

Originally we wanted people to answer a questionaire at the start of their experience for our own record keeping (and to give the researchers more data to work with), but due to time considerations we axed it.

![Flow chart showing the user flow from approaching to reading the research to taking the tokens to placing in buildings](/portfolio/youtopia/userflow.png)

### Implementation plan

This was our final project for the class, so we only had 5 weeks to execute with 5 people.

![A Gantt chart showing the plan from March to May](/portfolio/youtopia/gantt.png)

## Design

We decided that 17 UN Sustainable Development Goals is far too many for viewers to learn and vote on, so we decided to bucket them into 6 main categories:

**Wellbeing**
- No Poverty
- Zero Hunger
- Good Health & Wellbeing

**Community Institutions**
- Quality Education
- Community Partnerships for Goals

**Justice & Equality**
- Gender Equality
- Reduced Inequality
- Peace, Justice, & Strong Institutions

**Energy & Infrastructure**
- Sustainable Cities & Communities
- Clean Water & Sanitation
- Affordable & Clean Energy

**Economic Development**
- Industry, Innovation, & Infrastructure
- Decent Work & Economic Growth
- Responsible Growth & Consumption

**Nature Preservation**
- Life on Land
- Life Below Water
- Climate Action 


These 6 categories determine the shape of our city. The intention is for viewers to prioritize which 2 of the 6 are the most valuable to them by putting tokens into small districts of the our city that portray these points.

We decided on these districts:
- Hospital for **Wellbeing** 
- School for **Community Institutions**
- Courthouse for **Justice & Equality**
- Water treatment plant for **Energy & Infrastructure**
- Farmer's market and grocery store for **Economic Development**
- A park of rolling green hills for **Nature Preservation**

We then planned the layout for our city based on these districts:

![A top down illustration of a map with 6 different buildings on it](/portfolio/youtopia/layout.jpeg)

## Fabrication

This project is obviously very fabrication heavy given that we're physically building a small city, so time to get to work!

### Cardboard prototypes

We started with some cheap cardboard prototypes to ensure we got the sizing and layout right. I was in charge of the wellbeing portion and my cardboard hospital definitely looked like a gospel church.

![Photograph of a bunch of small buildings made of cardboard laid out in a circle](/portfolio/youtopia/cardboard1.jpeg)
![Photograph of a small cardboard building with a cross and a slanted roof](/portfolio/youtopia/cardboardhospital.jpeg)
![Photograph of a few organic shapes made of small cardboard stacked on top of each other](/portfolio/youtopia/cardboard2.jpeg)

Our teammate, Bruce, had previous experience with TouchDesigner and while we were fabricating our buildings, he started experimenting with projecting onto the city.

![Video of projecting colors onto a cardboard city](/portfolio/youtopia/cardboardtouchdesigner.mp4)

### Building the hospital

We each took a different section of the city to work on and I chose wellbeing, aka the hospital.

While my first cardboard prototype was done on the fly just for sizing purposes, the next cardboard prototype and final wood model would be laser cut.

So first thing's first; make the sides of the building in Illustrator, then cut out of wood.

![A screenshot from Illustrator of many sides of a building with the windows cut out](/portfolio/youtopia/hospitalcutout.png)
![Photograph of the front of a wooden model hospital ](/portfolio/youtopia/woodhospital.jpeg)
![Photograph of the back of a wooden hospital that is singed on the edges](/portfolio/youtopia/cardboardhospital2.jpeg)

The laser cutter I was using's filter was broken, so the wood caught on fire. Good thing we're painting it all white!

## Technical Implementation

Each building must register incoming tokens to collect data but also to provide a reaction in its section (e.g. an animation). We decided to use an Arduino Nano 33 IoT as our microcontroller, but were unsure about what type of sensors to use.

### Breakbeam

At this point I tried a few different methods, from coin pushers to RFID, but break beam sensors that break when the token slides down a clear ramp seemed like the best method.

Yes, this means that every building needs a slide now!

![Video of sliding wood pieces over a clear acryllic ramp](/portfolio/youtopia/slide.mp4)


### IR light sensors over I2C

The breakbeams ended up not working because the acryllic material we wanted to use was too transparent for the particular beam sensors we wanted. That, and we couldn't guarantee a certain speed for the token, so sometimes they would move so quickly the cheap beam breakers we got wouldn't sense it.

We instead decided to use a more sophisticated IR light sensor used in gesture recognition. 

This more sophisticated sensor communicates over I2C, so in order to handle our 6 different buildings we needed to use a multiplexor.

![Video of the team trying out a multiplexor](/portfolio/youtopia/multiplexor.mp4)

After we got the multiplexor working separate from the table, it was time to try it with the physical table and intended layout.

We needed to adjust the thresholds for each of the sensors, and because our USB cable for the Arduino was so short, I had to do so from under the table.

![Video of Karina sitting under the table reading sensor data and shouting what she read](/portfolio/youtopia/testsensors.mp4)

## Proof of Concept

With that multiplexor working, and our little models painted, we could finally test our proof of concept.

First version shown here uses BLE to communicate sensor data to TouchDesigner, but we had a lot of difficulties with interference in the space. Ideally we would use web sockets and use that as an opportunity to record the data to somewhere like Firebase.

![Video of the class trying out the table interaction](/portfolio/youtopia/final1.mp4)

## Showcase

We showed our work at the 2023 ITP Spring Show and got a great response from viewers who voted.

![Photograph of someone interacting with the projection table](/portfolio/youtopia/showcase2.jpeg)

![Photograph of the projection table](/portfolio/youtopia/showcase1.jpeg)

![Video of a closeup of the table](/portfolio/youtopia/showcase3.mp4)

An interactive installation that visually represents the viewers' ideal society through projection onto a city model.

My favorite projects thus far

ITP • WIP | May 2024

Dr. Snuggles

WIP | June 2023

Udder Mayhem

ITP | May 2023

Cosmic Courier

ITP | May 2023

Youtopia

ITP | December 2022

Neopatch

ITP | October 2022

Desert Dream

CLIENT WORK • WOWD | June 2022

Wowd Onboarding Carousel

CLIENT WORK • IMPERFECT FOODS | June 2021

Imperfect Foods Components

CLIENT WORK • BROKER2BROKER | February 2021

Broker2Broker UX Design

CLIENT WORK • ONRAMP | December 2020

Onramp UX Design

GRAY AREA | April 2020

Sewing Triptych

FULL-TIME • PATREON | July 2017

Patreon 404 Fox

CMU • PLATYPUS LLC | May 2013

Platypus Water Quality Dashboard

CMU • PITTSBURGH BOTANIC GARDEN | May 2013

CommuniTree