Make strategy a part of your offering

Web design has reached a point of maturity where we should no longer simply be a collection of pages ripped from a corporate brochure. There used to be a time where as web designers we did little more than apply a splash of paint to an assortment of text and images. This was OK as simply having a website was significantly more innovative and forward thinking compared to your competitors. However now days anyone can have a website (and almost everyone does) and additionally it is not very difficult or expensive to get a website that makes you look credible (even if it is simply buying a template site).

Today on the web in order to really have an effective website you really have to think about all aspects of the site. Failure to do so means providing an ineffective solution, so every time you create a site or work with a client you should be considering:

• Who are the potential users?
• How you will get users to the site?
• What do users want when they get to the site?
• What questions will they have that you can answer?
• How do you lead them in the direction you wish them to go?
• How you will measure the success of the site?
• How you will continue to optimize the site?

This effectively is the strategy behind your website. This means that the site should be designed in such a way that you have thought about and planned every element described above.

With out going through the process of this planning you are simply slapping a coat of paint on a box rather than delivering a tool that is created to help the business/organization who has hired you.

How to go about it

Typically web design companies ask the client what they want to be built, ask for copy and photos to be delivered, create a visual image and build out the site. Working in this manor is akin to a construction company building a home using blueprints created by the non-architect home owners. Doesn’t sound like a great idea does it?

First you must research

The first step in this process is to do some research. I know, I know, most of us as creatives hate this idea and would much rather just create some stunning and well organized visuals. However this is a critical step that you must take.

The first aspect of research is working with the client to discover as much about their business as possible. This will include the target market, the typical sales funnel, who the clients are now and what their concerns are. Find out the goals of the site and what expectations the client has for the level of impact on their business.

Although the clients input is important it shouldn’t stop with them. Chances are they see their business in a very close up skewed manor, not that they are wrong or their information is not valuable. Rather it is more important to learn as much as you can from their clients.

Once you have learned who the target market is you can start asking them questions. Sometimes the client will be willing to give you a list of names and numbers of those who you could interview, if not you can always take a look at your own network of contacts and politely ask them if they would be interested in answering a few questions at their lesiure.

Crafting the questions

Every situation will require a different set of questions so I can’t give you a boilerplate set of questions. Ultimately you should look at the goals of the site and develop questions that will help you figure out how to encourage users to accomplish those goals.

The common scinereo would be a company that is looking for more sales/leads/clients. There are a wide range of questions that you could ask their target market to help you find out what is most important to them when picking a product/service provided. Here are some examples:

• What factors are you considering when you are looking to hire someone to do X?
• How would you rank those factors in terms of importance?
• How do you go about finding someone you wish to hire in this situation?
• Do you value (insert unique value of client here)? why / why not?

I am sure you can think of much much more once you get started.

Look around and see what else is out there

Once you have a good idea of what the target market wants and what your client provides it is time to do some competitive analysis. See how their competitors are marketing themselves and what sort of features or information they have on their website. You can get a lot of ideas in terms of “wow this is a convention we should include this” to “here is something that everyone is missing but really should have.”

Additionally this will help you develop a unique selling position for your client (if they haven’t already decided on one). By marketing themselves with a unique value that no one else is they will effectively attract more sales by people who really care about that value element.

Using the research to develop a plan

Doing the research is only half the battle, the second half is to develop a plan based on the research. Yes I do realize that first I am not only recommending that you do research (barf) but now advising you to also write a paper (double barf). I assure you that it is worth it and your business will grow as a result of it.

I break my plans into the following sections:

• Goals / Objectives
• Target Market + Personas
• Competitive survey
• Points of resolution (questions, concerns and desires of users)
• Unique value proposition
• User paths (how a user would navigate through the site to complete a goal)
• Objective support (how we will encourage a user to navigate through the site to complete a goal)
• Measurement and success criteria

You could probably take it further than I do, as I am continually improving my strategy document and process. However I find that the most valuable part of the document ultimately comes out of the user paths and support.

This is because it takes the information about and from the target market and incorporates the goals of the site, then strategies of how we can mesh the objectives of the user and the site owner together. Consider the diagram I crafted for a client recently as an example of how this could work:

As you work through the user path you not only discover what should have the most visual emphasis on every page, where you should have a call to action (and what it should be) but you also tend to discover the missing “what would they want to do next?” link.

It makes good business sense

This document will not only help your clients succeed (which will in turn help your company), but it will also become something that you can bill more for. I have yet to come across a client who has looked through one of my example strategies and said “No, I don’t think I would pay for that.”

Not only does it bring in more work per client, it also differentiates my company vs my competitors.

The case for XHTML/CSS Style Guides

I have been working for a short while on a side project that I have already found very useful, and that is to develop a tool that aids in creating what I call a “CSS Style Guide.” There may be a better name for it, but the concept is quite simple, a guide for clients or website owners who will be maintaining a website after you have delivered it to them.

Style guides typically outline when you should use a H1, H2, H3, ordered lists, tables, etc… so that everything remains consistent and unified.

The interesting part about the style guide, as I have found, is that it often brings to light the incompleteness of our work as website builders.

Why the typical website building workflow leaves holes

The web is part coding (for lack of a better word) and design. The typical web design workflow starts in visual tools that represent a given page / interface and then moves into the coding and building of the site (working with text, markup, and style sheets).

What ends up happening is markup and design is only created for the elements that show up on those pages. Typically H1 – H3 (if that) and a few other design elements such as bulleted lists.

This is not great for a website that needs to grow, and a client that needs to maintain it. There may be a few rare cases where it makes sense to move all the way down to an H5 / H6.

However unless the designer thinks ahead to design a style for all common elements that fit with in websites needs, it will not have the same uniform approach that the rest of the well planned elements have.

This becomes esspeically important on any website that is content focused or content heavy.

It is bad for the website, the client and yourself if you never bothered to design what a “block quote” looks like and a blog post ends up failing to communicate that content is in fact, a quote.

What I suggest to do about it

I have learned simply through making mistakes, “agh crap, I forgot to style that.” You could just wait until specific elements need styling and have the client ping you, but that is not ideal.

Instead I have developed a simple one page “Style Guide” that lets you load or paste in CSS styling so you can get a clear picture of how the most common elements on a page look. It is flexible so you can easily see how elements wrap and/or how they look in wide and narrow columns.

Take a look, and play around

Feel free to take a look and play around with it on my server, or download it for yourself to use, update and improve.

I had a fair amount of fun just loading other peoples stylesheets to see how they stylized each level of heading and how far in the styling they actually went.

It is free to use, alter, etc… if you can keep a credit in the head section that would be great. I really would like to get more conversation around creating a guide to how a website should be styled and have it be a deliverable to clients who need it.

The importance of controling feedback and critique

Any designer who has produced work for anyone other than themselves knows how tricky the design feedback process can be. As designers we have very specific reasons for designing a site the way we do. We have expertise in rhythm, proportion, sizing, whitespace, grids and other graphic design concepts. Many times hours are spent trying different combinations, layout positions, usage of colors, etc… by the end of the work we know what didn’t work and what did.

When we present our work to a client / boss we have two unique and profound depths of insight that they simply don’t have. Communicating and being authoritative on the reasons you chose the design decisions that you did is a key element in ensuring that the client does not get in the way of themselves and end up with a weak design.

Every time I go through the process I think of new and better ways to approach it. To the point where I am currently developing a “script” of how to move from point to point.

My Feedback “Script”

1. Creative Brief

I start way before I even design. Before I even open up photoshop I write a creative/idea brief and deliver it to the client and ask them to sign off on it, to make sure that my thoughts and ideas on how the design should look and feel is in line with what they expect. This at least introduces them to my take on the design problem.

2. The introduction

I find the introduction is one of the most important aspects of the process. This is where it is important to explain how you are going to conduct the feedback and review process, what should be considered and why, and how to give feedback in a way that will benefit the design process rather than hurt it. The following list a general process of what I talk about:

1. We are going to review the designs, I will explain why I designed things the way I did. At this point please hold any feedback until you have conferred with everyone over a few days, and we will reconnect to talk about your thoughts. It is important to discuss feedback and revisions rather than firing off gut reactions.
2. Remember that design is subjective, everyone will like things differently. What is most important is that your clients / users like best. Think about things from a user perspective, not your own.
3. I rerun through my creative brief that was approved. We decided that we were going to design in this fashion because… remember that you agreed.
4. This is not just visual style, but more importantly what it communicates.
5. When you do give feedback tell me what does not work and why. Direction is counter productive, as one change alters the balance of the whole design. Let me what needs to be fixed and I can sort out the design problem.

3. The explination

I will walk through why I chose to design the way that I did for each design. I am learning that it is better to jot down notes during the design process and before the actual review, as I have a tendency to rush through it and miss many important details. Including all of the details is extremely important to help flesh the idea out in your clients mind as well as establishing yourself as an expert.

If the client gets the impression that you are just throwing paint onto a digital canvas they will have no reason to trust your design choices over their own, and why should they if it doesn’t sound like you had any reasoning behind the layouts.

4. Ask for questions

At this point I normally ask if there are any questions about the designs. I am finding it is best at this point to reiterate that we will reconnect for direct feedback in a few days, as this is often a point where it becomes hard to resist expressing ones opinion (and it is understandable).

I don’t normally get many questions, which could mean there is some optimization that could be done in this step of the process.

5. Getting feedback

When reconnecting for feedback I like to go through each item one by one, and have the client not only explain “what” by “why.” Not only does this give me better insight, but also forces the client to really think about the importance and context of the revision. That is not to say that the revisions are invalid. Rather that if there is a request that is not the best of choices it does set you up to say “You may not like the extra contact link, but a user who is 5 minutes late to a meeting and needs your phone number to call on the way to your office will sure appreciate it.”

6. Next Steps

Confirming what feedback and revisions you will act on and which ones were decided to be unnecessary (by the client and you collaboratively.) Sometimes if I think that one avenue is going down a wrong path and I can’t convince the client to agree otherwise I will ask permission to do two concepts to demonstrate my point of view.

How do you handle feedback?

I have yet to see a process that feels and works perfect anytime. Any thoughts/ideas/stories on how you go about handling the feedback and review process would be wonderful.

The Gutenburg Diagram in Design

We are fortunate to be a part of the web design as it has begun to reach a level of maturity. With advances in technology and prominent bloggers publishing great information on design concepts such as using grids, baselines, art direction and the rule of thirds (among others) we are able to work with the design of websites on a much higher level than even a few years ago.

However there are other principals of design that have yet to get ample amount of attention or usage. One of these principals is the “Gutenburg Diagram,” which you have likely used on some level with out realization.

How the Gutenburg Diagram Will Improve Your Design

The gutenburg diagram is a method of understanding how cultures who read right to left, visual navigate a composition, and how to optimize layout as a result of it.

Since we are trained to read from the top left to the bottom right naturally, we instinctively sweep a composition starting from the top left down to the bottom right (often several times).

As information hierarchy and visual emphasis are such critical parts of design, knowing how a user is going to look at your site despite design can lead to a much more effective layout.

How the Diagram Works

The diagram dissects the composition into four quadrants. In this case since we are designing for the web, it will be dictated by the screen resolution and location of the fold.

The upper left quadrant is the first area that a users eye will focus on. The eye will then sweep downward crossing the center or intersection of all four quadrants, before coming down to the bottom right hand quadrant.

The upper right quadrant and lower left quadrants are called fallow areas. The top right is a strong follow area, where the lower left is a weak follow area.

These areas will receive little visual attention unless they are emphasized through design. The top right will receive more attention than the lower left all other things equal.

Using the Diagram for Excellent Web Design

By understanding and working with the diagram we can maximize the effectiveness of our designs by using it to our advantage. It is probably a good thing that web convention puts the logo in the top left of the screen. It will be the first thing that users see, tell them where they are as well as help brand the website.

De-emphasis

Since we know that the bottom left and top right quadrants will receive less visual attention, we can put less important elements in those areas. You may have noticed the convention that puts secondary navigation links in that area, such as client login, rss feed, etc…

This is a perfect use of the gutenburg diagram, as such navigation is not nearly as critical as the primary navigation. However those who are looking for it can still find and use it when needed.

Place important visuals and content consciously

As you design down the page, you may also want to consider moving more important content or visuals into the path of the diagram. If you have a choice, place important content at the fold on the right hand side of the design rather than the left. A common occurrence would be swapping content for a image left to right, to place greater emphasis on one or another.

You may also want to reconsider placing the navigation in a right aligned manor, as you are unlikely to place it at the bottom of the composition anyways.

Examples of the Gutenburg Diagram

OH Tele

Rocket Club

Revyver HQ

Wellness Class

Final Thoughts

The Gutenburg diagram is not gospel. Once you start playing with visual emphasis and weight, how a user looks at a design can drastically be altered. However the idea is to use the diagram to your advantage and use our instinctual way of looking at a design to strengthen the layout and composition.

We are all consultants

I have never been the type that has been overly pushy about my opinion. In a lot of ways that has helped me in regards to my business, as there have been times where I disagreed with a client I was able to quietly sit back and do things their way rather than offend them and potentially damage our working relationship. However this is to their disadvantage as well.

As web designers (regardless if we are part of an internal department or freelancers) it is pretty easy to fall into a “well I will build what you tell me to build” sort of mindset. Because people use the internet day in and day out they tend to gather a whole list of things that they think they want on their website, with out really much thought that goes into it.

The result is you get a list of items “We want blah, blah, blah blah, and blah…” of course the easiest thing to do is to simply nod, smile, and build it the way they want it. After all, battling and educating the client / boss / etc is really just unpaid time and frustration.

This is even more difficult when you are a freelancer, business owner, or sales person. As you could spend hours working out what the potential client really wants, only to have them take your spec sheet to a cheaper firm.

Despite some potential draw backs, we are all consultants when it comes to the web. We all have a much better understanding of what will work, what is/isn’t a good idea, and the best way to make a website a success than anyone who would be hiring us. It is our job to consult, recommend, and make suggestions every step of the way. Even if it results in unpaid hours now, it will further your career later.

I have found that several potential clients love the initial process of suggesting, recommending, and discovering what they really need in their website. It has helped seal jobs before, as they felt not only did I better understand their needs but I had a level of creativity that the other firms did not.

A tricky aspect of this situation is a joint worry about scope / price creep. You obviously don’t want to do more work than you get compensated for and the client doesn’t want the price to rise indefinitely. Especially at the start of an engagement, it is very comforting to know that X dollars will be exchanged for X specific deliverables.

I have started a new process of engagement that protects the client and yourself from scope and/or price creep. The normal meetings and proposals are pretty typical and standard, I issue a price that states “If nothing else changes, this is exactly how much you will pay for these items. However we will do an initial kick off meeting to dive into your company, brand, customers, and needs that could change this scope to be larger or smaller.”

The reassuring factor for the client is that they know they can always just choose to do what was originally on the table. However if a great idea comes up in the kick off meeting they can opt to incorporate it as well. The reassuring factor for you, is that if you suggest a change you know there is an understanding that it won’t be free.

This also includes shrinking the scope, as needed. There have been times where I have suggesting removing pages, features, and functionality because it wasn’t going to make an impact compared to how much it was going to cost. A lower price is always a welcome surprise from a clients perspective.

So next time you are about to start a project don’t consider yourself the builder, consider yourself the architect. It is your job to use your expertise to ensure the website that is built is as effective and successful as possible.

Better design by brushing up on your techniques

I often fall into the trap where I limit the scope of my design capabilities by what techniques I have learned for my design tools (in this case photoshop, and illustrator.) You may not realize it, (and I often do not either) but the techniques that you don’t know actually hinder your overall design capabilities.

Even if you have been through graphic design school or experienced in fine arts, you will still suffer from a narrow design capability if you don’t work to learn more about these tools. This is because there are techniques you could use but don’t even realize are an option while creating a new piece of work.

Photoshopers vs Designers

I see two different skills related to this subject, “Photoshopers” and “Designers.” I used to be very specific about calling myself a “designer” over a “photoshop guru.” The reason being that photoshop gurus tend to be amazing at altering photos, or developing incredible works of digital art in photoshop (sometimes making the surreal look real.) Where design requires functionality, usability, balance, and finesse. These are two different and specific skills, however it pays greatly to have both.

Getting to my point

When you are working with a design, even if you have done sketches, thumbnails, etc… chances are you are not even considering some great design accents because you simply don’t know how to do them. Maybe you don’t even realize that they exist as a possibility. If you were to know about them, in the right moment you would realize said technique would be worth trying and it would raise the quality of your work.

You may be looking to create a specific look, feel, or develop a specific mood. Naturally you will be thinking in terms of “what can I do to achieve this goal?” However “what can I do?” is actually “what can I do to achieve this goal that I know how to do?”

This is why it pays to take time to continually expand your skills and capabilities with your tools so that you have a wide range of available technique and have more to select from. Eventually you will have thousands of techniques and capabilities to create a wide range of moods/impacts/feelings/etc, and won’t be limited to the basic techniques you have used in a hundred of your old designs.

Long story short, you should have the skills and capabilities of a photoshoper with the design fundamentals of a designer.

Some Examples

You can often tell which designers have not only mastered the fundamentals of design but the tools used to create the work as well. N Design Studio and Veerle are two excellent examples of this. In the case of N Design Studio, Nick La clearly has a great sense of design. His work is balanced, the typography is well crafted, and the color scheme communicates a specific message. However he is able to take the design to a whole new level by some of the advanced as well as stunning techniques he has learned.

If you take a look at Avalon Star you will notice the same trend. Again the designer has a clear mastery of design fundamentals. So much so that the site would be very well designed even with out the level of detail put into it. However he is able to create a truly memorable, high impact design through his understanding of photoshop.

So what am I saying?

If you have time it is worth while to practice your photoshop/illustrator skills as often as you can. With so many great tutorial sites available, there are always new techniques and methods to learn. Below is a list of the ones I follow,

• PSDTuts
• VectorTuts
• Smashing Magazine
• Verlee
• Web Designer Wall

What sites do you follow for tutorials?

Effective Web Copy

I am often frustrated with how little attention is put into the messaging on most websites. It seems that you run into two scenarios when faced with web copy. The first is that the website owner has the writing done internally and then edited professionally, and the second is that their is a professional advertising/marketing agency that writes the web copy because budget permits it (however most of the time the copy is better suited for print than the web).

The result of either of these situations is poor and uninspiring web copy. The messaging does not compel you to read it nor does it inspire you to learn any more about the product/service/offering. The worst offenders for what ever reason tend to be web design companies themselves. If I see another “We create beautiful sites based on web standards blah blah blah” headline I just might crack.

Effective web copy must be short, to the point, and focus on the benefits that you are offering the user. It needs to be presented in a way that takes little effort to read/scan, and should immediately give you the option to jump to the next stage of the conversion funnel. From attention to interest, interest to desire, or desire to action, etc…

If you can’t stare at the screen for 10 – 15 seconds and immediately be able to describe the unique value of your product/service than your web copy has failed. Keep in mind that the communication of the unique value will always come from the copy and not the design. A design might tell you something about the quality, attitude, or brand of the site but a design will never tell you that “The unique materials make North Face clothing the strongest and warmest gear with out extra weight or bulk.”

Lets look at a web design company that does it well. WebpageFX has extremely well crafted messaging in their flash header. Despite some potential usability issues, when you do find the good messaging it is very clear, compelling, and professional. Try click on the little circles in the bottom left hand corner and watch the simple clear messages and how they are enhanced by design but not replaced by it.

You understand the benefits of complex services very quickly, including mobile web, analytics, etc…

This could even be done with out flash and still be effective because the simple clear messages work so well. So when in doubt try and simplify what you are saying and really focus on making the value and the benefit clear.

Using Grids for Spatial Awareness

In my last post I talked about the importance of spatial awareness and some basic details about what “spatial awareness” actually is. I alluded to the fact that the best way to refine your designs spatial awareness is to use a grid system, that way all of your placement and spacing of objects and elements is based on the same mathematical system. While subtle, this can have a profound impact on the quality of the design that you are creating.

The first step is developing or downloading a grid for use in photoshop and your mock-up. With so many quality grid PSD’s out there it might not make sense to create your own over adapting one that has been fleshed out already.

Here are some grids you can try:

• Designified 960px Grid
• Critical Web Sample Grids
• Blueprint CSS Grid

I have gotten used to and like the blueprint grid, as I have adapted the use of blueprint and quite like it.

Next Steps

After you have opened up your grid rather than starting to design like you normally would it pays to spend some time to just block up elements and the space that they will use. This will help you see how the visual weight of elements will effect the page in addition to how space is used (and not used, remember that negative space is just as important as positive).

From here you should have a good idea of how elements relate to each other, how does grouping effect elements relationships, etc.

Lets look at the detail closer

As you can see all of the margins, spacing, gutters, etc are all a multiple of the same initial gutter. This creates a very balanced and polished design that would likely feel very different had we just tried to eyeball the spacing.

When two elements have some relationship to each other I only use one length of the gutter (or none), where if elements are of different content/context they use three gutter lengths. This visual separation tells the user that the elements are not related, but by keeping the rhythm of the design consistent it never feels like an element is out of place.

It works for Typography as well

Last year there was a lot of discussion and awareness of the “baseline grid” in typography. Simply put, developing a baseline grid for type ensures that all of the type regardless of size lines up on the same grid. Using these sorts of grid systems helps you develop that baseline grid as well. Here we can see a close up example of two type areas and sizes on the page and how they line up in addition to the spacing and awareness of other elements.

So pay attention to spacing

Even if you are not looking to do a very organized content intensive site the use of grids to help plan and space out your elements will create a much more polished and clean design. The time it takes to actually create proper spacing will pay for itself as your portfolio and quality of work improves dramatically over time.

If you have any tips/hints/resources/ideas related to grids and space feel free to leave a comment below.

Structure Your Flow for Conversion

“Optimizing Landing Pages” is an on going series that will total 20 posts. The series is written by 3.7 DESIGNS and Ross Johnson to help web professionals build sites that achieve specific business goals. This is post 4, and the topic is “Structure Your Flow for Conversion.”

Any website that wishes to achieve conversion needs to have a plan and strategy for proper flow to the conversion point. This means that any users who lands on your site should seamlessly move through the information on your site resolving any questions they need answered and moving through the AIDAS funnel until they convert.

The major reason we must develop a flow on our sites is to maintain proper momentum through out the sales funnel.

Why is the momentum important?

Momentum is what keeps a user interested and dedicated enough where they will take the time, effort, and money required to convert. Thing about it from your own experience. Have you ever found a product while shopping that you were very excited about, only to be unsure if you wanted it by the time you reached the counter? Maybe you ended up putting that product back.

That happened because you lost momentum during the shopping experience. Despite feeling like the product was going to solve a problem or fit your needs initially, by the time you went to purchase it you were no longer sure.

Planning your Flow

In order to plan the flow of your conversion funnel you must look at the following key areas:

• The Driving Point
• Points of Resolution / Waypoints
• Conversion Beacon
• Conversion Point

The Driving Point

The driving point is the first action that a user takes that indicates some level of interest in your product/service. This may be clicking on an advertisement, search listing, typing in your URL etc. Something has caused the user to take the time to visit your site (and hopefully not by accident). That something is the driving point.

Your goal from the driving point is to grab the users attention and interest, and guide them into the sales funnel.

Points of Resolution / Waypoints

The driving point is what will get the users excited. This is where you would initially see the product you saw while shopping and start to examine it with the thought of putting it into your shopping cart. Keeping the momentum going from the driving point through points of resolution and waypoints will mean the difference between conversion and exiting users.

Points of resolution and waypoints are non-linear pages that answer questions that the users have that must be answered before they will convert.

A user may or may not view one or all of the pages you craft as points of resolution. There will be no particular order to the viewing of these pages either. It is important that the pages are easy to find in the event that a user has a question that one of them will answer.

As soon as they have to start hunting for the answer to their questions they will just as quickly begin to assume that your product/service is lacking in this area and that’s why they can’t find information on it.

Make your waypoint pages easy to find using in text links.

Conversion Beacon

From every waypoint / POR page you should have a call to action that leads the user to your conversion beacon page. This will keep the momentum and flow of the process high, as the user will not ever have to think about the next step. As soon as their questions and objections are resolved they can effortlessly step into the next step of the process with out hesitation.

The conversion beacon is the first step in a linear process that leads to the conversion point. The most common situation would be clicking on “checkout” on an e-commerce site. From that point the user must walk through several steps before actually converting.

However this could just as easily be clicking to a contact form where the user must fill out the form as the second step of the process.

Conversion Point

The conversion point occurs when there is no doubt that the user has in fact converted. In most situations this is a confirmation page, either displaying order data or noting that the contact form had succuessfuly been completed and sent.

Conclusion

By planning the flow of your site for conversion you can map out how to lead users from the driving point, through the points of resolution, into a conversion beacon and finally taking action and converting. Failure to plan out these steps almost always results in a user losing momentum somewhere along the pathway and losing interest.

Writing for Personality Profiles (Optimizing Landing Pages, Part 3)

“Optimizing Landing Pages” is an on going series that will total 20 posts. The series is written by 3.7 DESIGNS and Ross Johnson to help web professionals build sites that achieve specific business goals. This is post 3, and the topic is “Writing for Personality Profiles.”

As much as us designers would like to think that conversion is heavily based on visuals and aesthetics, the truth is that the content of a site is really where you get an opportunity to persuade users to convert or take action. Now that isn’t to say visuals isn’t important, the visuals are extremely important; it is just important at different stages.

Points of Resolution

When a user comes to their site they are always going to have questions that need to be answered before they take the action that you wish them to take (or in other words convert). These questions are called “points of resolution,” and as a web site strategist it is your job to anticipate these questions and answer them.

Some typical points of resolution could be:

• Does this site offer what I am looking for exactly?
• Does this site offer a solution to my problem?
• Can I trust this site with my information?
• Can I trust this situation will work?
• Will I be able to establish a long term relationship with this site?

Personality Profiles

The tricky part of this process is that users are going to have a variety of different questions, and all of those questions will need to be answered despite the fact that they will be different.

To simplify the development of content and prevent the need to stuff the page with more content than anyone will read we look to personality profiles. Using personality profiles we can anticipate the majority of questions that will be raised, and how to answer them in an efficient way.

Methodical

Some people just want the hard facts, and these people are often described as “methodical.” Where others want to know that they will be well taken care of, the people on the phone will be nice, etc… Methodical people are not those types of people. Instead they want data, diagrams, facts, proof. They will sit and read through detailed copy about how your product or service will solve their problem and they could care less about anything else.

Spontaneous

A spontaneous person wants excitement, acceptance, they are flexible and open to new suggestions even if it doesn’t feel like the perfect fit. They are much more likely to make a purchase or action based on the idea that they will gain a higher status or fit in because of it. Reinforcing a strong brand or establishing high credibility through testimonials can really catch the attention of a spontaneous user.

Humanistic

Humanistic users value other peoples needs before theirs. In most cases they are looking for evidence of being able to establish a long term relationship with a company. They don’t want to have to hunt for a new company to work with every time they have a need, they want to have their contacts with in a company and know that they will be taken care of. Consider the use of testimonials to show them that previous customers have been delighted with your service and approach.

Competitive

Competitive people want to win. They are controlling and goal oriented. They are looking for accomplishment, and your product or service needs to be the key to their accomplishment or they are looking elsewhere. They want a guarantee that what you provide will work, no questions asked. Even if it is a personal guarantee it means something.

Putting it all together

Of course you won’t know exactly what type of user is going to be viewing your site, so the trick is to write for all users in an engaging way. That way the user will self select what portions of the copy are most important to them. Further, you can provide in-text links to let them click to more detailed information and answers to their point of resolution.

For example:

You will be excited to know that all of our search marketing strategies use a time tested strategy that ensures success for every client. The approach has helped thousands of companies succeed, and we are equipped to meet any objective that you may have. Beyond the strategy to make it work, we are your partner in success. We are not happy until you see results. You will be accomplish your goals, we guarantee it.

As you can see even if you were to scan the text you could pick up on the important details, and click the in text links to learn more and have your questions answered. No matter what personality type (or mix of personality types) you have the opportunity to get your concerns answered so you can move to the next step and take action.