Saying the Unsaid

An anonymous message-posting website and physical installation that explores the transformative power of language in shaping relationships and perspectives, encouraging users to authentically share their truths

ROLE

Designer

TIMELINE

Nov 2022 - Apr 2023

TEAM

Henk Van Assen, Thesis Advisor

SKILLS

UI/UX Design

Web Design

Brand Identity

Visual Design
Typography

TOOLS

Figma

Adobe Illustrator

Adobe Photoshop
Wix Website Editor

PROJECT OVERVIEW

Saying the Unsaid is a senior thesis project revolving around language and how it informs our relationships and understanding of the world. The project consisted of 1.) a website where people can anonymously submit messages and/or view a digital archive of messages submitted by others and 2.) a physical installation consisting of posters made from a select number of messages ranging different themes.

PROBLEM SPACE

Amidst a period of personal struggle, I came across the quote, "Is it better to speak or to die?" which sparked a newfound perspective and appreciation for language, specifically with how it informs our relationships and understanding of the world.

This made me realize that oftentimes, people tend to conceal thoughts, opinions, and expressions due to the fear of judgment, rejection, potential suffering, and other consequences. In other words, social norms keep many of us from sharing and expressing our truths. However, I strongly felt that sharing this information can lead to new opportunities that would not have been possible otherwise. Perhaps it leads to a better understanding of self or other, brightens someone’s day, or results in a stronger relationship between two entities. The possibilities are endless.

SOLUTION / WEBSITE OVERVIEW

For my senior thesis, I built and designed a website that provides a safe, artistic platform for people to share things that they wish they said or want to say. Here, users can upload a message with the option to include a related photo, and they can choose to identify themselves or remain anonymous. There is also a digital archive with 700+ messages where users can browse other peoples' submissions; these messages are timestamped.

Select messages were printed onto 17" x 22" inkjet posters and arranged on wire lines with metal clips to create a 12 ft x 18 ft installation at the Yale School of Art. A laptop displaying my website was placed on a pedestal in front of the installation so that viewers could submit messages in real time, as well.

PRODUCT GOALS

Encourage self-expression
Encourage human connection
Provide an empathy exercise
Create a space for reflection
Inspire people to speak their truth

PRODUCT FEATURES

Online submission form
Digital message archive
Digital image gallery
Physical installation

Here's a clip of the website in use. Alternatively, check out the website here!

DESIGN GOALS

Before designing the website, I wanted to establish my design goals and how these could also accomplish the overall product goals listed in the previous section above.

These design goals are based on good design practices and who my target audience would be.

1. MAKE IT SIMPLE & EASY TO USE

Retain necessary functionalities and make the user experience clear and intuitive

Ensure the website is easy to navigate and interact with

2. STRONG VISUAL IDENTITY

Design a visually appealing product that aligns with the brand identity and resonates with users

Balance aesthetics with functionality

Maintain design consistency across all elements within the product(s)

Implement a cohesive design language (colors, typography, iconography, etc.)

3. ENGAGE USERS

Create a product that elicits emotion, builds connection, and stimulates self-reflection

Find ways for the user to return to the website

4. INSPIRE ACTION

Use language and visuals that entice the user to submit a message

IDEATION

VISUAL IDENTITY

In order for this project to successfully accomplish its goals, I knew it needed to have a strong visual identity. At the end of the day, Saying the Unsaid is a brand. Therefore, I needed to establish a cohesive design language in terms of a color scheme, typography, and iconography. In addition, I felt that the copy should also reflect the aesthetic I was going for through its language, style, and call-to-actions towards the user.

For the first version of the website, which was used in the Yale Undergraduate Art Midway Show (a show in the fall where we were to present our work-in-progress), I decided to use the following visual identity components:

Lime green and black color scheme
- Why? To emulate the look and feel of something digital, since this message-posting platform is conducted through a screen rather than through hand-written notes or letters

Serif type - Monotype Baskerville
- Why? To make the user experience feel intimate, handwritten, and real

Mouth logo
- Why? This mouth-speaking icon represents one 'saying the unsaid' and 'speaking their truth.' It serves as the brand's logo and recurring icon across various platforms (digital and physical)

MIDWAY SHOW / MVP

As I mentioned above, the Yale Undergraduate Art Midway Show is an exhibition held in the fall where senior art majors have the opportunity to showcase their thesis project as any form of a work-in-progress.

I took this as an opportunity to 1.) create an MVP website to test out how users would react/engage with the product, 2.) gather early message submissions, and 3.) generate excitement for the final product that would be showcased in May. In order to accomplish these objectives, I decided to create a 42" x 55" inkjet poster featuring nine black-and-white portraits that I took of my family and friends with a lime green slip of paper containing their handwritten unsaid message covering a part of their face. The center portrait was of myself, and instead of a handwritten message, there was a QR code that would lead to the project's website. The idea here is that the portraits in combination with the QR code and handwritten unsaid messages would spark curiosity in viewers, leading to them scanning the QR code and submitting an unsaid message on the website. I wanted this poster to feel mysterious yet intimate, drawing people in to investigate and interact.

IMPROVEMENTS

MIDWAY SHOW FEEDBACK

Because I attended the show and was the "artist on-site," I was able to observe how viewers interacted with the poster and website in real-time without interfering their user experience unless I was asked to. This was a great way to identify user pain points, what worked, and what could use improvement. I was also sure to ask viewers for feedback before they walked away. I asked if they had any trouble with the site, if they had any suggestions, what their thoughts were, etc.

Unfortunately, the QR code was finicky and did not work successfully for everybody, skewing my results and affecting the number of messages submitted. However, those who were able to reach the website successfully shared their appreciation for the project and how they were excited for the final version to be displayed in May.

I was able to view website metrics from the backend and saw that I had 111 visits to the website and 5 messages were submitted. Therefore, there was a 4.5% conversion rate. This is considered quite high and successful in an eCommerce context, however, in this context, I knew I could and needed to do better.

NEXT STEPS

Based on the feedback and metrics received after the Midway Show, I know I needed to focus on how I could generate more user engagement and increase conversion.

After brainstorming, I decided that this could be achieved in a number of ways:

1. INCREASING TRAFFIC TO THE WEBSITE

Focus on strong marketing strategies

2. INCREASING USER ENGAGEMENT

Figure out ways to keep users on the website

3. GENERATE MORE INSPIRATION WITHIN USERS

Use stronger copy that leads to a desirable call-to-action

Display submitted messages on the website as both social proof and inspiration

SITE MAP

After evaluating the performance of the MVP website that was presented at the Midway Show, I realized that I needed to better organize the content of the site while also introducing some new features.

In order to increase user engagement and generate more inspiration with users, I decided to create a digital archive and gallery to the website. The digital archive displays an ongoing collection of already-submitted messages timestamped with the identification of who it's to and from (if applicable). The submission form was also updated to have the option of including an original art piece or photo that somehow relates to the user's unsaid message. These visuals, along with their accompanied message, are shown in the gallery of the website.

Following the brainstorm of this new structure and hierarchy of the website, I decided to create a site map. This visual representation would serve as a blueprint and help me stay organized and attune to the user journeys one could take while moving forward with the design process.

VISUAL IDENTITY – UPDATES

For the updated version of the website, I decided to make a few changes in order to create a stronger, more cohesive visual identity. I kept the lime green and black color scheme, however, I implemented the following changes:

Serif type (Monotype Baskerville) ---> San Serif type (Helvetica Light)
- Originally, I opted for a serif type to make the user experience feel intimate, handwritten, and real. However, I realized that this contradicted the modern and digital feel that the color scheme and aesthetic were attempting to portray.
- Therefore, I decided to use Helvetica Light to align the typography with the rest of the visual identity. This font makes the platform feel contemporary. Plus, it allows for better readability compared to the previous typeface.

Mouth logo ---> A Set of Hand-drawn Icons and Elements
- Initially, I only had a singular mouth logo displayed on the website, but I wanted to create a few more icons to strengthen the brand's visual identity and make the homepage more visually appealing for users.
- So, I designed a couple of envelope and letter icons. However, this time, I hand-drew the icons with a textured brush on Adobe Illustrator to add a human touch to the overwhelming digital interface.
- I also added hand-drawn underlines to key words and phrases on the home, about, and contact pages.

LOW-FIDELITY WIREFRAMES

Keeping the site map in mind, I created low-fidelity wireframes on Figma for the updated website design.

HIGH-FIDELITY WIREFRAMES

Keeping the design goals, user pain points, and site map in mind, I created low-fidelity wireframes on Figma for the Eco-Index.

I designed various iterations and gained valuable feedback from the rest of my team, eventually landing on this basic version of how the product might look like.

HOME & SUBMISSION

After reading a letter addressed to them, users are encouraged to submit a message with the option to include a related image.

ARCHIVE & GALLERY

Users can browse the digital archive and/or gallery which aims to both inspire readers to leave their own message and spark connection.

ABOUT & CONTACT

Users can read more about the project and its goals; they can also connect with me if they have any questions, comments, or concerns.

MORE PROCESS

MARKETING

After updating the design of the website, I needed to generate traffic to the site. I did this through 1.) sharing the link with family and friends and asking them to spread the word, 2.) posting on various social media platforms, and 3.) mass emailing the student body of Yale University.

While all three tactics brought forth users and messages, the third strategy was by far the most successful. Within a two-week period, I received over 700 unsaid messages!

POSTER DESIGN

Once I received enough messages (700 was more than plenty), I began to sort them based on themes, length, and style. Then, I selected about 80 messages that spanned a diverse range of the aforementioned characteristics.

Following this, I experimented with multiple iterations of how the poster might look like.

FINAL DESIGNS

I eventually landed on the bottom two poster designs to be featured in my physical exhibition. I chose to print both black and green posters to maintain a strong visual identity in person, as well.

Each poster contains information regarding who the message is to and from, in addition to the date and time the message was submitted. The website name is also featured in the bottom left, contributing to the project's brand awareness.

PROCESS PHOTOS

From designing posters, to printing, to trimming, it all happened in this room!

PHYSICAL EXHIBITION

After printing these designs onto 17" x 22" inkjet posters, I was forced to split the selection in half to about 40 posters. Then, I worked with the gallery installer to assemble, reassemble, and hang these posters onto arranged wire lines drilled into the wall using various metal clips at the Yale School of Art gallery.

I wanted the wire lines to be placed so that it created a 3-D space with height, dimension, and feel. This required experimentation and iteration, however, we eventually landed on an arrangement that I was happy with.

In addition to the 12 ft x 18 ft installation of posters, a laptop displaying my website was placed on a pedestal in front of the installation so that viewers could submit messages in real time. I cut out vinyl stickers at the Yale CEID and hand-placed them (without any ruler or tool!) onto the pedestal.

ME & MY THESIS ADVISOR

Fun fact: I took my first and last graphic design class at Yale with Henk. And to have him as my senior thesis advisor was a full circle moment, for sure.

IMPACT

PRODUCT SUCCESS

Saying the Unsaid accomplished all of the product and design goals listed in earlier sections. The project encouraged human connection, served as an empathy exercise, created a digital and physical space for reflection, and inspired people to express themselves by speaking their truth. This was made possible by the product's simplicity, usability, strong visual identity, and ability to both engage users and inspire action.

I received over 700 unique unsaid messages from the broader community spanning themes of love, loss, gratitude, motivation, fears, dreams, secrets, humor, and more. Reading these messages made me feel so touched and... human. The vulnerability, honesty, and willingness to share an unsaid message on my platform from over 700 different people means the world to me. I even received a handful of emails thanking me for creating this platform and investing in this project.

MY THOUGHTS

The results of this project have only reinforced all of the whys that were behind Saying the Unsaid. Language is such a crucial aspect of human connection, human understanding, and human experience. The ability to communicate in some form is what makes us human, and we shouldn't forget that.

Reading so many unique messages allowed me to step inside the shoes of 700+ complete strangers and imagine what they were thinking, feeling, and experiencing in a certain moment in time. How cool and beautiful is that?

Moving forward, I will forever be a huge proponent of speaking my truth, whatever that might be. I wholeheartedly believe in the power of words and what opportunities they can create, both small and large.

Ultimately, I am so grateful to have had the opportunity to use design to 1.) create a safe and artistic platform for people to share their unsaid messages and 2.) present the collaborative work of me and the community in a unique manner for others to read, connect, reflect upon, and feel inspired by.

My heart goes out to everyone who took the time to contribute to my project. And thank you to Henk for supporting my visions and providing guidance during this entire journey.

WHAT I LEARNED

How to creatively collaborate with the broader community
How to trust the process and lean into the art of iteration
How to craft a strong brand and visual identity
How to increase user engagement on an artistic website
How to install artwork in a gallery
How to instill empathy and inspiration in others