Focus Lab: Old vs New: Design


The new year brought a more polished look for Focus Lab. Since 2011 was so great for us, we were excited and anxious to rework our website to spotlight new team members, refined service offerings and our latest portfolio of work. Although the the overall aesthetic is similar, the site is quite different in the details. In this post I will explain the new design changes and the reasoning behind them.

How it started

A wonderful, yet crippling aspect of being a designer is an insatiable appetite to constantly perfect your personal brand. This results in a burning need to constantly redesign your own website. One late night in the office, while getting distracted by amazing dribbble shots, I decided we were ready for the next iteration of our website. The current site had done its job, but it was now time to take it up a notch. The following weekend consisted of design-a-thon with myself and Matt Yow. Loads of whiteboard artwork, some Jimmy Johns’ sandwiches and a few Sam Adams later, we had the overall direction for what you are looking at today.

Goals for the new site

Any proper web design project needs goals and we certainly had a couple in mind. The most obvious was to polish the overall look. The primary design goal was to continue to keep the site simple, while adding subtle interactions to enhance the user experience. The next goal was to create a portfolio section with greater depth that truly showcased our work and was easily scalable for future growth. Finally, we set conversion goals, focusing on clear calls-to-action and supporting data to track those conversions.

Side by Side

The first big change was to the home page. The previous home page was a modified, single-page scroller that covered a lot of territory. On it, we discussed what we do, who we are, work examples and the contact form. The new home page had a single goal: clearly identify what Focus Lab does. With the use of white space and a large typeface, we leave no question for the visitor that our expertise lies in branding and ExpressionEngine. To compliment the opening text we detail some services, feature some photos of the team and highlight some of our clients.

The portfolio is completely reworked. The old portfolio was also a grid, but that’s where the similarities end. The new look allows us to showcase a featured project, detail the work that was completed, capture client quotes and display a virtually unlimited number images per project.

The ExpressionEngine page is an extremely important page for us, and it was crucial that we focused a lot of attention on it. Since our growing development team is so fluent in EE there was a lot of ground to cover on this service page. I chose to create a long, scrolling page with clearly defined sections and an anchored navigational element. We also chose to keep a contact form on the EE page because the direct traffic it receives from our EE marketing tactics. Essentially, the page currently serves as landing page for our EE targeted traffic, with a full service synopsis and a contact form so they don’t have to go elsewhere on the site.

Team & Culture

Another big addition was the creation of our team and culture page. Our previous coverage of the team was on the home page and featured three small thumbnail photos. Needless to say, that style was not scalable and we outgrew it in 2011. The new team page features short bios for all team members, social links and a great collection of culture shots from around our office. We also reworked the individual bio pages for each team member with a full bio, latest dribbble shots and some personal fun facts.

Blog / Comments

When we launched our first site back January 2011, we had no idea that our blog would turn out to be a such a great resource for our peers and ourselves. We quickly learned that we really enjoy posting articles detailing things like our branding processes and business experiences. We also saw that other design and EE professionals were enjoying the posts. This convinced us that we needed to not to overlook the value of our blog in the new design. I was quite happy with the overall structure of the blog, so I focused my attention on small details and one significant change. The biggest obstacle to participation on our old blog was the hidden comment form. It required users to click on a button located at the top of all the comments in order to chime in. This was not ideal. Our new approach is much clearer and more user-friendly. After the post, there is a “Share your thoughts” link that takes the user to bottom of the comment feed and places them on the form. Users no longer have to search for the form, nor do they have to scroll back to the top after reading all the comments in order to participate.

Since our blog is where many people first come to our site, we also identified the need create a clear call-to-action for contacting us. We did this by incorporating the anchored ribbon on the right side on the page that is clear but not intrusive to the reader.

Contact Page

Since our old site was a modified one-page solution, the contact form was located on the home page. Although that had worked on the previous site, I opted for a more traditional solution on the new site. It looks nearly the same, but it has some nice new additions. Upon submission of the form, users get a friendly, personalized response. They also get some navigation options to drive them back into the site, in case they missed anything.

Some other notable changes were the rollover effect we created for our portfolio (you can use the keyboard for navigation as well), the customizable quote bubble for each portfolio piece, a sample of client logos on the home page, some great photography of our office and an in-house EE Plugin utilizing the Dribbble API.

What’s next?

The list of new additions has already begun. We love our new site and are already planning how to make it even better. The most common question we have heard so far is “why did you choose not to make the site responsive?” The simple answer is data; a whopping 7% of our traffic is on a mobile device of any kind. That wasn’t enough for us to throw in the latest buzz-word in tech. That said, we do plan to roll out some mobile-friendly changes over the next 6-8 months as we continue to tweak and oil this new machine.

Also, in the next week or two Erik will be writing a technology-focused post comparing the old site to the new. We look forward to hearing your thoughts on the new look and the changes that we made.

Join the conversation

Bady on February 7, 2012

Enjoying the process, thanks for sharing Bill :)

Bill Kenney on February 7, 2012

Thanks Bady! Development post to follow :)

Fitz Haile on February 7, 2012

Mui bueno sirs, mui bueno!  You guys do a great job of describing the process and, obviously, the new site rocks!

shane prendergast on February 14, 2012

Loved reading your blog posts/whole webite. Very inspirational for a undergraduate such as myself. One of the best websites i have come across for capturing my attention with all the interesting things, I’ve looked through every page and it was that good i could re-read it. Very well done guys seems like an excellent team.

Bill Kenney on February 15, 2012

Thanks Shane!

Our team worked really hard to make sure that the design and development was all top notch and to create a great user experience for both our peers and prospective clients. It is rewarding to hear that our efforts are being noticed :)

Daniel on March 3, 2012

Thanks for showing off the process. The result works excellent!

Thomas on July 30, 2012

Really impressed with the look & layout of your site, great job! Always good to read other people’s design processes and draw some inspiration and knowledge. Thanks for sharing.

Bill Kenney on July 30, 2012

@daniel @thomas our pleasure. Thank you for the kind words.

Franco Scaramuzza on June 7, 2013

I really like the bold yet elegant look and feel. The only thing that made me wonder/think was the full width for the copy on the bio pages. What is your point of view concerning optimal line length?

Share your thoughts