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:
- 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.
- 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.
- 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]
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]
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]
JuliaKM on September 12th, 2008
http://farm4.static.flickr.com/3231/2850876565_7da1d25743_o.jpg
[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]
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 [...]
roy on September 11th, 2008
http://img.skitch.com/20080911-1kp86j4r2gx6j2i45ddan8t76s.jpg
[Reply]