I started by coming up with a new vector logo featuring the school mascot, the Dolphins.
Skills used

User experience design, Front end development, Responsive web design, Visual design, Development, Information architecture

About this project

With my son entering kindergarten in the fall, my wife and I have talked about how we can be involved in his education. My wife became a member of the PTA and at her first meeting, someone mentioned that the PTA website was in desperate need of attention. I took on the role to help give the PTA a better platform for reaching out to families and getting them involved.

I set up the hosting, created a new logo for the school (based on the school mascot, the Dolphins), and designed and built templates for the new site using Craft CMS.

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.

Using Craft, I can structure content logically depending on the section or page.

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.