Stonebriar Community Church Redesign

In: Columns > The Working Designer

By Chris Merritt

Published on July 23, 2007

My day starts like that of most working professionals. I wake up at a specific time, take my dog out, say “Good morning!” to my wife and daughter, eat some cereal, make a cup of coffee, and go to work. However, this is the point at which I consider myself a lucky guy. My place of employment is about four feet from the foot of my bed, consisting of a small desk from Target and a 24” iMac. My business attire is usually sweatshorts and a t-shirt. My lunch comes by my wife’s hand instead of a brown paper sack. I share my workspace with Maverick (the aforementioned dog).

This is the life of a freelance web designer.

Of course, this is not to say I have it easy. My typical workday lasts about ten to twelve hours. I work through lunch. My only break is when I take Maverick out in the afternoon. Late nights and weekends are not uncommon. But, it’s worth it. I nearly always get to work on projects that interest me, and I can say no to any unappetizing jobs. Every once in a while, I get to take on a project that I know will move my career forward in a big way. Such was the case with a church down the street from my apartment called Stonebriar Community Church.

Stonebriar is the pastoral home of Chuck Swindoll who, for many of us in church circles, is one of the greatest teachers and writers of our generation. So when Nathan Smith asked me one day last January if I would be interested in helping redesign Stonebriar’s site, my answer was something like, “Ummm, yeah. I mean yes. Yes. My answer is yes.”

At the time, I had only been freelancing full-time for a couple of months. I knew this was the kind of project that could be huge for my development as a designer, so I did whatever it took to get the job. Fortunately, Nathan did all the hard work by simply referring me to Jason Reynolds, who was the project manager for the redesign. After a couple of brief interviews, they hired another designer and me to each provide three home page designs as part of the selection process. Which of the six designs was selected would determine which designer got the contract.

Starting the Process

Designing three fully polished comps for a selection process is not typically how I prefer to work, but for a variety of reasons, that’s how Stonebriar needed to do things. I didn’t complain, though; I was already on a dream ride in my mind. I decided to deliver the designs as I completed them, as opposed to all at once. This gave me the opportunity to receive feedback on each design and use that information to help guide my next design.

In our initial interviews, it was clear that the team at Stonebriar was eager to have a website design that more accurately reflected the vision and DNA of their community. The previous design wasn’t bad, but it needed freshening, and more personality. As we talked about the next design, a lot of typical descriptive terms were tossed around, such as textures, rich and warm colors, and earth tones. Now, I’ve heard these adjectives hundreds of times, along with the ever-present, yet all too vague word clean, so it took a little more probing and a few tours of the web with the client to see examples of what they were really talking about, and what sort of designs they did and didn’t like. For me, looking at existing examples is exponentially more helpful in revealing a client’s vision than depending on words alone. There’s only a handful of descriptions that the average person knows to use when he or she describes a website, and chances are I covered about half of them in this paragraph.

After some healthy brainstorming and looking over the provided home-page specs, I was ready to start designing. Work environment is a pretty big deal for me (as I would assume it is for most designers). Some people like an open, collaborative environment. Others prefer solitude. I fall under the latter category. I highly value solitude in my life in general, not just during work. Being alone is something that keeps me centered. Busyness and clutter are my enemies in life and work, and when I’m alone, I can push aside life’s clutter and focus on producing quality work and make sure I enjoy doing it.

My ideal work environment consists of a closed door, my Mac, a pair of earphones, and a cup of coffee. My typical running software is Mail, iTunes, Newsfire, Photoshop, Skype, and Adium. Music is the magic potion for my creativity. If I couldn’t listen to music while I work, I wouldn’t get anything done. Part of this is because music helps me achieve solitude by tuning out the rest of the world—including the many sounds that come with sharing a thousand square feet with my wife and one-year-old daughter during the workday. Also, music ignites the creative part of my mind. One of the undeniable truths of life is that creativity inspires creativity. I’m not an academic on the subject, but I can say that—at least for me—the creative spirit that emanates from music somehow sparks my creative senses and gives me the energy to create my designs. The morning I began the Stonebriar site was no exception. With my earphones in place and my coffee steaming beside my Mighty Mouse, I put my hands to the keyboard and got down to business.

I wish I could say I started each design with a detailed wireframe and a strict grid, but I can’t. In those days, I only wireframed if, on the rare occasion, my client provided me with that luxury. Now, wireframing is essential to my workflow. Often, it’s the most fun design phase for me. I believe the heart of design is found in a good wireframe. Design is about creating solutions to problems instead of just decorating around them. In my workflow, I try to address all the problems in my wireframes, so that once I start adding details, colors, and other features that some might call decorating, I can experience the great freedom that comes from knowing that the site is already fundamentally designed—I get to just focus on enhancing the design and making it cool.

But as I said, wireframing wasn’t part of my workflow for this particular project. Instead, I started with a sketchbook. My favorite sketchbook by far for comp design is the Dot Grid Book by Behance. It offers typical, grid-like graph paper but uses only dots instead of the usual lines. This is great for someone like me, who likes to draw straight lines and shapes but hates the heavy grid of graph paper.

After hashing out a few basic layouts in my sketchbook, I moved over to Photoshop. For my first comp, I went with my gut. I tried to design Stonebriar’s site the way I thought it should be designed. It was clean and sharp, with some of those earth tones and light textures in the header. I drew a lot of inspiration from Jesse Bennett-Chamberlain’s work—which is not uncommon for any project I do—as well as several other sites I ran across.

The feedback was very positive, but the Stonebriar team encouraged me to explore more artistic ideas and expand the use of textures and colors. One of the great things about working on this project was the fact that Jason acted as a liaison between me and the rest of the decision-makers on the project. Often, I’m forced to negotiate the feedback of ten or more people on a committee. Jason filtered through all the thoughts and suggestions and then clearly communicated a response to my design. If I had the means, I would hire a person to do this on every project. Communication is so important in any profession, and there’s nothing worse than hearing fourteen different voices in your head as you’re making design revisions.

After a few more days, I delivered my second comp. Again, I received a great deal of positive feedback, with several compliments on the grungy accents I had used for the borders and on some of the other artsy elements I had emphasized. The only major constructive criticism they offered was that my first two comps didn’t push the warm palette they had originally envisioned. So, with that, I was back to the drawing board.

Knowing this would be my last shot at landing the project, I spent a little extra inspiration time before I began my final comp. As I looked around, I found some specific inspiration at the members’ site of Saddleback Church. The gradient in the header carried the warm, sunny look I was aiming for in this comp, and I knew I could add the artistic elements the Stonebriar team liked so much into a similar header in order to give it some texture.

The Stonebriar header background is actually made up of four elements: First, I used a photograph that I took of a rusty piece of sheet-metal to provide the spotty texture. Second, I added a color overlay using a burnt orange shade, followed by a transparent gradient overlay to provide the sunshine. Finally, I added some ornamental brushes that I had used in my second comp to give the header an artistic flair. The header design sort of stimulated the rest of the comp design for me, but at the same time, this final design option took longer to complete than the other two. I spent a lot of time trying out different variations of my ideas, making sure I was using the best solutions. The result was a warm, rich, and robust comp that was once again well-received by the Stonebriar team.

Within a week or so, I received the good news that I had been selected as the designer for the project, based on my final comp. I was thrilled. Not only was I going to be working on a great project, but I was finally going to get to work with Nathan Smith, the designer/developer who first mentioned the project to me and whose work I’ve admired for quite a while, even long before he moved to Dallas and I finally got to know him. I was going to provide the visual comps for the redesign, and Nathan was going to bring them to life with XHTML, CSS, and JavaScript.

Soon, I began the two-to-three month process of refining the home page design and comping out template designs for the interior pages of the site. This proved to be a longer and more involved process than I had initially estimated. Stonebriar already had one of the largest church websites I have ever seen, in terms of pages and content. More than that, they had a lot of new ideas that they wanted to try in the new site, so we spent a good amount of time exploring different ideas. This amounted to designing more than eighty comps in order to reach the final seven or eight design templates created for development. This was obviously a lot of hard work and late hours, but working with Nathan and Jason made it much easier than it could have been. At times, I had to fight off a sense of gridlock, because I spent nearly all my work schedule working on this project. Normally, I like to keep three or four projects on the table, so I can have the freedom to switch over to something else in case my brain gets fried working on only one. Focusing all my creative energy on the same set of comps all day, every day was difficult for me. Thankfully, Jason made it his mission to keep me motivated and positive whenever I felt like I had reached a dead-end.

Design Decisions

Main Navigation

One specific issue we spent a lot of time on was the treatment of the main navigation. I must have tried twenty different treatments, but it was difficult to land on one. I wanted to stay away from any Web 2.0 concepts, because this design just doesn’t have that vibe to it. I wanted something more traditional, but not dated. I also wanted to find an original idea that wouldn’t be found on just about every other site featured in a CSS gallery. Below are some of the navigational treatments we considered.

It’s easy to get locked up in a decision like this. Curiosity can be dangerous to a design. As often as possible, I like to explore the options, find inspiration, and go with my instincts. The danger lies in letting yourself or the client explore more and more ideas. This can result in discovering ten ideas that all have their strengths and weaknesses. And this is the very trap I fell into as I explored options for the navigation. We were happy with too many ideas and were left to stare at them for hours and before forcing ourselves to decide on just one. After what must have been weeks of revisiting the issue, Jason, Nathan, and I finally landed on a tab-like treatment, but with concave sides to the tab and with both the top and bottom joined to the navigation bar. It was certainly unique, but at the time, I personally favored a more traditional tab model. After some further discussion and debate, we made a collective and unanimous decision to give the unique treatment a chance.

Ministry Index

On the wish-list for the project was some way for people to quickly access one of the forty-plus ministries in the church. When doing websites for larger churches, it’s important for people to be able to get to the pages and ministries that are particularly relevant for them. What immediately came to mind was a JavaScript drawer that could be activated only when a user needs it. Drawers are great for tucking away large amounts of important (but not too important) information or links without sacrificing proximity. Many users spend time on a website without ever needing or wanting that kind of access, but for either the power user who likes to navigate quickly or the person who has no idea how to find that page for the mission trip to India, the drawer is always there to pull down in one click and quickly get the user where he or she wants to go. This technique is also useful for site-maps or contact information.

I was glad to learn that Nathan was hip to jQuery, a lightweight JavaScript library, so implementation was a breeze (at least from my point of view). Any time I receive a compliment for the Stonebriar site, I have to give Nathan a big portion of the credit, because he always encouraged me to not let those code-monkey voices in my head hinder my artistic instincts. He constantly told me, “Just design it how you want to design it, and I’ll worry about how to make it work.” David Lanier took care of implementing and configuring the site in TYPO3, which, from where I’m standing, looks like a beast of a CMS, so I’m definitely grateful for his hard work as well.

Color Rendering

One of the teachable moments for me on this project centered on how my designs looked on my Mac versus how they looked on an average LCD or CRT. I’m going to resist the temptation to preach about how vivid and brilliant Apple displays are and instead point out that this meant that I had to take extra measures to understand how the colors I saw on my Mac rendered on the PC monitors at the Stonebriar offices. I’ve simulated a comparison sample below to show you just what degree of difference I had to deal with.

Dark browns looked like dark grays. Khakis looked like light grays. In most cases, the colors I used lost a certain degree of brightness and saturation when viewed on a common monitor. On several occasions, I had to go back and forth with the client, sending comp after comp, each a slightly different shade than the other, just so I could comprehend what other people were seeing on their monitors. These extra steps could have been avoided if I had a PC lying around the apartment to use for testing, but I didn’t and still don’t. I’m not prepared to make that adjustment just yet. For now, it’s a good reminder to always consider the user in every sense. Thankfully, LCD and LED technology are constantly improving, and it won’t be long before everyone will be viewing the right colors.

Chemistry Counts

The new Stonebriar site launched in May 2007, and I can proudly say that it closely resembles my original design. I know I’m not alone when I say that this is not a common outcome for most web projects I do. In this case, though, no matter what feedback I received on my designs, the client always respected my position as the designer and gave me the freedom to make executive decisions when I needed to. And, as the designer, I tried to give careful consideration to the client’s vision. After all, it was their website, not mine.

This project actually sparked a great friendship between Jason, Nathan, and me, which is a testament to the success of the project in my mind. Client chemistry is something that’s difficult to forecast, but it’s probably the most important criteria for the enjoyment and reward of a project. It’s hard to love a project when you can’t work well with the client—and loving your work is what’s important. I freelance because I love it. I like working at home in my sweatshorts. The minute that stops being fun or a better gig comes along, I’ll move on. But for now, I couldn’t ask for a better dream job than the one that greets me every morning right at the foot of my bed.

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: Web Design, Redesign, Critique