Echo Lake Elementary PTA
Improving engagement between parents, teachers, and students
The process
Architecture and content
Because I haven't been involved with a PTA before, I discussed content needs with some board members, and I combed through the old site extensively. I looked at a number of different PTA sites nationwide to get an idea of the most important common goals. I read more about the national organization and about how they function.
Visual style
I started the design process by exploring colors, type, and visual styles using style tiles (see below). Because the school mascot is the Dolphins, I played around with several different aquatic and beach color themes. I stuck with vibrant, playful colors to emphasize the playful nature of elementary education.
Branding
After finalizing the style tiles, I began work on a new brand for the school. They wanted to have a nice logo for spirit wear, print materials, and the website. I sketched various dolphin mascots with pencil and paper and then redrew the ones I liked best as vector elements within Sketch. I drafted a few variations of type treatments to go along with the dolphin logomark. The most popular by far (with nearly everyone surveyed) was a silhouette of a leaping dolphin above a lowercase "echo lake" with waves overlapping the logotype.
A living style guide
Once we'd settled on visual styles and a structure, I began building out a style guide to define the visual language of the site. It tied directly into the stylesheet I used for the site templates, so changes to elements on one or the other would be reflected in both. The style guide included typography (with both a baseline grid and modular scale), colors, iconography, basic elements (buttons to start), and the overall grid. It was nested within the base template that included the sitewide header and footer.
Managing content
With the style guide built and basic templates in place, I started building the content structure within Craft CMS. That allowed me to build the remaining templates around realistic content rather than fake copy. I reused content from the old site and wrote new content for pages that didn't exist previously (or, which, in a few cases were too sparse to be useful).
Craft is great for building content that's both structured (like events and news feeds) and free-form (like landing pages). Event entries, for instance, have a defined start and end time, optional (but highly structured) location, and might include a helpful description. Different types of news entries can include images, slideshows, or simply an article. Other pages — like the fundraising page — are more free-form, allowing for content within different blocks that make use of the grid. Each block can have its own style and title, making it easy to craft a visually appealing and unique landing page and customize it on the fly.
With this much power and flexibility combined with its friendly UI, it's easy to see why Craft has become my go-to CMS for new projects.
Lessons learned
I took this project on primarily so that I could get a better understanding of how I could help my son's school as a parent. It's given me a much better understanding of how the PTA works and what I can do to be engaged with his education. It's been a fun opportunity to stretch my skills across a wide array of fields, from illustration and branding to server administration and backend development. I hope to continue improving the site throughout my son's school years and perhaps find ways to make PTA sites easier for others as well.