My goodness, it’s been a while since my last post, even after I said I’d try to update this blog more often. Where have I been since March? Well, it’s a long story and totally unrelated to web strategy, UX design or copywriting. Want to know more? You are too kind to read on…

Where I’ve Been

During the spring I was buried with client work, which is always a good thing. However, since May my family and I have been dealing with one medical drama after another. My sincere hope is that things are finally starting to settle down a bit, but who knows. It’s the peak of fall allergy season here in the Northeast U.S., and my daughter struggles with asthma and allergies until the first hard freeze.

The good thing about unexpected life events is they really make you think long and hard about what you want to do and how you want to spend your time, and that’s mostly what I’ve been up to.

Blogging, Consulting and Exploring

I’ve been doing more and more blogging for paying clients, which leaves less time for updating this blog. I’ll be happy to do the same for you. I love blogging – it’s interesting, fast and adds a lot of value for clients. Plus it’s extremely flexible even when the inevitable family medical dramas hit. I’m seriously thinking about making it my main source of income. Check out my Consulting Services page to find out more about my blogging services.

Client work continues to ebb and flow. It includes blogging, UX design, copywriting for corporate sites and web consulting for major brands. I’m lucky to have great clients and amazing variety in my work.

I’ve also been working on an entrepreneurial side project. In February I purchased a blog about songwriting called Serve The Song. Many years ago, way before the internet, I was an independent singer-songwriter. Serve The Song is all about helping independent songwriters take their music to the next level. I’m starting to add videos to the site, and have a trip to L.A. planned in November to meet members of that audience at a songwriting convention. It’s been a labor of love and a lot of fun. If you like writing music be sure and check it out.

What’s Next and How You Can Help

So what’s next for maryshaw.net? Honestly I’m not sure. I’ve had a lot of good response from readers on my wireframe articles, so I’m thinking about releasing an ebook on the subject. I’m also thinking about developing a membership site to teach people what I know about UX design and copywriting. Please let me know if you’re interested in either of those topics and what else you’d like to see on this blog.

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.

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.  

Web sites are so much more about people than technology. As UX designers, a big part of our job is helping everyone working on a web design project understand and agree about what needs to be built. That means involving all the right people and capturing the right information from the start. Creating an effective web site strategy gives design teams clear direction and focus. The best way to approach it is to 1) gather requirements, 2) review existing content, and 3) create a visual blueprint based on 1 and 2.

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?  

Fairfield University asked me to help them with their recent website redesign. Working closely with the Director of Web Communications, we conducted a full content audit, competitive analysis, and stakeholder interviews. These activities gave us the information we needed to create a set of personas representing each user type, followed by a site map and wireframes to guide the design of each page template.

We made extensive usability enhancements to the 1000+ page site. These included streamlining the navigation structure so it was more intuitive and consistent across the board.

Reuters asked me to write a flash demo to introduce a new financial IT solution at an upcoming trade show. Working with a talented art director and an amazing Flash designer, we created the piece in just a few weeks.

The demo was used at different trade events across the country and also played on the big screen in Times Square. Click the link below to view it.

Please note: This is a large 20MB file and make take up to 30 seconds to load.

See the flash animation

ROO needed help making enhancements to their client video management application. Together we created a set of wireframes to improve usability and add ajax functionality.

In a recent blog post, John S. Rhodes suggests that user experience design and direct marketing are the same. While I don’t agree they are identical disciplines, I do agree they have a lot in common. I also believe that blending the two creates a powerful concept I like to call User Experience Marketing, or UXM for short.

More Sales and Happier Customers

UXM reflects the total online user experience. It is about attracting ideal customers and giving them such a great experience they simply have to come back for more. It’s all about them.

Think about your favorite restaurant. Why do you keep coming back? Is it the food? The ambiance? It’s probably the way you feel when you are there.

The table setting, the candlelight, menu and mood make you feel great. And then the food is a total slam dunk. You can’t wait to return and tell all your friends. That’s user experience marketing in action.