The evolution of our new website.

Out with the old.

“The cobbler's children have no shoes” is the American version of a worldly proverb. Others include the Chinese “The lady who sells fans fans herself with her hands” and the Spanish “A wooden spoon in the house of the blacksmith”. 1 At Codelitt, if we were to coin our own phrase based on this idea, it would probably be something like “The innovation incubator with an outdated website”.

We’ve been growing 100% year over year, and because of that, tasks were triaged and the website fell through the cracks.

“If we were constantly getting new clients and signing renewals with current clients, maybe the site isn’t so important? We could work on it, but client work is more important. We’ll get to it during our downtime at the end of the quarter”

I’m sure many other service companies have felt the same way. Somehow, the website and some marketing activities always seem to be the first to fall through the cracks because client work takes precedence over everything.

The problem is, after years of putting it off, the site becomes an outdated relic of how the company previously existed. Our old site, which was barely updated since the founding of the company about 3 years ago, (by the way, it’s open source )is no longer an accurate representation of the company. Some things remain the same, such as our target audience and the work that we do, but others have changed & improved. Even if everything remained the same, after 3 years it could use another coat of polish.

When I joined Codelitt, the new site (we refer to it as Site 2.0) was already underway. Wireframes existed, along with some of the copy. Mockups were just finishing development. It became my job to push the website through to completion.

Wireframes and UI


As you can see, we made some changes on pages according to our finalized messaging. For example, while we still work with startups, we felt that talking about it on the homepage watered down our messaging of corporate innovation which is where we focus the majority of our efforts. We also added some recent blog posts to the homepage to show our team’s thoughts and problem solving, providing value and transparency to visitors & customers alike.. After a couple of iterations we moved on to mockups, which our creative director, Vicky, created in Illustrator. (We have some thoughts about moving over to Sketch for UI work, and would love to hear your opinions about it!) The final site was then coded up with HTML, javascript, handlebars, sass and jekyll.

Header Animation

For the header of site 2.0, we wanted something different. As we researched other service companie’s sites, we found that they almost all had a large hero image (usually a picture of their office, or smiling employees at whiteboards) with a (sometimes not so) pithy headline trying to condense everything they did into a couple words. This is the first thing people see about us, and we wanted to stand out, so we decided to take the road less traveled and do something just a little bit more interesting.

The header animation was made by front end engineer Cody (not to be confused with our CEO, whose name is also Cody). He initially created the 3D image in Blender, but the final asset was an SVG supplied by one of our designers, Vicky. The SVG image was then animated using GreenSock.

The result is a fairly simple, efficient, cross-platform, randomized animation that stays within certain boundaries, but looks slightly different each time - each of the polygons in the vector file is rotated and skewed on one or more axes, with variable amplification and direction.

Here’s a prototypal render of the logomark Ø that we use.

And here’s a super low quality GIF of the animated header in action, which uses the SVG version of the asset.

If you visit the home page today, you’ll notice that we changed the speed of the animation, and the heading copy.

The Contact Page

The contact page was thought up by Vicky. We are a remote-first company, which means that by nature, our team is spread across the globe. We wanted a contact page that reflected that, and originally toyed with the idea of an actual 3D globe with some interactive pinpoints. We instead opted for an alternate version (reflected on the live site) that is much cleaner and easier to use.
The Wireframe on left, final UI on right

Here, you click on a city name and up pops a modal with everyone in that city, along with their contact info (and a super cool 8 bit space-invader like sprite).

Copy

When I arrived at Codelitt, there was some rough copy for some of the pages on the site. It worked, but it was a little all-encompassing...like we were trying to communicate too much at once.

As Codelitt’s first marketing hire, I had to sit down with the CEO and try to understand the company as well as he did. What do we do, who do we do it for, what can we improve on, what do people say about us, etc. I then spoke to the team and a couple past clients to get their thoughts on the company. With all the information I gathered, I created a single document, our core messaging doc, that outlayed our core ways of communicating, which includes elevator pitches, CEO blurbs, our capabilities, and much more. This helps everyone get on the same page. In this doc is where we dropped “startups” from our messaging and focused on highlighting our problem solving skills, our technological prowess, and our target audience, large corporations.

Getting our “what we do” message across clearly and succinctly is extremely important. When someone lands on our page, we want them to instantly understand what we do. While the current iteration is somewhat wordy, it’s been really effective in helping people understand what we do, and (we tested this in person) almost completely eliminated people asking “oh cool, but what does that mean?”.

Backend

The site uses CircleCI which allows us to do continuous integration and allows us to generate a new deploy using just a Tag in GitHub. To keep the site quick, we used webpack modules to compress the Javascript, CSS and images, as well as hash in the compressed files to guarantee speed in the cache.

Site 2.0 is deployed inside of a Docker container based in a NGINX image, which provides a really smooth way to deploy the website. It also uses Jekyll as a template engine for HTML static content. Jekyll builds all of the content into a static content, which makes the site much quicker.

The Future

We want to continuously iterate on and improve our site. A website should always be in flux, ideas should constantly be tested, and concepts refined. Right now, we feel the site accurately reflects us, our work, and our ethos, but a year from now, the site may look very different. We want to treat it as a living object that breathes and molds itself to fit our needs.


Download our Incubator Resources

 

WANT MORE?

We’re known for sharing everything!

HANDBOOK

Save more time, get more done!

FREE HANDBOOK

Innovate from the inside

Written by
Ben Ferster 14 Dec 2016

Ben is a marketer, music producer, filmmaker, and visual artist who's interested in consumer behavior and the economics of everything.

YOU MIGHT ALSO LIKE

comments powered by Disqus