"PASS THE SALT"

FIGMA | XCODE 12 | SWIFT

PASS THE SALT

A community generated mapping project that shares geolocated moments of cultural dissonance to foster body-positivity across dinner tables around the world.


TIMELINE:

August to December 2020

MY ROLE:

Storyteller, UX Researcher, Product Designer

SKILLS:

UX Research, Wireframing, Product Design, Prototyping

TOOLS:

Procreate, Figma, XCode, and Swift




PROBLEM

"There have been some correlations between Asian American women, perfectionism and anorexia. Also, for the Asian households that express love through culturally acceptable means, such as food, a rejection of food could also be a rejection of care and concern."
- Dr. Michi Fu, Ph.D. Professor of Clinical Psychology at California School of Professional Psychology
"If policy prescriptions from one paradigm are imposed into to a paradigmatically differing cultural environment, we can expect to see a rejection as a result of cultural dissonance."
- Stanley K. Ridgley, Ph.D. Assistant Professor at Temple University, Fox School of Business



Cultural dissonance prevents multi-ethnic and multi-generational family members from giving and receiving empathetic awareness of each other at the dinner table.




SOLUTION

Over the course of five months, at an unprecedented time in which many find themselves isolated and scrutinized in their childhood homes, I created a platform that empowers marginalized folks to share their stories safely and unapologetically as a means of remedying this cultural dissonance. Pass the Salt is a living archive that documents anonymous moments of bodily joy, shame, and contentment from anywhere in the world in order to foster body-positive solidarity among others who might unknowingly feel the same way.




PRODUCT OVERVIEW




Solidarity through storytelling

Photo and text fields allow users to shape and share their story any way they want to, on their own terms.





Safety through anonymity

Entries are void of names and time stamps to ensure the privacy of the user. Dedicated moderators actively survey the app for spam, hateful, or revealing content.



Community through cross-cultural contributions

Using Google Maps' API, users can search for and share stories from all around the world. The community-building interface helps to draw cultural contexts, commonalities, and connections beyond the confines of one's dinner table.


FIGMA PROTOTYPE




PROCESS


BACKGROUND

Why am I doing this?
"Belly Fat", 2016 graphite and colored pencil on paper 18in x 20in

I drew this self-portrait in high school as a means of expressing my frustration with the way women's bodies are falsely idealized in mainstream media. These feelings of body-dysmorphia and dissonance were echoed at my Chinese-American dinner table when I'd be lovingly fed to the gills, yet blamed for being my size. What I wasn't allowed to say at dinner was stated in this piece, which eventually led to my enrollment at USC. Four years later upon my near graduation from college, this cultural problem that many first-generation women of color and I experience has presented a design opportunity of creating a safe space for marginalized individuals to share their stories with one another without being shamed or ashamed.




QUESTIONS

What areas of inquiry am I attempting to engage in my research?

CENTRAL QUESTION:

How have different sociocultural systems of power shaped and continue to shape the shared perception and objectification of Asian American bodies?

SUBQUESTIONS:

ONE:

What sociocultural power systems are at play at a multi-ethnic and multi-generational dinner table?

TWO:

How are they perpetuated in modern-day culture?

THREE:

How do these sociocultural power systems clash and intersect?

FOUR:

How does one identify and dismantle these systems of power?

FIVE:

How does objectification impact the psyche of Women of color?




USER RESEARCH

Who needs pass the salt and why?

Unconventional to the typical UI/UX design process, I conducted my user research through the making of this prototype when I asked ten of my Chinese-American friends if they would send me a quick snapshot of their dinner and accompanied by a caption for a school project. In that sense, my user interviews were these anonymous diary entries. Though haphazardly and hesitantly crafted like private after thoughts, they contained little hidden narratives of the immigrant experience, of bodily discomfort, of parental pressures, and ultimately suppressed expressions of cultural dissonance that informed the need for Pass the Salt.


"potluck", 2020 interactive HTML web application

I presented this piece in front of a class for review and a peer of mine urged that I make a project like this that catered to an audience beyond first-generation Chinese-Americans. Growing up in a Latinx-American household, she also experienced forms of cultural dissonance at the dinner table and sought ways to express these frustrations as well. Her input, as well as the input of my friends who contributed to "potluck," allowed me to create three user personas who embody the app's target audience.




These three personas are archetypical users whose characteristics represent the larger needs of those who might use Pass the Salt. From getting a better sense of the project's target audience using "potluck" and this user persona exercise, I have identified two user outcries that call for design solutions.




USER OUTCRIES

What do users need from pass the salt?

VISIBILITY

A means of bodily and narrative-driven expression that can be seen beyond the physical and cultural confines of one's own dinner table

VALIDATION

An unwavering sense of confidence in one's own personal narrative that is unhindered by cultural dissonance



SKETCHES

What are the design solutions?

1.

Interactive map that visualizes the interconnectedness of seemingly disparate cultures

2.

Submission via pinning a personal photo and caption to a location on the map to craft their own narrative

3.

Safety measures that protect the user's integrity and identity

Using Procreate, I drew a user flow to quickly map the flow of screens of Pass the Salt in order to help design the path that users will have to go through to fulfill their needs. This user flow how one can achieve the two main functions of the app, that being adding and browsing content.

This low-fidelity wireflow depicts the initial stages of what the Pass the Salt interface aims to look like. The arrows represent user interaction from display to display that maneuver to a map-based home screen which draws inspiration largely from other navigational mobile apps. The pin-shaped icons also visually reinforce the user's task of geolocating themselves as well as their stories when using the app.




IDEATION

What ideas bring pass the salt to life?


Idea 1

ONBOARDING

I designed a series of welcome screens featuring food-themed copy that explains how to use the app while familiarizing the user with the subject matter of Pass the Salt in order to earn their trust.




Idea 2

TAGGING + LANDMARKS

Submissions to Pass the Salt are not only organized by location, but also by tags. Tagging allows users to add more depth to their personal stories by integrating one-word descriptors to their posts. Users can enter locations, landmarks, and even tags into Google Maps' "Place Search" field to draw cultural connections in even more ways.

Or, if they're feelling lucky, they can press the "I'm Feeling (Pot) Lucky!" button to be redirected to a random submission on the app.




Idea 3

PLACEHOLDER COPY

What message do you want to pass on? Find a new flavor.

Placeholder text presents an opportunity to position Pass the Salt as not just a generic app, but a food-lover's trustworthy tool for storytelling and storyfinding.




WIREFRAMES

What is the form and function?

Above are high-fidelity wireframes of Pass the Salt I designed using Figma. The simplicity and lack of a surperfluous amount of screens balances the complexity of the map, allowing for an easy experience when navigating something as information dense as personal anecdotes from around the world. Each display has no more than three key buttons that the user needs to interact with in order to get around the app, allowing the user to achieve the value of the Pass the Salt as quickly as possible without being fatigued with a ton of options.




BRAND GUIDELINES

What is the visual culture?

Ever wonder why fast food logos tend to be red? Color psychology argues that the color red is stimulating, exciting, and associated with activity which increases an onlooker's heart rate, consequently jump-starting our hunger. This terracotta color palette coupled with a bold typeface of charmingly unconventional proportions pays homage to my Chinese-American heritage while stirring the user's appetite.

After several rounds of iterative sketching using Procreate and Figma, I have identified two themes, personal contribution and powerful technology, that I wanted to vizualize in my logo. The Pass the Salt brandmark emblifies the melding of two these themes through its handwritten typeface yet modular form factor of the salt shaker icon.






PROTOTYPE

PRESS (F) TO FULLSCREEN, (R) TO RESTART






FINDINGS

WORK SMARTER, NOT HARDER

I initially wanted to produce a fully-functioning Xcode prototype of Pass the Salt by the end of 2020. However, given the state of the world and the nature of remote online learning, I eventually found that I did not have the resources nor the mental capacity to fulfil this initial goal, given that I had nearly zero back-end coding experience. Working smarter meant intuitively curbing my goals to fit my circumstances so that I could produce high quality deliverables while maintaining my wellbeing. With this mindset, I ended up being happier with myself and my results.

SOME USER RESEARCH IS BETTER THAN NOTHING

A missed opportunity in this project was definitely more user research. Throughout the design process, I was heavily discouraged in approaching others for help, input, or guidance as I didn't want to add another burden to someone's already burdensome life, especially nowadays. I also felt the limitations of not being able to interact with someone face to face during this time which, to me, defeated the purpose of conducting user research. Yet, this line of thinking overlooked several methods of rapid online data collection, such as a five minute Google Form or something as simple as an Instagram poll, that constitutes as user research that even I wouldn't feel tedious in completing. If you never try, you'll never know what you'll find.

PASSION DRIVES POWERFUL DESIGN

I don't think I could've completed any amount of this project in these terrible circumstances without the sheer drive to help others get out of a sticky situation that I experienced growing up. What was and still is a problem for me ended up serving as an opportunity to demonstrate high-level design thinking that was self-gratifying, self-improving, and deserving of being shared to others. When launching head first into a project, make sure that your heart, not just your head, is in it for the long run.

DOCUMENT EVERYTHING

Command + Shift + 4 like your life depends on it. There's no harm in keeping tabs on all the progress you've made and taking pictures, screenshots, or even mental notes serves as a tool for both self-reflection and showcasing your work process to others. 'Cause hey, you'll never know when a small idea ends up being a college thesis capstone project that requires several pages of documentation.





NEXT STEPS

I am currently in the process of building out the user interface of Pass the Salt on Xcode 12 using Swift 5.3! If you are interested in seeing how far I've come, or lending me a hand with the back-end, please don't hesitate to reach out. Stay healthy, wash your hands, and hang in there :)