Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential...

22
DESIGN EVALUATION | Fleet Credit Card Public Site Landing Page ©2002 Tallán – a CMGI company. Confidential Information. Reproduction or disclosure prohibited. DESIGN EVALUATION OF: Fleet Credit Card Public Site Landing Page Evaluated by: Dave Harland, Director/Creative Practice May 6, 2002

Transcript of Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential...

Page 1: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2002 Tallán – a CMGI company. Confidential Information. Reproduction or disclosure prohibited.

DESIGN EVALUATION OF:

Fleet Credit Card Public Site Landing Page

Evaluated by:

Dave Harland, Director/Creative Practice

May 6, 2002

Page 2: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2002 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 1

Table of Contents

Evaluation .....................................................................................................................................2 High-level First Impression ....................................................................................................................2 Perspective and Assumptions................................................................................................................2

ROI on Usability-Engineered Design ..........................................................................................4 Technical Breakdown...................................................................................................................6

Page 3: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2002 Tallán – a CMGI company. Confidential Information. Reproduction or disclosure prohibited. Page 2

Evaluation

High-level First Impression Although the initial visual impression of the Fleet Credit Card Services landing page is positive, a number of information presentation

and navigational issues are quickly apparent. The style treatment is professional, clean and balanced, and provides a crisp, forward-

looking approach. The color and font palette selections offer a fresh and orderly texture to the site and are the source of the positive

first impression. Unfortunately, the underlying design (structure) and content to which the visual style is applied, detract from the

usefulness, or usability of the page, causing the landing page to more closely resemble a pop-up ad than an active product merchan-

dizing and product information portal.

Perspective and Assumptions Without more in-depth business, user, and competitive analysis, it is difficult to define the target audience for the Fleet Credit Card

site. In addition, for the purpose of this brief analysis, the important step of mapping the business objectives to the user goals is not

considered. We will assume that the primary business objectives behind the site are similar to those of banks and comparable

financial institutions:

! Increased sales opportunities

! Reduced support costs

! Increased customer satisfaction

! Increased brand loyalty

We assume the primary user goals for the Fleet Credit Card site are two-pronged based on the user type; those users who are

current card holders who want to access and manage their account online (or enroll to do so), and those users who have been

directed to the site by an existing marketing initiative (direct mail, email, partner referral, banner/pop-up ad, etc.) or search results.

These two primary users have different goals and their focus is different, requiring distinct tools to accomplish their goals.

1. We see the first user as the key player in the success of the site and its contribution to profitability. A user visiting the site to

access and manage their account is the captive, higher-percentage audience member. They have already demonstrated their

trust in Fleet by becoming a card member. Therefore the corresponding business objectives for them should be retention, refer-

rals and cross/up selling. In this case, brand loyalty, customer retention and increased sales opportunities come from providing

the user an environment that:

! Focuses on content and information relevant to accomplishing their goals

! Offers functionality that allows them to accomplish their goals quickly and successfully

! Is easy to use and does not make them feel lost, confused or worse, ignorant

Page 4: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2002 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 3

2. The second user is a shopper and a skeptic; they prefer to go online to investigate and compare on their schedule. They have

been driven to the site through a marketing initiative and their goal is to research the details and determine if there exists a

“catch” attached to the offer. They will not spend needless time hunting to track down the information related to the offer. If the

process throws roadblocks in their path they will promptly move on to investigate another offer from the next company on their

list.

Page 5: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2002 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 4

ROI on Usability-Engineered Design

The online user experience is the total interaction with the site including ease-of-use, content, and function. A positive experience

leads to brand loyalty. Even though consumers, business customers, and site executives underscore the need for a great user

experience, most web efforts don’t deliver.

Facts:

• Buyers give up on two-thirds of shopping attempts. Top barriers are poor labeling, ineffective search, and a broken checkout

process1.

• Consumers find little value in content provided on retailers’ sites. In fact, eighty-four percent of active prospects expect sites

to provide the best product/service information yet less than half claim they find relevant and complete content2.

• Only nineteen percent of consumers trust the information regarding retailers’ products/services but sixty-four percent would

but direct from the site if they trust the brand1.

• Seventy-seven percent of users return to a site because of ease-of-use while only twenty-two percent return because the

site belongs to a favorite brand3.

Solution

The real benefit of having a well-designed site is the fierce customer loyalty it generates. But overcoming the primary challenge to

success is cruelly simple. It boils down to satisfying users’ desires (not needs) that correspond to business objectives. But the typical

path for defining site content, functionality and merchandising is counterintuitive to that idea. Three primary perspectives exist when

defining these areas:

• Capability – perspective of internal technologists asking, “What are we capable of?” or, “What is possible?”

• Viability – perspective of business stakeholders asking, “What is viable?” or, “What can we sell?”

• Desirability – perspective of user-centric designers asking, “What is desired?” or, “What do people want?”

The first two usually create tension because business stakeholders are totally dependent on technologists for their ability to create

things that work, and technologists are totally dependent on the stakeholders to provide them with the tools needed for their efforts.

Site developers like to add features and functionality to their sites and find a creative challenge in making the site’s inner workings

run at a high level of efficiency. On the other hand, business stakeholders like to own market share and sell lots of products and

services. They find a challenge in motivating people to buy their offering. In an expression of viability, many stakeholders can be

happy without ever launching a technically sophisticated site.

Page 6: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2002 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 5

Although the two sides depend on each other, their divergent goals create a structural weakness in their relationship. It is like an

unstable, two-legged stool that needs a third leg for balance. Usability-engineering design professionals must know what will make

people happy and satisfied. A product or service can’t be a long-term success unless it delivers power and pleasure to the people

who must actually use it.

Although it is possible to draw out something desirable in an existing site, it is more sensible to first decide on what customers will

find desirable, and then challenge the technologists and business stakeholders to build and sell it. This approach yields significant

advantages to the savvy player. It pulls a company in front of the competition. While competitors are back in the pack, reacting to

each other’s competitive moves, wrestling with “possible” and “viable” questions, the savvy company is out in clear air focusing on

their customers’ unmet desires.

Page 7: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6

Technical Breakdown Below is the landing page comp received from Fleet:

The style treatment is professional, clean and balanced, and provides a crisp, forward-looking approach. The color and font palette selections offer a fresh and orderly texture to the site and provide the source for the positive first impression. But as a page, it resem-bles a pop-up ad. Users are inundated with these types of ads and are progressively less receptive to them. Many users ignore them, or anything that resembles them.

Page 8: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 7

Example 1

Page 9: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 8

Example 2

Page 10: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 9

Example 3

Page 11: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 10

A number of structural issues create roadblocks to users achieving their goals. Addressing these will help increase customer satisfac-tion, brand loyalty, and conversion rates, while decreasing customer service support costs.

Page 12: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 11

The user’s primary area of focus is critical to success. On this page the content provided in the highlighted area emphasizes issues inconsistent with the typical user’s focal point. The tools they need to achieve their goals successfully and quickly are hidden. Al-though cross selling and up selling are important goals as well, the product and service messages need to be strategically placed to provide better “stickiness”, appealing to the user at the right place and time.

Page 13: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 12

Users prefer to scan a page to find what they are looking for, particularly the site’s point of entry page. In the Fleet comp, the copy in the primary area of focus (highlighted areas “a” and “b”) is wordy and overwhelms the user with poor “scannability”. This area must deliver the site’s message concisely with clear direction to the location of the tools needed for the user’s success.

Page 14: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 13

Under our assumptions of the target audience, the primary objective for most users is using tools to help them quickly and success-fully access and manage their accounts; or enroll to do so. Also, many users are concerned with online security, privacy, and want reassurances that the site owners are diligent in protecting them. Although the business objectives may be to increase sales, de-crease support costs, etc., these “tools” must still be prominent to the user for both parties to be successful in meeting their objec-tives. Although it seems efficient and consistent to place this critical information in an area of the page accessible anywhere within the site, the “tools” in the Fleet comp are away from the primary area of focus and may be overlooked by most users, especially on the landing page. Also, without proper explanation, users may not know what the login boxes are for and whether their information is secure. Labeling is critical in this area. What is “Site Use” to the average user? Will they take the time to find out? Will they be frustrated if they click on the link, read the explanation, and realize that it does not refer to the same information they are looking for?

Page 15: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 14

These links appear to be an afterthought. Although Fleet provides valuable information attached to these links, their placement, cloudy labeling (“Have your own Website?” is very ambiguous), and color/font dilute their effectiveness and value.

Page 16: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 15

Fleet has strong brand recognition and that brand is leveraged skillfully on the Fleet Credit Card site. The online brand translation is clear, professional, and best of all, understated. It is carried out in the color and font palettes and solidifies the strong brand image. However, the brand image can be diluted by a poor online experience so structuring the site to the users’ desires is not only critical to maintaining, but escalating, the brand image and brand loyalty.

Page 17: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 16

Navigation labeling is critical to any site. An effective navigation scheme comes from diligently defining the site’s information architec-ture and content classifications. The labeling on the Fleet Credit Card site seems ambiguous. In addition, Fleet has provided links to very powerful content under the headers in the form of dynamic drop-down menus. Although this saves screen real estate, it can detract from the online experience. The user is forced to play a mental game of “Concentration”, remembering where they saw a particular content link. This type of “mystery meat” navigation can be dangerous but is sometimes a necessary evil. In the case of the Fleet Credit Card site, labeling the main navigation more clearly and pertinently, and ensuring the content is classified as users expect, will mitigate the effect.

Page 18: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 17

Review of Current Comp

Page 19: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 18

The first, “quick and dirty” approach was to add more white space, reorganize the tools slightly, and cater to the users’ goals. How-ever, the branding is diluted by too many invasive diversions from the site’s current style.

Page 20: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 19

The second iteration was an attempt to delicately merge the objectives of the user and Fleet. The tools are better organized and weighted according to our assumptions. Although the style treatment is pleasing, it still carried too much confusion and an air of a “pop-up ad.” The color style varies slightly but may vary too much from the current style and could cause brand confusion/dilution.

Page 21: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 20

The third iteration achieves a number of things. First, the landing page appears less as a “pop-up ad” and more like a point of entry for a site addressing the goals most users come to achieve. Plenty of white space is provided to provide an open, clear, sense-of-purpose feel. The site’s current style treatments are consistent with no variations. The primary area of focus is geared toward the two key users from the target audience; current card members and those looking to apply. The tools needed for the first group (color-coded blue) are at the top. Current enrollees can login and those not yet enrolled are provided a brief list of benefits including a link for the demo and the FAQ. The second group (color-coded green), those researching Fleet’s offerings, or those responding to a marketing initiative, are also provided the necessary tools in the primary area of focus. Three choices exist:

1. High-level choice based on usage. a. Personal b. Business c. Not Sure – some small or home business owners may want to see both

2. Known-item selection – if the user knows the particular card they want to research/apply for 3. Incentive Code – if Fleet has attached a code to a marketing initiative (e.g. email or direct mail special offer) that can

identify and track the effectiveness of the campaign, users enter it here Unsure of Fleet’s current site capabilities, we added a search box at the top of the page for those users who prefer to search for information rather than browse. Also, the links on the right are labeled and weighted accordingly.

Page 22: Evaluation-FleetCC landing page - lockerngeist.com · Landing Page ©2001 Tallán. Confidential Information. Reproduction or disclosure prohibited. Page 6 Technical Breakdown Below

DESIGN EVALUATION | Fleet Credit Card Public Site

Landing Page

©2002 Tallán – a CMGI company. Confidential Information. Reproduction or disclosure prohibited. Page 21

The marketing and merchandising dimension1 is also kept in tact. The idea of strategically placing the right messages is key. We moved the Power Rewards info to the right but also included a “pile” of Fleet’s cards in the primary area of focus. This markets the breadth of Fleet’s offerings but is not invasive to the process of users achieving their goals. This is not a complete assessment of the Fleet Credit Card Website landing page, but is offered as a quick reference to our design perspective.

1 “The Best Retail Site Design”, October 2001, Forrester Research 2 “The Manufacturer Growth Spiral”, June 2000, Forrester Research 3 Forrester Research, Inc.