Mary Shaw

I can’t believe it’s been over two months since I last posted to this blog. If you’ve hung in there with me this long, thank you. I will do my best to resume posting at least weekly. My workload has made this blog go on the back burner for quite a while now, and I promise I’ll try to make up for it.

Tomorrow I’m flying to Austin to attend the 2010 South By Southwest Interactive festival. This year should be a big one for UX design – there are a multitude of sessions devoted to this topic as well as writing web copy – so I’m really excited to be part of it.

I expect to return re-energized and full of great ideas and resources to help people build better web experiences. One session in particular has received a lot of pre-conference buzz. Russ Unger, Will Evans, Fred Beecher and Todd Zaki Warfel will present “The Right Way To Wireframe”, a two-part session devoted to figuring out exactly what that means. It was extremely well-received at IxD10 in Atlanta, so I’m really looking forward to being there.

If you haven’t seen it, here’s a video they put together to promote the session. Hope you enjoy!

Subscribe

Building out a 50+ page wireframe deck is never easy, no matter which diagramming tool you use. Planning for iteration and change is the key to keeping your sanity and delivering a quality product. Here’s how I do it using pen, paper and Omnigraffle Pro on a Mac.

Plan Your Attack

Before you begin, study your requirements list, task flows, and site map. You did all these first, right? If not, stop thinking about wireframes for now and get everything a little more organized up front.

Assuming you did all your homework, take a good look at the overall site structure. What does the home page need to include? What will be included in the top-level nav? Make a few simple sketches on paper of the home page and several key sub-pages. Play with different ideas and layouts. Revise them in your sketchbook until you feel like they are solid. And by all means, think everything through carefully before you ever crack open your diagramming software.

Think In Layers

For a big deck use layers to keep things organized. This comes in extra handy when clients start making changes, which they will. Take a look at your notebook sketches. What can be divided into layers? What has to live in its own space? I usually break it out into the following:

• Container – stuff that stays the same on every page, like header, footer, and client logo
• Top level nav section
• Secondary nav if necessary
• Sketch box – this is where I put page-specific content (including page titles, numbers and annotations)

While I absolutely love designing online spaces, it is incredibly healthy, refreshing and educational to go offline and completely unplug for a while. Every time I do it I return to my work thoroughly refreshed with new ideas for copy, wireframes and other web design deliverables. Here’s how my last unplugged adventure specifically helped me with a wireframe deck and how a similar approach might help you, too.

Get A Hobby

Two years ago I took up watercolor sketching and painting. I needed a quiet, creative outlet that had nothing to do with computers and the Internet. Practicing and learning about art encourages me to completely relax and engage a different part of my brain. There’s also a wealth of art history, Rennaissance masters and contemporary painters to explore. Even better, it’s an activity I really enjoy sharing with my daughter.

Learn From Other Disciplines

Last weekend I read a wonderful book called The Art of Designing Watercolors by Robert Lovett. This fabulous volume explores watercolor painting through  7 tools (the “How”) and 8 principles (the “Why”) of design. Robert Lovett is well-known Australian watercolor painter with over 60 years of experience as a professional artist.

I’ve studied the elements and principles of design before, but it was fascinating to see them through the eyes of a master watercolorist. Going forward, Lovett challenges his readers to view everything they see in this context. When it came time to get back to work, I wondered if I could apply this idea to wireframes.

Synthesize Outside Material

Armed with my newfound knowledge, I was ready to attack my latest client assignment, a deck of about 50 wireframes. While I had plenty of reference material from the client, the best reference material available to me was the 7 tools and 8 principles of design I discovered thanks to my watercolor hobby.

For example, Lovett’s reminders to use balance and repetition were especially helpful in identifying and establishing familiar user patterns. When you’re building a large wireframe deck, it’s often easy to get stuck in a production rut and sometimes lose sight of the big picture. Revisiting these concepts from a fresh perspective kept me on track and helped me design a better user experience.

A Fresh Approach Brings New Ideas

Sometimes the best way to improve your skills is to try new things you thought were unrelated. What have you done offline that has helped your online career? Please share your thoughts in the comments.

Subscribe

Content audits can be as much fun as watching paint dry. They take time. They sometimes take money. But they are absolutely necessary if you are going to achieve a successful web site redesign, especially for a large site. Once completed, the information you get from a comprehensive content audit will show you what you have, what you need, and what you need to delete. Armed with this information, you’ll be able to clearly communicate relevant content needs to stakeholders. Here are some tips and tricks to keep content audits as simple and efficient as possible.

Why Bother?

A content audit is a full accounting of everything contained in your current web site. The purpose of a content audit is to truly get your head around what’s in that big bunch o’ links. If you’re doing a site redesign, it’s imperative to know what you have and why before your team starts spending hours, cycles and dollars to create a new and improved design. 

Excel Is Your Friend

Ah, the humble spreadsheet. No offense to my fellow Mac users, but Microsoft Excel is my favorite tool for this exercise. To start, open a new document and name it XYZ content audit. Next, create the following columns:

• Page ID
• Page Name
• Link
• Easy to read and understand? (Y/N)
• Appropriate for audience? (Y/N)
• Edit, Delete or Re-write Needed? (E, D, R)
• User Value (High, Medium, Low)
• Other in-page content? (Y/N)
• Comments

Approach

The best way to approach a content audit is from two angles. The first task is to figure out what you have. Go through the site, page by page, and fill up the first three columns of your spreadsheet. Give each page a unique ID and name. Then copy and paste the actual link to the live content. This will provide you with a handy reference later in the process.

The second task is to use the other columns in your spreadsheet to do an analysis of why the current content is there and make some judgment calls about what to keep, edit or delete. You may also need to determine if something’s missing based on prior conversations with stakeholders. 

I find it’s best to do this with a fresh head after you’ve done the first part. If you’ve already listed what’s there, you’ll be more efficient and do a far more effective analysis.  

Analysis

The analysis is where the real value of the content audit comes in. Is each piece of content relevant to your audience? Is it easy to read and understand? Does it need any editing? Will users find it valuable? 

Another consideration is the type of content within each page. These days web sites have much more than just text. This is also known as in-page content. You’ll want to do the same types of quantitative and qualitative analysis for every piece of audio, video, or downloadable files such as .pdfs.

Sifting Through The Results

After a thorough content audit you will know more about your web site’s content than ever before. And you’ll have the key information you, your stakeholders and your team need to make more informed design decisions. As painful as it can sometimes be, you’ll be glad you took the time to do it.

There are lots of ways UX designers can support the creative team besides delivering standard task flows, sitemaps and wireframes. One way to add value is to use a strategy map.

Get The Big Picture

With regard to promotional websites, a strategy map is a visual representation of a consumer’s online experience and all the major touch points during a given promotion.

Strategy maps are a great way to paint a vivid picture of an upcoming promotion. Rather than using a traditional outline, they help teams visually identify all the necessary promotional components and any issues related to connecting the dots between them.

Case Study: Major Brand Promotion

I recently used a strategy map during the early stages of a UX project for a major brand’s online promotion. It seemed like an easy way to help the design team crystalize their vision for the project.

It began with a conversation with the creative director. Besides doing UX for the upcoming website, she asked me to help her articulate the big picture of a new product launch that tied in with a major motion-picture release.

The challenge was to get people to come back to the site multiple times and increase awareness during the summer blockbuster season.

Out Of Her Brain And On To The Screen

The creative director had everything in her head but was struggling to communicate it out to her team and the client. I asked her to describe everything to me in detail. Together we created a simple map with rectangles representing all the promotional elements involved, how they tied back to the site and when they needed to launch.

The promotional elements involved included several emails, Twitter, and a grass roots print campaign.

Works With Paper Too

The really nice part about using diagramming software for this excercise was the ease with which we could move stuff around. Looking back, we also could have used post-it notes if my laptop wasn’t handy.

The first iteration was almost like a mind-map, with lots of scattered ideas and very little organization. But soon things started to gel as we put a timeline against these ideas and started to organize them by different launch dates.

Easier Client Approval

The final version was a very simple illustrated timeline that clearly represented the life cycle of the final promotion. Even better, the client was able to see how the team had clearly thought out all aspects of the program. She quickly approved the strategy map and was also able to use it for her own internal communications.

Give strategy maps a try and see if they help your teams more clearly express and communicate creative ideas. What other types of tools do you use to help teams focus on the big picture? Please share your thoughts in the comments.

How many times has your web project been delayed due to missing content or issues related to existing content? Wrangling website content can really make your workplace feel like the Wild West. In the 13 years I’ve been working on the web, content problems are the biggest reason for launch delays. You can help alleviate this by implementing an effective content strategy. 

More Than Words

Your web site’s content needs to be accurate, relevant and just enough to communicate clearly. So content strategy includes much more than a site’s branding, messaging and copy. It covers managing and tracking anything that can appear or be measured on your website:

• Text
• Images
• Audio
• Video
• Links (working, please!)
• Forms
• File Downloads (.PDF, .doc, .xls, etc.)
• Error Messages
• Metadata
• Site stats

• What you need to create
• When you need to get it approved
• Who needs to create and approve it
• How much space you need for it
• How to organize it so people can find it
• When to update it
• When (and if) to archive it

Less Craziness, More Consistency

An effective content strategy will help you rein in some of the more frustrating aspects of your web design process – mainly getting the required content when you need it. You’ll also keep better and more informed tabs on how your site is communicating to your audience. For example, you’ll be able to make sure everything stays in the same tone of voice throughout the entire site. This is especially important for large sites with multiple contributors. 

First assign someone to be responsible for your site’s content strategy. Then introduce them to your web design team and get them up to speed on the current status of your website. Their first task should be to conduct a thorough content audit, both qualitative and quantitative.

Next, identify any content gaps and determine who will be responsible for filling them. For example, if the site has video, does the video exist yet? If it needs to be created from scratch, who’s writing the script and when will the final production file be available?

• Jeff MacIntyre
• Kristina Halvorson
• Erin Kissane
• Margot Bloomstein

Presenting wireframes to clients is a big milestone in a web design project. Recently some readers asked how to run a wireframe meeting, so here are 5 tips to help you create and deliver a wireframe presentation that gets great results and rave reviews.

1. Preparation

As UX designers we lay out the project vision, so proper preparation is critical. After updating your files to include any internal team feedback, make sure your presentation files are as clean and well organized as possible. Run a spell check, proof read and confirm that all pages are clearly labeled, in the correct order and have a logical flow before you distribute them to anyone.

If possible, rehearse your presentation out loud. I find this is very helpful and helps me identify areas for improvement. Most importantly, it helps me relax during the real deal.

2. Confirm The Meeting Time And Deliverables

Confirm the meeting time and place with everyone involved. If you are working with a project manager ask them to do it on your behalf. Most importantly, make sure everyone knows what to expect.

Almost all of my clients work in distributed teams, so I usually do my wireframe presentations remotely using Gotomeeting. Occasionally I work with agencies that insist on onsite meetings, but even those events usually include one or more people on the phone.

As for deliverables, I prefer to deliver wireframe decks as online PDFs and do not print them out. Other UX designers may disagree, but in my experience people pay more and better attention when everyone’s eyes are directed to the same place, whether it’s their own computer screens or a large conference room projection screen. Besides, wireframe decks can get huge fast and I’m tired of killing so many trees.

3. Presentation Day

On the day of your presentation, distribute your PDF and conference call information at least one hour before the meeting. Your PDF will probably be too big to email as an attachment, so use a secure storage facility like Box.net and email a secure link to your team. 

Dial in to the conference call at least 15 minutes early. This will give you a chance to launch your presentation, get settled and catch your breath. Do the same for an onsite meeting.  

4. Showtime!

As soon as everyone is assembled, thank them for coming and ask if they can access the presentation and hear you clearly on the phone. After everyone confirms it’s time to start the show.  

Set ground rules for the meeting and give people an overview of your presentation. In other words, tell ‘em what you’re gonna tell ‘em. 

Start by reminding everyone of the site’s purpose, goals and audience. Then take them through each wireframe as if you were the user. Walk the group through all of your annotations – although they might, don’t expect anyone to read them after the fact.

Be sure to ask for feedback after presenting each individual page. Most people don’t want to wait until the end and may forget their two cents by then. So give everyone a chance to be heard when they want to speak as long as they are polite. Take careful notes or record the meeting so you can review any requested changes later.  

Stories have been a cornerstone of design for thousands of years. The great pyramids were built to provide the Pharoahs with a safe journey to the afterlife. The Acropolis was built as a monument to the people of Athens. The Sistine Chapel is the centerpiece of any visit to Vatican City. Each of these architectural wonders started out as an idea communicated through stories. Just like them, your website or blog begins with the story of your users. Who are they and why do they come to your site? What is their initial motivation and what compels them to return?  

What’s A Wireframe?

Hold A Requirements Gathering Work Session

The first step is to schedule a requirements gathering work session. This is usually a 90-minute to two-hour meeting that includes everyone working on the project, especially senior decision makers. If that’s not possible, make sure everyone understands the potential downstream impact of leaving that person (or persons) out of the discussion. These meetings can be done in person or remotely using an online collaboration tool such as GoToMeeting. If it’s a remote gathering make sure everyone has a good Internet/phone connection and can view your presentation link. If it’s an in person meeting bring snacks and get a decent sized conference room. A large whiteboard in a conference room is great. If you can’t get that bring a pad of oversize post its and stick ‘em up all around the room. Online or live, make sure you’re ready to rock at the appointed start time.  

Start by asking some basic questions. Who’s the audience? What makes them pay attention, and what will make them take action? Some organizations will have a creative brief available. For others this may be their first opportunity to explore this critical question. Try to find out as much as you can about who the site is for and what makes them tick. If time allows, sketch out rough personas representing each user type. Make sure everyone is in agreement on this. Knowing your audience and their hot buttons is the most important place to start.