http://www.markboultondesign.com/news/ en mark@markboulton.co.uk Copyright 2009 2009-03-26T23:17:00+00:00 http://www.markboultondesign.com/news/detail/drupal7ux_we_need_you_now/ http://www.markboultondesign.com/news/detail/drupal7ux_we_need_you_now/#When:23:17:00Z We plan to make the Drupal 7 User Experience something very special. The biggest risk to this project is community rejection/involvement too late in the project. Please, get involved now. Get out of the issue queues, quit bitching about your other CMS tools. Please, get involved, so we can all succeed. Get over here and help us make something amazing. Thank you! (and even bigger thanks to those who are already involved)! planetdrupal 2009-03-26T23:17:00+00:00 http://www.markboultondesign.com/news/detail/audience_matrix/ http://www.markboultondesign.com/news/detail/audience_matrix/#When:14:48:00Z Leisa and I have spent a good deal of time looking at how we can define the audience for Drupal 7. A couple of weeks ago, we spent a day trying to come up with an effective model to use throughout the design process. Not just a model that we could use, but one that could be available to the whole Drupal community as we embark on the challenging task of looking at the user experience for Drupal 7. Leisa and I have spent a good deal of time looking at how we can define the audience for Drupal 7. A couple of weeks ago, we spent a day trying to come up with an effective model to use throughout the design process. Not just a model that we could use, but one that could be available to the whole Drupal community as we embark on the challenging task of looking at the user experience for Drupal 7. The Flappy Paddle Before I start to talk about this tool, it’s probably better if you just watch this video Leisa and I recorded a week or so ago. This is the tool we’re using, but at this stage, it was pretty rough around the edges. So, we’ve spent a little more time defining the various tasks and definitions for each different user type, site type, and number of users. Combining this detail, in various different combinations, gives us a list of requirements for that type of user, using a particular type of site, with a certain amount of users. Sweating the details Yesterday, we spent some time fleshing out the various tasks and definitions for each ‘paddle’. This is what we’ve come up with so far: Roles Content Creator: a user who primarily creates, reviews, and edits content for a site. Key tasks: Add content, edit content, find existing content, view list of content creation/revision tasks. Site Editor: a user who has authority to approve, edit or reject content and who may be able to manage some editorial workflow and user permissions. Key tasks: Add content, edit content, find existing content, view list of content creation/revision tasks, review content, reject/feedback on content to original author, schedule content Site Admin: manage user permissions, manage site structure, adding new content types, create and review reports and manage some site settings (RSS Publishing, IP Address Blocking). Key tasks: Manage user permissions, Add / Edit / Delete Content Types, Manage Information Architecture (site sections, sub-sections, taxonomy (as in, vocabulary), Create a report, Review a report. Site Builder: creates site from scratch by choosing, writing, customising modules and/or themes, manages setup and maintenance. Is a developer (for the purposes of audience definition, themers are considered developers). Key Tasks: Develop site functionality, implement site design. Type of site Brochureware Site: hierarchical structure of relatively static content, often includes forms (eg. contact/feedback), may be multi-author Blog: sequence of chronological posts that may be assigned to categories, may also include ‘fixed’ pages, often includes comments, trackbacks, RSS feed, most often single author News: a categorical/hierarchical grouping of content usually ordered chronologically but often ‘curated’ by an editorial team, may also include comments, trackbacks, RSS feed, often multi-author, often requires multiple templates Events: a combination of content supporting an event, including content about the event, a schedule/calendar of events, list of participants, online registration, may also require online submissions, social networking functionality, news, email update list Social Site: comprises member profiles and communication between those member in the form of discussion forums, wikis, events, blogs, require member signup, subscription, RSS, No. of users 1: no permissions, no workflow, that user does everything (one stop shop) BUT most like to have simple requirements (how manage giving access to all functionality when the mostly won’t need it). Likely to generate small amounts of content. 2-5 : multiple authors, may require permissions, may require workflow (simple approval process), may require separation between content management tasks and site management tasks but usually not overly complicated requirements. 6-15: multiple authors and editors, likely to require permissions, likely to require workflow, likely to require separation between content management tasks and site management tasks may have some complex requirements, will have significant amount of content generated. 15+ : requires permission management (several permission profiles), probably requires workflow (content review/approval), likely to generate a lot of content to be managed and require content scheduling - it’s a complicated machine and it needs a whole section around managing the machine, let alone making the content to feed the machine. Involves a lot of content and likely complex taxonomy. And also, as you saw in the video, we’ve looked at using this tool now as we begin sketching out some ideas and concepts for how the admin may work. An evolving concept The Audience Matrix is work in progress and it’s going to be an instrumental tool for us in the coming months as we start fleshing out some of the design concepts. As Leisa says on her blog: Over the coming weeks we’re going to be inviting you to submit your ideas for revisions to the Drupal7 Admin interface and overall user experience. It will be very helpful for us all to use this document to help make sure that we’re designing for the 80% and not necessarily just for ourselves! And it is also a really great way to expose missing elements and possible flaws in our concepts. Using the document to test the example we show in the video above helped us to realise that we needed things like a close button on the dashboard (I know, d’uh!), a place to hold the user generated content from things like comment as well as contact forms, and got us thinking about a whole host of thorny permissions and workflow issues. We need your help. We’ve produced a PDF for you to download so you can use it in some of the upcoming crowdsourcing activities we have planned. (like the one’s we did for the Drupal.org redesign project). There will be more from me It’s a fair cop. I’ve not been as active blogging about this stuff as I could have been. Both the Drupal.org redesign, and now the Drupal 7 UX work, are both breaking ground on a process thought to be difficult, if not impossible. So, as of today, I’m going to be talking about it all a hell of lot more because, well, what other projects can you talk about as you’re doing it? We’re in an incredibly fortunate position. planetdrupal 2009-03-25T14:48:00+00:00 http://www.markboultondesign.com/news/detail/drupalorg_design_iterations_and_designing_in_the_open/ http://www.markboultondesign.com/news/detail/drupalorg_design_iterations_and_designing_in_the_open/#When:14:31:00Z It’s been a good while since I announced we’re working on the redesign of Drupal.org. Two months, a couple of presentations, and seven iterations of the prototype later, a glimmer is at the end of the tunnel. On thing is for sure, in this instance, Design by Community works. I said, when we embarked on the process of designing this site, that Design by Community is the only way we could approach it. Since those initial thoughts, Leisa and I have continued to push a process that many thought would fall flat on its face. I’m not sure if this would be specific to the Drupal community, but they couldn’t have been more wrong. This process is working, and really well. Keep Listening, and Keep Learning Asking how your users feel when using your website is important. We all know the value of usability testing; of involving the user right from the start, and as much as possible. What we didn’t know, with this project, was how to scale that out to a community of hundreds of thousands of people. ‘Traditional research’ tends to work like this: testing is usually done on a manageable sample of users indicative of the audience. The sample is generally carefully selected (by various means: interviews, phone interviews, questionnaires etc). This can take a while, and can cost a fair bit. It’s time and budget we just didn’t have for this project. So, how do we reach out to the audience? We used a bunch of channels for this: Twitter. We set up a Twitter account and searched Twitter twice daily for mentions of Drupal. Our aim was to catch people when they were in the moment. We’d ask them a few questions, and we’d follow them to see how they got on. Flickr. We set up a Flickr group and used it as a place for the community to post their thoughts, wireframes, sketches and designs. Drupal Groups. We posted regularly to the Drupal redesign group. This helped us gather the feedback of the existing community. The aim of the different channels is to keep them open and approachable. We want to listen. Prototyping using Blueprint Early on, we decided the best approach for this project would be rapidly built prototypes: html wireframes. In order to spend less time worrying about CSS and validity of markup, we decided to use the CSS framework, Blueprint, to build the sites out quickly. Together with Polypage, a rather nifty script from those clever chaps at New Bamboo, we were able to very quickly knock up html wireframes with some limited functionality. This process proved invaluable for both community feedback - in that they could actually interact with some code in their browser - and also for one on one interviews and usability testing conducted by Leisa. Incidently, we’ve built a bunch of Blueprint plugins (kind of like the Yahoo! UI stencils) to support this process. We’re going to be building on those and releasing them shortly. We’re quite excited about it actually. They’ll be things like navigation, calendars, forms: all the little bits of standard UI gubbins all packaged up as simple CSS files. You see, we would have used something like Yahoo!’s design pattern stuff for this, but it’s just too designed. We needed this prototype to not looked visually designed in any way so people could focus on the UX. Anyway, that will be forthcoming. Weekly design and prototype iterations The pace of this project is such that we have a weekly prototype release every Thursday in readiness for community feedback (via the various channels) over the weekend. And, the theory still stands: we look for trends in the feedback. Interestingly, trends have been more difficult to spot the further we get down the road and the more ‘real’ the site becomes. The latest iteration, version 7, is a bit of a departure from the previous ones. In Leisa’s words: There were a couple of things that were really bugging us in the versions up to now.  In particular, the navigation in the header (there was so much of it and it looked kind of messy and confusing and in tests, we observed that people completely ignored it!). The Logged In version of the homepage was a good idea but the execution was coming up short as we learned that ‘hard core’ Drupallers thought it was a v valuable addition to the site but just about everyone else wasn’t interested… She goes on to say… A behaviour which we have observed since the very early days on this project 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 support are heavily search oriented (finding modules, finding 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 hierarchical site made up of silos of content… forcing people to choose between this section or that to find the content they required. This shift in direction has, so far, tested well and the overall comment we’re hearing 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 project and there’s a lot to do in a short space of time. One thing that is driving the clarity, in fact without, this project would be considerably more challenging, is the community feedback. Through the flaming, disagreements, and arguments are clear, actionable points, which we take forward to the next round. At first, I thought design by community would be as bad as design by committee. Lots of people, all wanted their say, mixing black with white and ending with grey. Not so. This project, and I believe it’s breaking new ground in this approach, is proving it’s working and that’s not down to the team at Mark Boulton Design, me, or Leisa. It’s down to the community. planetdrupal 2008-11-09T14:31:00+00:00 http://www.markboultondesign.com/news/detail/cap_d_or_not_splash_or_not/ http://www.markboultondesign.com/news/detail/cap_d_or_not_splash_or_not/#When:14:57:00Z This is our current thinking on the direction of the branding. We’ve introduced a logo, a ‘splash’, and we’re asking the community for feedback on whether Drupal should be cap D, or not. The last round of comments on the wordmark designs were incredibly useful. Not only did it show how passionate the Drupal community was about their brand, but also how valuable the feedback was in shaping the direction of the mark. I agree with André and his summary: This is a work in progress The initial concept is too ‘Bauhausy’ (i.e. people aren’t crazy about the Bauhaus like word forms) This will not be a design by committee process - the Designer will have the final word Other options will be explored based on the feedback Maybe it was too early to solicit feedback on the design At this stage, I felt this mark had more to give. There was more worthwhile design to be done before going back to the drawing board. After a few days of knocking it around, we’ve reached this point: Some design changes to note: The ‘splash’. It was felt the mark needed ‘more’. Something unique to make it stand out from the crowd. The splash represents a pictorial evolution of the Drupal logo. The characters have lost an element of their ‘Bauhaus-ness’. By introducing deeper ‘cuts’ in the ‘d’, ‘r’, ‘p’, and ‘a’, this makes the logotype much more legible at smaller size. The ‘a’ no longer looks like an ‘o’. Disclaimer: This is still a digital ‘sketch’. There’s a lot more refinement needed in the characters. D or d? Splash or not? By comparison, here’s the logotype using an uppercase D, and lowercase: To my eye, the lowercase d is more approachable, friendly, and balanced. The cap D is more formal, unbalanced and it doesn’t really go with the splash. And here it is without the splash: Personally, I think the splash adds a whole new dimension to the logo. It’s a clear evolution, it gives Drupal an identity other than the Druplicon. Once again, We’d like to ask you for your opinion on this. Cap D, or not? Splash or not? planetdrupal 2008-09-18T14:57:00+00:00 http://www.markboultondesign.com/news/detail/why_do_we_need_a_new_logo_anyway/ http://www.markboultondesign.com/news/detail/why_do_we_need_a_new_logo_anyway/#When:13:54:00Z Following the latest post, it was clear that there has not been enough explanation, or discussion around why Drupal needs a new logo.  Following the latest post, it was clear that there has not been enough explanation, or discussion around why Drupal needs a new logo. We need the fish A few of weeks ago in Szeged, I sat down with Larry, to discuss some of the finer points of the ‘branding’ deliverables that were indicated in the RFP process. He explained that Drupal needed a new logo that could be trademarked, in order to protect itself legally. Druplicon can’t be trademarked because of it is licensed under GPL. Those are the business reasons for doing so. Larry’s latest blog post goes a long way in explaining why this item appeared on RFP, and why my firm was briefed to undertake the work as part of the d.o redesign. But Druplicon can’t be that playful community spirit as an official logo. Official logos more rules they have to follow, both marketing-wise and legally. If Druplicon were the Official Logo Of Drupal(tm), it would have to be trademarked. Random fish would be harder to do, as we’d run the risk of it hurting the trademark’s standing. We couldn’t use it as the default “logo” graphic on new Drupal installs. Larry goes on to say: No, Druplicon is not a logo. It is a mascot that we’ve been using as a logo. Think Tux the Linux Penguin. Or think the elePHPant, which is distinct from the actual PHP logo. As a mascot, we can have cookies. These are sound business reasons on why Drupal needs a logo, separate from the Druplicon. But, aside from that, why do I personally think it’s time the Drupal logo had some attention? What’s wrong with FF Max? This question has cropped up a lot. Not only with the community, but with the DA as well. Why am I suggesting we change it? Without Druplicon tied to the logo (as it can’t be for the reasons Larry stated), then we’re left with FF Max. Personally, I’ve got the following reasons for suggesting the change: What makes FF Max interesting are the small details in the letters. However, at small size, those details degrade. At about 12pt and below, FF Max doesn’t look all that distinctive. Most display typefaces are designed to solve a specific purpose (a lot of text faces too, like FF Meta, Frutiger, or Johnston). I’m not sure of the intended usage of FF Max, but I don’t feel it works particularly well for a logotype. I don’t feel there is enough character, or the brand ‘voice’, of Drupal (the software), or Drupal (The community) using FF Max. I understand that changing a logo is a big deal. I hope that giving some of my rationale, together with Larry’s thoughts, and the DA’s business reasons, we’ll collectively go some way in explaining ourselves. Thanks for all your feedback so far. It’s been invaluable in assessing the changes that need to be made, and we’ll continue to work as openly as possible. planetdrupal 2008-09-18T13:54:00+00:00 http://www.markboultondesign.com/news/detail/initial_wordmark_designs/ http://www.markboultondesign.com/news/detail/initial_wordmark_designs/#When:19:58:00Z Every wordmark should tell a story. Drupal’s story is a rich and varied one, that is almost impossible to sum up in six letters. Every wordmark should tell a story. Drupal’s story is a rich and varied one, that is almost impossible to sum up in six letters. There are some important considerations when designing (in this case, redesigning) a wordmark. In the case of Drupal, we have the following to take on board (to name a few): The existing Drupal brand The culture of the Drupal community The business objectives of the redesign How Drupal is perceived by the wider web community Now, to sum all of this up in six letters is a difficult task. It’s not something we’re aiming to do with the wordmark. What we’re trying to do here is create a unique, distinctive badge for Drupal. Together with the Druplicon and the redesigned d.org (and all that goes with that), the wordmark will be a touchpoint. I’d like to share with you my initial visual ideas. Here’s my thinking so far: Some core values have rung strong in my head for a few weeks now: modular, powerful, community, friendly, playful. With those in my mind, I set about playing around with the letterforms on paper before settling on an idea I felt I wanted to take through to a digital sketch. First thoughts. The r/u idea was quickly ditched. Initial brain-dump to work out visual relationships between the letterforms and work out the more obvious ideas (like the drop). From these sketches, I like to quickly move to a digital sketch. A rough outline, just to make sure I’ve got down the essential attributes. It’s kind of like a painter adding those initial bold blocks of colour. This mark is based on one of the sketches I did a while ago. The letterforms are modular. The x-height is high to give a friendly, approachable feel. It’s a unique mark, rather than picking an off the shelf typeface. But, it’s just one idea that needs work. As I mentioned before, it’s incredibly difficult to evaluate a mark out of context, just look what happened with the 2012 London Olympics logo. In our case, the context to the mark will be provided by the UI that surrounds it, the voice of the community, and the power of the software. I’m hoping that by opening up this process, and being as transparent as I can, I’ll get some constructive feedback to help refine the new wordmark. So, over to you. Any thoughts? planetdrupal 2008-09-14T19:58:00+00:00 http://www.markboultondesign.com/news/detail/drupals_core_brand_values/ http://www.markboultondesign.com/news/detail/drupals_core_brand_values/#When:18:52:00Z What does Drupal mean to you? We’re asking the Drupal community, in one word, to sum up their experience. Drupal is many things to many people. To some, it’s a powerful flexible CMS that lets them develop complex applications for their clients. For others, it’s a blog platform. For other people, it’s a vibrant community; a place they call home. As part of our wordmark development, we need to communicate those values. This can easily done with a logo, but with a wordmark, it’s a little more difficult. So, I need you help. Here’s a list of values we’ve compiled so far: Community Inclusive Friendly Approachable Ease-of- use Simplicity Powerful Flexible Extensible Scalable Variable Dynamic Can you add to this? In one word, what does Drupal mean to you? planetdrupal 2008-09-13T18:52:00+00:00 http://www.markboultondesign.com/news/detail/whats_in_a_wordmark/ http://www.markboultondesign.com/news/detail/whats_in_a_wordmark/#When:10:26:00Z A really interesting part of our project here is developing a new wordmark for Drupal. In this post, I discuss the way I approach wordmark development from a branding and typographic perspective. A really interesting part of our project here is developing a new wordmark for Drupal. For those of you who are unsure as to what a Wordmark is, Wikipedia gives us this definition: A wordmark, subset of the term logotype, is a standardized graphic representation of the name of a company, institution, or product name used for purposes of identification and branding. A wordmark is usually a distinct text-only typographic treatment as can be found in the graphic identities of the Government of Canada, FedEx, Google, and Wikipedia. The organization name is incorporated as a simple graphic treatment to create a clear, visually memorable identity. The representation of the word becomes a visual symbol of the organization or product. Some words to pull out from that: Distinct, text-only typographic treatment The notion of the word becomes a visual symbol of the organization or product A wordmark does not include an associated logo or icon. A wordmark combined with a logo is a logotype. When asked to redesign a logo (which is always a daunting task), I always try to approach the problem from a typographic standpoint. Taking the values of the brand (if there are any at that point), and trying to incorporate them into a typographic form. In the case if Drupal, the brand values are pretty easy to grasp, however, how do you communicate them in a way that will be timeless (you don’t want to be redesigning this in a couple of years time)? There are also practical considerations for a wordmark. It will need to be reproduced at varying sizes (three feet tall, to 20px high), on different media (web, print, tv), using different processes (litho, screenprinting, faxed). Wordmarks take a beating, and they should be designed to take it. Where do you start For the Drupal wordmark, luckily, I’m not starting from scratch. There is already a rich history of the logo, and the drupalicon (just read this post for an insight into how the Drupalicon is changed, and how much of that change is part of the Drupal community). However, with history, comes culture and, sometimes, baggage. It’s my job to put all that to one side and solve the problem in front of me. Luckily, a wordmark problem is a typographic problem, and I’ve got a thing about type. I’m starting by looking at the letterforms. Finding common shapes within them, how the letters d, r, u, p, a, l relate to one another. I’m looking at the space between the letters. Opportunities to customise them, to reinforce the brand, and community, values. I’m not keeping the results of this to myself, oh no. Like Leisa, I’m going to be asking for feedback too. And like any identity development, it’s only going to be the start. It’s up to you to take this and run with it in the coming years.  planetdrupal 2008-09-13T10:26:00+00:00 http://www.markboultondesign.com/news/detail/mark_boulton_design_to_redesign_drupalorg/ http://www.markboultondesign.com/news/detail/mark_boulton_design_to_redesign_drupalorg/#When:14:21:00Z Earlier this week, Mark Boulton Design were announced as the redesign partner of the Drupal Association to redesign drupal.org. Together with the outstandingly talented Leisa Reichelt and Carolyn Wood, the team at Mark Boulton Design are thrilled to part of this project. Earlier this week, Mark Boulton Design were announced as the redesign partner of the Drupal Association to redesign drupal.org. Together with the outstandingly talented Leisa Reichelt and Carolyn Wood, the team at Mark Boulton Design are thrilled to part of this project. Drupal is an open-source content management system with an incredible community supporting it. I don’t say that lightly. We’ve been involved with some passionate user groups and audiences before, but the Drupal community is something quite special and we’re very excited about the prospect of working with them. Throughout the coming months, we’ll be gathering research, and soliciting help from, not only the drupal community, but the web community at large. So, stay tuned. planetdrupal 2008-08-15T14:21:00+00:00 http://www.markboultondesign.com/news/detail/updated_work_section/ http://www.markboultondesign.com/news/detail/updated_work_section/#When:08:38:00Z We’ve finally got around to updating our work section with some projects we’ve been sitting on for a while. There’s more on the way next week, and then a few really big projects we can talk about in a few months time. We’ve finally got around to updating our work section with some projects we’ve been sitting on for a while. There’s more on the way next week, and then a few really big projects we can talk about in a few months time. 2008-04-03T08:38:00+00:00