Behind the Curtain: ChappellRoberts Web Redesign

For us, redesigning our website was no simple task. Sure, we could have refreshed the design, moved some content around, thrown in a couple of neat programming tricks and called it a day, but instead we really wanted to evaluate our user experience. We wanted to make sure everybody was getting the best possible viewing experience and were easily finding the content they were looking for. This meant meticulous planning over several weeks. And in those weeks, we arrived at five core concepts we wanted to improve on this time around.

  1. Show, don’t tell. Nothing is worse than someone telling you how great they are and having nothing to show for it. For us, the proof is in the pudding, and our creative product dominates the design and user experience of our new website.
  2. Relevant content is king. We wanted to make it easy for our users to access relevant content and help bring our portfolio pieces to life.
  3. Who we are. Not just what we are. Our clients want to know what we can do for them, but they also want to know who they’ll be working with. We made sure to feature our agency culture and individuals in unexpected ways.
  4. Foundation first. We wanted to create a viewing experience perfectly suited to any device rendering it.
  5. Get found. Lastly, we wanted to reevaluate our SEO strategy to make sure that people who were looking for us were finding us.

We’d like to take a moment to walk you through these concepts, what they are and why we felt they were important enough to justify rebuilding our website.

Show, don’t tell
Any agency can fill a web page with bullet lists outlining every capability they offer, but we know a picture is worth a thousand words. We decided to keep our words brief and our images plenty on this new website. The portfolio pages showcase our creative work with large, full-screen images, always shown in the context of their medium.

Pretty pictures are great, but measurable results in our clients’ bottom line are the reason we exist. And the way we achieve results for our clients is as important as the results themselves. For this reason, we selected eight campaigns and explained the story behind each of them. We start with why our clients approached us in the first place. What was the business goal we were tasked with helping them achieve? Then we explain the strategy we proposed and show the tactics we created to support that strategy. Last but not least, we proudly show the results that we helped generate for our clients: 70% increases in traffic to their websites, 20% increases in online revenue, 11% increases in visitors, 133% increases in referrals…the list goes on.

Relevant content is king
We’ve all heard the phrase “content is king” before, but the truth is it’s only king if someone is looking for it. The most beautifully written (or designed) pieces of content are worthless in the eyes of a visitor who isn’t interested in them. That’s why we wanted to make sure that we made it easier for visitors to find what they were looking for as well as suggest related items.

The first step we took towards this was the way we structured our home page. Rather than just having an intro and links to the usual “about us,” “services,” “contact us,” etc., we gave small snippets of each section of the website so our visitors could get an idea of what each area was about and link them to that section. We also added a “Where to next?” section in the footer that helps you easily access the next logical group of pages on our website. We continue this concept in our portfolio pages by giving visitors a small collection of related campaigns at the end of each piece. We felt these additions would enable viewers of our website to quickly find what they were looking for and then lead them to relevant content.

Who we are, not just what we are
We also wanted our new website to give our visitors a feel of what ChappellRoberts is all about. To do this, we decided to better showcase our people and include elements of our home, Ybor City. One of the first steps was the way we took our company photos. Rather than picking a location and having everybody take headshots one after another, we sent everybody out through the streets of Ybor to find a location for their photo. The result was a collection of photos that, in many ways, tell you more about each of us than individual bios would and showcases the place we call home. To add some fun and extra insight into our people, we also added the “ChappellRoberts by the numbers” sections. These are short sections that give visitors random facts about things like how many dogs we have, the extent of our caffeine addictions and the type of music we listen to. All of this is in an attempt to let our visitors get a feel for who we are rather than just the type of work we can do.

Foundation first
Few work days are more exciting for a web developer than the day when you’re told we’re going to rebuild the company website. Our minds start racing with all the new tricks we’ve picked up since the last time. Parallax scrolling, HTML5 video, CSS3 animations–the possibilities are endless. We know it’s our chance to build something completely cutting edge and to really have fun with it. This was precisely how I felt when I was told we were going to rebuild Eventually, though, reality set in. The fact is many browsers in use still do not support modern features like these, and Internet Explorer 7 and 8 are still out there ready and willing to completely crush our hopes and dreams. This meant if we were going to build the site we wanted, we needed to find an elegant solution to handling older browsers.

There are two approaches to this problem, “graceful degradation” and “progressive enhancement.” Graceful degradation is the process of building a website with every feature you want and disabling them in different browsers that don’t support them. The other option is progressive enhancement. Progressive enhancement is building the absolute base level website first. The website you can 100% guarantee will work in all the browsers you’re targeting, and then you add features to it when they are available.

To explain why progressive enhancement is so superior, I like to think of building a car. When Ford was designing the Focus, they didn’t start by building the turbo charged sport model. If they would have started with that in mind, there would have been structural modifications that would have to be made to accommodate the added power and lower stance that just wouldn’t have been practical in the baseline Focus. Instead, they designed the base Focus first, and once they felt that had a solid foundation for that model, they could then make additions to it to build up to the luxury and sport models.

This same methodology works very well in web development. It makes so much more sense to start with the basic structure of the site and then build up to the fully featured version. Much like our example of the Focus, if we were to build the feature packed version first, when it came time to strip features for older or mobile browsers, we may find ourselves having to restructure things on the back end. To see this in practice, if you’re viewing our website in a modern browser on a desktop, you’ll see things like full screen width HTML5 video on the home page and animated graphs that aren’t present on the mobile version. These features aren’t disabled on mobile–they just simply do not exist until they encounter a browser than can support them. This helps us give the best possible experience for any platform.

Getting found
As any good web developer will tell you, taking time to plan out an SEO strategy for your new website is key. Long gone are the days of just embedding hidden keywords into the code of your website. Search engines are much smarter today than in years past. The focus now is completely on the content of your website and your social media presence.

We put a very large emphasis on social this time around. The biggest improvement is how we were able to pull our key social outlets into one easy to navigate platform. This page shows Google and other search engines that we are working hard to generate fresh content and that people are connecting with our brand. On top of that, we have included links to all of our social media platforms in the main navigation and the global footer.

We also put a lot of thought into the way we structured our website. We built it to be very scalable to allow us to easily and frequently make updates and content changes. We also made sure the main purpose for each page was easily identifiable by search engines to ensure each page was being indexed appropriately. All of this should come together in the form of a healthy boost to our search engine performance.

Wrap up
Hopefully this gives you an idea of our thought processes when designing the new If there is one key takeaway we could share from our experience, it would be to always be evaluating your web presence. Even now, after weeks of planning and building out our new website, we already have a list of upgrades we plan to make in the near future as we receive custom user analytics to track our performance. The second you stop paying attention to your website is the very moment your audience does too.

view all blogs