Our New Facelift

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.

Facelift Leading Shot

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.