St. Mary’s School, located in the heart of San Francisco, has been serving the Financial District, Downtown and Chinatown communities since 1921. The school is a high-performing Catholic college-preparatory K-8 school in the Bay Area and part of a community network led by the Paulist Fathers centered at Old St. Mary’s Cathedral.
In 2013-2014, a new management team relaunched St. Mary’s School into the 21st century. Their old website had stale content that was dated, the navigation was difficult to use and their variations of the logo lacked brand direction. The website was put together by in-house staff and was no longer maintained. In addition, the tangram inspired logo was designed with clip art and a miss-match array of graphics and colors, making it confusing for people to recognize their brand. The school wanted a fresh website and logo that speak to their innovative classrooms, educational technology, and integrated STEM curriculum. They asked Thomas Made to help re-brand the school by designing a customer facing website that effectively communicates the school’s potential and stylize their classic geometric logo to reflect their school’s new energy.
The underlying concept behind the St. Mary’s School brand was “innovative learning.” We came to this brand concept because the school’s use of e-learning in the classroom environment, from reading on the tablet to presenting new lessons on smart projection boards, the school used various technologies to enrich the learning experience. Focused on creating a strong design that illustrates the technical and playful spirit at the school, we overhauled their logo and website. In order to reinvigorate the organization, we looked deep within the schools archives and found an 80′s tangram puzzle piece drawing they once used as a logo. The new logo was inspired by their old one and to give it a modern twist, we used the color scheme and principles of flat design.
Designed with the student and their families in mind, the website redesign is refreshing. The minimal home page gives students an overall glance at the school’s acitvies, from the news section, where the principal posts new activities, to the calendar that lists sporting events, fairs, and even art shows, the design compliments the school’s new-found energy. We created an easy to manage website back-end with a comprehensive Content Management System that ensures content layout consistency. The completely responsive design allows the organization to continue educating future generations to come.