Visa

Posted by admin on August 4, 2008; This entry is filed under product design.

Visa web site
Designing for the on line community
Key words :web design , multimedia, on-Line branding, information architecture
Skills used: graphic design, flash web interfaces, illustration,

Background
In 2001, CAL- one of the biggest Israeli credit cards companies (issuer of VISA, Diners and MasterCard) – was about to change its brand entirely.A new law allowing all credit card companies to issue all credit cards, has turned this market segment upside down, and caused many changes that these companies had to face.The brand change was part of a strategic plan that meant to keep the loyalty of CAL’s existing customers, while acquiring new potential clients.

The New brand

  • Enriching the individual’s possibilities
  • Smart choice
  • Credible and accurate
  • Enables the “good life”
  • No limits!

Shifting online
To create the online brand we outlined the company’s goals and expectations from its online activity, defined the site’s users and their needs, used the new brand’s definition and built CAL’s online presence accordingly.Company’s goals:

  • Position the company as a credible financial institute
  • Expose CAL’s new brand
  • Attract new customers
  • Expand the brand experience to the web
  • Create emotional link to the brand (the company)
  • Provide a local alternative to the international brand

Potential users

  • CAL credit card owners (looking for ways to monitor their activities, learn about benefits they can get from the company, looking for information)
  • Competitors’ credit card owners (Looking for information, comparing CAL to their current company)
  • Users range in their computer literacy levels (from computer savvy to novice users)

Our solution

Structure

We designed the CAL website as a meta-site that contained 4 components:
Main CAL’s website This corporate site provided the user support in this brand change. The user could read about the change, benefits and instructions for farther action. It also contained messages which increased the user’s reassurance on the brand and tried to convey the promise embodied in the new brand.
Credit card sites (Visa, Diners, MasterCard) Cal’s sub brands provided unique attributes in their content. Their look and feel was changed and redesigned to look as part of cal, with minor color changes. Each brand provided different information and offers which suited its audiences and values. Visa approached the family in general, and aimed to expand and change the family life style by offering wider financial capabilities. Diners aimed to the 40+ year old community, and offered entrance for “members only” leisure club. MasterCard dealt with the practical values of the card and daily activities such as shopping and bill payments. The differentiation remained mostly by context. Our image selection fro each brand tried to unify and bring them all towards Cal’s identity.Monetary tools and services where the users can perform actions in their account, supplying current customers with meaningful and useful ways to handle their monetary issues, and assessing the company’s credibility. These services included “Safe cal” software, “Cal Direct”, Personal status monitor etc.Promotional and Proactive features that would enhance and strengthen the link between the company and its customers. These features include: newsletters, presentations, downloadable screen savers and more

Appearance
The visual guidelines we set conveyed the “No limits” and “Enriching the individual” concepts. A unique approach to the corporate portal was created to reflect the uniqueness of the company.The screen was treated as a limitless space, without definite borders, where navigational and content elements are juxtaposed on its surface, creating various compositions, which implied on the extensive opportunities the customer has when using CAL’s credit cards.
To emphasize the brand’s message we based the design on modular shapes (mainly rectangles) that would enable us to keep a flexible yet recognizable structure, without using a constant grid. The dynamic compositions were assembled from asymmetric elements and colored with energetic palette. The forms were floating on the white space, detached from the browser borders.The rectangles were chosen for their multi-purpose shape, and because they comprise CAL’s new logo.The message was that no rules apply when using CAL. Each person can shape their own world according to their needs and desires.

Quick tour around the site

Brand enhancer’s

Enhance trust: use “real world” insignia to support online credibility.
All the home pages contained Cal’s brands stamp to assure the user that there’s real, respected company behind this site.

Teasers and promotions:

 We have supplied Cal’s site with a section where they could announce important marketing information
  • As dynamic graphic teasers for the main promotion event
  • As a textual form, revolving upwards for the rest.

Promotional banners, both in flash and other technologies, were added through out the site.

Cal’s navigational system

(3)

Putting method to the madness, we devised the goal-oriented navigation system, which remained consistent all over the site.

This system included the top bar , side bar and icons (which used the square element from the logo).
The top bar – Global site navigator
 
The top bar is used for general tasks and navigating between the different brand’s mini sites – which was not a common task. Its secondary use was to remind the user of the brand’s presence and retain their trust in the brand.The side bar – Activities menu
The side bar is the actions bar. It contained each brand’s marketing and promotional information as well as Cal’s “Online services” section.The side bar slides down and opens to present the relevant links, every time the user chooses a category.Cal’s “Online services” is the marketing tool for promoting the different online programs (such as credit payment, credit reports), and is frequently used to view new and upcoming campaigns.From “Cal on line” the user can also enter directly to online services.

Example of an inner page

The inner content pages maintained the same look & feel and the rectangles/ No boundaries motive continued.

Cal’s Sub brands

A separate web site was created for each card type, assuring that each customer can find his or hers private place within the site.

Each brand had its unique attributes within the general brand. That was clearly shown at the proportions between the Cal and its sub brands logos as well as using components that were identical all over the site.

Each brand had its own teasers and information section.

Visa’s site
Visa’s was the most important of the sub brands’ sites.It had additional sales and marketing tools as well as various content areas,which were aiming to support the brand shift.Visa’s imagery leading motives were “dynamism” and “border crossing”, conveying the notion that Visa is everywhere, and is constantly on the move, to adjust to the user’s changing needs.

MasterCard’s site
This site’s aim was to introduce MasterCard to new users. We tried to deliver the message that MasterCard’s users are winners, and with the help of their credit card they can achieve any goal they set to themselves

Diner’s home page
Dinners had to provide reassurance to its users with excessive trust areas as well as promotional teasers.As a “high class” credit card, Diners strategy was to display the good life and promise a better, relaxed and luxurious future for its holders.

Online Services
Cal online services had two purposes:

  • One was to encourage card owners to join the extra net and to enjoy online services.
  • The other was to provide educational information on the different services.

The page was divided to introduction (1), which listed available benefits, gentle emotional promotional clip area (3) and highlighted “join us” zone followed by program details (2).

From “Cal on line” the user could also enter directly to online services. Here are some examples of online services:

SafeCal software

This software’s goal was to encourage Credit card holders to expand their e commerce activities (which will increase Cal’s revenue).
The software provided unique number to each e commerce transaction and by that solved the problem of providing real credit card number in e commerce transactions and protected the card holders.Our design was highly functional and customer-oriented. The concept was to resemble credit card in its look, and thus imply on the application’s functionality.The application’s appearance took after the look & feel of CAL’s credit card.The use was easy and intuitive, the application freed the users from the fear of being cheated.Trade rates increased, and CAL was able to give service that assess its credibility.

Personal status Monitor

 This tool enables the users to control their financial status via the Internet.As another aspect of Freedom is control over one’s actions, the users were able to view their Credit card status online, audit their bills, and perform changes in their future debits.

Cal Direct: A money transfer application

Another important aspect of freedom (with regarding to money) is the ability to spend it at will. The next service we designed was a money transfer application called CAL Direct .

This program enabled the user to transfer cash from one credit card to another credit card!

Promotional tools

We supplied CAL with numerous promotional tools in order to market itself better to the online users’ community.

Newsletters

Creating a sense of community and nourishing the feeling that CAL cares about their customers, led us to the creation of this monthly newsletter.

Our goal was to promote new programs and ideas to Cal’s customers, while assessing CAL’s brand.

We designed a clean and light look and feel, consistent with the site’s look & feel, and delivered the feeling of excitement.

Here are few examples:

Presentations

Promoting the use of Cal’s tools was not limited to the web. Targeted presentations were created and published to specific market segments, offering customized services.

An example of that was the “Business card” presentation, sent to CFO’s around the country, displaying the benefits of its use in a sharp and straightforward attitude.
 

Corporate screen savers

 These screen savers were created as part of the process of implementing the new brand within the company’s employees.It’s content reflected the brand’s main messages.

Leave a Reply