San Francisco Heritage

Introduction

San Francisco Heritage turned 50 in 2021. They had undergone a rebranding in recent years, but their website was a bit behind the times. They had an opportunity to surface engaging content and offer visitors more than was available on their social media sites.

Typical users of the San Francisco Heritage website are San Francisco residents who are interested in neighborhood activism or history. Most visitors to the website come from social media channels like Instagram or Facebook.

In this spec project, I spoke with the owner of the SF Heritage website to get a sense of her objectives and pain points. My goal was to design a new responsive site for SF Heritage that more clearly surfaced content for users beyond what was already available on their social media site.

Research

I conducted a series of Zoom interviews with San Francisco residents as well as other people who are involved in historic preservation in other cities. I asked them about the types of events and content they would be most interested in and how they typically go about finding this information.

Respondents were most interested in finding out about events like walking tours and stories about the city. They were particularly interested in maps and content that would uncover interesting facts about their own neighborhoods. As a result, I decided to focus the reorganization of the site content to make events and interactive content more discoverable.

I also conducted competitive research. While SF Heritage doesn’t have traditional competitors, I researched other similar organizations in other cities and found some compelling sites and patterns to reference. Most other sites had much more streamlined content organization, a great use of photography to evoke the history of the city, and clear calls to action.

Define

My persona for the SFHeritage site is “Chris, The curious citizen.” Chris is a Bay Area native who has lived in San Francisco for 10 years. He’s passionate about his neighborhood, art, architecture, and politics, both global and local. He likes to read and learn about history and likes to learn about the background of places he visits and travels to, including in his own city. He especially likes to support local businesses that he feels need his help. He dabbles in local activism; he follows and donates to a few causes but hasn’t gotten thoroughly involved. 

I started with a card sorting for a new site map to organize the abundance of content on the existing site, consolidating where it made sense. Then I identified some key tasks: Finding an event and becoming a member, and created task and user flows for each.

Design

I used SF Heritage’s recent rebrand as inspiration, but did not stick to it precisely. I did not want to alter the brand too much, but created a stacked version of the San Francisco Heritage logo for more versatility.

I created mood boards and style tile options to convey a modern, community spirit, but also a nod to history. I landed on a rather muted color palette that highlights the burnt orange brand color. The typeface I used is a bubbly sans serif meant to convey neighborliness.

As I started my designs for the home page, I revisited the patterns I had identified in my industry research and focused on large photography, and clear modules to show off the different types of content on the site. I also made sure to include clear calls to action. I used a Crazy 8 exercise to sketch a few options for home page layouts.

I decided on a hierarchy for content based on what was most important to the respondents from my user interviews: clarification about the mission of the organization, stories about the neighborhood, and maps. Since SFHeritage wants to drive people to this content, but also drive membership and donations, I made these top priority as well. In addition to the wireframe for my home page, I built wireframes for the additional pages for my user flow tasks.

I created a UI kit and applied that to the wireframes for my high-fidelity designs. As I moved to high fidelity, I discovered some challenges in featuring the neighborhood stories in a carousel. I shared the options with a few people to see how they would most likely flip through a carousel and I selected a more clear way to show this. I also decided to build out a user flow for signing up to be a member.

Test

After a few iterations of the full UI, I conducted usability tests with the prototype. These were conducted in person. 

I learned from these tests that some elements appeared clickable that weren’t. The page that was the biggest challenge was the “Become a Member” page, as there was confusion around the dropdown and how to know what was included in your membership at each donation level.

I iterated on this page, and tested it again. This time it functioned as expected for users.

 Conclusion

This project ended up being more about content organization and flow than particular features. But there was much opportunity for improvement, so I chose to revise more pages than originally planned

I’m most proud of the visual design of the page, which feels clean and features old photography to indicate history, but also feels more modern.

In the future, I’d love to design one of the interactive pieces of content on the page, like an interactive map or historical timeline.

Back to top