Redesigning Sidebar
Or why things can sometimes take longer than you expect…
I recently launched Sidebar 2.0, a long-awaited update to Sidebar (it’s a daily newsletter of the five best design links. Go sign up, you won’t regret it!).
I already talked a bit about the new version, but today I want to go more in-depth about the whole design and coding process.
Origin Story
But first, we need to go all the way back to summer 2012, when I suddenly had an idea: coders had Hacker News, but what about designers? Why shouldn’t we get our own place to hang out, too?
(I was obviously not the only person entertaining such thoughts, as Designer News would launch just a couple months later. But that’s another story.)
This idea eventually turned into Sidebar, and the site was hugely successful, amassing thousands of subscribers in the span of a couple months.
But as it turns out, I had made two key decisions right at the beginning of the project that would end up having major unintended consequences: I had decided to use the brand new Meteor JavaScript framework to build the app, and to open-source any code I wrote.
My newly-acquire Meteor knowledge eventually turned into Discover Meteor, which quickly became the number one Meteor book, and (as far as I know) one of the best-selling self-published programming books ever.
My open-source Meteor code on the other hand became Telescope, a build-your-own-Hacker-News app that’s since been used to launch thousands of sites.
So ironically, the success of Sidebar’s offshoots is precisely what led me to neglect Sidebar itself for all these long years.
Introducing Nova
At the start of this year I decided to start fresh and rebuild Telescope from the ground up using React instead of Meteor’s own Blaze templating engine. A couple weeks of hard work later and Telescope Nova was up and running.
Unlike the original Telescope’s one-size-fits-all approach, I built Nova with flexibility in mind. Which made it perfect to rebuild Sidebar with: I could customize every aspect of the site and ensure the result would look nothing like the “vanilla” version of Nova.
In order to make this possible, Nova has a pretty extensive API that lets you customize everything from components, to data schemas and forms, to server-side callbacks and operations. And all that without having to modify any of Nova’s core code.
In fact, Sidebar overrides almost all of Nova’s original set of React components and also uses custom routes and styles, while still benefiting from all the back-end features of Nova like server-side rendering, automatic form generation, validation, and submission, user accounts setup, email handling, and more.
In the end, with Nova running under the hood redesigning Sidebar was a matter of a couple weeks of work, plus a few more weeks of waiting for the final pieces to fall into place.
Design Matters
Of course, simply switching out Sidebar’s internals would’ve been boring, so I also set out to refresh its design.
The original site featured a one-day-at-a-time view where browsing through previous days meant lots of back-and-forth clicking.
So for the new version, I decided from to build a feed where you’d be able to view previous days simply by scrolling down the page (groundbreaking, I know!).
Since I (kinda) knew what I wanted, I was able to design in the browser from the start and not waste any time creating mock-ups in Sketch or Photoshop.
As you can see, I actually ended up with the final feed design fairly quickly:
The problem was that with just the feed alone, the site was virtually indistinguishable from similar sites such as Designer News or WebDesignerNews.
I had also lost the impact of showing only five links. So I started experimenting with a separate “hero” area above the main feed:
This worked a little better, but I still felt the design lacked impact. Also, the design was starting to suffer from a heavy case of “band-itis”. Having four different horizontal zones was making the whole thing too busy and overcrowded.
I then came up with a weird idea: what if the header was the footer?
This makes the whole layout look a lot more coherent, with a clear vertical information hierarchy (content > newsletter > header).
The obvious drawback was that the feed becomes a lot harder to discover. But is it really a drawback after all?
In my mind, there are two kinds of Sidebar users: a majority that visit the site regularly to get their daily design dose, but don’t interact with it further; and a small minority that actively submits links and browse the archives.
It made sense to me to design the site for the majority. The feed could be an easter egg of sorts, available only if you knew where to look for it!
More Explorations
It also hit me that this was starting to look a bit like the new tab page served by the Momentum Chrome extension:
I started thinking about what I could do to push people to make Sidebar into their new tab page. How about a daily changing photo background (provided by the excellent Unsplash API)?
This was a bit hard to read, but maybe it’d look better if the photo was faded out?
I even tested out crazy ideas like having visited links fade out to reveal a design-related quote in the background:
In the end, I decided to scrap the whole “photo background” idea when a friend told me it reminded him of Bing.
But I kept from this misguided experiment the idea that the homepage’s hero zone should be visually interesting and self-sufficient, a destination in itself.
Hiding The Feed
I then experimented with all sorts of way to show/hide the feed, before deciding on the current setup where it comes up above the hero zone.
This achieves two things: first, it preserves the mental model of the hero zone being a full-screen, immovable block, almost like your system desktop.
Second, by breaking the conventions of scrolling, it surprises the user and keeps them engaged (or if you prefer designer-marketer speak, it delights them).
It’s important to note that at no point does the design hijack your scroll or behave in a counter-intuitive way: the feed area scrolls up just as expected, it’s only the hero zone (in other words, the part that you don’t care about anymore) that breaks the rules.
I find that designing in the browser is hugely valuable for quickly testing out these little interactions: instead of having to drag layers around in Photoshop or mock something up in a prototyping app, you can just whip up the real deal with a couple lines of CSS code.
Thumbnail Design
Another important part of the new design is the images that accompany each link. The original Sidebar design felt a little sad and empty to me, and even though I know people dig minimalism I always thought it could use a couple more images to spice things up.
On the new site, images are fetched using Embedly, a service that provides meta-data (including any images it can find) about any URL you feed it.
Images are then cached in multiple sizes using Cloudinary, before being displayed on the site. By the way, both Embedly and Cloudinary integrations are open-source, and ready to use in your own Nova sites. Just sayin’.
But I then ran into a problem common to any site that pulls images from various third-party sources: they looked awful together.
So I took a page out of Bloomberg’s book and looked into applying CSS filters to each thumbnail.
In the end I used a combination of CSS filters plus a translucent gradient overlay:
Granted, it doesn’t always look great and probably needs some more tweaking, but at least it ensures that no single image completely overpowers the others.
Reception
I have to admit I was bracing myself for criticism: after all I had broken a key rule of web design and purposefully made most of my content harder to discover.
But instead, feedback was overwhelmingly positive, whether on Designer News, Product Hunt, or Twitter. I was also really glad to see so many people contribute concrete, useful suggestions on how to improve the design, and in fact I’ve already incorporated a number of them.
I also redesigned the email newsletter, but to my surprise the feedback there was a bit more nuanced. I thought that going from a bare-bones, hacked-together quasi-plain-text layout to a nice responsive template with large images would be an all-around improvement, but as it turns out I hadn’t anticipated a number of concerns.
The images made the email slower to load over slow 3G connections, and the fancy template pushed the content down, requiring more scrolling and hurting information density.
Based on this feedback, I deployed a second “realigned” design a few days ago with smaller images and a more compact body:
Conclusion
Overall, I consider the redesign to be a success. I managed to keep Sidebar’s brand and concept intact while both improving the site’s functionality and working in a few unconventional design elements. And more importantly, Sidebar users seem happy enough about the changes!
Time will tell if the redesign impacts sign-up and open rates in a positive way, but to be honest I’m not too worried about that. Worst case scenario, I can always redesign again!
