I used to think of design as an industrialized artistic endeavor concerning the exterior. Thinking it demanded a certain mastery of aesthetic and intuition of style, I always respected design as a process, but never thought I could partake in it as I often confined myself to, what at least appeared like, more technical domains. As time went on however, I found myself on a journey of identifying further with the role of designer as I uncovered not just what the practice involved, but how it aligned with my strengths, curiosities, and ambitions.

For a long time, I have had my eye on making an impact — looking to better understand the world around me so I could develop ideas and build new things that could address problems and needs I saw. In college, this drive led me to study economics along with a hefty dose of computer science because I believed that to effectively develop impactful products, systems, and solutions, I needed a better, more technical understanding of how the world and its technology worked. I felt that having a strong analytical ability with respect to people, markets, and society combined with the practical capacity to create software and other technology would be enough for me to go on to accomplish the high-minded goals I had set for myself.

However, I was missing something. Despite knowing a slew of theories, analytical techniques, algorithms, and concepts, I didn’t know how to manifest them into tangible, actionable output that could effectively address anything. I could come up with some ambitious theoretical system that addressed power and ownership disparities between a platform and its end users, but I couldn’t see how, or in what manner, such a system could, or should, be delivered to real people in the real world. In other words, I couldn’t design.

I was somewhat aware of this deficit through the latter years of college, although I couldn’t specifically articulate it as a lack of design prowess — I just felt that my intellectual toolbox was missing the capability to bring an idea or conceptual solution into reality. It was not until I took a bio-inspired design course during one of my final semesters at Berkeley that I began to understand how the practice and process of design was what I wanted, and needed, to develop. As we learned how to comprehend and then apply knowledge and observations of biological mechanisms to the design of products such as toys, synthetic materials, and robotics, I saw how design, in a broad sense, was a process through which technical concepts and ideas could be deployed towards functional, pragmatic purposes. I realized that the discipline of design could be what I was in search of: that crucial translational layer that applied concept to reality. 

Not too long afterwards, my relationship with design evolved further when working at a  small startup developing an online marketplace for grocers and food producers. Here, I saw, firsthand, how a thoughtful approach to design could have a tangible impact on business outcomes. In the beginning, our product had fairly primitive navigation requiring an unintuitive filter system for search. I could see, through analytics, how users would grow frustrated during sessions and eventually leave without ever purchasing or reordering anything — causing a notably negative impact on the business. After personally developing usability improvements such as full-text search and a new filtering experience, and seeing how they increased marketplace transaction volume, I learned just how integral fundamental design decisions were to the successful execution of a product and business. While through the bio-inspired design course I learned about the mindset and process of design, and how it could aid in my endeavors, it was from this experience that I discovered just how crucial design was to the execution of an aim and thus the viability of a vision.

Eventually, I began to more seriously engage with design, applying it as a vehicle through which I could deploy my ideas. For example, I started a direct-to-consumer company that was designing a reusable container product that could help fight the proliferation of single-use containers. I also taught myself more about digital product design and learned to prototype product ideas via iOS development. Throughout these experiences, as I developed my design skill set and gained more intimate understanding of the discipline, my relationship with design expanded as my experience with it blended and intersected ever further with technical tasks and efforts seemingly unrelated to design. Specifically, in working on software implementation or dealing with manufacturing processes, I came to understand how design itself was actually an inherently technical subject. I saw how design decisions significantly impacted technical choices and outcomes which meant that, to be effective, designers had to have considerable technical understanding themselves. 

This made me realize something important: design wasn’t simply a translational layer from concept to reality, it was an approach that demanded cross-functional understanding across the technical, creative, societal, and strategic — it was about deeply understanding problems. This appreciation is what made me see that I’m a designer at heart. All that time I spent thinking, learning, and building through my own work, trying to address problems I saw in the world, I was really just designing.

When You Realize You're a Designer

## State iOS App

### Summary

I designed and developed an iOS application called State, a product made to help people stay in touch with each other. On top of designing the entire interface, I programmed both the frontend and backend.

### Background

The idea for this application came to me when I wanted a fun way to keep in touch with my partner over long distance. I wanted something that felt personal and captured the joy of being close to another person.

When I dug deeper into what it meant to feel close to someone else, I thought about person-to-person interactions, and how people who are close interact differently than those that are not. In looking at my relationship with my partner, and thinking about our interactions and how they would make me feel, I thought about how we frequently message each other just to see what the other is up to in that moment. The candid, informal nature of these everyday conversations, however banal they would seem, were a symptom of our closeness as they were opportunities to be ourselves, without any pretense, expectation, or agenda. I would feel so happy when we had these checkins, with her asking me what I was up to and I inquiring back, as they reminded me that someone else was thinking about me and allowed me to feel like a part of her life. To me, it was this interaction that captured the feeling of being close to someone.

So, I wanted to make a product based off of this interaction of candidly sharing what you’re up to with someone.

### Design

**Concept**

The concept, intended as a mobile application, is centered around sending your \_State\_, a message composed of a picture from the front-facing camera and a picture from the rear-facing camera, to a friend. Upon receiving your State, your friend will be notified of your having sent them your State, but they will not be able to see its contents until they send you their State. Likewise, once your friend responds with their State, you cannot see it until you respond with another State of your own. If either party does not respond to a State received from the other within 24 hours of it being received, then the receiving party will never see the State’s contents.

Additionally, when recording a State, you have a time limit on how long you have to take the pictures. If you run out of time, the app just takes the photos automatically. You can also set a timer on the recipient, meaning that you can dictate how long the receiving party has to record their State in order to see yours. The reasoning for this is that States are meant to be candid—they are supposed to represent an unfiltered perspective of you at a single moment in time.

It should be noted that the intention of this design was to be used solely for sending what you’re up to another person, not for having linear, back and forth conversations.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2Fstate%2F520a00dd-e849-455c-8689-4d834fca418f.png?alt=media&token=e0710ca4-00f3-4168-ba3c-8f994b216619","id":"520a00dd-e849-455c-8689-4d834fca418f","width":1286,"height":4895,"filename":"state-screenshot-array.png","type":"image/png","caption":"","border":false}]}
```

**Thread Phases**

The interface is centered around the interaction between two users, referred to as a Thread.

A Thread is always in one of five mutually exclusive phases, where each phase transitions from one to the next depending on a State message being sent or received.

To enforce the mental model of a Thread having precise phases, each phase is defined by a particular color.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2FYrtP2A3N1oz1yX5Prw6A%2F9764d246-555f-47c7-b378-4806a7ed7203.png?alt=media&token=0bdc5100-03b8-45ab-bd6d-cb586e4199c0","id":"9764d246-555f-47c7-b378-4806a7ed7203","width":1286,"height":1341,"filename":"Frame 1187.png","type":"image/png","caption":"A Friend Request","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2FYrtP2A3N1oz1yX5Prw6A%2Ff8060be3-b9a9-45f5-b801-007558ddaa78.png?alt=media&token=186af5aa-9c94-4ea7-9b21-50e65d962ee8","id":"f8060be3-b9a9-45f5-b801-007558ddaa78","width":1286,"height":1341,"filename":"Frame 1188.png","type":"image/png","caption":"An thread in the \"empty\" state","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2FYrtP2A3N1oz1yX5Prw6A%2F608aebe0-f579-4cc9-aa7e-208f7d742dec.png?alt=media&token=948deed3-a3d5-4f23-82f2-1c9e8be58981","id":"608aebe0-f579-4cc9-aa7e-208f7d742dec","width":1286,"height":1341,"filename":"Frame 1189.png","type":"image/png","caption":"A thread in the \"sent\" state","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2FYrtP2A3N1oz1yX5Prw6A%2Fec65ed30-9030-4910-85ea-f5293b153ada.png?alt=media&token=305b65d1-621b-4d57-8996-ddd15ffd3124","id":"ec65ed30-9030-4910-85ea-f5293b153ada","width":1286,"height":1341,"filename":"Frame 1190.png","type":"image/png","caption":"A thread in the \"received\" state","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2FYrtP2A3N1oz1yX5Prw6A%2F784d3441-77e5-473c-9bdc-e499433ffef6.png?alt=media&token=19152d10-e1bb-4adb-ab3b-7beeec262548","id":"784d3441-77e5-473c-9bdc-e499433ffef6","width":1286,"height":1341,"filename":"Frame 1191.png","type":"image/png","caption":"A thread in the \"opened\" state","border":false}]}
```

The color feedback is enforced in the Threads Overview screen, where each Thread tile has a colored dot denoting the phase the Thread is currently in.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2FYrtP2A3N1oz1yX5Prw6A%2Fc44182fc-77ab-4b75-ab64-49609bdf192f.jpg?alt=media&token=63e77698-8553-45ff-9f9d-a8ab7c9a077d","id":"c44182fc-77ab-4b75-ab64-49609bdf192f","width":1286,"height":1341,"filename":"Threads Overview Image.jpg","type":"image/jpeg","caption":"The overview of your threads","border":false}]}
```

The Thread interface behaves much like a finite state machine, where each phase transitions to another given the right inputs to the system. In the case of the Thread interface, the inputs are new State messages being sent or received.

**Some Other Details**

The rest of the application’s design is kept as simple as possible, with generally only a single primary action in every UI context with clear feedback.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2FYrtP2A3N1oz1yX5Prw6A%2F2c121f51-e9a7-428a-8c53-307a20705b17.png?alt=media&token=329d9102-b0fb-49df-be89-c97e35a467b3","id":"2c121f51-e9a7-428a-8c53-307a20705b17","width":1050,"height":1313,"filename":"Frame 1192.png","type":"image/png","caption":"Buttons used throughout the interface","border":false}]}
```

### App Icon

I designed my first app icon for this project. I wanted something that was built from simple shapes like circles and rectangles yet had a strong connection to the qualities that made the product unique.

I first started playing with the concept of time, as a key aspect of the product was having a time limit on how long a user had to take their photos.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2FYrtP2A3N1oz1yX5Prw6A%2F6c61d220-6455-495d-ae02-f351a90457d3.jpg?alt=media&token=e823e47e-0e08-42b3-9c19-25443b67bd22","id":"6c61d220-6455-495d-ae02-f351a90457d3","width":1400,"height":956,"filename":"Clock App Icons.jpg","type":"image/jpeg","caption":"App icons playing using the concept of time","border":false}]}
```

After playing with a few variations of this, I felt that the notion of a clock implied the product was a timer of some sort. Additionally, while the time limit aspect of the product was important, I realized it was more of a secondary detail.

I then tried playing off the name of the product, State.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2FYrtP2A3N1oz1yX5Prw6A%2F99f86034-eeb5-40ab-8b21-eab1ae9dba17.jpg?alt=media&token=72c257e0-8668-45d2-80f4-7928d54eee7a","id":"99f86034-eeb5-40ab-8b21-eab1ae9dba17","width":1400,"height":956,"filename":"Name App Icons.jpg","type":"image/jpeg","caption":"App icons playing on the name of the app","border":false}]}
```

While I enjoyed the simplicity of this, it just felt too boring.

I came back to the idea of working from a key characteristic of the product. I tried employing a chat bubble motif, as is often seen in instant messaging icons, in a different way as the product had messenger qualities.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2FYrtP2A3N1oz1yX5Prw6A%2Ff101c00b-c324-4d60-9fca-4b1f67e08ae0.jpg?alt=media&token=742504b6-520b-4b99-834a-91e4dd20f844","id":"f101c00b-c324-4d60-9fca-4b1f67e08ae0","width":1400,"height":1300,"filename":"Chat Bubble App Icons.jpg","type":"image/jpeg","caption":"Chat bubble concepts","border":false}]}
```

The final version was the following:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F9yKMRXUlpXWALVH9IRVuW9tAf6W2%2FYrtP2A3N1oz1yX5Prw6A%2Fa3872038-2546-42e3-ac00-dfb35dcf8044.jpg?alt=media&token=255b5a05-a412-4283-ae0f-3e63df8f625a","id":"a3872038-2546-42e3-ac00-dfb35dcf8044","width":1400,"height":936,"filename":"Final App Icon.jpg","type":"image/jpeg","caption":"The final version","border":false}]}
```

### Development

In addition to all of the interface and interaction design, I programmed the entire application.

I wrote the mobile client as a native iOS application using the Swift programming language. I employed the functionally-oriented Composable Architecture library to write and architect the business logic and used the UI framework, SwiftUI, to build the entire user interface.

I built the application’s primary server-side API application in Swift as well, which I decided to do to minimize context switching as I worked on the mobile client and server-side application simultaneously.

As the application required realtime exchange of messages between users, I also had to build out some realtime infrastructure using the bi-directional WebSockets protocol. For this, I developed a high-performance realtime API server using the Rust programming language.

State

Product & Design

Economics Major

Took quite a few Computer Science classes, too.

Also did a research project studying the economic relationship between GDP and urban transportation density.

I designed and developed an app to help my partner and I stay connected over long distance.

Led the design of a product that helps people build Accessory Dwelling Units (ADUs) on their property at this cool non-profit in the Bay Area. In addition to design, I led the market research, authored the product spec, and collaborated closely with leadership on roadmap.

Lead Designer

Worked on product at a small startup building a marketplace connecting independent grocers and small-batch food producers.

Some of my contributions:

• Developed search\
• Built internal analysis applications to increase shipping volume by 30%\
• Constructed database tool to increase customer onboarding by 20%\
• Designed and implemented enhancements to the user shopping experience\
• Built internal logistical data analysis application

The startup was acquired during my time here.

Product Developer

Building something that will revolutionize the world of corporate ethics. I’ve been leading the design and development of our website and early prototype.

The team is not currently public. Email/DM me if you want to see or know more about the project!

Matt Mannucci

Contact

Work Experience

Education

Side Projects