23rd March

How To Write Storyboards For Hero Banners

by Mary | Posted in Copywriting   2 Comments »

banner

Most corporate websites have some sort of hero 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 hero banner copywriting template to download.

Team Up With Your Designer

The first step is to team up with a dedicated HTML5 or Flash designer. This person is often also the website designer, but can sometimes be solely dedicated to Flash or HTML5 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 hero 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.

Read the rest of this entry »

10th March

Off To SXSW Interactive

by Mary | Posted in User Experience Design   No Comments »

Austin

Tomorrow I’m flying to Austin to attend the South By Southwest Interactive (SXSW) 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

31st December

10 Tips To Improve Your Website

by Mary | Posted in Web Design   1 Comment »

2010 - Speedometer Reaching New Year

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?

Read the rest of this entry »

19th November

Wireframe Nirvana: Plan Ahead For Changes

by Mary | Posted in User Experience Design   No Comments »

wireframe_nirvana

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)

See zurb.com’s great article on using shared layers in Omnigraffle for more info.

Read the rest of this entry »

13th October

Get Fresh Ideas When You Unplug

by Mary | Posted in User Experience Design   No Comments »

pull_the_plug

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.

Read the rest of this entry »

30th September

Tear Less Hair Out With A Content Delivery Plan

by Mary | Posted in Web Design   No Comments »

stressed

Tear Less Hair Out With A Content Delivery Plan
Sorry it’s been a while since my last post. Work is really busy lately, and that’s good. One of my current projects involves producing a large website for a very nice client. The only problem is their content is all over the place. They need a content delivery plan. Let’s figure out how to help them put it together.
Start With The Content Audit
Remember my last post about content audits? Here’s another great way to use them. Besides giving you info on what you have, don’t have, and what you need, your content audit can also give you a basic road map for actual content delivery later in the process.
Simply re-name the audit document to “Content Delivery Plan” and make sure each entry has its own ID number. Use a simple, numerical outline format for each item (1.0, 1.1, 1.1.1, etc.). Entries should also account for any new content that needs to be created.
Now add some new columns, such as “site map”, “wireframe”, “copy”, “JPG”, “PSD”, “flash”, and so on. Make each column and include due dates for every content component you need to track.
Why ID Numbers Are Key
Since every piece of content now has its own ID number, you now have the basis for a file naming convention. When it comes time to create each deliverable, you can base them on the ID numbers you created above. It’s also helpful to name the section of the site it applies to. For example, copy for the About Us section could be named “2.0_about.doc”.
This literally gets everyone on the same page. Reference ID numbers on your site map, wireframes, PSDs, JPGS, everything. This helps ensure the team uses a shared vocabulary for all content.
Keep It High Level For Copy Decks
For copy decks, deliverables should be in Microsoft Word and include as many sections as possible. You don’t want to have to sift through dozens of individual documents, especially on a large site. When developers flow in the copy later they’ll have to extract the text to get rid of any funky MS Word formatting, so you want to try and make their life easier if you can.
If you can’t submit your site copy as one large file, split it up by top level sections only. And please, please, make sure you have a version control system in place. We’ve all seen the “final final final, no this time it’s really final” version. PS – this will be the case for almost all your content deliverables.
Rein It In
Content is messy. It’s time consuming and it’s everywhere. Rein your content in with a content delivery plan. In the end you’ll help your team be more organized and keep more of your hair.
Over To You
How do you organize and wrangle your content? Please feel free to share your thoughts in the comments.
Sorry it’s been a while since my last post. Work is really busy lately, and that’s good. One of my current projects involves producing a large website for a very nice client. The only problem is their content is all over the place. They need a content delivery plan. Let’s figure out how to help them put it together.

Start With The Content Audit

Remember my last post about content audits? Here’s another great way to use them. Besides giving you info on what you have, don’t have, and what you need, your content audit can also give you a basic road map for actual content delivery later in the process.

Simply re-name the audit document to “Content Delivery Plan” and make sure each entry has its own ID number. Use a simple, numerical outline format for each item (1.0, 1.1, 1.1.1, etc.). Entries should also account for any new content that needs to be created.
Now add some new columns for each type of content-associated deliverable, such as “site map”, “wireframe”, “copy”, “JPG”, “PSD”, “flash”, and so on. Make each column and include due dates for every content component you need to track.
16th September

Content Audits: Know What Your Web Site Has and Why

by Mary | Posted in User Experience Design   No Comments »

 

content_audit
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:

Read the rest of this entry »

11th September

Building Your Own Personal Brand

by Mary | Posted in Marketing   1 Comment »

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!

7th September

28 UX Design, Usability and Web Content Writing Resources

by Mary | Posted in Productivity   No Comments »

 

backtoschool
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

This oldie but goodie from Peter Morville at Semantic Studios is still relevant to the field today. It lays the foundation of UX in a very easy-to-understand way.
2. Starting A Career In User Experience
This 2003 essay from the folks at Adaptive Path is also a few years old but gives an excellent introduction to the field. It really helped me make the transition from agency/corporate project manager to independent consultant.
New York City-based UX Consultant Whitney Hess has a great primer on dozens of UX design resources here.
Read the rest of this entry »
31st August

Use Strategy Maps To Visualize Promotions

by Mary | Posted in User Experience Design   No Comments »

 

map_directions

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.

Read the rest of this entry »