We are excited to spotlight one of our newest branding and User Interface projects for a product called Snappy. Snappy is a new Help Desk web application being developed by the amazing folks over at UserScape (the creators of HelpSpot). Ian Landsman and his team approached us to help bring their idea of a lightweight and speedy Help Desk to life. Throughout the process we’ve found that the UserScape team is a design firm’s ideal client. Not only are they amazing people that understand the design process, but they are also open to any and all ideas, no matter how ridiculous (see: Snappy underwear).

Concept & Direction

When UserScape first approached us, Snappy was named Snap Reply. As we explored the name, as you do in the discovery stage of any branding endeavor, we instantly gravitated towards “Snap” as the primary term. It made sense, because the entire idea of the application is to imply fast, simple and quick. Our early sketch explorations contained related animals and inanimate objects that reflected these key attributes.

We also explored concepts that touched on the “reply” aspect of the name. Ideas like chat bubbles, email icons and arrows were some obvious plays, but at the end of the day, proved too literal and lacked personality. Interestingly, after the first round of digital sketches a name change was made and “Snap Reply’ became ‘Snappy’. It seems as if both parties had been discussing the idea internally, and when it came up as a side note during a branding round review, everyone agreed it was a better fit. The rest is history and Snappy was born.

The Mark

The first round of explorations for the mark covered a lot of ground. From animals, to simple abstract marks, to underwear, we intentionally threw anything at the wall to see what would stick. The main focus was quickness, so animals that embodied the characteristic of speed were the front-runners (no pun intended) early on.

The breakthrough really happened during a follow-up meeting where we were reviewing digital sketches. Ian made a comment regarding one of the concepts, a red cross email combination, observing “Hmm, I thought it was a robot... who doesn’t love Robots?” Oddly enough, the concept that elicited that comment was almost pulled from the delivery, but we decided to keep it in since it was only the digital sketches round. We instantly moved in that direction, sketching robots and pairing them with typography.

As is typical of our process, we posted examples to Dribbble to gauge initial reactions. We found that after some small tweaks, everyone jumped on board, excited by the possibilities of this robot driven direction. Simple, yet powerful, “Snappy” the robot was exactly the solution we were looking for. A mark that had personality, scalability, movement and a ton of room for great extensions of the brand like stickers, shirts and other collateral. Besides, like Ian said, ”Who doesn’t love Robots?!”

Typography

The right typography evaded us as we worked through a couple rounds of robot forms and color palette refinement. Pairing the right typefaces with the mark proved to be a significant hurdle. But when we put the challenge into the capable hands of Matt Yow, he landed on Pluto Sans which proved to be the perfect solution. It carried the variety of weights we needed to fill out the branding system, while carrying a personality that did not conflict with the new mark. The variety of weights and soft edges embodied the company's goal of being a bit playful, while remaining a trusted, professional brand.

We also introduced a typeface called Sue Ellen Francisco as a secondary look in the branding system, reserved for call to action buttons. It provides a handwritten style that further emphasizes the playful approachable nature of the product.

Finally, Helvetica was chosen as the body text for both the UI and website. It provides a clean look and feel that balances personality with an effective user-experience.

Color

Along with a strong mark and a balanced typography pairing, we knew we wanted Snappy to carry a unique color palette to help set it apart from other Help Desk web apps on the market. It was clear through initial conversations, and then the discovery phase, that the client wanted to avoid being part of the long list of light-grey Apple web apps currently on the market. We decided on a bold palette led by a vibrant burnt orange as the primary color, which can be used to define the brand in any medium. We paired this burnt orange with a collection of light-to-medium tone blues, purples and dark greys to provide necessary contrast. The blue and purple combination was also introduced in a gradient form for call to action buttons and other small applications of the brand.

UI

We were challenged with the task of not only designing the look of the UI, but also with how the user interacted with and experienced this new application. Other than a few wireframes outlining what information the app would contain, we set out to design a lightweight application that would tackle all the previous goals set forth. The goals were to create an application that was not overloaded with features and countless screens, but instead was a lightweight, yet robust application that managed a variety of experiences all within a single screen.

We started out by tackling the general layout and aesthetics by adding bold colors and introducing a general flow of content and simple feature ideas. As we evolved and polished the new look, we began incorporating unique user experience features, such as tickets that could slide right and left to reveal options and priority levels. We also had to account for a collection modal windows and how they live on the canvas, which covered features like ticket replies, conversation threads, attachments, collision notifications and tags. In the end we were successful in keeping 95% of all interactions within a single screen.

Final Product

We could not have been more excited to hand over our work to the client. The final product was a unique and personable mark, combined with an approachable, yet professional type. These elements were then implemented into a powerful and efficient User Interface that will round out the full ‘Snappy’ experience.

Working with the UserScape team was a dream. When you have a company that allows you to take some risks and explore your options, it really allows you to take a design to places it may not have wound up otherwise. We are extremely excited for this to reach the market and are also looking forward to working with the UserScape team again in the near future.

To get in early on the service you can sign up here.

Stand by for robot takeover...

Cyber Reliant is an innovative information technology systems and applications networks company. The partners of the company came to us with some awesome goals for the brand, and were eager for us to start developing it. They were great to work with, and helped us to understand that their seemingly complex business model could be distilled into a straightforward statement: “We streamline communication within organizations by using software to bypass the traditional ‘silos’.” Future company goals include implementing their software in the Department of Defense, as well as in the private sector, in the banking and health industries.

Concept & direction

One of the most important parts of branding is understanding the linguistic roots of the company's name. In this case, we started by taking a deeper look at the prefix cyber- which led us to cybernetics. Here, we uncovered the original Greek definition of rudder, steersman or skipper. We also discovered that this is where we get our word gubernatorial, meaning relating to a governor. The fact that cyber- is so deeply rooted in a humanist (rather than the anticipated robotic) and governmental mindset immediately changed our approach to the identity. We started sketching rudders and sails to reflect the word’s original definition. Research on the word “reliant” wasn’t as illuminating, but it did get us thinking about the basic trust that society has begun to put in the digital world. Understanding the meaning behind the combination of these two words led to new directions and possibilities.

The Mark

Explorations for the mark covered all things nautical to get the steersman and sailor themes on the table. While this did not wind up being the final direction, it led to other opportunities. Eventually, the simple shape of the triangle came to the forefront. The triangle was an abstract representation of a sail, and also highlighted the three pillars of the Cyber Reliant brand: passion, performance and perspective. The triangle's basic form kept the mark simple, while conveying strength and consistency. Many different ideas for the interior design of the mark were sketched out and passed over before the final version came to the front — very near the final delivery date. Flipping the triangle downward created the direction and motion to enforce a sense of leadership, growth and forward thinking.

Typography

The Soho superfamily was the typography chosen for the brand. Key qualities we were looking for were ease of legibility, professionalism and importantly, uniqueness. The extreme weights and reliability between the sans and slab versions create an excellent foundation for typographic communication. The dynamic type allows for freedom in tone and weight while maintaining the conservative formalities a tech company generally adheres to.

Color

Besides a unique mark and strong typography, Cyber Reliant needed a strong color palette to rely on. Blue was an easy option from the beginning with all of its psychologically positive attributes. However, explorations in pairing colors showed purple having real strength and power when used in large proportions. In the end, the more exclusive and distinct purple gradient was chosen. The gradient, although subtle, continues to reinforce the depth of the company and the idea of movement. We then paired the purple with a mild tan to create a light contrast. To further communicate the trustworthiness and sophistication of the brand, specific tones of grey were used in all other instances. Black is not used at all in the branding system. All darker colors are a select value of a deep, neutral grey.

Final product

The final product is a simple, yet engaging mark that invites the viewer to consider the nuances of the form and their meanings. The color and typographic versatility make the brand a unique identity in a growing tech market. The simplicity is dynamic and allows for expansion into a well established name. We had a blast working with the Cyber Reliant team and are excited to see the new brand hit the market over the next 6 months.

The custom coasters seen below were made by our pals over at Tinkering Monkey.

As a family and divorce attorney with a growing practice in Chicago, Illinois, Marie Fahnert knew her brand was in need of a new visual identity. Needing to hire more attorneys and paralegals to handle increasing demand for service, the time seemed right to undertake this project as well. After receiving a referral from law-colleague Laura Hastay, Ms Fahnert approached Focus Lab with her needs.

Concept & Direction

Having done an identity package for a lawyer previously, we knew the difficulties that we would face in this project. Using aesthetics to define a law practice has to be approached carefully. The identity must define the practice, while being mindful of the many things it can impact, including industry expectations, professional reputation, public perception and the emotional state of potential clients, due to the family nature of the practice.

After considering those potential pitfalls, we knew we needed to approach the design focused on distinguishing a unique identity that wouldn’t be obnoxious, over-the-top or misunderstood. To her credit, Marie was steadfast in avoiding a stuffy, typical law identity. What she was seeking was a crafted and personal brand that her clients could relate to on an emotional level.

The Mark

The chosen mark, as well as the additional graphic language used, is rooted in the geographical location of Fahnert's law firm. We used the Chicago city flag to immediately create a foundation for the design steeped in the rich history of the city. From there, we took cues from this foundation to inform the rest of the design.

From the beginning, we created some unique letterforms that spelled the Fahnert name. We entertained those letters and eventually chiseled the original weight down to what it is now. The slab serif logotype is steadfast and sturdy while having a stylish contrast.

Additionally, we created a feather to accompany the logotype. Though feathers can be perceived in many ways, our intent was to create a dichotomy with the typography that truly represented Fahnert: truth and transparency paired with strength and constance. The construction of the feather lends itself to being an iconic signature, while also providing a counterpart to the slab serif logotype.

Typography

The typography was a difficult choice. The supporting letter forms needed to stand with solidarity and confidence, while not being obtrusive or excessive. Cronos Pro was chosen for primary sans serif applications. With its calligraphic roots and warm contours, it made the perfect companion. Alongside Cronos Pro is Arno Pro, for text-heavy documentation and communication. Finally, Gibson was chosen as supporting, tertiary typography for headlines; its humanist qualities are neutral and easy to read.

Color

The color of the brand was an open book from the beginning. We needed to find the crafted gap between too strong and too macho while not being too petite or too fragile. The solution was to balance both on a neutral plane. The soft blue is the primary color of the mark. Additional elements and pattern applications can be set in a salmon. Both of these color systems are arranged on a tan field to communicate the seriousness of the brand.

Final Product

The final design is broad enough to cover the necessary client touch points while being narrow enough to communicate the exact intent. While it certainly feels contemporary, the brand also has elastic and timeless qualities to it which will allow for longevity in its usage.