first-spiritual-temple

01. the client

The First Spiritual Temple is a religious non-profit based in San Francisco, and serves as a meeting place for people who identify as spiritualists. They began transitioning to a more online presence and wanted a modernized website to reflect this new identity. I worked closely with them to decide what their new online presence would look like and how to preserve old information in a new way that was reenergized.

02. the challenge

The First Spiritual Temple (FST) was a client that dealt very warmly with individuals in person, but was struggling with how to attract and connect with a virtual audience. They were the first to admit that their previous website was archaic and served mainly as a resource for current members. They were having difficulty attracting new membership and wanted a modernized website with a sleeker, younger feel. However, as a religious organization, they had beliefs they wanted displayed in a certain way, and wanted to preserve most of the information currently on the website, so they asked me to reorganize the information in a way that made their mission more clear and the organization more approachable.

The challenge became to design a website that was authentic to who they were and that accurately represented their beliefs, while also appearing modern and legitimate. On top of that it all had to be within the coding capabilities of my team, which was made up mostly of underclassmen.

03. getting the story straight

I am not personally a spiritualist, which was challenging in some ways but helpful in others. Because I don’t share their beliefs it was hard for me to immediately understand the mission of the client or their vision, but it also provided me an outsider opinion that was more similar to that of the audience they were trying to attract, and allowed me to be objective in assessing what content was more helpful or more confusing.

The first thing I did was go through the website recording what information spoke to me and what information I got snagged on. I took notes on the various storylines I was picking up on, and noticed that information that seemed to go together as part of a compelling story was often spread out on multiple pages. The lack of cohesiveness made it difficult to get the full meaning of what otherwise would have been a strong pull. I laid out all the information and sorted it into narratives that complimented each other, so that the user could quickly find and digest the information they were looking for.

Once I had the narratives laid out, the largest ones became their own page of the website, and the smaller ones that complemented each other I combined into other pages. Once I had each page mapped out, I organized them a few different ways and ran them through a round of user testing to see which organization system was the most intuitive and helpful to users. Once I had my information architecture decided, I started working on the visual design of how to present it.

04. simplifying the visuals

The only guidelines I had been given regarding the design was that they wanted something simple, modern, and not flashy. Their previous website had lots of images, but that were unrelated to the page content and not visually well integrated, many consisted of random shoots of various San Francisco landmarks. I wanted to preserve their nod to San Francisco, but also simplify the images I used. I picked a single image of a foggy sunset over Sutro Tower, which is a well-known landmark of the area but not particularly touristy, because I felt overly touristy locations took away from the credibility of the Temple as a religious organization.

I made that image the central element of my design and used colors selected from it as my color scheme. I incorporated it into the navigation bar, leaving most of the website white for a modern feel, but still serving to visually tie the different elements together.

a sunset over Sutro Tower, the central image I chose to inform my visual design

05. transition to PM

Once I finalized the design of the website, I presented it to the client and they were very pleased with it. They requested a few minor changes to the information architecture of individual pages, and then they okayed my team to start designing the website. I was the most senior coder on the team as well as the designer, so we decided my time would be best spent as a product manager who could help each person with their coding problems and ensure that the execution of the website matched the original vision. The end of the academic year put a pause on our work, but we have since resumed and this is an ongoing project I am helping with. My role so far has involved working closely with the student working on our external style sheet and occasionally stepping in to edit or debug the others’ code. Additionally, I am in open communication with the client to ensure they are updated on our progress and feeling comfortable with our progress.

06. takeaways

To change almost none of the information of a website while completely redoing the design was an interesting and challenging project for me. I enjoyed exploring how to modernize and refresh a page without rewriting the content and I learned a lot about what parts of a website have the most impact. The website ended up being extremely simple, but I found this project to be a very useful exercise in cutting down content to only what is truly impactful. The client wanted the message and feel of their organization to shine, and wanted everything on the website to have meaning. This led me towards less written content and few images, but I found that in the end it made the content that was there speak louder and more clearly.

This project taught me the value of cutting down, and how to identify and communicate the soul and mission of a client to their audience. I hope to continue working on projects that start out of my comfort zone, because those are the projects I have learned from the most.

back to top

First Spiritual Temple of San Francisco