The 4 Key Strategies Behind Our New Website
October 12th | 2016

Last week we launched our new website.

Some of you may be asking yourselves “Didn’t you guys just redo your website a year ago?” Yes, yes we did… But, by this last spring, we found ourselves frustrated with a site that was more often fighting us more than helping us.

So, what changed within one year that our previous site just wasn’t cutting it? A lot, actually… In the last year, we’ve made major changes to our leadership structure, moved into our new digs on Nicollet, and completely overhauled the strategy for our blog – posting about four times more often than we were previously. Needless to say, it’s been a pretty exciting (and crazy) 2016.

Four strategies led our site rebuild:

  1. Evolve our design aesthetic.
  2. Showcase our work in a way that reflects the way we actually work with our clients.
  3. Have a clear understanding of how people use our site and build around that behavior. 
  4. Build on a more robust and flexible platform that better supports our needs.

We wanted to be sure we weren’t making a lateral move from one site to another and were building something that would flex as our needs change.

1. Evolve our design aesthetic.

To push the look and feel of our site forward, we took cues from our book that we created last year. We loved the way the design captured artifacts of process and pulled them into each page.

Rather than taking the book’s aesthetic and pasting it across every page of our site, we parsed the elements out into three different groups, pairing with the three main sections of our site: case studies, our blog, and general Zeus Jones related pages.

Design elements were divided up to pair with the three main sections of our site.

A lot of our in-process thinking gets posted on the blog, so it felt right to lean heavily into those scribbles and textured elements to reinforce that. The geometric bits and pieces are used on pages that are more focused on Zeus Jones (like the Home and About pages), where the extra elements are reduced down in our case studies, keeping the work front-and-center.

2. Showcase our work in a way that reflects the way we actually work with our clients.

On top of the visual overhaul for our case studies, we took a hard look at the stories those case studies were telling. The impact from our work isn’t just in the end-product that we create – it’s in the shift we see happen for the people who work on the brands we collaborate with. To capture this, our case studies now use an oral-history approach to showcase the voices of those who were there – both client and Zeus Jones.

3. Have a clear understanding of how people use our site, and build around that behavior.

This one may seem obvious, but it’s tempting to shortcut this part of the process when you’re designing a site for yourselves and not a client. Our first step was to look at analytics for our site and see what kind of trends we could pick out. Where do visitors come in, and where do they go before they leave? We identified top traffic paths, and built the UX to guide those existing patterns.

However, we knew that looking at analytics was just half of the picture. Only looking at existing traffic neglects any changes to the UX that might be helpful but don’t exist yet. To wrap our heads around this, we took an educated guess at some high-level user categories.

  1. Clients
    Current clients, potential new business, or collaborative partners
    WANT:
    How we think, the type of work we do, examples of our work, ways to explain what we do and our role
  2. Potential Hires
    Recruiting, searching for a new job, intern candidates, potential production partners
    WANT:
    Job openings, application submission, relevant department information, company culture, recent work
  3. Curious People
    Industry professionals, enthusiasts, friends, everyone’s aunt that’s super active on Facebook
    WANT:
    The latest content and any content that’s related (either from the same author or similar topic)

Based on these categories, we could make some assumptions about what people want when they come to our site, and what other content they might find interesting. From there, we started mapping out pathways, linking to content someone’s likely already interested in (based off the page they’re currently on).

StrategistUserFlowExample.jpg#asset:1143

This stuff was low-hanging fruit that we didn’t want to ignore – regardless of how simple and straightforward our website is.

4. Build everything on a more robust and flexible platform that better supports our needs.

Designing a slick new site is great, but that doesn’t get you very far if it doesn’t serve you well six months from now. That’s why the fourth goal was without a doubt the most important for us. We needed more robust blog posts and case studies, but through a flexible CMS that would allow for turnkey content editing and publishing.

The first way we solved for this was that we created a library of 15 individual modules that can be combined any way you choose to create new pages. This means every one of our blog posts is built from the exact same module library as our case studies. Some of our other pages have more hard-coded sections, and different page types have different universal elements, but aside from those pieces, everything is pulling from the same core library.

We’ve used this “layer-cake” method on previous web-builds, but the thing that really pushed this into new territory was the amount of variation we built into every module. 

Take our collage module, which by default looks like this:

I'm a Collage module. 

You can use me to set some text next to some images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus tortor, venenatis id nisi non, dignissim egestas ligula.

The module has a lot of flexibility built in, so we can change the number of images and swap out that basic text area for a pull quote: 

“I'm the same collage module, but now I have a pull quote and only one image.”

All the different permutations of each module provides us with a ton of flexibility so every blog post or case study is tailored differently. This way, our site design works alongside our content rather than fighting it.

The second way we solved for site flexibility is we built our entire site using Craft CMS from Pixel and Tonic. Our Creative Technologist William was the dev wizard behind all of this and he’ll be writing a follow-up post that goes into much more depth, but basically the core functionality of Craft is built to support this sort of drag-and-drop content building based off of core sections. As someone who’s had to spend a ton of time in our CMS so far, I can say that Craft has totally exceeded my expectations.

All in all, it’s been a long process getting this thing up and running. But we’re extremely proud of the work we’ve put into it, and (fingers crossed) this new site will serve us well as we continue to move forward.