Over the past couple of months, I've been working with Kevin Rose on his enormously successful new venture Digg.com — a news aggregation website with a twist. Digg is sort of social bookmarking mixed with peer reviewing, so someone submits a link to a technology story they thought was cool and, if enough other people at Digg think it's cool too it gets displayed on the homepage. In essence it's a pretty simple idea and it's been very popular and is growing rapidly.
Kevin brought us in to work on the visual interface side of things. As we're frequently doing on design projects, we've been working on design concepts and then handing over CSS, HTML, and images to a programmer to implement. Silverorange still does tons of programming and database work, but we also do a bunch of purely design stuff on the side. On Digg, I've been working with Owen Byrne, a talented programmer who coincidentally hails from Nova Scotia.
- Step 1: Gather the Pieces
- Although most people who left comments about the Digg redesign in the feedback forum missed or downplayed it, the biggest part of the redesign was to analyze the content on the site and reconsider how things should be fundamentally layed out. Although of course the visual appearance of the site was important, stepping back to the basics and making sure the foundation was laid was key here. This meant reorganizing the navigation more logically and restructuring the content on the page.
- Step 2: Divide and Conquer
- The very first thing we did was to single out one of the most important parts of the page, a front page news story, and deconstruct it. Rather than trying to tackle a dozen things right out of the gate, we chose one small self-contained section and gave it a lot of attention. What's unique about the site? Digging for stories. So, make those more prominent and show people items they can take action on to get them into the site as participants. Differentiate the titles and try to give some indication that you'll be taken elsewhere when you select a title link. Etcetera... Although contained in a single element, all of these ideas percolated throughout the rest of the redesign.
- Step 3: Lay Down Some Style
- This is the one part of any redesign that everyone has an immediate opinion on. We tried to come up with a friendlier looking interface that was welcoming to first-time visitors but balanced the needs of regular readers who are vital to keeping the system breathing with new content. Some of the inspiration for this design came from photoblog templates, which I think do a good job of keeping the template out of the way of the content. The tight-to-the-top compact header is especially indicative of this.
- The one thing you can always count on with a redesign of this nature is that not everyone is going to love it right away. Some people thought it didn't look enough like Slashdot, some people thought it looked too much like Slashdot, and so on and so on. Don't get me wrong, most of the feedback was helpful and well-considered, but some of the feedback wasn't exactly constrcutive. Some really great comments included:
I have to admit, I have never seen so much Truly hate full [sic] comments towards a design before, its as if people would have the guy who designed it hung in the town square for even thinking of it...
Allow me to paraphrase about 50% of the comments so far: "I'm a changeaphobic techy who wishes pictures and computers had never met. I experience the world one text line at a time, and I'll be damned if anyone tries to appeal to anyone besides me by including graphical elements that might not be 100% necessary. Everything is too big and flashy-- I like things minimal and bland, like my wardrobe." OK, a bit harsh, but there do seem to be a lot of whiners here. There are also many comments that thankfully point out valid, objective bugs.
If Firefox and Flickr had an offspring, they would have Digg 2.0" (this one is actually kind of accurate once I stepped back and looked at the design again)
- Seriously, thanks for the feedback from everyone. Some comments have already resulted in changes to the site and there are more changes on the way.
- Step 4, Step 5, Step 6... Revise and Rework
- This site is really flexible and is changing all of the time. One quick lesson I learned was not to paint yourself into a corner with code or design. We're already working on revisions and the interface concepts for new features that are in the pipes.