Drupal.org - come wireframe with me!

There is a design game that I like to play when I’m working face to face with my client (and when there aren’t thousands of stakeholders!) which involves everyone on the project sitting down together and individually sketching up some wireframes that then get shared back into the group.

Aside from being good fun, it is also a really great way to uncover good ideas, common themes, and a whole raft of information and assumptions that haven’t yet surfaced in the project but that are important to us getting the design and information architecture right.

I don’t see why we should let our ‘virtual workspace’ stop us from playing this game, so, let’s do it. Let’s do some wireframing together!

Here’s what I want you to do:

  1. pick a page on Drupal.org - it could be the homepage, it could be your profile page, it could be a project page, it could be a page that doesn’t exist that you think *should* exist - just pick one that is important to you.
  2. have a go at sketching out what you think might go on that page. What are the content and functional elements, and which ones are the most important.
  3. post the page somewhere - if you’re using Flickr, you can post it to our Flickr Group, or perhaps you want to post it on your blog and put a link to your post in the comments here, or you can email it to me if you like and I’ll post it - whatever you prefer. You might want to add some notes as to why you’ve approached the page the way that you have or, if you’re like me, to decipher your handwriting.

You can use whatever you like to wireframe - I tend to use pen and paper to start with or sticky notes. Then I’ll use Omnigraffle a little later. You might prefer to sketch in code. Whatever works for you. As you can see from the example I’ve posted above, early wireframes are usually pretty rough (mine disintegrated into a list at the bottom!) and not so pretty. This is fine. It’s not about how they look or even whether they’re right. It’s about getting ideas down on paper - to paraphrase the old saying - a wireframe is worth a thousand words.

Don’t spend too long on it - try to spend no more than a few minutes on a wireframe. If you’re not happy with it (and you probably won’t be at first!) just put it to one side and start fresh. You don’t want to labour over them too much at this stage.

Don’t think you have to be a designer or a UX person to participate in this exercise - this is all hands on deck. Even if you’re not an experienced Drupal user and you were flummoxed by your experience of Drupal.org - what did you *want* to find on the homepage?

I know there have been lots of discussions over the years about various parts of Drupal.org - let’s roll up our sleeves and get stuck in! Yay!

28 Comments

roy  on September 11th, 2008

Dang, no inline images here.

http://img.skitch.com/20080911-8f3kgumy3rtk1gtdh3yxnujq3q.jpg is a sketch for a working groups homepage on g.d.o/usability

[Reply]

roy  on September 11th, 2008

Also, from the d.o. redesign archives:

mockup: developer.drupal.org:
http://groups.drupal.org/node/3777

Possible IA redesign mockup
http://groups.drupal.org/node/3769

Mockup for ‘handbooks’ landing page:
http://groups.drupal.org/node/6568#comment-20287

[Reply]

roy  on September 11th, 2008

Oh, and this is a nice case study of the redesign of expression engine.com. Lots of wireframes there as well:
http://www.digital-web.com/articles/redesigning_the_expressionengine_site/

[Reply]

Joshua Porter  on September 11th, 2008

crowd-sourcing interface design…brilliant!

[Reply]

David Malouf  on September 11th, 2008

I’m just loving this idea! Brilliant. I’m w/ Josh. what a great way to bring design to this process.

[Reply]

Alan Pritt  on September 11th, 2008

Another from the archives. I’d reconsider some of this now, but I think there are some solid thoughts here. This is for the project pages.

http://groups.drupal.org/node/6186#comment-19163

[Reply]

Jorge Arango  on September 11th, 2008

This is a brilliant idea, especially for an open source project. Thanks for sharing!

[Reply]

Matthew Pennell  on September 11th, 2008

My two minute effort, via iPhone so apologies for the size:

http://www.flickr.com/photos/thewatchmakerproject/2847707897/

[Reply]

Anthony  on September 11th, 2008

I’ve just dropped one into the Drupal redesign pool… this is a top idea that I will have to remember in the coming few months!

[Reply]

Bridget Stewart  on September 11th, 2008

Not a wireframe so much as a design idea:

Since drupal.org is so massive, so huge, so overwhelming — how about allowing the home page to be “widgetized”? I think a user customizable layout would allow folks coming from their various perspectives/agendas to view a site landing page with what most suits their needs. (think iGoogle-esque, without being a complete copycat)

I think such a plan should also include the “big ass footer” idea (already posted on the flickr group) that serves much like a site map for all the elements of drupal.org– should their needs change or their interests branch out into other areas.

This way, the users choose which content is served up to them, in the format that best fits their needs — while keeping them connected to all the other content, so that they don’t remain “outsiders” to other avenues within drupal.org.

[Reply]

Kristjan Jansen  on September 11th, 2008

Two ideas + screenshots from 1.5 years ago:

http://kika.trip.ee/node/298
http://kika.trip.ee/node/302

[Reply]

roy  on September 12th, 2008

http://www.flickr.com/photos/yoroy/2850827704/

The homepage is in many ways the least of our worries, but I couldn’t resist. Trying to map the ux strategy on it: Welcome, join us and kick ass with Drupal

[Reply]

Kieran Lal  on September 12th, 2008

http://flickr.com/photos/23181861@N08/2850364735/in/pool-drupalredesign

Mock-up by Roy after a few iterations with others. Forums will be changed to Help in the next mock-up.

[Reply]

Chris Charlton  on September 12th, 2008

I really dig the bits I found on here. :D

[Reply]

Andy Budd  on September 16th, 2008

@Joshua Porter Brilliant or insane, I can’t quite tell which yet :)

[Reply]

Derek Wright (dww)  on September 16th, 2008

There are some interesting mockups of what project pages could look like along with a collection of links to issues regarding the project UI over at http://groups.drupal.org/node/6186. A must-read for the redesigners. ;)

[Reply]

roy  on September 17th, 2008

More of a meta-wireframe, showing the kinds of templates we need to unlock our content.

http://www.flickr.com/photos/yoroy/2865140008/in/pool-drupalredesign

[Reply]

emmajane  on September 18th, 2008

I’m a little late to the game, but here we go… http://www.flickr.com/photos/emmajane/tags/wireframinggame/

[Reply]

Kyle Else  on September 19th, 2008

Our CDMUG has been using ‘virtual user group space’ at meetups… virtually on IRC /server irc.freenode.net /j #cdmug during sessions… this helps when the weather gets windy and members can’t make the CDMUG.

[Reply]

Hilde Austlid (zirvap)  on September 19th, 2008

I’ve posted a wireframe for a handbook page at http://groups.drupal.org/node/14928#comment-50539

[Reply]

Claudio Luis Vera  on September 24th, 2008

Thanks for having the courage to share your work-in-progress with all of us. Your team is *spot on* with its approach. Our firm has been wrestling with many of your same issues over and over, to the point that some of these patterns are part of the theory we use in designing sites. If not to validate your thinking, here’s what we’ve learned:

network/portal header - Great idea! We call it a “universal nav” which we use as a valuable strip of real estate at the top to move you around a large site’s different properties. It’s also a good location to let a user log in and log out, and you can use color to reflect this state.

logged in vs. not logged in: you’ve got great approach, because these really are different pages for different audiences. One version should tout the benefits of joining and have very general information for those not familiar with Drupal. The logged-in version should have personalized content and be customizable to a power user.

home page vs. portal: Different people will want to see different information, and you may even want to have separate pages for drupal.com (what a newbie would try first) and a link-packed portal page for a power user. Simplicity is great for a first-time brand experience, but lists of links are great time-savers once you know your way around. Personally, I’d keep a portal page in the spec that’s close in structure to the current d.o home page, and maybe give it the URL of my.drupal.org.

Design site on drupal.org? Design and UI are such loaded issues that you should consider having a home for them on the d.o. site — but also keep a separate site where they can take center stage. “Design” and “usability” can mean _such_ different things to different people, especially when you’re trying to mix developers with the tech-shy creatives that Drupal would like to embrace.

The creative community has such different values and speaks such a different language that it should have a targeted area separate from the community to court it. On the other hand, there is a huge need for a whole tree of Design and UI forums within drupal.org to address the needs of usability and user experience. That need is far too important to leave to a redesigned thread on g.d.o.

[Reply]

disambiguity - » Drupal.org - What we learned from the Community Wireframing Project  on September 30th, 2008

[...] thought you might be interested to know a little about what we did with all the wireframes people submitted for the Drupal Redesign [...]

Jon Williams  on November 17th, 2008

Nice information. Thank you.

[Reply]

Jon Williams  on November 17th, 2008

I need to use wireframes more often. Cheers.

[Reply]

hobi  on June 15th, 2009

Hello Leisa Reichelt ,

As I have heard, Drupal 6.12 and 5.18 released somehow I found your link.

Thank you very much for your explanation,

Best regards,

[Reply]

Leave a Comment

Spam Protection by WP-SpamFree