Monday, May 30, 2011

How viral videos can help reinforce your brand

Videos don't have to feature cute hugging cats or giggling babies in order to go viral. If you know your niche and your brand, you can make a clever video that will be popular with your audience.

For inspiration view these examples of recent, popular YouTube videos made by staff at universities for their niche audiences:

New alumni send-off
As a tribute to 2011's graduating class, Oberlin's President Marvin Krislov and other administrators playfully recreate Rebecca Black's video for her earworm "Friday."

Student recruitment tool
What's not to like about this feel good video? Purdue University's video about the "Compliment Guys" who shout out nice things to students passing by took off when it was posted to YouTube.

Online pep rally, part one
This Notre Dame anthem, created for a student-athlete awards banquet, was so well-received by alumni, students, and other members of the Fighting Irish family that its view count is over 300,000 and growing.

Online pep rally, part two
To bolster excitement for the basketball team, Indiana University fans Brice Fox and Daniel Weber express their school spirit with song and exciting archival game footage.

Nostalgic virtual tour
Combining stop-motion and colorful narration, the University of Chicago's Dean of the College John Boyer helps alumni revisit campus in this short, atmospheric video.

Improving the user experience with content strategy

It's getting close to your launch deadline. Lorem ipsum placeholder text that filled out the wireframes and comps are the only content in your CMS. You don't have a copywriter, but you have a tentative plan to convert some old brochures' text to create web content.

We've all been there. Your new website is up and running, and now you're thinking about the content.

When working with tight turnarounds and small budgets, content can be treated as a last thought, especially if your design and development team doesn't have content strategy expertise. The web has different content needs than print projects. The words you use to tell your company's story online—and how they're presented—need regular review and strategic improvements. Content is often the hardest part of any website project.

In her book Content Strategy for the Web, expert Kristina Halvorson points out that "content is not a feature." When content revision and creation is treated as an afterthought in the web design puzzle, its execution can make or break your website's success. If your website's content isn't well thought-out, the users can always tell. Most people visit websites to get information. If your website makes it difficult for users to get what they need, they'll end up frustrated, or they may go elsewhere.

Here are two ways you can start to make content strategy a part of your website's creation, redesign process, or ongoing maintenance to ensure a better user experience and bigger ROI on your investment having an online presence:

Never stop auditing.
There is no such thing as postlaunch when it comes to content. Keep an inventory of what you post and analyze where there are gaps. Review regularly and revise as appropriate. Use management tools (an Excel spreadsheet is a good place to start) to keep track of your content. Don't forget to measure the success of your content in terms of its findability and impact on your business. Do people come to your website and leave right away? Create personas to understand your users' needs, motivations, concerns, and goals. Make sure your content addresses how your company's products and services will solve your users' problems.

Curation is key.
Unify your content management process and focus on the user experience. Figure out what you want to do and then pick your tool to help you do it. Define the purpose and value of the content you choose to share on your website. Make sure your content reflects the characteristics of your company's brand. Develop an editorial calendar and establish processes. Create standards, including a style guide with content specifications and workflow with archiving and updating plans.

Friday, May 27, 2011

Best healthcare websites

Not every hospital is the same, however, all hospitals and health care providers should have a professional online presence. First and foremost, an effective medical website should be easy to use and full of information. The organization and presentation of this information must be strategic and intuitive so patients and other visitors can find what they need quickly. In today's health care market, a high quality website is expected by the general public.

We have identified a few "must haves" for health care websites. An effective medical website should have:
  • Search Bar
  • Physician directory
  • Function Links ("How can we help you?")
  • Services and Specialties
  • Health Information  
 Below are more details for each 'must have' along with some of our favorite and best health care websites.

Must Haves

Search Bar
Search is important for websites with a database or wealth of information because it helps visitors navigate and find what they need quickly. Unless you want your visitor to wander through your pages and try to find what they are looking for, they can simply search for what they need. This is the easiest and fastest way for the viewer to receive information that they are looking for is a search bar.
FACT: 82% of visitors use keyword search bar function to find the information they need. (Source: Apollo Find)

Search bar is traditionally located in the top upper right of the website.
For intuitive design purposes, it is a good practice to place common items where the visitors expects them to be.

St. Vincent Health does a good job of this. The search is clear and not cluttered by many other element in this layout.
TIP: Be sure your website search and results work properly. You would be surprised by how many search results do not yield effective or even correct information. This can require some custom functionality but is extremely important to visitor satisfaction and usability for your website.
In addition to search, a site map outlining all pages of the website is a good practice and quick way to give visitors an overview of the website depth.

Physician Directory
Visitors and new patients want to see a photo of the doctor they will be seeing, they want to see the team, they want to see a list of credentials.

A directory of physicians should contain photos, what they specialize in, credentials and specialities, and their contact information. Depending on the size of your practice, coupling the directory with a physician search feature would be very effective (search by name, speciality, location, accepting patients, etc.).

Johnson Memorial Hospital has a nice physician search function and corresponding physician details pages.
Function Links ("How can we help you") 
These types of links include "how to find us", "how to become a patient", "how to find your provider", "pay bills", "registration", etc. These links are important to have because they are more than likely the top reasons visitors have come to your website. These links are often separated out somehow in the design and important to be easy, clear, and on many pages of the website.

TIP: Designing these links in the utility navigation or a 'big' footer allows them placement on every page.

One of my favorite health care websites--it clearly asks the question 'what would you like to do today?' and offers actionable link options.
Notice the physician search feature is front and center.

Duke Medical website is a great example of simple and effective design. Nothing is over-the-top fancy,
but they arrangement and presentation is clear. The design is clean and professional.
Services and Specialties
From one hospital to another, many services are the same; however, every hospital excels in one area or another. They have unique physicians and/or awards to feature around each service, as well as an opportunity to show off their facility.

Community North has a fantastic maternity center and they emphasize that. They included verbiage such as "we set the next standard with the nation’s largest collection of single room maternity guest suites", they offer floors map along with many photos.

Health Information
A reputable medical facility or hospital will offer its visitors common health information. Unnecessary visits to the physician can be avoided by providing basic information on their website, as well as answering basic frequently asked questions. With so many health and medical websites on the Internet, visitors trust their hospital and the information it provides. Patients want their hospital to provide this information to them instead of sifting through the information from other sources.

There are third party services that hospitals can use to gather and present the health information, as well as keep it up-to-date without hassle. A couple to mention are A.D.A.M. Health Services and Rueters Health. A professional web company can help make the presentation of information appear seamless in your website.

Mayo Clinic has more health information that I have seen on other health care websites. They offer it in a very organized and strategic presentation with many options for the user to find what they need (alpha selection, category filter on left and top, as well as the general search). Note: Health Information is one of their primary main categories.

Great Health care Website Examples

IU Health
IU Health has it all, a search bar, pay your bill section, and a portal section to take you to specific locations.
Their navigation links are also set up simple enough for the user to not get lost.

Central DuPage Hospital
This website has a search bar and a find a doctor button clear and simple at the top of the page. They have a great navigation architecture and they have four helpful sections clearly designed across the bottom.

Franciscan St. Margaret Health 

This website starts off strong with a "How can we help you?" section along with rotating screens emphasizing popular services and specialties. They also have a search bar and a functional link for pay my bill in the utility navigation.
 UHS East 
This website has a lot of the things that we are looking for: a search bar, how to find us, find a provider, get maps and directions, contact us, and pay your bills. Each of these must haves are placed strategically on the page to help them stand out. Strategically, their main navigation is divided and simplified into only four main sections.

You can see a few additional examples on blog by Adazing called 10 Best Hospital Website Design.


Wednesday, May 18, 2011

Helpful web design tips for type

Typesetting plays an important role in all designs. Your fonts are a part of your branding and they communicate your company's goals and mission. What fonts you choose and how you handle them communicates volumes.

Web type guidelines

Use relative fonts
Having relative fonts on your website is most important rule for using type online. When a website uses relative fonts, the type will change accordingly if the user zooms in, enlarges the text, or has a preference size set for their browser. There are certain ways to make your font adjustable. The preferred way to change the font size is in the CSS. Don't use a <font> tag and change it in the HTML (as mentioned on W3C's website). CSS is not only a lot easier, but it also saves bandwidth which means better speed and performance for users.

Avoid putting text in graphics
Using graphics for text also influences zooming. When your type is pixelated as part of a graphic, the user has no ability to adjust it. When text is set in graphics, the words take up more bandwidth and slow page load times.

Don't set your type too small
Setting your type in 12- or 14-points is a good starting point for body copy. The only time when type set at a smaller point size is appropriate is for footers and other discretionary text blocks. PXtoEM has set up a calculator that can help switch from points or pixels to em.

Here are some before and after examples of how type looks at different zooming ranges.

Veerle's Blog 3.0
The structure of this website is organized clearly,
but the body text could be a little bigger to add clarity.
Most of the fonts are relative. The top 3 sections of text
are graphics along with the word "Articles." Though these are graphics, they are typeset
large enough so that you can still read them.
Big Top

The fonts are typeset at an aesthetically pleasing, easy-to-read large size.
This is a great example of a nicely sized base font.
The only text on this example is the navigation, but it isn't relative.
The four sections at the bottom of the site are images. The font size remained
the same when I zoomed in, the only thing that changed was the space around the text.
Method & Craft

This site is a good example of thoughtfully sized body copy and headers.
Though the layout got a little jumbled when I zoomed in, all of the text on their website is relative.
The only text that isn't is their graphic for their logo, which is normal and acceptable.
Baltic International Bank

This website has a great base font size, but the type
in their navigation is hard to read.
Most of their type is relative. Their navigation and "more" buttons remained the same size.

Tuesday, May 17, 2011

Effective call to action designs

A call to action, also called a CTA, is an area on a webpage that prompts you to do something. Some times a call to action entices you to click a button or picture. In other cases it may make you want to fill out a form or contact a company representative for more information.

Ways to improve your call to action

  • Integrate white space
    Strategic use of white space helps guide the users's eyes to your call to action. A cluttered website with many buttons and different sections often draws attention away from the call to action. White space, when used thoughtfully, can make your call to action stand out.

  • Make relevance is clear
    When creating a call to action include a description of the promotion. Users need to know why they should act on your call to action.

  • Provide alternatives
    The most common call to action buttons or forms are "Sign Up Now" or "Download Now," but it's useful to add more than one option. Campaign Monitor has a great example of having multiple options for the user.

  • Express urgency
    When writing your call to action's copy, consider using terms that express urgency. Effective terms to use includ "now," "free," "donate," "subscribe," "call," "register," "buy," and "purchase."

  • Put it on multiple pages
    If your call to action is so important, add it on multiple pages.

I selected some of my favorites to share with you. Have you seen an interesting call to action recently? Leave the URL in the comments with why you found it effective.


Mozilla Firefox

Remember the Milk




Campaign Monitor

Culture Code

Themes Kingdom

Blurb Creative

Mail Chimp

A call to action is an important component of any website. When done right, it can help your company make new sales. If you don't already have a CTA integrated as part of your website to help you reach a business goal, the TBH Creative team will work with you on a strategy to integrate an effective call to action on your website.

Monday, May 16, 2011

Google unveils new tools for tracking—and improving—website performance

Earlier this month Google announced several exciting updates to Google Analytics to help you optimize your website. Optimized websites have better user experiences and reduce operating costs. Now, fast performing websites also do better in Google's search rankings.

Google Analytics new set of tools help you measure how you're doing. To get started and find out what landing pages are the slowest on your website by update your Google Analytics tracking code. All it takes is adding one line of code related to page load time to your existing tracking code.

It takes several hundred pageviews before you will have a true picture of your load times. If you have a smaller website, this may mean waiting a few days. The new Site Speed tool is available to all Google Analytics users.

To enable the new version of reporting, log into Analytics and click on the option labeled "New Version" (found in the top-right corner). By changing to the new version, you'll gain the ability to compare two sets of metrics, view multiple reports on the Overview page, and more.

Tuesday, May 10, 2011

Learning to tweet: Advice for Twitter newbies

Last week at a small conference in Chicago, I was part of a panel discussion about tools and techniques for effectively using social media. The discussion covered tangible basics, including recommended tools for efficiency like TweetDeck and HootSuite, but the panel also delved into actual how-to advice for those in attendance who were just starting to build their brands on Twitter. This aspect, it seemed, was the biggest challenge for the new users.

Different from blogging and using Facebook, the panel's moderator explained how to become an effective Twitter user by giving examples of tweets made during three different stages of learning how to tweet:

A newbie Twitter user:
OMG! This cinnamon raisin bagel is delicious.

A starting-to-get-the-hang-of-it Twitter user:
Check out this interesting story about bagels in the @NYTimes.

A pro Twitter user:
Whether it's from Einstein's or Panera, the cinnamon raisin is my favorite bagel. What's yours? #foodforthought

The key for the average user to finding success on Twitter is finding your voice and making sure to engage with others. Tweets have to be a balance of both broadcasting ideas and links with personal tidbits and interactions with other users.

The panel had other advice for new Twitter users. Here are some of their other tips:

  1. When thinking of what to put up on Twitter, remember that it's basically smart, informal word of mouth. If youre making a recommendation, explain why. If you only promote your goods and services, your account will become tiresome to followers. When you think about the users you most enjoy following, are their posts all ads, all the time? [no] Keep it simple and, whenever possible, keep it fun.
  2. New users sometimes forget to source their leads. It's also important to always give credit. If you found a link because another curated it into their Twitter feed, acknowledge it by giving credit with a hat tip (HT) or via. Doing this helps build credibility and potential rapport with the person you cited.
  3. To get a better hang of things, the first thing you should do is start following your peers. By reading what they post, as a member of their audience, you'll see first-hand which posts resonate with you and you can then use these ideas as models for finding your voice through your own Twitter account.

Wednesday, May 4, 2011

Your website staff page: Why showing faces is important and Beneficial.

Check out an updated version of this post! Find current examples and even more great information: Using team photos to improve your conversion rate

Are there REAL people working at your company?

When your potential clients stumble upon your business's website, one of the first things they do is look for examples of your work. But what happens when they look at your team page and only see names of your employees? Some "About Us" pages don't even have their employees listed, some have their names and some have their pictures. Along with their just names or pictures comes bios and all that jazz, but who wins in the fight between names and pictures? When it comes down to it, your clients feel more comfortable knowing that they are working with a REAL person. Having images along with names on your "About Us" page helps clients realize this, which in increases your conversion rate. The article by unbounce titled "3 Ways to Increase Your Conversion Rate with Images [Case Studies]" put it this way:
"[H]ow can you create a better connection with customers if they won’t meet you in person the majority of the time? The answer is to use images wisely, both on the sales and service side of your pages. ... It’s hard to connect with a small business team with a huge list of names. Get personal with customers and allow them to connect with you more easily by implementing images."
This is completely true. I have some examples listed below and to come up with them was a little difficult. 

Why is showing your team's faces so beneficial?
It allows people to emotionally invest in a relationship with your business if they can actually see who they are talking to/working with. To me, it's almost like when you call your cable company and you have to go through a bunch of recorded questions until you actually talk to a human being. Having a picture and bio on your about page will create a sense of "Hey, they're a person just like me". Using images of people in other sections of your website also helps in making your business more personable.

One great example: If you have a blog, in the author section, post their image along with their name. This way, people who read it can see who actually wrote such an informative blog post. These tactics help build a great relationship with your clients.

Great Examples

Update: Scroll through the examples below to see a historical record of team pages from 2011 (when this post was originally published) and their 2016 counterparts. Notice any differences?

Ten Adams
In 2011, each team member had a large, professional (yet casual and happy) gray scale photo.
Their 2016 staff page has similar elements but incorporates full color images and scroll navigation.

Boost Media

First Person
In 2011, this layout was great for large teams and utilized the space on the page.
Here's their updated look for 2016.

Play Group
This 2011 team page was fun and showed their personality and culture.
In 2016, they continue to show personality but showcase their leadership in a more stylistic way.

In 2011, the team page consisted of small head shots on the right and
the main photo rotated through photos of the team.
In 2016, the team presentation is more streamlined, and the headshots flip to different poses when moused over.

Very clean layout with bio information and photos stacked.
In 2016, the team members are displayed in a colorful grid.

Like many other aspects of life, website design can operate on the "if it isn't broken, don't fix it" principle at times. Check out these About Us staff pages that haven't changed since 2011.

This is a great example to actually check out. Their faces follow your mouse around the page. When I took the screen shot, I had my mouse hovering over the About Us tab.

RJE Business Interiors
TBH Creative redesigned RJE Business Interior's About Staff page in 2011. In general, we chose to use first names on the first page to compliment the introduction text and casual tone throughout the website. We wanted to make sure the visitor knew the faces were clickable for 'more', so the hover state is clearly marked with an orange border in either option.
The full staff directory is presented in alphabetic order by first name, after the President, of course.
Each individual staff page includes details and connection information about that person.

Update: This site is now a parked page with a fare-thee-well message to any visitors informing them their crew has "blasted off into other adventures."
In 2011, this realistic art/illustration is a nice alternative to the typical photo. It still shows who the person is but adds character to the website and follows the style/brand.

Smashing Magazine

Monday, May 2, 2011

Tips for Running a Facebook Contest

With over 500 million users, Facebook offers invaluable opportunities for companies to engage with their potential and loyal customers through pages. Though more than 70% of small businesses use Facebook (a 20% increase over last year), most still struggle to find different ways to take advantage of their social media presence beyond reinforcing branding and providing customer service. The first action step toward many companies take toward reaching their social media goals is to build their fan base. Have you ever considered running a contest to spark growth in "likes" for your business on Facebook? If you're considering running a promotion but don't know about the social media website's complex rules, review these key takeaways before you get started. Businesses caught running contests that do not follow Facebook's rules risk losing their entire page.
  • Businesses no longer have to get their contests approved by Facebook or spend $10,000 in Facebook ads to run one; however, companies must disclose explicitly that Facebook is not involved with the contest for liability reasons.
  • The only action you can ask of contest entrants on Facebook is for them to become a fan/"like" your company's page. You can't ask them to comment. You can't ask them to upload photos. You can't ask them to provide their contact info. You can ask nothing of them except being a fan/"liking" your page in order to view contest details.
  • You may not pick a fan at random from your list of people who "liked" your business's page. You have to use a third party app to collect names/contact information and run the whole contest off Facebook. You can only use Facebook to promote your contest.
  • You may not contact winners using Facebook. That's right! No messaging. No chat. No posting to your wall or their wall to let them know.
Related reading: Social Media Examiner blogger Mari Smith offers more tips, including a comprehensive review of apps for running successful Facebook promotions.

Subscribe to this blog