Adobe Success Story

· Vision 101 provides value-added feature and customer service differentiator to the 1-800 CONTACT's home page
· Flash vector-based graphics allowed designers to animate medical illustrations without sacrificing download times
· Reduced ongoing site maintenance
· Saved developer time through numerous site revisions
· Over 15,854 visitors in first three months
· Garnered global exposure for 1-800 CONTACTS

Project Details

1-800 CONTACTS is changing the way people buy contact lenses—by phone, mail and the Internet—making it as easy as possible for established contact-lens wearers to purchase replacement lenses.

An estimated 40 percent of the 100,000 new orders placed every day come via the company's website, at http://www.1800contacts.com/. Fulfilling these orders from its single location in Utah, 1-800 CONTACTS draws on the world's largest inventory—totaling more than 15 million contact lenses—for next-day delivery anywhere in the US.

Since its inception in 1996, and following several years of qualitative market research, 1-800 CONTACTS determined that many contact lens wearers really knew very little about eye anatomy, or the contact lenses they wear everyday.

The company decided that educating people about ocular health, and the different product choices available for replacement contact lens, would empower potential customers to make the right choice. "We wanted to be more than just a storefront selling a product, underscoring our commitment to customer service," says Kevin McCallum, Vice-President of Marketing.

Focusing on Macromedia Flash

1-800 CONTACTS decided to create an online learning experience, Vision 101, to provide readily available information about the eye and contact lenses to existing and potential wearers.

The company chose Macromedia Flash to build the tutorial and combined the principles of good site design with the precision and flexibility of vector graphics for a uniquely engaging, interactive online learning experience.

The site works on two levels: as an intuitive tutorial for anyone interested in the eye, and as a value-added site enhancement that encourages long-term customer relationships for 1-800 CONTACTS.

"We chose Macromedia Flash to build the site's infrastructure because it enabled us to create a high-end visual presentation that's unique on The Web," says Bruce Christy, corporate design director for 1-800 CONTACTS.

Christy leveraged Macromedia Flash to present the information in a way that a layman would understand, using clean, simple graphics. Illustrator Craig Drake drew and animated the medical illustration of the eye that interacts with the viewer as he or she progress through the site.

Since going live, the site has caught the eye of many visitors. In just under three months, more than 15,854 people have visited Vision 101, and the site's user-friendly learning experience has garnered global exposure for 1-800 CONTACTS. The following testimonial from Italy is an example: "My son, age 8, is starting to wear glasses and is asking me what it is all about. Well, now I will be able to explain clearly, with your diagrams and animations, how it all works."

Macromedia Flash Boosts Developer Productivity

Christy designed a Macromedia Flash foundation for Vision 101 that saved upfront developer time and ensured simple future site enhancements. The site's foundation was developed using three different elements: HTML text fields; nesting the interface and using independent movie clip animations.

Using HTML-enabled text fields linked to external text documents, Christy saved hundreds of hours by not having to go into Macromedia Flash to make text changes and re-code all the links about eye anatomy that occur throughout the text copy.

"All that's required is to open up the text document and work there and it automatically updates in Macromedia Flash," says Christy. "This was an incredible time saver because the project changed drastically as it evolved and we went through many content revisions."

In addition, Christy built the text fields throughout the project with their scrolling ability programmed to adjust automatically if content developers added or deleted text.

Nesting the interface saved download time and enabled Christy to manage recurring library elements and programming with efficiency. For example, by nesting the buttons that occur throughout the site in the table of contents, Christy was able to copy and paste them where he needed, with their programming intact. This capability also applies to a lot of the animations and illustrations. The basic rendering of the eyeball, for example, was used repeatedly, with different animations playing over it to illustrate different points in the text.

The independent movie clip animations also facilitate future site updates and additions, reducing developer and site maintenance costs. "To enhance this site, all you have to do is slide in a new movie clip using the existing interface as is. You could extend this site indefinitely," says Christy.

Read and See Instruction

"Everything we did with Macromedia Flash enhanced the user's learning experience, with animation being key to the site's overall effectiveness," says Christy.

Macromedia Flash vector-based graphics kept the bandwidth down to a minimal level, 384K for the whole first chapter, for example, so Christy was able to incorporate a lot of detailed information without sacrificing download time. Chapters Two and Three run at 238K and 128K respectively.

"The animation in Vision 101 was essential in order to differentiate it from other sites' still photographs of the eye. These are not very pleasant to look at, and are difficult to understand," says Christy. In contrast 1-800 CONTACTS used Macromedia Flash to animate how the eye works. For example, in the introductory animated tour of the eye (Chapter 1, section 1.2) each anatomical part in the drawing becomes highlighted as the viewer reads about it (or hovers the mouse over its name).

In the next section, entitled How the Eye Works, Macromedia Flash is used to animate what happens when light travels through the eye, showing how it's turned into an image in the brain. When visitors are reading on the left side of the screen, on the right side they can see what they're reading about. "This is a very powerful way to educate because it accommodates both readers and visual learners," says Christy.

Christy also incorporated "read and see" interactivity into the text fields with HTML tags so that whenever a visitor clicks on an anatomical term, a pop-up windows appears offering an instant definition about that part of the eye. "We didn't want to force the viewer to backtrack to the anatomy section every time an anatomical term escaped their memory, so we used the interactive tags to provide a quick review."

User Feedback

The result is a highly engaging site that navigates intuitively, despite the large amount of information it contains. "The most challenging aspect of the site's design was to ensure that the viewer knew where he/she was at all time in the tutorial," says Christy. "This was especially important as the scope of the site grew from ocular anatomy to the history of glasses and contact lenses, and how to read prescriptions."

It's evident from viewer comments like the following that Vision 101's Macromedia Flash interface makes learning easy. "I have worn glasses for almost 30 years, and in all that time no one had ever been able to explain what you explained in your short but clear site. It is absolutely clear, to the point, and easy to comprehend."

Long-Term Vision

The site is proving to be so successful that 1-800 CONTACTS is planning on taking Vision 101 into other venues, like the public school system and medical clinics.

"When we started, we were aiming at our customer base, but the project turned out so well we realized it had broader applications," says McCallum.

Site Summary

1-800 CONTACTS
66 East Wadsworth Park Drive 3rd Floor
Draper, Utah 84020

Macromedia Products:
Macromedia Flash 5, Macromedia Dreamweaver 4

Hardware:
2 Apple G4 towers 1 gigabyte of RAM each

Operating System:
Mac OS 9

Development Team:
Design / Art Direction: Bruce Christy
Illustration / Animation: Craig Drake
Programming: Bruce Christy, Craig Drake, Matthew Mitchell
Author: Ken Christy
Project Management: Ann Harrison
Medical Consultant: Dr. Jack Zimmerman, M.D. Ophthalmologist

Site Traffic:
15,854 visitors in under three months since launch

Industry:
Retail (Catalog & Mail Order)

Do you have a story you would like to share? Join the Adobe Customer Reference Program.