Tenderloin Museum


Project type

Personal project

March - May 2020

Adobe Creative Suite (Logo design, stationery system design)
Sketch (Low fidelity and high fidelity wireframes)
InVision (Clickable prototypes)
My role

Secondary research, Design brief, Logo design, Typography and Color palette selection, Stationery system design, Responsive web design. 
Overview and Objective
The Tenderloin Museum celebrates the rich history and character of one of San Francisco's most misunderstood neighborhoods by offering educational, artistic, and charitable activities​ that support the neighborhood's current vibrancy, future potential, and enhanced economic development.

The goal of the project is to design an identity system that reflects the museum’s values.

Why the Tenderloin Museum?
Surfing the Tenderloin Museum’s website I thought that it was old-fashioned, very wordy, without visible calls to action, and with a complicated brand system.

Hence, I decided to take this challenge and design a whole new visual identity that embodies the museum’s social principles.

Current website - Homepage
Homepage of the current website
My approach
I approached this project employing a thorough methodology and going through three specific phases: Research, Define, Design.


Secondary research
Design brief
Brand attributes


Typography palette
Color palette


Logo design
Stationery system
Low fidelity wireframes
High fidelity wireframes
Clickable prototypes


I started gathering information about the museum regarding their core audience, the types of exhibits they typically curate, and their mission, purpose, and history.
Then, I created a design brief.
Brand Attributes
After having identified information about the museum, I defined a set of brand attributes, five purposeful adjectives reflecting the brand’s character and aspirations.
These adjectives helped me shape, identify, and monitor opportunities for the visual system.
I chose these brand attributes because I think that all of them align well with the museum’s mission and activities. The ones I applied the most on the project are Collective, Inclusive, and Diverse.
Now that I have distilled my museum brand into five key attributes, I considered what they bring to mind visually creating a moodboard with one reference image per attribute.
Moodboard with museum principles


Typography palette

I selected 2 type families, one for headlines and one for body copy that will be systematically deployed throughout my design system.

For headlines and titles, I decided to employ Lora, a well-balanced serif font that creates a great contrast and suits well with Open Sans, a sans-serif font chosen for the body copy given to its legibility characteristics.

Typography palette
Color palette

I chose these tones of burgundy and gold as primary colors because they symbolize warmth, optimism, and joy, which are some of the core museum’s principles.
The secondary colors are used for backgrounds and texts mostly.


Logo phase 1

I started sketching ideas for the logo letting my creativity lead the way.
Logo sketchesOther logo sketches
Logo phase 2

After sketching 40+ logo ideas, I chose four ideas that fit with the museum’s mission and key attributes, and I used different typefaces for each one considering how certain letters made me feel and how that might enhance or distract from my brand story.

I experimented with both uppercase and lowercase letters emphasizing words through shifts in kerning, leading and weight, and I concentrated on how the arrangement of letters affects the overall harmony of my logo’s total form.

Logo phase 3

After having received a lot of feedback, I decided to go ahead with the first idea that presents three people who hug each other and it wants to transmit inclusion, collectivity, and diversity, all values I was considering during the logo process.

The typeface used is Montserrat and every edge was edited, making them more rounded to match better with the symbol. 

Applying the colors of my color palette I created a black and grey version, and a colorful one.
Black logoColorful logo
Stationery system

My stationery system is made up of four items: business card, envelope and letterhead, and brochure. This exercise gave me important practice regarding visual and content hierarchy. 
Business card

Keeping in mind simplicity I designed the business card applying my color palette that creates a contrast between the background and the content.
Katie is the director of the museum. 
Back of Business Card
Envelope and Letterhead

In order to create a consistent and coherent visual identity system, I used the same principles of the business card for the rest of the stationery system.
For realizing the letterhead I played around with the shape of my logo. 
EnvelopeBack of envelopeLetterhead

Employing a multi-column grid, I designed the brochure for an online event that the museum organized in May, a digital panel around the themes concerning the LGBTQIA+ community.
Front of brochureBrochure page 2
Low fidelity wireframes

I decided to take care of three pages of the website: Homepage, About page and Gallery page since these are the ones with the most relevant information.

In this phase, I began thinking about the layout and what kind of information to include.
Homepage low fidelity wireframe
About page
About page low fidelity wireframe
Gallery page
Gallery page low fidelity wireframe
High fidelity wireframes

After having a clear idea about the layout and the basic information to include, I focused on applying my color palette, creating visible calls to action, and including engaging pictures that drive the audience's attention.
On the top, I designed some buttons that can help the museum gain more clients and profits. I included an old picture of the Tenderloin neighborhood since the museum's mission consists of telling the story of their area, and a map with all the information to reach the museum by different means of transport.
Clickable prototypes

At this point, I arranged the layout of the website on tablet and mobile sizes making it responsive. In this way the content adapts based on the size of the screen it is presented on.


Meeting goals and needs
The visual identity now is simpler, it aligns well with the core museum’s values, and it’s coherent throughout the whole branding experience. The website is modern, it presents visible calls to action, important for the business, and it engages through colors and pictures.

Key learnings
This project exposed me to visual design principles, color theory, visual hierarchy, taking the responsibility to design the entire brand system of a museum with a great cause in mind.

Next steps
I propose to conduct usability tests and keep iterating my final design as well as designing other pages.