ConnectMe is a marketing agency with a focus on the digital space, that offers a wide variety of services ranging from design and social media strategy, software development and implementation, video editing, storyboarding and crypto marketing. They are a “tightly-knit camp of skillful digital chameleons”, as they say, who stay busy designing inspiring visual brands and online experiences for forward-thinking people. Their secret – they know when to blend in and when to stand out in the business environment.
This is the mascot of the ConnectMe brand. In addition to their office being home to several of them, the company characterizes itself by the animal’s qualities – flexible and ready to adapt to the challenge.
Our main goal was to clean up their previous visual identity, keep the chameleon but make it easier to adapt in digital and print environments. We completely reworked the visualization, giving it a more defined shape, but at the same time retaining some of its previous features like the position of the body and some of the illustrative feel coming from the shape of its eyes and “smile”.
Our client wanted their new identity to be taken more seriously so that automatically meant – leave that display font behind. We modernized the text and used a new sans-serif wordmark layout that had room for the brand slogan.
At first, our task wasn’t to create a new visual identity but to put some structure in the existing one. Still, finding a suitable set of fonts was a huge part of making the brand feel consistent in every medium. We chose Point™, a font created by Ndiscover.
For the color palette, we stuck with the original one that the brand had already been known for throughout their 10+ years in the business. All we did was brighten them up a little and establish some order for their usage based on their services.
Grid & wireframes
The main purpose of the website was to showcase ConnectMe’s capabilities, some of their successful projects and marketing insight in a unique way. We started by clearing out the sitemap structure and user flow by making rough wireframes based on a simple grid.
After the approved wireframes it was time do design. The main attraction is the homepage (what a surprise!), where we positioned a chameleon and created a simple interaction with it, metaphorically showing their adaptivity – when visitors move their mouse, it gradually changes colors, at some point blending with its environment. The homepage’s purpose is to point directly to the services page.
We created a bunch of icons to accompany each service category and its subcategories. In addition to the ones we designed, we chose a licensed icon pack similar to that style that the client can use for future purposes.
Naturally, they had a lot of successful projects. For those pages, we had to come up with an easy way for them to create case studies themselves. We made multiple customizable Drag & Drop components that allows to simply choose and reorder the different types of information.
Each block is designed to fit well regardless of its placement on the page and its surroundings.
Simple is better
The rest of the inner pages were few and pretty straightforward when it comes to their structure. Our only instruction was to keep the orange color on every page that wasn’t related to the color code of the services: Portfolio / About / Blog / Contacts. They all follow a twelve column grid combined into four groups, making each page easy to scale and reorder on other devices.
Most of us view a majority of our digital content of interest on mobile devices, therefore the task of creating a website suitable for mobile was a big priority. The structure we created to visualize each type of information was applicable to all inner pages making their reordering when switching to a different device intuitive.
4.1 Documents templates
We started with the most used item in their daily communication which was branded documents. We requested a brief that explains, in short, the kinds of information and steps they usually take when approaching a client, send a report, pitch an idea, etc. so that we can create a structure suitable for all those purposes. It was important that we made them as templates, available and editable online so that every employee can use them for their specific needs and keep realtime tracking on the changes when collaborating with other colleagues.
Keep it consistent
We designed branded visuals for most social media platforms like Facebook, Linkedin, Instagram, Twitter, Youtube, etc. and a couple of post templates.