If you’ve taken a look at the project brief in Section 8, you’ve already seen the kind of information that goes into a long-form project brief, which is good for working with brand-new clients and projects. But what if you’re doing a quick, simple site for yourself, or a redesign of a site you’ve built one or more times before? In this case, you might want to create an abbreviated brief that focuses on just a few key items. For a short-form brief, you want to capture the following information:
- Project goals
What are the goals of this new site or redesign? If you have information from the last time the site was designed, have any of those goals changed?
- Personas/audience research
Who is the site looking to reach? Is it the same audience as the first time it was designed, or are you looking to tap into new markets? If personas exist from the last time the site was designed, how well do they align with what you know now?
- Information architecture/content strategy
How will the site map need to change, if at all? What major sections of content will you need, and how much of that content do you have? How will the content be organized or tagged? This is where you can plan to spend the most time; in particular, pay attention to descriptive pages such as the “about” or “services” pages. How well does the current copy reflect the new audience and project goals? Don’t forget major chunks of content such as blogs, project lists, and so on—what kinds of content will you share? What topics will that content be organized around? Is there current content that should be scrapped, or new content that should be developed? Develop a plan around getting the content organized, written, and into the new site.
- New features or technologies
Are there any new features (slideshows, widgets, etc.) that you want to add to the site? Some may require adding and configuring new modules; others may require custom development.
- Major release upgrades or content migration
Will the site require upgrading Drupal from one major release to another (e.g., Drupal 6 to Drupal 7), or migrating content from another technology, such as Joomla or WordPress (gasp!), into Drupal? Each of these will present some challenges and may require either rebuilding the site entirely or bringing in a developer to help with major upgrades.
- Theme structure and CSS
How is the current theme structured? Are you comfortable with the base theme, or does it make sense to start over? This can be particularly problematic when working with sites that implement themes with many custom .tpl files; if the underlying base theme is poorly constructed (I’m looking at you, Garland), you could be in for a world of hurt when bringing the new theme into some logical order.
To give you an example of how this works, let’s look at a redesign for my business site, http://tzk-design.com (the old site is shown in Figure 4-1).
About four years ago, I redesigned this site to illustrate my focus on branding and web design for independent food companies and social entrepreneurs. Over the past year and a half, my focus has shifted to user experience research and design for complex Drupal implementations, as well as independent research and writing projects. This means a few things:
My audience has changed.
My project list should focus more on UX and writing work and less on site building and print design.
My blog should also focus more on UX and less on things related to the food industry.
Also, the original site was built in Drupal 6, which means I’ll have to worry about upgrading to Drupal 7, or possibly just scrapping what I have and building the whole thing in Drupal 7 instead. Most importantly, much of the marketing copy on my site will have to be rewritten to reflect both my new focus and the fact that my studio is a solo practice, rather than a team of independents as it had been.
Let’s see what this looks like in the form of a project brief.
A good list of project goals should be no more than about three bullet points, each representing the most important things you want to accomplish with your project. For this project, I have three main goals:
To update the site’s content and visuals to reflect my new focus on UX and research
To better communicate my skills and the value I bring to teams
To share my research (where possible) with the UX and design community by writing and doing speaking engagements
Now that I have my goals in mind, it’s time to move on to personas.
Back when this was designed, the audience I was looking for consisted primarily of entrepreneurs and small-business owners. Now I work mainly with teams who are working on Drupal projects, and generally one of the team members (either a developer or the project manager) is handling the task of introducing me to the person who will eventually hire me. Thus, my first persona is the Development Team:
The Development Team
Who they are: The Development Team is looking for a UX professional to help them understand the needs of their project’s users. They are looking for someone who can quickly ideate and prototype based on research, and work with stakeholders to finalize functional requirements so that the developers can focus on writing code for products people want to use.
What will win them: Understanding how the process works. Being able to fit UX into Agile development cycles. Knowing my availability.
What I need them to know: How I work. What I expect from my clients and what they can expect from me. Emphasis on social innovation, progressive brands, and solving complex design issues.
Content focus: Project list, services page, contact form.
Another key element to my site goals is getting the word out that I’m available and I know what I’m talking about. Thus, I also want to build around another persona, which I’m going to call the Sharer:
The Sharer
Who they are: Sharers scour the Web for interesting content and share it with their followers. They’re active on sites like Twitter and G+. They may search under tags like #ux, #leanux, #agileux, #drupal, or #ixd.
What will win them: Having interesting stuff to say. Making it easy to share posts among different networks.
What I need them to know: How I think. That I want them to share my stuff with attribution.
Content focus: Blog, presentations, “about me.”
You may notice that these personas are much briefer than the more formal personas you saw in Chapter 3. There’s a purpose to this; since this is a project I know inside and out, I want the personas to focus on documenting a brief understanding of whom I’m dealing with and how I’m going to meet their needs. Additionally, since this brief is mostly for my benefit (read: I don’t have to show this to other people), I can get away with the basics.
The most recent redesign of the site featured some areas that were very successful for the audience I was trying to reach—for example, the Project List and much of the marketing copy. However, other areas have fallen by the wayside as my attention has been focused on other things. The site’s blog hasn’t been updated in a long time, and some areas, such as the recipe section (because, remember, my previous market was food companies), really haven’t done much except sit there like boring, text-heavy lumps. For the new site, looking back on my goals and the personas I’ve created, I want to focus the content around a few primary areas:
- Descriptive content
A brief bio along with my CV/résumé, notes on the kinds of services I offer, and a list of clients.
- Projects
A list of projects, prioritized by the kinds of projects I want to get. Each section on the Projects page will have about three projects in each category, which will randomly cycle through a list of projects I’ve picked for the site. I don’t want to completely ignore my years in visual design, so I’ll organize them thusly:
UX research and design
Visual design and branding
Writing
- The blog
Focused around recent news, discussion of issues, methods, and ideas related to UX and interaction design, as well as current research I’m doing. All content will be easily shareable via buttons at the bottom of each entry. The focus will be on Twitter and Google+, but I wonder if there’s a way to also send an entry to Instapaper or Readability through Drupal—or if that’s even really necessary? Entries will be organized mainly with tags (to make remote entry easier); however, the main topics will be:
User experience
User research
Integrating UX with Lean and Agile development cycles
Bits of Drupal knowledge I pick up along the way
Other web design topics (responsive, mobile first, etc.) as they come up
Announcements (new work, events, etc.)
- Speaking
Both events I’m speaking at, and notes/SlideShare presentations from selected speaking engagements. I need to find a way to separate the two (probably by date) so that upcoming events are always first on the list, and events that have SlideShare presentations attached will be in a sidebar or something similar. This content, like the blog entries, should also be sharable.
- Contact/hire
Contact/screening form for new inquiries. I need to make sure I include a request for the reason they’re contacting me (e.g., “I’d like to work with you on a UX project,” “I’d like you to speak at our event,” “I’d like to talk to you about your research,” etc.), as well as an approximate timeline and budget.
Now that I have a general idea of what content will be on the site and how it will be organized (which I can add to and amend as I get deeper into the project), it’s time to start looking at any additional features or technologies I want to add to enhance the site.
Although I want to keep the overall look and feel simple and clean, there are a few things I know I’ll have to add:
- Responsive design
The current site’s theme is based on the NineSixty base theme (http://drupal.org/project/ninesixty); as such, it was easy to theme and customize, but it wasn’t set up to be responsive. My ideal clients are likely to be tech-savvy executives and developers, and this means many of them may be checking out my work on their phones at any given time. From a theming level, this is relatively easy to accomplish using the Square Grid theme (http://drupal.org/project/squaregrid), which involves a different grid system but a lovely responsive-ready design; however, it will require thinking carefully about things from a content organization and display level.
- SlideShare presentations and Vimeo/YouTube support
Currently, the site uses EmField (http://drupal.org/project/emfield) and Video Filter (http://drupal.org/project/video_filter) to handle SlideShare embedding; however, those are both Drupal 6 modules, and the new site will be in Drupal 7. I have to start investigating add-ons to the Media module (http://drupal.org/project/media).
- Sharing capability on certain node types
I want to be able to let users share content (particularly slideshows and blog posts) easily once they’re finished reading the page or viewing the content; for that, I’m going to have to research some good and simple sharing modules that are easy to theme and don’t bring in a pile of excess code.
Aside from these things, I want the focus to be on the content of the site, not on fancy features or things that buzz and move. Now it’s time to look at the last two things I need to worry about: upgrading from Drupal 6 to Drupal 7, and updating the base theme.
The current site is built in Drupal 6 and has a lot of older content in it that isn’t necessarily relevant to the work I do now. While it would make sense in many cases to do a major release upgrade (i.e., upgrading from Drupal 6 to Drupal 7), I’ve decided to start from scratch with Drupal 7 because, frankly, the site doesn’t have much content to port over, and a lot of the content that will be there has to be created; thus, rebuilding it from scratch isn’t going to be a huge deal.
If, however, I had a ton of content, particularly blog entries, that I wanted to save and give people access to over time, I would definitely try to do a major release upgrade instead of building from scratch. Upgrading will preserve the content and the URLs, and will ensure that people who have bookmarked entries on my site don’t end up lost in a cyberspace wasteland when they try to revisit the site. This does involve a number of complications, though, and will likely require me to bring in a developer on the project. Although it would be totally worth it for a larger project, it’s not worth it for this one.
Now that I have that settled, I have to consider the theme layer.
The last thing I need to look at is the site’s theme layer. Given the fact that the current base theme is a) set up for Drupal 6 and b) not set up to be responsive, it’s time to look at a new base theme. After going back and forth between Omega (http://drupal.org/project/omega) and Square Grid (http://drupal.org/project/squaregrid), I’ve decided to go with Square Grid. It’s light, flexible, and easy to customize (although it does require just a little bit of template.php), and I prefer the ease of updating the grid with a few values in template.php, one thing that drew me to NineSixty.
Switching themes will mean I have to redo much of my CSS, but since I’ll be using LESS to theme this (discussed in Chapter 17), which I wasn’t using when I last did the site, I would have had to do that anyway. Fortunately, I still have the files from my existing theme, which I can borrow from to create this one, once I have some designs set. See Chapter 7 to see how that goes.
Bowles, Cennydd, and James Box. 2011. Undercover User Experience Design. New York: New Riders Press.
Brown, Dan. 2006. Communicating Design, 2nd Edition. New York: New Riders Press.
Brown, Sunni, Dave Gray, and James Macanufo. 2010. Gamestorming: A playbook for innovators, rulebreakers, and changemakers. Sebastopol, CA: O’Reilly.
Buxton, Bill. 2007. Sketching User Experiences: Getting the design right and the right design. San Francisco: Morgan Kaufmann.
Krug, Steve. 2005. Don’t Make Me Think: A common sense approach to web usability, 2nd Edition. New York: New Riders Press.
Norman, Don. 2011. Living with Complexity. Cambridge, MA: MIT Press.
Unger, Russ, and Carolyn Chandler. 2012. A Project Guide to UX Design: For user experience designers in the field or in the making, 2nd Edition. Berkeley, CA: New Riders Press.
52 weeks of UX. A blog about the process of designing for real people, published weekly. http://52weeksofux.com.
UX Magazine. A constantly updated magazine about varied topics of user experience design. http://uxmag.com.
UX Matters. Another online magazine about user experience, although not as pretty as UX Magazine. http://uxmatters.com.
Smashing Magazine’s UX Design category. Regularly updated with great articles from designers around the world. http://uxdesign.smashingmagazine.com/.
Get Drupal for Designers now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
