Usability – UtilitesDB

Think Content First

When customers start telling you that it’s time to update your website, you’ve waited too long. That’s the position that Chris George, CEO of Think First, was in when he emailed us asking to be considered for this edition of By Design Makeover.

“We established our website (http://www.thinkfirst.us) in 2005. We have grown tremendously since that time and have not updated the design or content of our website. We receive comments all the time from prospective clients that tell us that our website does not have a lot of information about our company. We are in desperate need of a makeover,” George wrote.

Well, you came to the right place. It just so happens that makeovers are what we do here. As many of you know from past issues, the first step to a successful makeover is to review what your current page has to offer.

In reviewing ThinkFirst.us, my first thought is that the logo is nice and professional looking, but a bit generic. This leads me to look around for a tagline or some other element that will tell me what this company does. Before I get to that, the animating center section catches my attention. It starts off with, “Copernicus didn’t start the earth revolving around the sun.” Next frame, “Isaac Newton didn’t make the apple fall.” That’s clever. I see where they’re going, but I’m still not sure what they do. I see some buttons (or what appear to be buttons) under that section: Technology, Process, People, Innovation. I try to click on those, but they aren’t clickable.

Finally, I get to a tagline of sorts: “Unlike consultants, we’re experts who create and implement IT strategies that allow physician practice groups to meet their business objectives.” That’s quite a mouthful, and still doesn’t tell me much about their services.

Unfortunately, besides a clever marketing animation, this home page doesn’t have anything that leads me to believe that these guys have the expertise to take my company (or healthcare organization, since that is their primary market) to the next level. How come there’s no real content about the company or what they offer? In order to create a site that is useful for visitors and potential clients, this home page should include a company overview, their services, consultants’ bios, testimonials and company news.

This is where website makeovers can be tricky. In most cases, many of the content pieces are already there – they just need to be rearranged and given the right visual priority. But when the content on an existing site is so far off from what it should be – it’s better to start the process with a wireframe.

According to Webopedia, a wireframe is “a visualization tool for presenting proposed functions, structure and content of a Web page or Web site. A wireframe separates the graphic elements of a Web site from the functional elements in such a way that Web teams can easily explain how users will interact with the Web site.” As we discovered, the graphics are not the problem for Think First. Instead, they need a wireframe that illustrates the what, where and how much for each new content component they want to add.

The great thing about wireframes is that anyone can create one using simple tools like Microsoft Word. And presenting a well-thought-out wireframe to your Web team will most certainly result in a better end product.

First, let’s go back and create a wireframe for the existing site – so we can compare apples to apples. The first thing I notice is that the site is designed for an 800×600 browser resolution. In 2005, when the site was designed, this was considered a best practice. But now that monitors and resolutions have gotten larger, it just means we’re not making the best use of our available space. Next, I see that the marketing message takes almost 45 percent of the page. While it is a nice marketing message, it’s just taking up way too much page real estate. Finally, and the real reason this page is not successful, is there is just no real content.

Our new wireframe seems to iron out all the issues. First, it’s designed for a 1024×768 browser resolution, which is the standard size on the Web today. Next, we have made the marketing message much smaller – now it’s a little over 10 percent of total real estate. And last, but certainly not least, we added lots and lots of vital content.

Wireframes are a great way to eliminate the graphical element so you can focus on which content components are most important and how best to arrange them. With news, case studies, a featured consultant and a list of services, users are sure to understand exactly what Think First offers, and they are much better equipped to make the decision to hire them.

When designing any site, it’s best to put the content first. I’m not going to go into a rant about the evils of template websites, but I do want to mention that this is exactly why most template sites are ineffective. They offer you a pretty-looking, pre-designed website, and then ask you to squish all your content into it. That is not the ideal situation when you’re looking to create a website that performs for your business.

Now, I know that you hardcore By Design readers are wondering where we ended up with the makeover for my design firm, Sostre & Associates. Not to worry; we’ve got a final follow- up column coming soon – complete with analytics data and some post-launch thoughts – but you’ll have to wait until the next issue of Revenue (Issue 23).

Until then – would you like your website to be the topic of a future edition of By Design Makeover? Send your name, company, contact information (phone, email, etc.), a brief description of your business and its goals, and, of course, your URL to bydesign@sostreassoc.com. Please put “Revenue’s By Design Makeover” in the subject line.

Question Then Convert

I talk to website owners all the time who are looking to design or redesign their websites. Most tell me what colors they like and what other websites appeal to them. Next they discuss features like animation or video. Some will go so far as to send long, prepared documents that include detailed color choices, font selections and so on. The concept of Web design is still largely looked at as a visual beautification of their website.

What I rarely find are website owners who have looked at their design in the context of Internet business. Once you’ve decided to redesign, there is a certain process you must go through to ensure your new website offers more than just a pretty face. You need the right information to provide a context for the redesign process.

This is why most of the website templates that are available for purchase do not help online businesses. They often look very nice, but force you to tailor your information to the design. Successful conversion design depends on a design that is specifically created for your information.

Please don’t confuse information with content. You don’t need to have every article and tagline written before starting the design process. However, you do need to have a very clear understanding of the message you want to convey to users and what goals you want to reach.

I encourage all website owners to answer the following questions before starting a redesign.

What type of website do you need?

Almost all websites can be grouped into a handful of categories: informational, lead generation, e-commerce and support. The type of website required for each is very different. To determine what type of website you need, you first just need to answer the question, how does your site make money?

If your business makes money by selling advertising or sponsorships it probably falls into the category of informational websites. Informational sites want to attract lots of visitors and get those users to come back regularly. The more pages users visit, the better it is for business. Examples of information websites include news portals, most blogs and many community-based sites.

If your site drives revenue by generating leads which are later converted to sales or sold to another organization – you need a lead generation site. Lead generation sites need to convert users to leads as effectively as possible. Lead generation sites can take many forms but some examples include service companies, mortgage comparison companies, etc.

E-commerce sites make their money by selling products. They need to establish trust because customers usually need to enter a credit card to complete the transaction.

Support sites help their owners by helping users find answers themselves, thereby reducing the need for support staff. These sites succeed when they make it very easy for users to find specific information.

Because the goals of these websites are very different, the design needs to be different. A one-size-fits-all approach will limit the success of the site.

What do you want to say to your users?

Every company has a voice. Is your business fun and quirky or staid and serious? Established off-line businesses often have a brand manager who helps to define this voice. The idea is to convey a consistent message to people exposed to the brand. Many website owners neglect this vital part of business. At the very least, your site needs to communicate the following points:

What makes your company different from the competition?
Why should users trust you?

Think of your website as an extended sales team. Great salespeople have to say the right words at the right time to help customers realize how great your products and services are. Your website needs to do the same thing.

Who are your users?

Defining a target market is business 101. One of your first steps should be to settle on the basics of who your customers are with metrics like age range, gender and income. Once the basics are defined, your next step is to identify any niche markets that would fit well with your service or product. Being able to cater parts of your website to specific niche markets can present huge opportunities for growth.

Another important step in understanding your audience is to determine how they are finding your site. Is your traffic coming from natural search engine listings, pay-per-click listings or word of mouth? Hopefully you’re attracting users from all three, in which case you need to think about what each type of user is looking to get from your site. Different traffic sources often indicate that users are at different stages in the buying cycle; for example, word-of-mouth traffic may only be interested in checking out the site, whereas pay-per-click visitors may already have their wallet out ready to make a purchase.

Having a thorough understanding of who visits your site and where they are coming from is the only way to create experiences that are appropriate for your audience.

So before you start shopping around for Web designers and writing content for your site, make sure you’ve given thought to the three major questions in this article. Design is more than just making your site look good – it’s about creating a website that accomplishes solid business goals that add to the bottom line.

Would you like your website to be the topic of a future edition of By Design Makeover? Send your name, company name, contact information (phone, email, etc.), a brief description of your business and its goals, and, of course, your URL to bydesign@sostreassoc.com. Please put “Revenue’s By Design Makeover” in the subject line.

PEDRO SOSTRE is pioneering Conversion Design and its ability to turn online shoppers into online buyers. He is the co-author of Web Analytics for Dummies and serves as CEO of Sostre & Associates, an Internet consulting, design and development firm, which also promotes affiliate programs on its network of websites. Visit www.sostreassoc.com to learn more.

Improving Conversions

Kimberly Griffiths knows all too well what it feels like to be drowning in a sea of debt. Like many Americans, she’s faced credit card charges totaling tens of thousands of dollars. The difference between Griffiths and the average credit-card-toting American is that she conquered the interest-accruing beasts.

Now Griffiths is passionate about helping others conquer it too. She figures she’s got plenty of work to do, with over $1 trillion of consumer debt in America alone. That’s why she invested her time and money into building a system designed to set others free from the bondage of minimum monthly payments that never seem to make a dent in the grand total. She dubbed her online reduction strategy “One Paycheck at a Time.” It includes a book and online tools to help consumers reduce their debt, well, one paycheck at a time.

A debt-free Griffiths, though, still has one problem. Her own need to earn weekly paychecks to remain in the black keeps her from pursuing her passion to help others on a full-time basis. Her goal is to transform the lackluster OnePayCheckAtATime.com site into a revenue-generating machine that will allow her to quit her day job and focus all of her efforts on helping the millions of Americans who are stressed out over swelling credit card bills.

Meeting that goal means making some changes to her site. It seems despite her best efforts over the past 12 months to optimize her landing page, Griffiths still isn’t getting a high rate of sales. She’s tried just about everything she knows to do, from paying search engines for traffic to working with affiliates to arranging link agreements with partner sites. She has succeeded on one note – the traffic is fairly healthy. Unfortunately the conversion rate has never climbed above 1 percent. A frustrated Griffiths is left wondering what she is doing wrong. At first glance the site is pretty enough. The colors are eye-pleasing and the design is clean and up to date. Of course, anyone reading this column for any length of time knows that a pretty site with nice colors isn’t what we’re all about.

Going Beyond Pretty

Despite passing the “pretty” test, I identified a major problem before even completing the second glance. I couldn’t figure out what the site was selling. I understood the idea. It’s spelled out in the main image: “Create the life you want by becoming debt free.” Great! I’m all for that. But how, exactly, does this site help me to become debt free? Moving on, I look to the tagline for some clarification. Apparently the site offers “a no-nonsense strategy for becoming debt free.” Okay, so I am buying a strategy. But what does that mean exactly? I’m not sure.

Next I see a long form that’s asking for all sorts of information – including my credit card number. Now I’m really getting uncomfortable. I’d like to know exactly what it is I’m buying before handing over this sensitive information. And on top of that, I don’t even know how much this vaguely defined “strategy” is going to cost me. Finally my brain moves to all those words in the middle of the page – the “benefits” list. But like most users I’m just not going to take the time to read all those words. At this point, I would rather just click the “back” button on my browser and find another quick fix to my debt problem.

Here’s my point. This site fails to answer a fundamental question: What is it selling? Also, since it’s asking for credit card information: How much does it cost? The good news is that these two questions can be answered with some design tweaks, as opposed to a full visual overhaul. So let’s get to work.

To more clearly illustrate what the site is selling, I took three steps. First I changed the message in the main graphic. I wanted to incorporate the words “online system” so that people could immediately see what the site is selling. Next I updated the tagline to read: “The online budgeting system for becoming debt free.” Last I moved the screenshots above the fold so users would see them without having to scroll down, and added “View Larger” links so users could easily preview the interface for these tools without squinting.

I then brought in a highly targeted focus group to see if I had accomplished my goal. Enter Anthony Sostre, my 10-year-old son. I believe a good website should communicate its most basic message so plainly that even a preteen can figure it out. I showed him the original site and asked the million-dollar question: What is this site selling? After about 10 seconds of ums and uhs, he responded with an unsure, “Something about debt?” Next I showed him the redesigned site and asked the same question. Before I have time to start counting down the seconds, he boldly declared, “An online system for debt” and walked away. (Apparently I had used up enough of his short attention span.) The new design had passed the test. The new message is the main focal point and people should know immediately what the site sells.

Now to address the pricing issue” I have a theory: If you can avoid a problem, you should by all means do so. So in this case, I recommended that we shorten the form and not ask for credit card info right on the home page. Instead we made signing up for the program a two-step process and ask for payment in the second step. Additionally I added “Pricing” as a main navigation item so that anyone who’s interested can find it easily. No last-minute surprises.

On a macro level, I took out all that text that no one reads. (We can save lengthy text for the “About” page or some other lower-level page.) This made the landing page much shorter. I also made the form a little wider. The idea was to clear out a little more real estate on the page to allow the form more prominent positioning. I also highlighted the free bonus materials, which were always there but nearly impossible to see in the original design. Oh, and I also put a photo of Griffiths at the bottom of the page with a link to her full story so those who are struggling with debt would know that Griffiths knows what she’s talking about. She’s been there. This adds the personal touch that will make a certain percentage of users more comfortable with the product. At the end of the day, Griffiths will increase her sales one conversion at a time, and with a redesigned home page, she is well-positioned to help many consumers understand how she can help them get out of debt.

Would you like your website to be the focus of a future edition of a By Design Makeover? Send your name, company, contact information (phone, email, etc.), a brief description of your business and its goals, and, of course, your URL to bydesign@sostreassoc.com. Please put “Revenue’s By Design Makeover” in the subject line.

PEDRO SOSTRE is pioneering Conversion Design and its ability to turn online shoppers into online buyers. He serves as president of Sostre & Associates, an Internet consulting, design and development firm, which also promotes affiliate programs on its network of websites. Visit www.SostreAssoc.com to learn more.