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 for, 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.

Well, it seems that our challenge, although tricky, was not hard enough to outwork the super sleuth team of Nick Benson and Than Thibbetts. They were the first person / team to successfully locate all 7 Monocle Men and provide the visual proof. A big hat-tip to them for their determination.

We figured we would do some detective work of our own and learn how they chose to go about the challenge, what threw them for a loop and how they plan to spend their winnings. With that we give you an interview with our winning team.

Q. Did you have a strategy?

Nick:

I caught wind of the contest a few minutes before closing time at the office, and clicked around the site a little bit using developer tools, and quickly located a hidden Monocle Man in the source code of each page, as well as in the sprite graphic used in your header logo. I hadn't a clue at that point where it was actually used on the site, but, I took note of it so I could continue the hunt when I got home that evening.

After feeding the kid, I setup the playpen in the office, and got back to looking for easter eggs. I thought about how my team's hidden easter eggs in previous projects - Konami code, background textures, stock art, etc., but none of those proved to be useful here. After reviewing the CSS, I was able to figure out where the sprite graphic was being used, but, that only accounted for a couple of them.

A Google search for "site:focuslabllc.com monocle" quickly located the fourth monocle, which was included on your blog post about the new brand.

After clicking around a little bit, I gave up on the inefficiencies of manually looking for the Monocle Men and downloaded Site Sucker, which scarfed up all of the HTML, CSS, JS, and images on your site, and allowed me to view, search, and edit all of the source on my computer. I reviewed each image, and discovered an avatar file that contained a Monocle Man. Using the file name, I did a search on the whole site's source, and discovered it was used on Matt Yow's profile, which brought me up to five.

Than:

Before I even finished reading the post I had to try the Konami code, of course. The first place I looked, like most folks, I imagine, was the HTML source. Immediately after that I went straight to the crawler. I've had this little piece of shareware called — very imaginatively — SiteCrawler laying around for years for just these types of situations.

Q. When did you decide to team up?

Nick:

It was getting late, so I went to bed. As I was doing my final round of pre-sleep Twitter checking on my iPhone, I got a direct message from Than at 12:30 AM; at 12:40 I suggested we team up and split the winnings.

We discussed strategy and tried to figure out other ways things could be concealed if they weren't in the JS, CSS, or HTML, which we had already scrubbed pretty thoroughly. We bounced ideas back and fourth over Twitter until 1:25, when Than found the one hidden in the 404 page. Since we were now up to 6, I crawled out of bed and got a laptop to continue the search on something with a larger screen.

After groggily clicking about the site, I discovered the final Monocle Man, hidden in the photo outside of the Focus Lab office. It was roughly 2:00 AM.

Than:

I didn't start looking until late at night after Nick took your suggestion and tweeted think link to the challenge. It was pretty funny as Nick said he was nearly asleep until I found the 404 Monocle Man. His next message was ":: fires up laptop ::"

Q. What was your first/easiest and last/hardest find?

Than:

The tiny Man in the black and white image was definitely the hardest. Nick and I were both out of code-based ideas at that point and started rechecking the images just to be sure.

Q. Did you fall into any booby traps?

Nick:

We considered canvas tags, inline CSS and JS, disabling JS, changing browser agents, making the browser wide, making the browser narrow, using IE6, submitting forms (with and without errors), checking robots.txt, humans.txt, sitemap.xml, etc.

Than:

Nice try on the empty focus.monocle.js script.

I spent way too much time rooting around in the source code. No joke, after crawling the site, I took the site into BBEdit and batch replaced every <script> tag and <link rel="stylesheet"> I could find thinking you might have slipped one in quietly on one of the pages.

The 404 page Monocle man was easy to overlook. My first try was popping open the Web Inspector and looking at the image in the browser. However, the only way you're going to see the image is over a non-white background or in an image editor. Luckily, I'd opened all of the images in Preview to quickly flip through them, and Mr. Monocle was staring right at me over a plush #929292 background.

Q. Total time to find all seven?

Nick:

Four hours on my end, I think, 1.5 of which were in bed.

Than:

I probably hunted for an hour and a half or so, then hurriedly putting the screenshots together in an email.

Q. What are you going to do with the 300 big ones?

Nick:

It'll either go towards some fantastical electronic gizmo, or be squandered on supplies for baby #2, who's due on April 15.

Than:

My wife and I are taking a trip to Ireland this spring, so it will probably be put to good use on a few travel gadgets.

Q. Any final thoughts?

Nick:

You have a lovely website; I hope to look at it again sometime.

Than:

I wouldn't have gotten to know Nick without the Twin Cities ExpressionEngine User Group

It's just like they say: ExpressionEngine, bringing people together for money since 2005.*

It's been a fun group to hang out with over pizza every month, and getting to learn from the really talented developers there, like Reactor team member Brian Litzinger, has been a real boon to my EE site-building skills.

And, of course, congratulations on the new site. It's really well made. I know, I've seen the source code. All of it.

*They don't really say that.

A big thanks to all who played and don’t worry, we will have more challenges later this year!

We’re almost a month into 2012, and what a start this year is off to! We couldn't be more excited to show off our new team and revamped portfolio on our brand-new website. Last year was amazing in so many ways- we worked on some awesome projects, we added a few rock stars to our team and focused a lot of effort on refining our skills and focusing on our areas of expertise. But, we aren’t resting on our laurels. Onward and upward! Since encouragement and positive feedback from our peers has played a huge role in our success, we decided to launch the new site with a nerdy challenge, just for you!

The Challenge

Since we are crazy bunch of chaps who like to make everything we do spectacular, we decided to kick-off our site launch with a challenge filled with mystery, suspense and rewards. What’s not to like?

The premise is simple, there are 7 Monocle Man graphics buried in the site. Be the first to find all 7, and you win! You do know who Monocle Man is, don’t you? (Hint, check out the poster below.)

The graphics are be numbered from 1-7 for to guide you on your quest. The numbers indicate how hard we think the image is to find. 1 is the easiest. 7 is terribly hard.

The Rules

Once you locate all 7 Monocle Men you will need to send us an email to iFoundThem@focuslabllc.com containing screenshots of each. The first to accomplish this death-defying feat will be crowned king and reap the rewards. We are looking for a specific 7 answers so if you submit a Monocle Man (like the one in the poster above — but that one doesn't count) that isn't on our list, we will let you know and you can keep hunting for the remaining one(s). (We’re not responsible for technological failure, and proof of a sent email will not be proof of our receipt.)

The Prize

Although street-cred goes along way in our industry, we decided to spice it up a little more.

The winner will receive a $300 Amazon gift card! For real! No, seriously!

Get started!

If I were you, I just might tweet the challenge, and I would certainly comment on this blog post to say you are in. It will get you on our good side, and might even result in clues when you hit a dead end. Happy hunting!