- June 6, 2013
Sweat the Small Stuff
- @markhuot
- Development Director
Time and time again, we’re told “don’t sweat the small stuff” and focus on the things that really matter. Typically, we hear this when we’re obsessing over a
pixel here and a pixel there instead of concentrating on the direction and concept first. Most of the time, this makes sense and is sage advice—except for when it isn’t. At some point in every project, you have to focus on the minutia and work through the small stuff. For me, this typically comes in the implementation phase (and that’s okay).
Projects don’t have limitless budgets, so we have to make compromises. We could burn through hundreds of hours in the architecture phase, wireframing every single page in the site, or we could wireframe archetypal pages that matter most. We could design every single page in Photoshop, or we could create a design system that is extensible enough to fill out the entire site. At Happy Cog, this is our M.O. Do what you need to work out the issues of a phase and save the hours you don’t need for later, once you’ve ironed out the big-picture ideas.
This approach affects my work and the implementation phase in two ways.
Architecture Review
Because our site map and wireframes do not include every page on the site, it’s the implementation team’s job to build out this level of detail. Typically, this involves working with the client to expand the initial site map into a complete representation of the site. At this point in the project, we’re able to take our findings from the architecture and design phases and create an all-encompassing site map that speaks to how each page will function.
Design System
Instead of designing every single page of the site, Happy Cog’s designers focus on creating a system that will work throughout the site. For buy-in, sure, we have to present specific pages, but those pages are really just artifacts of the design system we’ve established. Like the architecture review, we typically extend this design system to every page of the site during the implementation phase.
Both of these examples of extrapolation are relatively small in the grand scheme of the project. Your client’s VP of Operations surely doesn’t care if a sixth-level page uses an accordion from Template B or a link listing from Template C. But, at some point, someone has to make that decision, and it’s surely better made with your assistance than without it.
Improving the Site Map
In order to document all the detail we outline during the implementation phase, we typically go back to the original site map. This is our best representation of the site, and it’s a great starting point. We’ll audit it against the design system and make sure everything still lines up. Assuming it does, the next step is to get into the nitty gritty. We’ll take a pass at the site map and extend it to include every page in the site. That includes representative blog archive pages and press room contact pages. If a page is going to be built in our CMS, we require for it to appear on the improved site map.
Once we have documented that complete representation of the site, we start coloring it in (literally). This is our way of representing our understanding of the site and the design system as a whole. We’ll go through the site map and color code each page that has an explicit design from the design phase in green. We’re 100% certain what these pages will look like, and there’s no room for confusion. After that, we’ll color any pages utilizing an exact replica of one of those designs green, as well. If we design a blog and there are two blogs on the site, they’ll both get colored green on the site map. This shows that we’ve confirmed the features and functionality of each blog.
After we declare the designed pages, we’ll go through and mark every other page red. These are pages where we don’t have clear guidance on what the page will look like. At this point, there’s usually a lot of red.
Getting the Client Involved
With our largely red-colored site map, we’ll set up a meeting with the client and tell them, “These pages don’t have an explicit design. Unless you tell us differently, they will be long-form content pages that use our general styles template.”
We’re expecting gasps here and panic on their faces. That’s okay, because our transparency gets the point across. This is the part of the project where we need to sweat the small stuff. After the initial alarm subsides and we explain that this is okay and a normal part of the process, we can get into a real conversation about each and every page on the site. We’ll talk with the client about every single red page and what form of content is going to be used. The conversations coming out of this meeting are fantastic and extremely focused. Will a long-form copy template be okay or do we need a listing page or a landing page? How will the design system be utilized on this page? What modules are needed? Asking all of these questions may be considered sweating the small stuff, but at this stage there’s only small stuff left. Being able to finally address this level of detail guides us through to a successful launch.