Building Ourselves, Part Three
This blog post is the third in a four-part series that outlines how — as the saying goes — we’ve been eating our own dog food: creating a new brand for ourselves, changing our name, redesigning our website’s user experience, and then prototyping and launching the site.
It’s an ongoing process and we thought it might be interesting to see how we operate when we’re dealing with the worst client of them all — ourselves. To read Part I, click here, and for Part II, click here.
In Part II of this series of blog posts, I talked about how we developed the brand strategy we had developed for ourselves into a new visual design approach and logo. It was a fun process that gave us a new flag to rally around.
A new brand, however, is inert. You need to then put it into action, send it into the world and start seeing how it connects with people. We asked ourselves, What are the physical and digital brand expressions we’re going to spend time and money making? Of course, we designed and printed new business cards. We also got notepads and envelopes printed.
We created new logo files for all of our social media channels (and resolved to post to them more!).
This is all fun and important, but we could mostly do without them, if we wanted to. There was one important piece of collateral we had to attend to, no matter what: Our website, the most comprehensive expression of a brand.
The first thing we did was to reskin our old website. As Jerusha, we had rebuilt our website and were still proud of the structure and functionality. We knew that we were going to want to redesign the thing from the bottom up, but for now, we could change the text, the logo, the colors, and boom, we were in business and pretty happy with what we had. Because we were pretty happy, what’s the rush in creating something totally new?
But the website is our homebase. It was important to start the process. Off we went.
When we design a new website, the first tasks are research and discovery. As often happens when we do branding first, we had a lot of great information to put into place: We knew what we wanted to say, and we understood our own history. Because we are our own clients, the greatest risk is not having enough distance to do what we do.
Still, we wanted to go through our formal process, so we talked about our strategy. We tested our assumptions and built from first principles. We focused on developing a set of goals for the website, looked at its intended audiences and at our core messaging. This is where a lot of the meat happens.
Because we do design work, our website has one main function — to validate referrals. That means, first and foremost, showing our work. We had to create an experience that was simple, where we mostly got out of the way (which is the whole point of what we do). Potential clients want to see the work we’ve done. We didn’t want to talk about ourselves too much (despite what this series of blog posts might suggest), but let the work speak for itself.
Making It Simple and Dynamic
Next we started looking at the structure of the site. We sketched and tested several layouts. Because the main goal of the site was the validate referrals with the quality of the work, we needed to let the portfolio of projects take center stage. The big question is, how much should we say about the projects?
This is really the work of a content strategist. One of our goals was simplicity, so we wanted to come up with a content solution that could reflect that. It’s fun to create long case studies that point out all the tiny little details that we worked on, but we had to remind ourselves that comprehensiveness isn’t the point. It’s about starting a conversation. We want a potential client to see a project and say, Oooh, that’s cool and relevant to my problem. I think I’ll give them a call.
We decided that one of the problems with portfolios on agency sites is that often, there’s too much static imagery. We’ve got the capabilities, now, to add motion. We do interactive websites. There are users, not lookers, so we wanted to show how things move and feel before you decide to go check out a website. So we’ve been building little movie files that will help convey those experiences.
By the end of this phase, we had a clear sitemap and content approach that would allow us to be flexible as we grew.
The Beast, Content
It’s easy to say that we want to write new copy for all of our projects, and it’s another thing to actually schedule the time to do it. We also have to make sure we have all the assets we need for the new site, in sizes that will be big enough.
A new addition to our production toolkit is GatherContent. It’s a sort of shadow content management system that has allowed us to collaborate on copy and add photos and images, all within the site structure. We’ve started using it with clients, as well, and we’re finding it to be much more efficient than trying to manage versions of Word documents.
Planning It Out
We started, as we always do, with wireframes. Let’s take a look at the portfolio section, which changed the most during this process.
We originally planned to have one, very large image at the top, which would be a clear introduction. We would have a linear story (challenge, what we did, and outcomes) and a grid of full-width images moving down the page.
We tested the designs out with some potential users and found that it wasn’t that important to have all of that information. Also, the images sort of ran into each other. So we simplified the storytelling and grouped images. But the reeeeealllly long pages weren’t that useful. What should the user look at? We wanted something that was going to be beautiful, easy to use, and over all, not overwhelming. We always went back to the idea of simplicity and that basic strategy of showing the visitor just enough to want to make contact.
Instead, we landed on fairly short pages with text and images that move horizontally. The user is never far away from a list of the services we provided for the client (beneath the images), and with most users on trackpads or mobile devices, there’s no reason not to ask them to swipe.
For a site like ours, the wireframes weren’t that far from the final designs -- very stripped down and mindful of typography and hierarchy right from the start.
Next Stop, Launch
When we finally had a full set of wireframes, the visual comps, and (most of the) content ready to go, we were ready to head into development. We've been using a few interesting tools, such as Atomic Design through Pattern Lab, which we're really excited about.
The next and final installment of this series of blog posts will focus on how we developed the site. More to come!