Metaphors are the most powerful force in design. They outlive any one product. They surround you.
If you’re reading this on your work computer, you can see what I mean: The idea to compare your computer to a literal desktop, filled with folders, a trash can, and windows stacked atop each other like paper—that friendly handhold helped people understand what computers could do. It helped them take off. Something similar is true on the web. The metaphor is the webpage, akin to the front page of a newspaper, only instead of turning a page, you clicked a story. That was the idea when the first layout programs like Dreamweaver were created for webpages.
Though today’s web publications would never admit it, they’ve inherited that metaphor. And the metaphor doesn’t work anymore. As we set out to redesign FastCompany.com, the biggest idea we had in mind was that our homepages and every page linking off of them wouldn’t be simply “pages,” but rather, they’d be assemblies of modules, like Lego. We endeavored to create a system of modules that could shift and change and evolve in ways that a traditional website design simply cannot.
This was driven out of necessity. The homepage of the recently departed FastCompany.com could hardly bear the weight of all the things that Fast Company has become: A network of sites, live events, a magazine, sprawling editorial franchises like Most Creative People, a yearly design competition, and stories that range from feature articles to short blurbs. Surfacing all those facets on our old site was almost impossible, because the metaphor for the old site wasn’t working. Built as a traditional scroll of stories arranged from newest to oldest—itself a metaphor inherited from RSS—that site could show visitors only a portion of all the features I just listed above.
When you arrive at FastCompany.com, you see modules stacked on top of each other, ranging from What People Are Reading to Co.Studios. Each one is dedicated to showing off some piece of our growing brand. In the coming months, you’ll see those modules shift, evolve, and even disappear—to be replaced with new features, such as the ability to take a spot poll about our articles or our relaunched newsfeed, built for quick-hits of news so that you can mainline new information all day. (Looking even further into the future, a modular site allows us to experiment with technology, say by creating a bespoke group of story recommendations, or even a differently ordered homepage tailored to how well you know our brand.)
Our new, modular website was also meant to profoundly change the way we work. To paraphrase what my boss Noah Robischon wrote in his note introducing our beta test, this new system was created with the expectation that it’s never finished. The pace of iteration not only has to be accelerated, it has to be planned for.
Put yet another way, this design allows us to reinvent this ship even as we’re sailing it. It’s a vision that falls in line neatly with a mandate from our CTO, Tom Plunkett, who argues that big unveilings are the enemy. Constant improvement is not only the way that modern software development works, but how our entire organization should work as well.
Responsive web design has taken over the digital world, and for good reason: In an era of countless new phones and devices, it’s almost impossible to create enough flavors of your website to keep up. You have to instead create one website that works on a multitude of platforms.
But that logical evolution has come at a price: Most every web publication you read now looks the same, just big blocks of images stacked at right angles. The situation is made even more acute by the fact that readers don’t arrive from the homepage like they used to. They arrive from everywhere, via social media. So we endeavored to design a homepage that felt fractal.
Fractals are amazing mathematical functions that, when graphed, look the same no matter how close you zoom in. To carry that metaphor forward, we wanted readers of FastCompany.com to know they were on FastCompany.com, no matter if they arrived on their phone, or if they had scrolled halfway down an article after arriving from Twitter. For example, scroll to the bottom of this article, and you’ll see the design language of our homepage. That same idea crops up all over the site: Secondary collection pages take on bits of the homepage design language. The modules flow through the site in a way that’s instantly recognizable.
This idea of instant recognizability also influences the visual design of our pages, painstakingly overseen by our creative director, Florian Bachleda. The big ramp of color that anchors our article pages lets you know that you’ve arrived at FastCompany.com, as do the little designs such as the borders that surround our images and the system of fonts. Every motif we’ve used appears on all the other pages we’ve created, with the hope that it becomes a visual language that you can sense even without knowing it.
We released this design in phases. First, we asked our newsletter subscribers to check it out. Then, we asked all visitors to try out the new look. In doing so, we’ve gotten thousands of responses that have been crucial in letting us know whether we were on the right track.
So far, the response has been overwhelmingly positive. A rough estimate: Most of our readers love it, some hate it, and the rest don’t quite know what to think. That’s good. Fast Company isn’t neutral. It represents a sensibility, a world view, and a certain type of reader that’s progressive, eager to create new things, and eager to learn about what’s next. Accordingly, our website shouldn’t be merely okay for almost everyone. It should have a strong point of view.
That said, there are areas for improvement. One of the most frequently requested features for our site is a way to browse the entire firehose of content that we publish every day. Another thing that’ll need constant refining is how to find something new to read after you finish an article. You’ll see us iterating to meet both of those challenges in the months to come, and you’ll also see new features such as revamped slide shows and short articles.
But maybe there’s something else that we haven’t even thought of yet! Here is where we’d love to hear from you. If you’d like to offer your thoughts, take a minute and drop a note to redesign2016 AT fastcompany dot com.