Christine Bath
Design + Research
menu

Cogo Labs

  • Front-End
  • UX
  • Usability Testing
  • Visual Design

Redesigning the Cogo Labs website was one of those projects that everyone agreed we should do…someday. The site was all the things you don’t want your digital identity to be - hard to maintain, difficult to update, and not really showing who we are as a company, more who we were. In 2015 we finally decided it was time to refresh the site to prepare for a big recruitment push. I lead the redesign effort and defined the UX and visual design of the new cogolabs.com.

Table of Contents

Chapter 1. Goal Setting

Chapter 2. Wireframing

Chapter 3. Visual Design

Chapter 4. Interaction + Development

Chapter 5. User Testing

snapshots of the final design of cogolabs.com
snapshots of the final design of cogolabs.com

Goal Setting

The first step in my process was to outline the goals of the redesign. I audited the current content of the site and met with a number of key people at Cogo to understand who we wanted to come to our site. Looking at our metrics and anecdotally, most of our visitors came to our site to look for a job. I also did a full design review of our current site and of other startup incubators and accelerators.

(The astute reader will note there was no outside user testing involved in this initial review - more on that later)

visions of cogolabs.com past
snapshots of the old Cogo Labs website

My goals for the redesign were to:

Serve our job seeking population

Most of our site visitors were job seekers. But our site was vague on what it was actually like to work at Cogo, and it had a dated explanation of what we did. The new site needed to do a better job explaining what an accelerator was, what we produced, and what kind of people we needed.

Show off our culture

Cogo is an amazing place to work and start a career in tech. The people are smart, the problems are interesting, and we give our teams a lot of freedom to explore and experiment. Accelerating the careers of our employees is one of our key values, right alongside the growth of our companies. We wanted the site to put these value and our culture front and center.

Strengthen design + content hierarchy

My main beef with the old site's design was the content lacked hierarchy and a solid typographic or color system. This made it hard to scan a page and know where you were or what you were looking at. Specific problems were the overpowering graphics that pulled attention away from key page content, and a very limited variations in font sizing. I wanted the new design to have a strong typographic and color system that gave structure to the page, in addition to a refreshing look and feel.

React with smart responsive design

The old site used an ExpressionEngine template that did have responsive styles, but it was pretty clunky. The problems with content hierarchy were exacerbated on mobile and the layouts themselves did not reformat well to smaller screens. I wanted to make sure our site would look good and retain structure on any device.

Wireframing

I started by building basic wireframes in Balsamiq to capture which pages we wanted and where content blocks would live on the page. Wireframing was key in getting initial feedback from teams without the emotions that come with seeing a high fidelity mockup. I also used these wireframes to outline questions for our Web Engineers who would be revamping the back end of the site - can we add Google Maps / code syntax tools easily for blog posts? Would we get enough flexibility with a Flickr integration to show/hide certain albums?

early stage wireframes for about and blog
early wireframes for the new Cogo Labs about and blog sections

Visual Design

My next step was to think about core visual elements. It depends on the project, but I normally like to start with either typography or color palettes to get started, then stress test it within the wireframe structure. I decided on Adelle Sans and Soleil for our font pairings - both were easy to read for web and together they added the hierarchy and structure to sections that I wanted. I was also given free reign to play with our brand colors. I didn’t want to deviate too far from the original palette, but I did want to modernize it and brighten it up.

early version of the Cogo Labs style guide
early version of the Cogo Labs style guide

With that, I dove into a round of high fidelity mockups in Photoshop with additional tweaks and feedback points. I always kept the mobile experience and usability at the forefront of my mind, and designed the desktop + mobile views in tandem. I also built an interaction guide detailing specific functionality / animations I wanted to see on the page.

mockups for jobs page interactions
mockups for jobs page interactions
mockups for the revamped blog
mockups for the revamped blog

Interaction + Development

With the visual design defined, we moved on to development. The site was built with We built the site using Express.js for a web framework, Keystone.js as our CMS, and Jade and Stylus on the front-end to create cohesive, clean styling. I worked closely with our web engineers to build and implement the site. Most of my front-end commits contributed to core site styling and individual page layouts. I also had thoughts on how I wanted specific interactions to work on the page, so I owned implementing those features, including:

People Flipbook

I wanted our home page to show our culture front and center, and incent possible job seekers to check out our career openings. We wanted a way to showcase our employees without having to maintain individual pages or profiles. I landed on this "people flipbook" concept that would randomly flip different tiles to reveal another friendly, future coworker.

video of the people flipbook I built

I built this by positioning two photos on top of each other for each tile, then using JQuery and CSS animations to fade the top one out and slide up the bottom one. Ultimately we retired this feature until we found a better schedule to photograph new hires, but I am still fond of it.

Career Navigator

With hiring being one of our core goals, I wanted it to be seamless for job seekers to find and filter for the right job for them. We knew we'd be engaging in a hiring push, so the number of open positions could be quite large. But, we also knew we attracted a multi-disciplined type of job seeker, and I didn't want to force users to search through multiple categories. So, I decided on a seamless filter solution.

video of our career navigator filtering

I built the filtering system by tagging each position with a team data attribute, and then would use those to perform various filtering actions.

User Testing

After the site’s launch we wanted to verify that we had met our goals and our job seeking audience could easily navigate the site and understand what Cogo was all about. In hindsight, we should have brought users into the process earlier. We were learning more about how to effectively user test a site on other projects while the site was being built. But, better late than never.

I worked closely with our Senior Director for Marketing Operations to plan and run the test. We first recruited users who we would identify as potential job applicants - either new grads or young professionals with 1-2 years of technical or analytics experience. I also developed a script of questions to ask and tasks to complete, and then coached our interviewers on the best way to get insights without influencing the user.

We found that users were able to easily navigate the site and complete core tasks, like finding different kinds of jobs and seeing what kinds of companies we built. The main feedback we got was the concept of an accelerator was still not clear to all users, so we continued to evolve and adjust how we explained our methodology.

The new cogolabs.com continues to be a living project under continuous improvement and enhancement. I am proud that the design has stood up to the evolving needs of our company and continues to represent us well.