Tenderloin Museum

Introduction

Project Type

Personal project
Time

March - May 2020
Tools

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
My approach
I approached this project employing a thorough methodology and going through three specific phases: Research, Define, Design.

Research

Secondary research
Design brief
Brand attributes
Moodboard

Define

Typography palette
Color palette

Design

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

Research

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.
Moodboard
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.

Define

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.

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.

Design

Logo phase 1

I started sketching ideas for the logo letting my creativity lead the way.
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.
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. 
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. 
Brochure

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.
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
About page
Gallery page
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.
Homepage
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.

Conclusion

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.
Other projects: 
INFORMATION ARCHITECTURE| UX DESIGN
USER RESEARCH | UX STRATEGY
UX DESIGN