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.
Collective: the museum benefits the neighborhood through close community collaborations
Educational: the museum offers educational activities
Inclusive: the museum supports the lives of those most marginalized through events and charitable activities
Dynamic: the museum offers walking tours and dynamic evening programming
Diverse: the museum celebrates the rich and diverse culture of the neighborhood
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
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.
About page
On this page, I wanted to highlight the museum's mission, history and their staff, and additional information about their schedule and prices.
Gallery page
On the gallery page, I put together all the content regarding the museum's permanent collection, and the current and past exhibitions.
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.
