These Are Things


How To Build A Website In Nine Exceedingly Difficult Steps

WorkOmar37 Comments

On Monday, we debuted our new website. We built it from scratch, complete with fancy parallax scrolling, hundreds of individually illustrated elements, and a sizable helping of easter eggs strewn throughout. From concept to launch, this version of our new site took us a solid month to complete. Not too bad, right? Well, that doesn't include the five fully-developed iterations that came before it. We spent over six months exploring a variety of options (read: design, delete, repeat) before we finally settled on the version that launched earlier this week.

In this epic post, we're going to walk you through our entire redesign process, from beginning to end. Through this grueling, meandering journey, we learned that going down the wrong path (repeatedly) can eventually lead you to exactly where you need to be.

Step 1: Evaluate your shortcomings

Back in November, we started talking about redesigning our website, which was a little over a year old at the time. It was clean, simple, and fairly easy to use with just a touch of fun and texture. We thought it was pretty good. And our customers loved the site enough to send us compliments on a weekly basis. (Thanks, by the way!)

If everyone likes it so much, then why go to the trouble of starting over?

The answer is simple: pretty good isn’t good enough. We learned early on that nobody is going to push us to make better work except ourselves. While the site was perfectly functional in its current state, we knew we could do better.

So, in order to move forward, it was time to get honest with ourselves. We sat down and took an objective look at every single aspect of our brand experience. We evaluated and critiqued our website, our shop, our packaging, and our product line. After much deliberation, we finally discovered the root of the problem.

Turns out that there's a fine line between artfully minimal and just plain boring. This problem became most apparent when we started working on new packaging for our shipped goods. There are only so many ways you can use a generic red banner and Trade Gothic Extended before it gets a little restrictive. (Trust us, we tried.)

It was near impossible to build a compelling brand image based on this handful of very simple elements. Our work is expressive and playful, and as much as we love cute banners, our aesthetic wasn't being expressed through our website as well as it could be.

We were determined to develop a more full and interesting visual language that we could apply to all facets of our brand. It sounds straightforward, but this task ended up being the most challenging project we've tackled to date.

Step 2: Seek inspiration

Instead of turning to ffffound or dribbble to see how other designers had worked with a vintage-inspired aesthetic, we turned our computers off and went directly to the source. Over the winter, we did some serious digging at Ohio's antique fairs and vintage paper shows. The Midwest is a great place to be if you're into that sort of thing.

After spending many weekends with our hands deep in dusty bins, we had built up a really nice stock of references from the 40's, 50's, and 60's. We picked up everything and anything that caught our eye - from milk bottle caps to travel brochures to matchbook covers.

I was inspired by a few pieces in particular and did a quick reskin of our current site. We liked the direction it was headed, so I coded up a new shop layout in about a week. The new design sat on the shelf while we worked on more pressing projects during the holidays.

When we brought the site back up for review in January, we found ourselves feeling a bit underwhelmed. While it pulled from more interesting and varied source material, the design didn't seem like a far enough step away from our existing site.

Step 3: Dare to fail

Back to the drawing board. We decided that our main problem with the Air Mail concept was that it seemed too similar to our original website. Why go through the trouble of a redesign if it's just going to come out basically the same? That's when we started having an identity crisis. Maybe a simple design refresh wasn't going to be enough. Maybe we needed a whole new brand.

A quick history lesson: These Are Things was an completely accidental name choice. I had an unused domain sitting around when we decided to make our first one-page website back in 2010. After that took off, we decided to stick with the name and have used it ever since. Now, we started to second guess this decision. Maybe if we sat down and thought of a more intentional name, a new brand would be easier to form around it.

Our goal was to come up with a name that was more descriptive than These Are Things, which is about as vague as a name can be. What kind of things? It's anybody's guess! After some fun domain brainstorming, we decided to start working with the name Fact/Figure. Our work is about visually representing facts and figures, so this seemed like a great fit.

Jen started some layout studies that went for a minimal, ultra-modern look to try and distance ourselves from the soft, whimsical, and playful feel of These Are Things. After finishing the whole thing – again – we agreed that this stark, minimal approach didn't feel right when paired with our lighthearted and colorful prints.

Also, the red Fact/Figure logo kind of looks like a fail stamp. Fail, indeed.

Step 4: Branch out

We were still attached to the Fact/Figure name, so we set out to present it in a more friendly way. After discussing the expansion of our line to include a variety of educational prints in addition to maps, we decided that a mid-century schoolroom theme made perfect sense.

During the month of April, we had fun diving into old grade school textbooks and applying that aesthetic to our shop layout. Our goal was to be as different from These Are Things as possible while still referencing vintage elements. Instead of light, let's go dark! Instead of dainty, let's go bold! The result was a visual language at the opposite end of the spectrum from what These Are Things had been.

As we worked through this concept, we began to grow concerned about the deviation from our roots. We started this project to celebrate our love of travel. This direction had visually and conceptually severed all ties to that idea. Something about that didn't sit right with us. This exercise in being radically different ended up showing us the value of our existing brand.

Step 5: Remember your roots

After dumping the educational concept, we stepped back and thought about how this project began. We started making maps to celebrate our love of travel, so let's focus on travel! Revisiting our long list of name ideas, we settled on Wayfinder because it sounded like a cool travel shop. We started with some logo studies, but it wasn't long before doubts crept up once again.

Was it really wise to throw away a name – no matter how small – that we've been building for the past two and a half years? We've been in books and magazines and countless websites under this name. We'll have to change our e-mail addresses and our Twitter and Facebook names, too. What a pain. The thought of abandoning our old name started to seem like a poor choice.

Step 6: Push through

After going around and around for months, we gave up on the name change and focused on the original task at hand: a brand refresh for These Are Things. We realized that our current online presence didn't accurately portray all of the things that we do. Most of our time is spent doing things other than running an online shop, but you'd never know it from our website.

Instead of simply building a new store interface, we needed a site that could showcase everything. We began to outline how all of this information would be organized, but each decision we made seemed to bring up even more questions.

At this point, we were six months into this project with nothing to show for it. Meanwhile, our existing website gathered dust, as we'd given up on doing any significant updates until the new site was complete. Tensions were wearing thin and we wondered if we'd ever finish this project.

Step 7: Have some fun

Jen decided to ease her tensions by getting a massage. I stayed at home and tried to figure out what was causing us so much trouble with this project. During the time that we had been working on the site, we had also started illustrating a monthly column for AFAR magazine. I thought about how much easier and more natural it felt to solve complex design problems for someone else. What if we stepped back and thought of this project as client work? How would we design this website if it wasn't ours?

I looked through all of our previous identity work and zeroed in what I thought represented our brand most efficiently and most interestingly: the self-portrait illustrations that we made right after designing our first world map.

Just for fun, I spent the afternoon reworking them to reflect how our illustration style has developed over the past few years: simple geometric shapes with subtle texturing and gradients. Jen came back home refreshed and renewed and after seeing the new self-portraits, everything clicked.

Step 8: Git-r-done

Using the updated self-portraits as a starting point, Jen quickly got to work by drawing about a million different objects that literally illustrated the many ways that we work together. She threw them in Illustrator and began arranging them like a jigsaw puzzle.

The objects were interesting, but I was particularly drawn to Jen's little storefront scene. What if we took a more literal approach and created fully illustrated environments that our self-portraits could travel through? I quickly scrawled a drawing for each scene and scanned them in. Jen did what she does best and turned my random scribbles into beautiful vector illustrations.

While Jen was busy drawing, I worked on animating our journey through these environments. Thanks to my experience with motion graphics, I was familiar with parallax, a technique where flat layers are animated at different speeds to create the illusion of three-dimensional space. We wanted to use this effect to create the feeling of a diorama or storybook - an immersive environment.

Fortunately, it's 2012 and the web is capable of some amazing things. We were greatly inspired by Frank Chimero's beautiful Atlantis piece for IE9. It's a perfect example of how to achieve this effect in the browser without using anything clunky like Flash.

We spent quite a while researching the techniques used to create parallax websites. This great tutorial by Jonathon Nicol at f6design was particularly helpful. We studied his work and used his technique to animate our new graphics. I added a bit of extra detailing to each of the drawings in Photoshop and then began the always fun job of coding the rest of the site. (For the sixth time.)

While things were going much smoother now that we had a solid direction, there was still a lot of work to be done. The process went like this: Jen would think of an idea for the site, I would get grumpy because it meant more work, we'd implement it against my will, and it would always end up being for the best. That happened about a couple dozen times over the course of the development of the site and continues to this day.

Step 9: Press the button

After investing so much time and energy (and sanity) in this project, we were very, very nervous to show it to the world. We just hoped people would like it and maybe laugh at the stupid jokes that are hidden throughout the site.

On Monday, we hit the upload button, even though everything wasn't 100% finished. That's the great thing about the web. It's a fluid medium, so we're able to change things on the fly as needed. The most important thing was to just get it up there. Anything, even a half-finished new site, would be better than our long-neglected old site. Fortunately, the response was overwhelmingly positive and we couldn't be happier about it.

While we're glad to have the website up, the rebranding process is far from over. In addition to adding a few more features to the site, we're starting to develop the offline component of our brand, like our new packaging and other goodies. This process will be much easier now that we've really worked through our fundamental identity issues during the development of our website.

Congratulations for making it this far! Have questions about our process? Any thoughts about why it's so difficult to design your own identity? We'd love to hear from you in the comments.