MAX 2003 Article

This article gives you a sneak peek at Intro™, which all attendees of Macromedia MAX 2003 can use. Intro helps people get more out of the conference by hooking them up with other attendees prior to their arrival in Salt Lake City. The software customized for this conference is written in Macromedia Flash MX Professional 2004 and highlights the new Halo components in the user interface.

All registered MAX attendees will receive an e-mail from Macromedia that contains a login and password for Intro. From there, they can find out who else is coming to MAX, send them IntroMail messages, and set up meetings before they arrive at the conference.

To learn more about Intro and ask probing questions about it at MAX 2003, be sure to attend Beau Ambur and George Riley's session, "The Technology Behind the Intro RIA."

Intro™ is a Rich Internet Application designed to connect people who share common interests, both personal and professional. Intro puts a human face on online connections by showing pictures or short videos of people who have things in common. This helps remove barriers so that people feel more comfortable meeting each other and establishing connections quickly.

Intro is a perfect example of what's been termed social software—applications that foster group interaction. We regard Intro as "business dating": It introduces people to each other, one business connection at a time. At a period when people are reaching out to restore humanity in their lives, Intro succeeds at a very simple task—putting us in touch with the people around us whom we really would like to know better.

Designing the Intro Application

Intro was designed by a technically sophisticated team to appeal to nontechnical users. To attract this specific audience, we calculated every aspect of a person's interaction with Intro to intrigue those who generally do not like being profiled. For example, each task is visual and clearly communicates how long it takes to complete. The "accordion" navigational structure assures users that there are a limited number of steps left to complete each task. We constructed the profiling steps so that as soon as users complete one step they go automatically to the next one. At the end of creating their profile, users go directly to the Visualizer where they can instantly view their matches. An embedded messaging system allows quick communication among attendees too. Even people who normally do not use e-mail quickly take advantage of this easy way to reach out to others.

From the start we designed Intro to handle many, many users looking for suitable business contacts. At the conference where we debuted Intro, we knew that more than 1,000 people would be entering data into the system. We also knew it would be a challenge to display all that information in a manner that helped people grasp its meaning quickly. After all, the Visualizer doesn't just display data, it helps people understand it. Our solution was for Intro to show all conference attendees in one view—with those matching one's personal interests on one side and those matching one's professional interests on the other. By arranging them radially from the center, Intro showed users the names of people who closely matched their interests. For people who wanted to meet those who least matched their interests, Intro displayed the "fringe results" as well, possibly resulting in more interesting (if less predictable) conversations.

We built Intro using intelligent text fields and accordion menus throughout the application to achieve a consistent design. Original modules include the Sandbox for selecting attributes and the Visualizer for displaying match results graphically. Considering our target of less than five minutes to complete a user's profile, we designed the software with ease of use in mind.

Because we had eight weeks to design and develop the entire application, we had to expedite our product specifications and design decisions. An additional consideration was the geographic diversity of the team, which spanned four states. Online communication tools (developed by BAX Corp. using Flash Communication Server) were critical to the project's timeliness as well.

Since the debut of Intro, the major usability constraint has been the availability of a sufficient number of computers at each conference. Wherever there is a dedicated Internet lounge or kiosk area, the user experience is very good. But wherever we have installations that are largely wireless and don't feature a dedicated floor space in which to generate a critical mass of users, the social experience suffers, as does the participation. An undeniable sense of community forms when everyone in a room interacts with the same application in real time.

We developed Intro originally in Macromedia Flash MX and targeted Flash Player 6. The application consists of two parts: a front-end visual client delivered with a web browser and Flash Player, and a back end consisting of a SQL database, Flash Communication Server, ColdFusion components, and a Flash Remoting gateway. We chose Flash as the best way to develop this application because of the wide range of functionality that we needed to integrate. The end result is an engaging application that features quick and visual access to a large set of data, along with rich features such as video mail.

Note: This application was originally developed in December 2002 when Macromedia Flash MX and Flash Player 6 were the current tools available. For MAX 2003 we updated this application using Macromedia Flash MX Professional 2004. Should you choose to develop a Rich Internet Application, weigh whatever player adoption and server-side technology best suits your needs.

Examining the Intro Application

Intro required a reasonably large amount of development work to complete. Breaking the application up into several large pieces of key functionality helped to separate tasks. Breaking each of these pieces even further into separate packages of functionality helped us organize the development process and code.

Intro was developed in three discreet parts: Login, Profiler, and Visualizer.

Login: The Login portion is fairly simple and straightforward. This module collects a person's username and password and then sends it to the server for verification. We added a few enhancements to this process to simplify user interaction and feedback. For example, since the module requires fields for this process, the required fields display an orange triangle, similar to forms that use an asterisk to denote a required field (see Figure 1).

Figure 1. Intro's main Login screen

As the user enters information, the client automatically performs character validation. Once the server validates the field, the orange triangle disappears, indicating that the entered information is sufficient for login. When users fill in both fields, the Submit button becomes active so they can log in (see Figure 2). Adding a simple check like this to your application not only reduces the amount of erroneous queries to you server but also helps users identify problems as they happen.

Figure 2. Clicking Submit to complete the login process

Whenever you develop a data-driven application like Intro, you depend heavily on server-side data. This can create a lot of problems when you try to develop the client side of the application. We strongly recommended creating a set of sample data that you can load from your local system. For instance, one of the first steps that Intro requires is a login. To facilitate continued testing and interactive application development, you should spoof this sort of activity. You can do this easily by creating text or XML files that return the expected result from the server. Here is an example of how you could use this in your development:

if (gLocalMode) {
     url = "queries/login.xml";
} else {
     url = gServerPath + "login?p=" + params;
}

Imagine that you have set gLocalMode = true and created a file in a queries folder called login.xml, which returns the results of a successful login. Setting up your application this way makes it easy to identify client coding problems without having to troubleshoot those problems by seeing what happens on the server side, when it might not be as clear.

Profiler: In order for Intro to work, it first must collect information about users. It accomplishes this through a series of pages contained within an accordion (see Figure 3). The accordion format not only helps separate each task but gives users a sense of how long it takes to enter their information and where they are in the process. The first screen, or accordion layer, is similar to the login page; it consists of text fields that self-validate. Because we have a database driving the application, there is already information available to the client application about the user. This means that most user data is already filled in and users mainly verify its accuracy.

Figure 3. The first screen of the Profiler

The second accordion layer shows the Talk to Me About fields, where users enter words or phrases for their Intro Card (shown later in Figure 6). Theses are simply conversation starters or ways for people to learn more about each other. In some cases, these Talk to Me About phrases and words have additionally appeared on attendees' badges while at the conference. Also appearing on the second screen are so-called affinity sliders (shown later in Figure 7). Users move them to match their affinity to the word next to the slider. The comparisons between your slider positions and those of the person you match up with appear later when you click the Compare Me button on the Intro Card.

The third and fourth accordion layers show the Sandbox with its 168 attributes from which users select words that describe their personal and professional interests. The fifth screen allows users to upload a photo, or snap a photo or record video using a web cam.

As users complete the data in each page, Intro collects it and sends it to the server. In order to send the data, the application converts it into parameters of a server query. You can simplify this task by creating a parameter manager that loops through the available data and packages it into an object:

var page1params_array = new Array("firstName", "lastName", "company", "title", "city", "state", "country", "email", "website", "password");

var page1params_obj = new Object();
var param;
for (var i = 0; i < page1params_array.length; i++) {
    param = page1params[i];
    page1params_obj[param] = this[param + "_txt"].text;
}

Now you have a single object that contains all the data being sent to the server. Because we used Flash Remoting for this application, we could send the object itself to the server as our parameter argument. In other cases you may need to create an actual query string, similar to a GET method, such as the following:

var params = "";
for (var n in page1params_obj) {
    params += n + "=" + page1params_obj[n] + "&";
}

This results in a string like firstName=Beau&lastName=Ambur... that you can then append to a server query as a group of parameters.

Visualizer: This module is the heart of Intro. It's a single view that shows all users in the database in one place (see Figure 4). The Visualizer represents each person as a plus sign (+). Because there can be well over 1,000 people at one time, it is very important to keep the data as light as possible to reduce the amount of bandwidth required to generate this view and to keep processing time to a minimum.

Figure 4. A zoomed-out view of the Visualizer

Figure 4 shows a radial graph of relational data. The server calculates all possible variables available for each user and returns two values about each person to the client. These two pieces of information consist of a personal and a business match rating, which combine for a total possible match of 100 percent. All people in the database are then visually arranged according to these values. Anyone who matches you with more personal than business interests falls towards the left side, while a higher business match falls towards the right. If you have a mutual number of business and personal interests, then people who match them both will fall towards the top middle. Conversely, if you match people only in one category, they will fall in the bottom middle. Most important, of course, is where people appear in relation to the large orange plus sign at the center (that's you). The closer to the center they are, the more they match. Figure 5 demonstrates what happens when you zoom into the view.

Figure 5. A zoomed-in view of the Visualizer

Once you zoom in, the view changes. You can see pictures of the other users and identify more easily who is who. Clicking a person opens their Intro Card, which displays their contact information (see Figure 6). From here you can send an Intro message containing text and video by clicking the Send a Message button. This opens the IntroMail component of the application where you can easily send and read video and text messages. You can add anyone to your contact list by clicking the middle button or find out more about them by comparing yourself to them.

Figure 6. A sample Intro Card

Clicking the Compare Me button opens a detailed list of interests. In the middle you see your common interests. At the bottom of the comparisons are your affinity sliders (see Figure 7).

Figure 7. The Compare Me screen

The Future of Intro

Since we debuted Intro at the TED Conference in February 2003, over 5,000 people at five conferences have used the software, including Flashforward2003, the O'Reilly Emerging Technology Conference, and Media X at Stanford University. We have received suggestions to develop a version of Intro for internal corporate applications, for connecting businesses to one another, and for use as a novel front end to dating websites.

We are currently building a version of Intro for B2B connections. It is based on the concept that businesses in small communities often do not know what products and services are offered locally—exactly the way we don't really know one another in our own cities. We are modifying Intro to add search capability as well as an expanded business profile section. The personal traits will be removed in order to make room for more professional-related information, such as testimonials, product specifications, videos, and an expanded About Us section that takes the application to a new level.

We have also designed a version of Intro for use in human resource (HR) departments. Its use there will cover skills inventory, employee resource management, teambuilding, continuing education, and finding study partners within large organizations. Intro requires little modification to repurpose it for this usage. The primary back-end work integrates with HR databases and builds a conduit to those systems to automate employee migration in and out of the company and through various departments.

Finally, we are completely rewriting Intro to take advantage of Flash MX 2004 component availability so that we can bring the speed and power of the latest version of Flash to our customers.

About the Team

Intro was developed by Mixed Grill in conjunction with Macromedia. The team included:

• Executive Producers: Mark Sylvester (Mixed Grill) and Peter Goldie (Macromedia)
• Supervising Producer: Kymberlee Weil (Mixed Grill)
• Development: Beau Ambur (BAX Corp.) and George Riley (Macromedia)
• Design: Jason Davis and Jeff Faulkner (deepPlay)
• Video Component: Sam Wan (samuelwan.com)
• Creative Advisors: Michael Gough and Michael Sundermeyer (Macromedia)

Intro was awarded Best Application at Flashforward2003 in New York.

Read more about Intro at www.2intro.com.

Intro™ is a trademark of Mixed Grill, LLC. The Sandbox and the Visualizer are patent-pending modules of Intro.

About the Authors