Part I: The Design
In web design, trends can come and go before you even get a chance to wrap your little CSS writing brain around them. Being a web design company, it’s important that we pay a lot of attention to those trends so that we can stay on the front end what’s happening in the design world and make sure we provide our clients with professional-looking, responsive websites that improve their conversion rate.
Sometimes, we like to test drive some of these trends and ideas with our own website to see how they feel, look, and work in the real world. It’s one thing to conceptualize web design elements, but often another to put them to use effectively.
In the fall of 2014, we set out to test some new ideas. We were going to catch the trend wave and ride it all the way to the top.
Gradients were the new thing. We decided to go with a full height page intro. Luckily, our company colors create some remarkably good-looking gradients, so we got something we liked.
Beneath our hero section, we wanted to explain our service offerings. If you pay close attention when you browse the internet, you’ll see that almost everyone has three columns to explain what they do. This design choice is almost certainly a product of aesthetics and not functionality or information. So, we subconsciously made the mistake of following this trend. Forget that ClearPeach provides a lot more than three services. Doesn’t matter. We have to have three boxes!
We’re proud to have great clients who say nice things about us, so we wanted to include them, too. To make that jump off of the page, we designed testimonial quote boxes that would overlay on a blue background with a light circular gradient. Beneath the testimonials, a snazzy quote, and then a slider of some of our client logos.
In building any web page, there’s always a goal for the user. For us, we’d like potential customers to be able to easily contact us, so we are always sure to have a call to action on our home page. Back to the red/orange gradient for balance here. Contact info and social links are also included in the footer.
Not bad. We’d managed to get across what we do, who we are, what our customers think, and how someone can contact us, all while managing to work in some trendy new elements that jazzed up the site.
Part II: The Redesign
Fast-forward a few months. After watching the analytics, speaking with some of the users of our site, and spending time we began to notice some things we didn’t like. We also noticed that we had built things into our own website that we didn’t necessarily like to use in the sites that we build for our clients. We wanted a lighter, more open feel that would appear much more cleanly to the visitor.
First, the full screen intro page. Much to the chagrin of web designers everywhere, folks don’t always immediately scroll down when they land on a page, so we decided we’d shorten up the intro banner and make it a little easier to figure out what our company does. For the logo, we scrapped the heavy solid logo in favor of a newly refurbished
outline logo that would give us some of that lighter feel. We removed the big logo in the center of the page and moved it to the navigation bar in the top left of the page. Darken the gradient overly for vibrancy, add in an inspiring new tagline from our copywriter, and we’ve got something that tells you what we do and how we go about it.
By shortening the intro section, we also moved our introduction and some info boxes up above the fold, thereby suggesting to the visitor that there’s more, and they should scroll down to see it.
Now to replace those silly three boxes. We have a lot of different service offerings at ClearPeach, but they can be broken down into two categories; Web Design and Online Marketing. We’ll say a little about each and list the specific services below each.
We also realized that we’d been making visitors dig to find the most recent content on our site, which is our blog, so we added a section that would display the most recent blog post and then we’d display a couple of testimonials.
It always helps to show visitors that you’re a real company, who works hard doing things for other real companies, so we included a client logo slider, similar to the one on the previous version of the site, but with a lighter feel. We followed that up with a redesigned call-to-action with a new tagline and more direct button text.
Overall we were able to create a homepage that was cleaner, easier to understand, and provided our visitors with a much better experience.