A while back we launched the website for Smart Start New Hampshire, a statewide initiative to help families in the Granite State get access to early childhood development opportunities. They were recommended to us by Hilary Nachem, someone I’ve known — and had the chance to collaborate with a few times — over the last few years.
The request was straightforward: a simple WordPress site that the team could edit easily, a nice brand to match their lovely logo which had been done prior to our collaboration, and a way for people in New Hampshire to search for (and contact) their local legislators. The shining gem of the project was the Legislator Lookup plugin we developed.
Our first task was developing some branding to build on their existing logo. I started by making some home page mockups. I’ve gotten out of the habit of doing page mockups in favor of atomic design (more on that another time), but in this case it seemed the shortest path to a final product. To build a standard for future design assets like emails, social media images, and print collateral I needed to create a fuller brand. And by fuller brand, I mean more than just fonts and colors, but also overall feeling and tone and photo selection and treatment. All of these elements combined — plus more — are what really creates a brand. That is to say, the experience one has when interacting with a project, group, or company.
To capture all of these things in one pass, I opted for the mockup approach. Here are the three mockups I came up with, along with the descriptions I wrote for the client. Each one represented a different interpretation for the original logo.
I felt inspired by the work itself and its bipartisan nature. Playing off of the colors in the logo, I came up with a theme that feels very American and approachable. To make things softer and more kid-focused, I’ve used a lot of rounded rectangles and friendly fonts. It’s simple and makes an impact by being bold.
Here I was really interested in the emotional aspect of your work, reminding your constituents how precious and important childhood is to our adult selves. I chose to fill the site with lots of soft, nostalgic images of children engaged in play and discovery. I kept a lot of the same fonts and pulled in the colors from the logo to keep it all on-brand.
Little hands at work
I just couldn’t help myself. I had to do a bright and colorful theme! The focus here is on activity. I’ve chosen photographs that are vibrant and alive with creativity. This theme really captures the essence of a place full of children, like stepping into a classroom. Again, I’ve used some of the same fonts and treatments to keep things consistent.
From here, after some feedback, I developed this mockup, from which I pulled the design elements into a fuller brand guide. You can see the final brand guide here.
Pulling it all together
Once we got approval on this design, we began to build out the website. We’re hoping to share our base theme more publicly one day, but until that time, I’ll give you a run-down of how we tend to approach projects like this.
We start with the shell of the site. Depending on a client’s needs, we can either set up a development site or put up a splash page on the current site while we work on the back end. I prefer the former, this time we did the latter, it just depends on the client’s needs. Next, we install all the plugins, our default base theme and child, and then begin configuration. At the same time, we’ll also start building out the shelving system of the site: the pages, the forms, the navigation, and any necessary configurations for the blog.
In an ideal world, we’d have all the content prepared by the client and ready to go before we even start on design. This is almost never the case. Because of that, the content upload and styling tend to happen in a back and forth way. We’ll add the content we have, style things as needed, and then adjust the layout and styles (and sometimes overall architecture) as content changes.
A note on styling
We try to put as much of the styling in the theme customizer as possible. This gives clients an easy and accessible way to make changes to their site over time without needing to call in an expert who can read and edit the Sass file in the child theme. Sometimes we even go so far as to add new items to the customizer to give clients this kind of control. All the other things that can’t go in the customizer — or don’t make sense to put there — go in the child theme files on the server. These customizations take up a fair amount of time and generally go unseen by the client, but because our intention is always to make work accessible, we spend time doing things right.
The final cherry on top was completing the Legislator Lookup plugin. Once we had all the content in place and styled, it was easy to link everything together and hand off the site. In the end, we had a great time collaborating with the folks from Smart Start. We’re really grateful to Hilary for sending them our way. Our business runs almost entirely on word of mouth. If you know anyone who needs help with their project, send ‘em on over!
Thanks to everyone who contributed to make this project a success.