Lacey Kruger

Yesterday, Safe Kids Worldwide launched a brand new website. During the redesign process, Safe Kids worked with Convio to conduct significant user research to ensure the new site would meet the needs of their various audiences. The new site looks great and is much easier to use than the previous version - nice job Safe Kids!

On the heels of a previous post I wrote about "The 10 commandments of effective homepage design", I thought I'd compare the old Safe Kids homepage to the new one along the lines of those commandments. Here's a look back at the previous homepage...

I. Thou shalt clearly state who you are and what do you.

The old homepage did convey who Safe Kids is with a nice tagline and a photo of the child in a carseat. The new site, however, provides an even stronger message about who Safe Kids is with a more descriptive tagline and larger photographs of happy children.

II. Thou shalt be able to point to where your top 3-5 online goals are represented on the homepage.

Some of Safe Kids's online goals include capturing email addresses and increasing donations. Unlike the previous site, the email sign-up is now available on every page in the new site. The homepage also includes a "Donate Now" promotion below the left navigation.

III. Thou shalt offer clear, concise navigation.

Safe Kids previous navigation was confusing and not tuned towards Parents, who are their primary audience. The new navigation not only offers clear and concise options in the left nav, it also offers audience-specific options in the top tabs in case a user identifies specifically with one group.

IV. Thou shalt provide scannable, up-to-date content that entices visitors to click for more.

Safe Kids new homepage offers dynamically updated content under "What's New" and also under "Product Recalls", which are very popular among visitors of their website. The previous site offered up-to-date content, but it was not easily scannable and trailed down the length of the page.

V. Thou shalt dedicate space to each of your audience groups.

The previous website did not offer any cues or entry points for each audience group, but the new site provides tabs for each one, which allows Safe Kids to consolidate relevant information in an audience-specific way.

VI. Thou shalt convey a visual hierarchy so visitors know where to look and what to do first.

The old web site included several promotional items on the right side that tended to compete for attention. The new site has a clear visual hierarchy that points first to the rotating feature area and also the options below "How You Can Help" with the icons used in that section.

VII. Thou shalt include 3-4 ways for visitors to engage.

The "How You Can Help" section on the new homepage offers, at a glance, a listing of ways users can get involved today. The old website did offer ways to get involved, but they were scattered about and difficult to locate.

VIII. Thou shalt avoid the Flash intro or any other gratuitous animation.

The new web site does include a rotating feature graphic, but it is not intrusive and does provide the most important content on the page.

IX. Thou shalt make sure most relevant content is above the fold.

The old homepage scrolled for pages and pages. The new homepage does offer all navigation and the feature area above the fold, along with headlines for the rest of the content so that users know there is more to see.

X. Thou shalt balance meaningful content with relevant supporting graphics

The old homepage was text-heavy, with very few graphics. The new site offers more imagery, which is all supported by relevant content and/or calls to action.

All-in-all, the new website abides by the "10 Commandments" and is a great showcase of how user research can really pay off when redesigning your site. Way to go Safe Kids!

Today I wanted to share some preliminary steps to take when your organization begins thinking about a web site redesign. Whether designing in-house or with a third-party company, completing these tasks ahead of time will save you a great deal of time and pain down the road…

1. Justify the need to redesign – Have some conversations internally about what’s working and what’s not working with your current site and document those conversations. Decide what outcomes you’re expecting with the redesign so you can share those goals with your designer.
2. Define your core project team – You’ll need to determine who, in your organization, will be responsible for making decisions about the new site. Include anyone who will need to sign off on the new design or any of the deliverables leading up to it (information architecture, wireframes, etc.). Also, major content contributors or owners will want to have a say in what stays and what goes. Finally, any key strategists in your organization that know what types of people visit your web site and who else you want to reach out to. Make decisions about the team judiciously since the larger the team, the more challenging it will be to get sign-off on key milestones.
3. Create a comprehensive sitemap - Make a list of the content you already have on your web site. From there, you can make decisions about what is important, what needs updating, and what is outdated or doesn’t need a home on your new site. I talked about this process in a little more detail in a previous post called “The Content Monster”.
4. Consider branding – If you haven’t already, determine and document your company logo and color scheme so your designer will have some guidelines. Collect any photography that could be incorporated and also any print materials that may serve as a guide to your brand.

These steps are just the beginning to embarking on a successful redesign. Many additional considerations and decisions will arise as you enter the process, but at least you can get a head start!

Just coming out of the Homepage Design Slam session at the Summit, I wanted to provide a brief recap for those who couldn’t make it. Don Roach, our Art Director, and I led the session and got some great (and brave) volunteers to project their homepages and subject them to constructive critiques from their peers. Each volunteer got a party favor in the form of a large Post-It tablet sheet listing some quick fixes they can consider to optimize their homepages. I’m hoping it will be a great tool for them to use to convince others in their organization to make some iterative changes. Don and I made a list of 10 Commandments for designing effective homepages, which we shared with the group to use as guidelines as we reviewed each page.

The 10 Commandments of Homepage Design

I. Thou shalt clearly state who you are and what do you.
II. Thou shalt be able to point to where your top 3-5 online goals are represented on the homepage.
III. Thou shalt offer clear, concise navigation.
IV. Thou shalt provide scannable, up-to-date content that entices visitors to click for more.
V. Thou shalt dedicate space to each of your audience groups.
VI. Thou shalt convey a visual hierarchy so visitors know where to look and what to do first.
VII. Thou shalt include 3-4 ways for visitors to engage.
VIII. Thou shalt avoid the Flash intro or any other gratuitous animation.
IX. Thou shalt make sure most relevant content is above the fold.
X. Thou shalt balance meaningful content with relevant supporting graphics.

Do you have other ideas on guidelines to consider? If you attended our session – what did you think? I’d love to hear about it in the comments.
 

What a great start to the Summit! Gilbert’s speech this morning was so inspiring – what an amazing person he is. You can read about Gilbert on his web site. The first session I attended this morning after the keynote was “No Really, Show me the money!” about merchandised giving. Molly Brooksbank from Convio showed some awesome examples of virtual gift stores and products to begin brainstorming sessions for clients who may be thinking about starting a store of their own. Check out World Wildlife Fund and Oxfam UK just to name a few. Alisa Aydin from UNICEF USA spoke about their Inspired Gifts store and the process we’ve been through together to achieve a very usable store and some amazing success metrics. Looking forward to some more great sessions this afternoon!

In my last post, I explained why you should be listening to your users. Listening is monumentally important when you’re redesigning your website. Successful websites all incorporate user research and feedback throughout the design process.

When you initially decide to redesign, it may be based on feedback from your site visitors. You may have heard from your constituents that your site is outdated or that it’s difficult to find information. Alternatively, you could be redesigning because of an internal push from your organization. Either way, it’s important to keep in mind that your website is for the visitors. Ask them what they want that they don’t have today. Ask what issues they have with your current site so you don’t make the same mistakes again. You can have these conversations through an online survey or through individual conversations with your constituents. You can utilize and assess data you may already have from emails or calls coming in about the website. Collecting this data and incorporating it into your must-have list is the first step to a successful, user-centered design.

Once you’ve made some research-backed decisions about your new website, you should test it out. We’ve had great success testing out wireframes before the design has even begun. After all, if you don’t have a strong underlying structure, there’s no way to cover it up with a snazzy new visual design. Also, participants are more likely to provide candid, direct feedback to wireframes. They see an unfinished product and realize there’s still time to make changes. Run your wireframes by a few members of your target audience. Ask them where they’d go to donate, learn more about you, or accomplish other key tasks. Then, make changes based on what you learn. If you have time, it’s great to test the visuals too, but make it a point to test early. You’ll avoid costly and time consuming changes down the road.

Do you have experience listening to your users while redesigning? If so, I’d love to hear about it in the comments.