Mary Shaw

Most corporate websites have some sort of Flash element on them, usually an animated banner to draw attention to the home page. These components can be very effective or fall completely flat, depending on the strategy behind them. In this post I’ll show you how to write them from concept to finished piece, and provide you with a Flash copywriting template to download.

Team Up With Your Designer

The first step is to team up with a dedicated Flash designer. This person is often also the website designer, but can sometimes be solely dedicated to Flash production. You will be working closely together, so it’s a good idea to make sure each of you has either a copy of the agency creative brief or has been briefed by the company on the goals and objectives of the piece. It’s critical that both parties are on the same page, so make sure you and your designer both know what’s going on.

Once you understand what the client wants to accomplish with their Flash banner, the next step is to do some rough concepting. From a writing standpoint, for me this usually involves brainstorming and sketching in a big notebook, ideally with my designer, either on the phone or in person. While it’s totally possible to come up with great ideas on your own, I find it’s always better with two or more people. We schedule a dedicated time to brainstorm and get down as many ideas as possible. As soon as we’ve done some riffing and refining it’s time to crack open the word processor.

Use A Template To Separate Visual Descriptions From Copy

Once we’ve agreed on two or three potential concepts, I go off to document them in Microsoft Word. I use a simple two-column template to create a written storyboard. The left column is used to describe the visuals and the right column is used for specific copy used in the final piece. Since clients often have trouble understanding abstract concepts, we usually use this as an internal document. My designer depends on it it to guide image searches and to create a more sophisticated, detailed PDF storyboard of each concept for client approval.

Each panel of the storyboard template is numbered and named for easy reference later. Besides writing punchy, accurate copy, it’s super important to describe the visuals, any functionality and transitions as concretely as possible. I find that describing the visuals first helps me write even better copy. Image searches are often very time consuming for designers, so try to eliminate as much ambiguity as you can in your descriptions. Your designer will thank you.

Taking Turns

When the copy template is completed, it’s the designer’s turn to transform each concept into a PDF storyboard with proposed images. There’s usually a lot of back and forth at this point, since using actual images can often inspire added refinements. When everyone agrees they’re an internal work of art, it’s time to present to the client.

Client Revisions

And now the fun begins. Flash banners often become mini-projects within a larger web design project, so beware of scope creep here. Since Flash animations are so subjective, clients will want to change images, copy, even placement of various elements even after choosing a concept direction. So make sure you agree on how many rounds of revisions you are willing to provide. That way you’ll know just how deep the rabbit hole goes. I recommend no more than 2 rounds, with a change order after that if your clients keep changing their minds.

Eventually your client will approve the storyboard and it’s time to build the actual banner. And that’s another blog post entirely. Probably a guest post.

Your Turn

What’s your experience doing copywriting for Flash banners and other Flash elements? Would you do anything differently? Please leave your thoughts in the comments.

P.S. – feel free to download a copy of my storyboard template. I hope you find it helpful.

Subscribe

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

Happy New Year! Here are ten things you can do to improve your web site or blog in 2010:

1. Establish a clear purpose for your site

Why does your site exist? What’s the point? I started this site to share my knowledge about user experience, content development and web strategy. What’s the purpose of your site? Having a clear purpose will drive your overall strategy and help you make the most cost-effective design decisions.

2. Know your audience

Who visits your site, and why? Your users are the lifeblood of your web site. If they don’t visit, all you have is a dusty server somewhere on the interwebs. Have you ever asked your users what they like/don’t like about what you’re doing online? Now is a great time to ask.

3. Know your call to action

What do you want users to do on your site? Should they buy something, or signup for your monthly email newsletter? Do you communicate a clear call to action so users know specifically what to do?

4. Identify the competition

Who are your top 5-10 online competitors? Have you looked at their sites? What are they doing that you want to emulate? What are they doing that you should avoid? A competitive analysis is a great way to establish a benchmark across your market.

5. Create an editorial calendar

An editorial calendar is a must for a blog, but it’s still a good idea even if you have a static site. Monthly or quarterly updates to a static site will give users a good reason to come back.

6. Review your site traffic

Google Analytics is free and easy to install on any web page. If you only do one thing on this list, make this it. There’s no reason not to know your site stats anymore.

7. Perform a content audit

Do you still know what’s on your site and why? Things change over time, especially if multiple people/groups are updating a web site. That can sometimes mean outdated, conflicting or incorrect content. Take a close look at what you have, what you can delete, and what you may need.

8. Improve your SEO

Do you know how your site ranks on Google and other search engines? Do your page titles have keywords in them? What about  h1 tags? Google doesn’t really care about meta tags anymore. Make sure your site is optimized for SEO using the latest optimization techniques.

9. Plan for the future

What activities are happening in your business that will impact your blog or web site? For example, will you be offering a new product line in addition to consulting services, or vice versa? Do you need to integrate e-commerce into your existing site, or plan a complete site redesign? Any major changes to your business operations will likely impact your web presence. Take the time to think through these changes and plan accordingly.

10. Get help

All of these tips have two things in common – they don’t cost a dime, but they can take a lot of time. If you’re too busy to take it on yourself, there are plenty of web consultants out there who can conduct these activities for a reasonable cost. I’ll be happy to help too – just email me.

Best wishes to you and yours for a happy, safe and prosperous 2010!

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.

Last night I had the opportunity to speak at Fairfield University about user personas. Before I began my talk, the class watched this excellent 20-minute presentation on personal branding by David Armano. David was a featured presenter at the Chicago Convergence conference back in March.

Besides the emphasis on personal branding, there’s a lot of great information about using social media to effectively influence market perception. David also makes excellent use of visual diagrams to explain his points. Enjoy and have a great weekend!

Back to school season is here. If you haven’t already, now is a good time to brush up on your UX design, usability and web content writing skills. I hope you find these resources helpful.  

Speaking of back to school, I’ll be giving a guest lecture on User Personas at Fairfield University this Thursday, September 10. I’ll be doing more speaking engagements throughout the year, so please let me know if you’re interested. Thanks!

User Experience Design (UX) Resources

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.