How To Build A Website In Nine Exceedingly Difficult Steps

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.

Notes

  1. So glad you didn’t change your name! It’s so memorable. I have your map of Columbus and love it. Clintonville represent!

    Date July 27, 2012
    • Thanks! We’re happy that we kept it, too. Nothing else felt quite right.

      Glad to hear you are still enjoying your map!

      From Jen
      Date August 3, 2012
  2. I agree, don’t change your name! Love the new site and it totally reflects what I see in your business.

    I’m the owner of PA and OH state maps that are proudly displayed in my living room.

    Grandview represent!

    From Mikalene
    Date July 27, 2012
    • Yay, Grandview! We moved out of the neighborhood a few months ago and still miss it. Thanks for the kind words!

      From Jen
      Date August 3, 2012
  3. Wow – thanks for sharing your process! It’s funny how difficult it can be to evaluate your own brand just because you are so close to it. Congratulations for overcoming it and kicking butt in the process.

    Love the way the site has gracefully evolved. My favourite aspects of your old site were the small illustrations in your footer, so I love the expansion on that. Also – super glad you stuck with the name.

    Great work!

    Date July 27, 2012
    • Thanks, Chris. It’s funny that you mention those footer illustrations. We talked about those a lot as we developed the final concept for the site. I’m glad that we finally figured out that we should rely on our strengths, even if it took us months to get there! Glad you enjoyed the post.

      From Jen
      Date August 3, 2012
  4. I hadn’t heard of you guys previously but noticed you submitted to awwwards and I must say I love your website, you were right to keep developing it into what it is now, A really bold.. friendly.. cool website!

    Awesome work! :D

    From Brendan
    Date July 27, 2012
    • Thanks, Brendan!

      From Jen
      Date August 3, 2012
    • You should do it! There are tons of tutorial out there about parallax stuff. The one we linked to in the article is really great.

      From Jen
      Date August 3, 2012
  5. Pingback: Design Work Life » Monday Quick Links

  6. Pingback: Monday Quick Links | pixelpush design

  7. your website is one of the best websites I’ve seen in my life, I surfed full, I wanted to just click on everything, thanks for sharing your creativity to the world.

    Date July 31, 2012
    • Thank you so much!

      From Jen
      Date August 3, 2012
  8. Congratulations with the new website, it really kicks ass!

    And thank you a lot for sharing your thoughts and process during the redesign: I’m working hard on building my new portfolio, and your post inspires me and comforts me at the same time.

    Yay!

    From Marie
    Date July 31, 2012
    • Thanks, Marie! So glad the post was helpful to you. Stick with it and good luck!

      From Jen
      Date August 3, 2012
  9. Pingback: These Are Things | Curious & Co. Creative

  10. Excellent read, such a great insight into the (reassuringly fraught) process. I need reassurance now however, that I won’t freak out trying to code something like this for my own site…….

    From Ian
    Date August 1, 2012
    • Consider yourself reassured! While Jen and I are both semi-proficient at coding for the web, a lot of what we’ve created for the site was done by simple research on the internet and a lot of trial and error. We probably can’t offer much in the way of troubleshooting, but definitely feel free to contact us if you need any help on your own site.

      From Omar
      Date August 1, 2012
  11. I love the remodel! It’s so much fun and a great source of inspiration for other makers out there. I will be featuring you on IAMTHELAB soon.

    Date August 2, 2012
    • Thanks, Brett!

      From Jen
      Date August 3, 2012
  12. Pingback: These Are Things >

  13. When I first saw the new website, I was blown away, it’s magnificent. That lead me (and I’m positive, many other visitors as well) to wonder how can someone get to a result that is so good, fluid and enjoyable. Seeing this post makes me happy, and proves that it’s all about hard work, researching and, of above all, good taste. You guys really came through with this one, and now you have left us, brazillians, wanting maps too, go international guys! ;)

    From Glauco Fox
    Date August 6, 2012
  14. Your new website is very fun! :)

    From Khen
    Date August 12, 2012
    • Thanks!

      From Jen
      Date August 13, 2012
  15. um wow! I just love your site! There is just so much personality from each vignette! Amazing work. And thanks for taking the time to write out your process. I read every bit of it and am creatively charged up! Now I am subscribed to your blog too, excited to see your upcoming work and how your print projects come out too!

    Date August 16, 2012
    • Thanks Sam. It’s great to hear that our words and work have the power to creatively charge someone :) We’ll continue to do our best to live up to that!

      From Omar
      Date August 17, 2012
  16. Pingback: Evernotes Every Friday | Creating For Our Creator

  17. Although I have seen your maps before I just stumbled upon your lovely site and blog the other day while doing some research for my own website. I hope you don’t mind me saying, but I am kind of in love with your site and illustration style. There are so few websites that you visit that just make you happy and you feel like you have to share them with others. Keep up the wonderful work and thanks for the inspiration!

    From Laura
    Date October 30, 2012
  18. This website is beyond impressive. Well done you two and it’s great to see how amazingly well you guys work together!

    From Chance
    Date April 23, 2013
  19. Truly amazing site guys! It’s not common to find a site that is so engaging. It is obvious how hard you work and I think this site is a great example of creativity at its best.

    From Paolo
    Date July 20, 2013
  20. First of all, great job! Hate to ask a technical question but… Did you start with a framework like WordPress or some other web content management system or did you start from scratch? Everything is so neatly organized and user friendly.

    I have the AMERICAN FLAGS MAP hanging in my office currently.

    From Mark Weaver
    Date September 6, 2013
  21. Ohh, really awesome… Great source of inspiration for me.

    From Pooja
    Date September 23, 2013
  22. I found your site looking for some inspiration and I really got it! Thanks very much for sharing your creative process with the World.

    From Renzo
    Date October 25, 2013
  23. Hi, I never comment but after reading your blog I happened upon this entry and I couldn’t believe that site was yours! I loved it so much I made a riff off of it for my wedding site a couple of months ago. http://www.stupidfreshwedding.com. Great site, the 9 months were definitely worth it!

    Date November 1, 2013
  24. Just inspirational! Really nice job guys.

    From Dani
    Date December 5, 2013
  25. wOW!! amazing work, really!!!!!! the best!

    From MARGARITA
    Date December 21, 2013

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>