By Jason Beaird

Southern Savers Case Study, Part I: Layout and Composition

By Jason Beaird

Often, much of what we do as designers is subconscious. We can usually tell you on a choice-by-choice basis why we made specific decisions, but it doesn’t come naturally to verbalize the procedures we follow. Sometimes the best way to explain how to apply graphic design principles is by walking through the design process of an actual client website.

Enter: Southern Savers, a real web design project for a real client. In June of 2008, Jenny Martin started Southern Savers on to share the best grocery deals she found with her friends. After a few short months, the site grew too big for Blogger and her husband James migrated it to a self-hosted WordPress install. Neither Jenny nor James had any design experience, so they purchased a WordPress theme, created a header graphic, and Jenny carried on blogging. A little over two years since starting out, the site now receives over three million hits a month and has over 60,000 fans on Facebook—all with the basic design template you see here:

The old Southern Savers design

Jenny knew a redesign was long overdue, and hired the rock-star design agency Squared Eye to do the job. Being a friend of Jenny and of Matthew Smith of Squared Eye, it’s been interesting to see the design process unfold from both the client and agency perspective. I knew that following this process through each chapter of this book would be insightful for you as well, and am extremely grateful that both Jenny and Matthew agreed to let me use the project as an example.

Getting Started

Usually, clients have specific ideas about what their site should look like and how it should work. Depending on the client, these preconceptions can either help or hinder the design process—more often, the latter. However, on this project, Squared Eye was given free rein to completely redesign and rebrand the site. Matthew knew it was important that he and his team not only understand how the website worked, but who the Southern Savers visitors were and why they were there. Freelance web strategist Emily Smith, the information architect for the project, explains, “Before design could start, we went through a discovery phase to find out what the goals were. We also went to one of Jenny’s Couponing 101 workshops and talked to attendees. We evaluated how recurring visitors use the site—watching over their shoulders, talking about what features and functionality they depend on, and observing how they navigate.”

note:User Testing

This is a term for the activity Emily describes as “watching over their shoulders.” Monitoring actual user behavior before and after a redesign is a good way to gauge its success. A great DIY tool for user testing is Silverback.

Taking what they learned from their time with Jenny and her website users, Emily and the rest of the Squared Eye team went back to their shared working space. “We mapped out the personalities that were currently using the site, and broke them down into actual personas,” Matthew said. From there they started exploring how to organize the information on the site, so that new users and regulars alike could find what they were looking for.

I mentioned earlier that sticky notes and whiteboards were great tools for information architecture. Emily made good use of both in the exploration stage of the Southern Savers redesign. As you can see below, there was a lot of content that had to be organized, and the office wall was the best place to sort it all out.

Sticky-note information architecture

Once Emily had all the pages grouped into appropriate navigation sections, it was time to start working on a layout. She knew the layout for the site was going to be 960px wide, and that for most of the pages, a two-column layout would be necessary. Because there were so many navigation elements to work with, she designed the layout structure as a wireframe in a Mac application called Omnigraffle. The figure below shows her proposed wireframe for the home page.

Proposed home page wireframe for Southern Savers

Notice that there are no colors, no real images, and no actual HTML elements in this example. The goal of a wireframe is simply to establish the layout structure and the positioning of elements. Earlier in the chapter, I said that in a good design, users “recognize each page as belonging to the site.” That doesn’t necessarily mean that the layout of each page has to be exactly the same. In fact, it’s good to work in some contrast between the home page and other pages in the site. As Emily created the wireframes for the rest of the site, she spiced it up by planning alternate layouts for some sections, like the “Learn to Coupon” section shown below.

Wireframe for the “Learn to Coupon” section of Southern Savers

Okay, maybe “spiced things up” was a bit of an overstatement when talking about colorless wireframes, but the design ball is certainly rolling here. Now that the Southern Savers layout is mapped out, it’s time to move on to the next subject: color! We’ll be covering that in the next part in this series.

note:Want more?

This is the first in a five-part case study drawn from SitePoint’s The Principles of Beautiful Web Design, 2nd edition. The book covers all the principles of graphic design as they pertain to the Web, and it’s presented in a way that’s easy for non-designers to digest.

Check out the other parts in this series:

  • Interesting start, I like the wireframe concept being basic with no images and colors to get the layout sorted, this breaks it down another level for the overall process. Looking forward to the next part.

  • That looks like my office wall (much to the frustration of my non-web co-workers). Really interesting so far. I have the first edition of the book, but this is definitely a step-up. Good work!

  • That new template isn’t much of an improvement (assuming the currently deployed site is the new one!). At 1.6 megabytes (1 megabyte compressed) in over 100 files it takes so long to load I don’t even want to THINK about how much bounce they get from people going “screw it, this is taking too long to load!”… Sure some if it is simple image optimization (like using .jpg instead of .png on the 300x300ish images or the background-repeat image that is 56k of nothing) but that it’s resorting to 143k of markup and 600k of javascript to deliver 18k of plaintext ALONE is reason enough that whoever built the new one needs to SERIOUSLY learn something more about how to build a website!

    Mind you, much of that is the needless bloat of poorly written wordpress plugins and wordpress itself shoving pointless unneccessary markup down the developers throat, but really when you have things like that ABBR class on EVERY span inside a parent UL, spans doing the ABBR tag’s job, absolute URL’s on EVERYTHING, title tags that are redundant to the content of the anchors on which they are applied, endless DIV’s for nothing, extra DIV to handle what should be handled in the CSS on existing elements, etc, etc…

    … and that’s before we talk the accessibility /FAIL/ of the fixed width layout, fixed metric (aka px) fonts, color contrasts below accessibility minimums, next to zero SEO and total lack of graceful degradation images off, CSS off, or combination of the two!

    That is so embarrassingly bad I can’t believe it’s being used as an example here… Either the “designer” needs a good slap with a wet trout, or the coder needs to go back and learn some HTML & CSS — either way whoever is responsible for bloating the site out with 600k+ of Javascript needs to be put down like Old Yeller.

    It’s a PRIME example of what is causing my disgust with current web ‘designers’ sleazing out pages any old way; I truly pity the client for their hosting costs of this disaster ALONE, my recommendation to them would be to throw that all away and start over clean restricting themselves to 140k or less for the page template (that’s markup+css+scripting+common images) and if the firm or developer they hire cannot do that, they are using the wrong developers. (Ideally a page that simple should be around 70k without the images of the content area).

    It’s fortunate that most clients are ignorant how badly they are often taken for a ride by nonsense like this – given how it seems so many ‘developers’ are not qualified to do the job they claim to be professionals at.

  • It seems as if the 2nd edition is a major re-write from the first edition. Or is it simply the case studies that have changed?

    The first edition seemed like a nice idea, and collected a lot of theory (such as basic color theory), but it seemed a little light on turning the theory into application.

    • Louis Simoneau

      Hi Tom. It’s not a complete re-write. The case studies have changed (from the first edition where it was a fictitious project), and we’ve added sections and brought things up to date. Some things haven’t changed—red and green are still complementary, after all. But other things, like typography and layout considerations, do change on the Web, so those sections have been brought up to date.

      All the examples have been redone, so we’re drawing inspiration from contemporary sites.

      But it is still the same book. If you didn’t like that one you probably won’t like this one. Fortunately, lots of people liked that one, myself included. I’ve always been good with code, but not so much with pretty pictures, so I bought the first edition back when it came out (before coming to Australia and joining SitePoint), and it really helped me get a grasp of the basic principles of design that I was missing. For someone who thinks in code, it’s good to know that good design isn’t magic that happens in someone else’s brain, it’s a process that anyone can learn.

      So when the time came to do a second edition, we didn’t want to try to fix something that wasn’t broken. The new edition is true to the goals of the original, it’s just been expanded and updated so that it’s still as fresh and relevant as the first edition was in 2007.

Get the latest in Front-end, once a week, for free.