Mark Boulton

It’s been a good while since I announced we’re work­ing on the redesign of Drupal.org. Two months, a couple of present­a­tions, and seven iter­a­tions of the pro­to­type later, a glim­mer is at the end of the tunnel.

On thing is for sure, in this instance, Design by Com­munity works. 

I said, when we embarked on the pro­cess of design­ing this site, that Design by Com­munity is the only way we could approach it. Since those ini­tial thoughts, Leisa and I have con­tin­ued to push a pro­cess that many thought would fall flat on its face. I’m not sure if this would be spe­cific to the Drupal com­munity, but they couldn’t have been more wrong. This pro­cess is work­ing, and really well.

Keep Listen­ing, and Keep Learning

Ask­ing how your users feel when using your web­site is import­ant. We all know the value of usab­il­ity test­ing; of involving the user right from the start, and as much as pos­sible. What we didn’t know, with this pro­ject, was how to scale that out to a com­munity of hun­dreds of thou­sands of people. 

‘Tra­di­tional research’ tends to work like this: test­ing is usu­ally done on a man­age­able sample of users indic­at­ive of the audi­ence. The sample is gen­er­ally care­fully selec­ted (by vari­ous means: inter­views, phone inter­views, ques­tion­naires etc). This can take a while, and can cost a fair bit. It’s time and budget we just didn’t have for this pro­ject. So, how do we reach out to the audience? 

We used a bunch of chan­nels for this: 

• Twit­ter. We set up a Twit­ter account and searched Twit­ter twice daily for men­tions of Drupal. Our aim was to catch people when they were in the moment. We’d ask them a few ques­tions, and we’d fol­low them to see how they got on.
• Flickr. We set up a Flickr group and used it as a place for the com­munity to post their thoughts, wire­frames, sketches and designs.
• Drupal Groups. We pos­ted reg­u­larly to the Drupal redesign group. This helped us gather the feed­back of the exist­ing community.

The aim of the dif­fer­ent chan­nels is to keep them open and approach­able. We want to listen. 

Pro­to­typ­ing using Blueprint

Early on, we decided the best approach for this pro­ject would be rap­idly built pro­to­types: html wire­frames. In order to spend less time wor­ry­ing about CSS and valid­ity of markup, we decided to use the CSS frame­work, Blue­print, to build the sites out quickly. Together with Polypage, a rather nifty script from those clever chaps at New Bam­boo, we were able to very quickly knock up html wire­frames with some lim­ited func­tion­al­ity. This pro­cess proved invalu­able for both com­munity feed­back — in that they could actu­ally inter­act with some code in their browser — and also for one on one inter­views and usab­il­ity test­ing con­duc­ted by Leisa.

Incid­ently, we’ve built a bunch of Blue­print plu­gins (kind of like the Yahoo! UI sten­cils) to sup­port this pro­cess. We’re going to be build­ing on those and releas­ing them shortly. We’re quite excited about it actu­ally. They’ll be things like nav­ig­a­tion, cal­en­dars, forms: all the little bits of stand­ard UI gub­bins all pack­aged up as simple CSS files. 

You see, we would have used some­thing like Yahoo!’s design pat­tern stuff for this, but it’s just too designed. We needed this pro­to­type to not looked visu­ally designed in any way so people could focus on the UX. Any­way, that will be forthcoming.

Weekly design and pro­to­type iterations

The pace of this pro­ject is such that we have a weekly pro­to­type release every Thursday in read­i­ness for com­munity feed­back (via the vari­ous chan­nels) over the week­end. And, the the­ory still stands: we look for trends in the feed­back. Inter­est­ingly, trends have been more dif­fi­cult to spot the fur­ther we get down the road and the more ‘real’ the site becomes. 

Drupal.org pro­to­type iter­a­tion 7 homepage. This ver­sion rep­res­ents a big step for­ward visu­ally, brand-wise, and revised Inform­a­tion Architecture.

The latest iter­a­tion, ver­sion 7, is a bit of a depar­ture from the pre­vi­ous ones. In Leisa’s words:

There were a couple of things that were really bug­ging us in the ver­sions up to now.  In par­tic­u­lar, the nav­ig­a­tion in the header (there was so much of it and it looked kind of messy and con­fus­ing and in tests, we observed that people com­pletely ignored it!). The Logged In ver­sion of the homepage was a good idea but the exe­cu­tion was com­ing up short as we learned that ‘hard core’ Drupallers thought it was a valu­able addi­tion to the site but just about every­one else wasn’t interested… 

She goes on to say… 

A beha­viour which we have observed since the very early days on this pro­ject has the use of search — lots of people use search lots of the time, and a lot of the tasks that the site has to sup­port are heav­ily search ori­ented (find­ing mod­ules, find­ing help etc.). Drupal.org users have some of the most advanced Google skills I’ve ever observed! — and yet up until now, the redesign of the site didn’t really pay this much heed — it was still very much a hier­arch­ical site made up of silos of con­tent… for­cing people to choose between this sec­tion or that to find the con­tent they required.

This shift in dir­ec­tion has, so far, tested well and the over­all com­ment we’re hear­ing is good. But, we there’s still a way to go.

Please let me know your thoughts as you delve in and have a look around. 

Onwards and upwards

We’ve still got a month or so left on this first phase of the pro­ject and there’s a lot to do in a short space of time. One thing that is driv­ing the clar­ity, in fact without, this pro­ject would be con­sid­er­ably more chal­len­ging, is the com­munity feed­back. Through the flam­ing, dis­agree­ments, and argu­ments are clear, action­able points, which we take for­ward to the next round. 

At first, I thought design by com­munity would be as bad as design by com­mit­tee. Lots of people, all wanted their say, mix­ing black with white and end­ing with grey. Not so. This pro­ject, and I believe it’s break­ing new ground in this approach, is prov­ing it’s work­ing and that’s not down to the team at Mark Boulton Design, me, or Leisa. It’s down to the community.