Our New Facelift

Bill Kenney
Feb 21 2011 24

by Bill Kenney

Now that we're settled into our fancy new website I wanted to take some time to share our experience of branding Focus Lab, LLC. Branding is a term used in a number of ways but today we're just going to look at our logo and our colors. Call me crazy because we moved into our new office with a new name and new look, but I decided to change it again. Here I will break down the process of why this decision was made, how we moved through the design process and where we are now.

The Inspiration

On a day like any other in the office, while making the world a more visually stimulating place, I looked across the desk to find a striking pen. I was impacted by a color that could not be ignored. There was a collection of vibrant red items that were grouped in the center of the desk. For some reason I was instantly drawn to the power of the color. As all designers know it only takes that split second of thought to spin you into a whirlwind of design inspiration madness.

Red products of inspiration

That color created the “We are going to rebrand” thought bubble over my head, which instantly turned into “How am I going to convince my business partner that this is a true vision and not a crazy designer itch?”

This was a bit crazy since we had just rebranded when we moved into our office 6 months earlier. While we were ok with our branding, it was not at the level it could have been. We had rushed the process before moving into our new office which resulted in an incomplete execution. Rebranding became a burring idea that I had to verbalize that day, or the rest of my week was going to be shot. I could already see the days of unrest, including hours of thought about how badly I wanted to change that logo.

“Hey Erik, let me know if you think this is crazy." Bill

long pause

“I want to rebrand Focus Lab.” Bill

happy confused smile from me to help the sentence resonate in his brain

“Sure.” Erik

Seriously! In one shot he just said, “sure.” Needless to say, that was unexpected. Later on I found out that he basically knew my design madness would overtake my days and nights if his answer had been “No.” He knew from that moment I was going to wrack my brain over it regardless of his answer, so in two seconds of thought he gave the go ahead. Wow that was easy.

Old logo next to the new logo

Starting the process

My first task was to identify the issues with current logo and how I was going to address them moving forward. We were happy with the existing typeface, which allowed me to “focus” on the actual iconic element (aka “mark”) which was the F in the brackets. We originally decided on that particular look for a couple reasons: it was a simple form which we liked and it also touched on the development / code format which represents a large part of what we do.

My issue with the F in brackets was that it brought nothing to the table. It was not a unique identifiable form, it was not creative, and the F in the icon was the same exact font as the name, so it became a repetitive visual when aligned. For the new icon I wanted to create something that had complete power to stand alone; a mark that was creative and unique. My mission was to keep true to the clean minimal style that we both liked in the original design, while fixing those things we thought it was lacking.

This was a very intense process of numerous late-night brainstorming sessions at the office, lots of weekend sketching and tons of input along the way. I was very open to getting design colleagues' input throughout the process.

Sketches of logo ideas

Sketches of F mark ideas as inspired by Roy Christopher at Geekend 2010

Icon / Shape

For some reason I was drawn to the idea of simple shapes from the start: the idea of the form being very minimal with a reversed out feature, and also playing with the idea of the form and negative space. The circle was the front runner throughout the process. I worked with some other shapes but could not get past the simplicity and power that the circle brought to the table. It was also a great compliment to the very square style of our typeface. It created a nice visual balance of hard edges paired with a smooth fluid form.

Choosing the circular shape opened the door for added design elements that could be incorporated across the website, promotional items and print design as well. A circle can be used in numerous ways and can translate into many meanings.

Drafts of circle ideas for logo mark

The circle was the easy decision. Figuring out what I was going to do within that was a different story. When I started the process I was open to anything. This even involved some crazy owl icons, abstract shapes and humorous figures wearing monocles. Although I knew these extreme ideas would not make it far past the first stage, it was essential to the process to make sure that all ideas were exhausted.

Other crazy mark ideas

There were definitely some cool ideas that came from that part of the process. But in the end, we wanted to be very conscious of who we are as a company and who are client base is. Although we like the idea of being playful and not so “corporate,” our icon was not the correct place for us to convey that. We chose a more simplified, professional direction with the mark. The logo would present us as the professionals we are and then we would go the playful route in other areas like certain website elements and promotional items.

These thoughts led us right back into the F form and how it could be used as the negative space in the mark. I know what you're thinking. “That entire process led you back to the F?” I briefly felt the same way but I pushed through it. I knew there was something to the F, but had to find a better way to deliver it.

Evoloution of our final circle and F mark

I eventually achieved this by not using the current typeface and not using a typeface at all. I started making my own forms to represent the letter but in an indirect way. I liked the idea that it was not instantly apparent that it was an F but more or a realization after reading the name and studying the icon – where it became more of a creative element that could be interpreted in different ways. This was a big step away from the original icon.

Style guide color samples

Color

As I mentioned earlier, color palette was a huge inspiration for this rebranding. It made the transition from the old look even more dramatic. Our old palette was essentially light blue and dark grey. This was originally chosen because a lot of tech based companies use blue. With the new look we wanted nothing to do with the “Industry Standard” approach. We wanted something different and much more stimulating.

The color palette was actually the driving force behind everything. I knew that I wanted a 80/20 breakdown ( 80% White // 20% Red ). This was not an exact science but more of a general guideline to follow. White and greys would be the majority, and red would be used for a small punch of color. This did two things: it kept the overall layout clean and easy to look at while compounding the power of the red.

Typeface

For our main typeface we chose the Neutraface collection from House Industries. It is a clean sans serif font with great variations of weights. To help balance that we chose a serif font called Challenge. This font was chosen to help bring some life to items like block quotes and large passages. These two fonts play very well against each other, one being a step forward in the clean and minimal feel and the other having a traditional and personal feel.

Neutraface type collection samples

Final Product

When I completed this process and stepped back from it I was very happy with the final product. We now had a solid brand with which to face to the world. It is an icon that people within our local and online communities will begin to recognize. With a name, a strong icon and a bold color palette we addressed all the issues from the original design. The new brand translates the same in any scale and in greyscale (the true test of a good mark).

Photo of our logo etched on a window in our office

What's Next?

We have some big things on the horizon for our company, and couldn't be happier with the visual representation we now have. This new website was the first full incorporation of the new brand. We were able to expand off the color palette and make a clean, effective site that shows our work and who we are.

Professional branding is an essential element to the foundation of any company or organization. If you need help with your branding please let us know and we will be glad to sit down and talk to you about how we can help.

A large part of this rebrand process was to be conscious of the fact that in ten years we may be doing something completely different than we are now, but will need a look that still works. That was the primary reason we created the name Focus Lab. We were aware that over the years we will take on new ventures, and as technology advances, we will inevitably start to offer new services. We needed a name that would not easily pigeon hole us. Now, it's not just the name. It's our brand.

Share your thoughts below

David on February 21st, 2011 3:43 pm

David
 

I love this part of the blog:

I wanted to create something that had complete power to stand alone; a mark that was creative and unique

I love that… you definitely accomplished that power and creativity. Kudos man!

Allison Mol on February 21st, 2011 3:44 pm

Allison Mol
 

Love it! It is apparent that you put so much thought into the design. Well done. Now I am seriously reconsidering my branding choices. I am at a crossroads. I have my business brand, Island Networking, and I have my personal brand, AllisonMol.com. Cannot decide which one to really focus on. My name has actually done more for me so maybe that is my answer.
Great job!

KIM on February 21st, 2011 3:52 pm

KIM
 

LOVE LOVE LOVE! So fresh and so clean, clean. Great job!

Erik Reagan on February 21st, 2011 4:16 pm

Erik Reagan
 

I’ve said it before and I’ll say it again, Bill. You rocked this!

It was also nice having help from awesome people at our monthly brainstorm/social event in our co-working space.

As Bill noted we had input along the way from trusted colleagues. I particularly thank Erik Shultz for some insight along the way.

Fitz Haile on February 21st, 2011 4:23 pm

Fitz Haile
 

Nice recap of your process. Enjoyed watching the transformation from inspiration to a complete finished product.

Looks pimp, yo!

Look forward to seeing what else you cats have in store.

Chris on February 21st, 2011 4:31 pm

Chris
 

The palette and typefaces play really well together now. I am glad you stayed with the “F” form as well. Nicely done, fellas.

Bill Kenney on February 21st, 2011 4:58 pm

Bill Kenney
 

A big THANKS to everyone for all the love. We are very excited about our new look and really looking forward to a great 2011.

Roy Christopher on February 21st, 2011 5:58 pm

Roy Christopher
 

This is awesome, Bill. Transparency inspires and moves people. Access to creative processes like this is all too rare. Props for the redesign and the telling thereof.

Thanks for the shout!

Power to you.

David Bushell on February 21st, 2011 6:12 pm

David Bushell
 

Hey Bill, I really like how this brand translates into the website. It’s so clean, structured and professional. Definitely a case study for my preferred style of design - I’ve taken notes!

Kelly Downing on February 21st, 2011 11:30 pm

Kelly Downing
 

thanks so much for sharing your process- as a student it is so helpful to see how other designers navigate through ideas and execute a final product. completely love the new look. bright, punchy, memorable. and that neutra typeface makes my knees weak.

side note/quick question: what’s going to happen with that owl icon? cause that thing rocks my world and i need it in my life. #justsayin

Fitz Haile on February 21st, 2011 11:53 pm

Fitz Haile
 

Bring me Sir Edmund Chesterfield!

Sean on February 22nd, 2011 5:16 am

Sean
 

As a non-designer I found the design process intriguing. Thanks for sharing.

Phil Peterman on February 22nd, 2011 7:48 am

Phil Peterman
 

Ahhhh, so that’s how a designer’s mind works. Really good write up.

Erik Shultz on February 22nd, 2011 9:27 am

Erik Shultz
 

I was glad to be a small part on your design process. Design is all about the approach and I think you left no rock unturned.

Jimmy on February 22nd, 2011 9:38 am

Jimmy
 

I love reading write ups on design process. Seeing into the mind of a designer is usually more interesting to me than the actual design (not that your finished logo isn’t inspiring). Hopefully this will get my butt into gear to finish working on my logo. I’m at that stage where nothing looks quite right, but I know I need to push on to find the perfect solution. It’s obvious you know how to get through that stage.

Luke Connolly on February 22nd, 2011 12:36 pm

Luke Connolly
 

Glad to see the work that went into this branding—I’ve expressed my appreciation for the site redesign, and clearly the new identity powered it.

One thought… It might be nice to be able to comment below the rest of the comments… I found myself reading all of them and then scrolling way back up to add my thoughts. Here I am being picky again, haha. Great work, this site is a gem.

Mimi on February 22nd, 2011 7:48 pm

Mimi
 

Can’t miss that! Bold, yet friendly.

Adam Khan on April 7th, 2011 10:00 am

Adam Khan
 

Really love the spaciousness of the site and the elegant typography with the striking red. Love that you can make the logo a frosted sticker on a glass door—would make me feel that there’s no limits to company growth. Best thing I’ve seen in a while.

Paul on April 14th, 2011 5:44 am

Paul
 

Hi,
Like the logotype but unfortunately it reminds me of the logo for the right wing political party here in Norway, Frp (Fremskrittspartiet) :-(

Chris Hendrix on April 22nd, 2011 4:27 pm

Chris Hendrix
 

I love that you were still able to incorporate some of the wacky elements from your brainstorm into your branding. Most notably, the monocled gentleman as the default avatar in your comment section now.

Wonderful touches. I’m absolutely inspired.

Bill Kenney on April 22nd, 2011 4:34 pm

Bill Kenney
 

@chris Thanks for taking the time to check it out! Glad you enjoyed it. It is nice when you are designing something and stumble upon an element that while not correct for the project at hand can be used in another circumstance such as Monocle Man ( a.k.a. Sir Edmund Chesterfield ).

Josh Jackson on June 12th, 2011 11:46 am

Josh Jackson
 

Good job on the re-brand. I enjoyed reading through your insights and understanding your process a bit more. Have you considered using your circular logo as your favicon though?

Incidentally, Bill, it was a pleasure meeting you at the BNI dinner party the other night.

Erik Reagan on June 13th, 2011 6:50 am

Erik Reagan
 

@Josh

Thanks!

Have you considered using your circular logo as your favicon though?

We tried both circular versions and the squared versions. We ultimately decided the squared version looked better, filling the full size with our color. You’ll notice the same treatment across any Focus Lab, LLC avatar like on twitter, for example.

Bill Kenney on June 13th, 2011 5:25 pm

Bill Kenney
 

@Josh Thanks for reading the post. As Erik already said we decided on the square application for the simple reason of more real estate with the red. It helped define the F at that scale. It was great to meet you the other night as well. I wish I would have known we were in the same field, we could have totally ignored everyone and thrown down on some design talk.

Join the Conversation