Fusing Online Commerce and Social Network:
Enhance Social Shopping Experience via Desktop Application
A Master Project Presented
By
Ning Song
In Partial Fulfillment
of Requirements for the Degree
Master of Science in the
School of Literature Communication and Culture
Georgia Institute of Technology
April 2010
1
Fusing Online Commerce and Social Network:
Enhance Social Shopping Experience via Desktop Application
by
Ning Song
Committee Chair: Michael Nitsche
Committee: Celia Pearce
Ian Bogost
2
TABLE OF CONTENTS
ABSTRACT……………………………………………………………………………………4
CHAPTER I: SOCIAL COMMERCE ON EBAY AND FACEBOOK……………………..5
Define Social Commerce……………………………………………………………5
Existing Studies on Social Commerce/Social Shopping ………………………..6
Existing Social Commerce/Shopping Applications on eBay and Facebook ….9
CHAPTER II: EXPLORING A NEW SOCIAL SHOPPING ENVIRONMENT…………..14
Analyzing Target Users and Activities……………………………………………..15
Prioritizing Social Shopping Tasks…………………………………………………18
CHAPTER III: BUILDING THE SOCIAL SHOPPING APPLICATION…………………...21
Interface Design………………………………………………………………………22
CHAPTER IV: OVERVIEW OF APPLICATION……………………………………………27
Overview of Final Prototype…………………………………………………………28
CHAPTER V: DISCUSSION AND FUTURE EXTENSION……………………………….43
Example Usage of the Application………………………………………………….43
Future Extension……………………………………………………………………...46
REFERENCE…………………………………………………………………………………..48
3
Fusing Online Commerce and Social Network:
Enhance Social Shopping Experience via Desktop Application
Abstract
The past few years have witnessed the raise of social commerce practices in the online
retail world. The phenomenon has become a new focus for e-commerce industry. Even
as the overall effectiveness of various social commerce features are still under study by
academic scholars and marketing experts, the online retail industry views social
commerce as more than just a trend that may fade away over time. Many experts argue
that social commerce/social shopping is the future of the online retail industry. The
purpose of this project therefore is to investigate the possibility to combine social media
functionality with electronic commerce. My central research task is to meet the challenge
of creating an application that effectively merges the existing shopping functionalities of
an online marketplace (eBay) with the social networking capability of a social network
community (Facebook). I will present a prototype design and implementation that
answers this research question.
4
Chapter I
SOCIAL COMMERCE ON EBAY AND FACEBOOK
Define Social Commerce
The term social commerce has been used in recent years to refer to a broad range of
online activities. It is used to describe commercial activities conducted on social
networking sites such as Facebook, where via applications users can make purchases
from online marketplace without leaving the social site itself. Social commerce can also
refer to the integration of social networking capability into e-commerce sites, which
include but are not limited to product reviews, rating, videos, blogging, live chats and
online forums.
As a relatively new term, social commerce still lacks a clear definition. In general, social
commerce refers to the merging of online shopping and social networking activities
(Tedeschi, 2006). Stephen and Toubia defined social commerce as forms of Internetbased “social media” that allows people to actively participate in the marketing and
selling of products and services in online marketplaces and communities (Stephen and
Toubia, 2009). While the term has been loosely used to encompass a broad range of
online commercial practices and shopping activities, scholars like Stephen and Toubia
(2009) emphasized the difference between social commerce (social networking activities
that connect sellers/stores) and social shopping (social networking activities that connect
buyers). Under their classification, social shopping mainly revolve around the central
idea of online word-of-mouth(WOM), which refers to various consumer activities ranging
from creating user contents to recommendations and rating (Stephen and Toubia, 2009).
5
In accordance to this definitional distinction, for the proposed project the term “social
shopping” is adapted to highlight its main focus on enhancing consumer’s online social
shopping experience.
Existing Studies on Social Commerce/Social Shopping
While it is generally believed that adding social networking features into online shopping
activities will help the growth of e-commerce (Chevalier and Mayzlin, 2006; Stephen and
Toubia, 2009), some scholars have designed studies to measure the assumed
improvement both quantitative and qualitatively. For example, Stephen and Toubia
(2009) studied the economic value implications of a social network between sellers in a
large online social commerce marketplace. Their study examined a European online
marketplace in which individual stores are connected with other stores by directed
hyperlinks. With an emphasis on the economic potential of social commerce activity (the
direct hyperlink between stores), the authors applied statistic and mathematic models to
measure the effectiveness of direct links between stores. The results of the study
indicated that the direct connection between stores can generate considerable economic
value to both individual sellers and to the network in general (Stephen and Toubia, 2009).
The study showed that network’s value lies primarily in making shops more accessible to
customers browsing the online marketplace by creating a “virtual shopping mall.” It also
indicated that the sellers that benefit the most from the social network are those whose
accessibility is most enhanced by the network (Stephen and Toubia, 2009).
As one of the oldest e-commerce website that provides its consumers with social
commerce features, Amazon.com has been subject of various studies on the
commercial impact of its social commerce functionalities. Some scholars have focused
their attention on the effect of online word-of-mouth. Chevalier and Mayzlin (2006), for
6
example, studied the effect of online book review on the overall sale numbers of books.
They argued it’s an important component of Internet retail strategies to create online
consumer communities that provide customer reviews. In the study, they characterized
book reviewer behavior at two leading online bookstores: Amazon.com and
BarnesandNoble.com. Using publicly-available selling records, they examined the
incremental sales effects of having reviews for a particular book versus not having
reviews and also the differential sales effects of positive and negative reviews (Chevalier
and Mayzlin, 2006). The study found customer reviews were in general very positive at
both sites (Chevalier and Mayzlin, 2006). Based on the statistic retrieved from both
online bookstores, the authors claimed that customer word-of-mouth has a causal
impact on consumer purchasing behavior at both sites. Furthermore, the study
suggested that customers certainly behave as if the fit between customer and book is
improved by using reviews to screen purchases (Chevalier and Mayzlin, 2006).
Oestreicher-Singer and Sundararajan (2008) studied the correlation between peer
preferences and choices and consumer’s buying behaviors on Amazon.com. They
pointed out that a person’s circle of friends has always been a main source of influence
for one’s shopping behavior. This influence, however, has become increasingly visible
and persistent online as it is shared in social networking sites like Facebook and
MySpace (Oestreicher-Singer and Sundararajan, 2008). The authors considered the link
of “Consumers who bought this item also bought. . . ” on Amazon.com as one of the
oldest examples of a visible electronic peer network. Their study measured how the
visibility of electronic "social" networks affects how individual peers influence each
others’ choices. The results indicated the explicit visibility of a co-purchased relationship
more than triples the average influence that complementary products have on each
others’ demand (Oestreicher-Singer and Sundararajan, 2008).
7
For the past several years, online social network sites such as Facebook, Twitter and
LinkedIn have witnessed a rapid growth in membership and popularity. According to
Facebook’s official statistics, the website has more than 300 million active users in total
and average user has 130 friends on the site (Facebook, 2009). A typical social
networking site like Facebook allows its user to build and maintain a network of friends
for social interaction (Trusov, Bodapati and Bucklin, 2009). Like other Web 2.0 sites,
social networking websites rely heavily on user-generated contents (Trusov, Bodapati
and Bucklin, 2009).
The booming online social network communities are viewed by many scholars and
marketing experts as a new hotbed for marketing and social commerce practices.
Oestreicher-Singer and Sundararajan (2009) claimed that whereas co-consumption
websites such as Amazon.com and YouTube.com link products or content, social
networking websites like Facebook link user in similar ways. Users of social networks
are viewed as consumers of the websites because they are constantly bombarded with
advertisements (Oestreicher-Singer and Sundararajan, 2009).
In their empirical study of a popular online social network, Iyengar, Han and Gupta (2009)
evaluated the assumption that friends in a social network site can influence each other’s
online purchasing behavior. The study quantified this social influence by measuring it in
terms of increase in sales and revenue. It also analyzed the relationship between user’s
level of social network activities with their online purchasing behaviors within the site.
The results suggested “peer pressure” played a crucial role in shaping user’s social
networking behaviors (Iyengar, Han and Gupta, 2009). In order to “keep up with the
trend(p.19),” users with moderate level of activities on the website tend to purchase
more virtual items for their avatar and virtual space when their friends were doing the
8
same. This purchase behavior, however, did not apply to users with high activity level on
the social network site (Iyengar, Han and Gupta, 2009). The authors argued that this
was because the “elite” group of users played the roles of “virtual trend leaders” in the
social network. They tended to reduce purchasing behaviors and increase other online
activities in order to separate themselves from imitators who are trying to copy their
moves (Iyengar, Han and Gupta, 2009). This study therefore suggested that whereas
social networking behaviors can lead to increased online commercial activities, the
amount of increment may vary or is not guaranteed (Iyengar, Han and Gupta (2009).
Existing Social Commerce/Shopping Applications on eBay and Facebook
The past few years have witnessed the raise of social commerce/social shopping
practices in the online retail industry. Amazon.com, as described above, is viewed by
many as a social commerce pioneer and a paradigm for its extensive investment on
“collaborative” consumer contents (Chevalier and Mayzlin, 2006). Other major Internet
retailers, however, are quickly catching up. In 2007, the online marketplace giant eBay
announced its plan to incorporate social commerce elements in the current website
(Needle, 2007). In the same year, eBay launched its own shopping social network called
eBay neighborhood. Members can join any
neighborhoods they like, and add to
discussion boards there, post photos and
meet other people who share the same
interest.
eBay API and My eBay
Amid its steady march toward building a social commerce environment, eBay opened up
its API (application programming interface) to third party developers in 2007. Its most
9
recent move allows subscriber of its “Selling Manager” program (recently made free) to
add third-party applications to the eBay managing webpage called “My eBay.” Starting in
August 2009, for the first time, eBay sellers can access third-party applications created
by developers other than eBay to manage their eBay activities. The introduction of third
party applications is an answer to the long-time demand from eBay users that are
looking for easier, more efficient way to use eBay.
The first batch of 17 applications available to subscribers (up to Aug 26, 2009) shows a
clear emphasis on the improvement of the “commerce (selling)” side of eBay. Programs
cover inventory management, payment and shipping management. Of the 17
applications, only one focuses on providing rich media asset, one focuses on customer
support and one on product review. More applications addressing the social
commerce/social shopping aspect for eBay users are therefore needed.
eBay Desktop
eBay Desktop is the official eBay desktop
application. It covers the basic functions of
eBay such as item search, basic
buying/selling, track-keeping/management
and e-mail (message) management. It is a fullfledged desktop application that makes it
possible to make eBay transactions without going to the website. The application,
however, lacks features of social commerce. While the application offers eBay users the
convenience to make easy purchase on their desktop, it doesn’t allow users to conduct
any social shopping activities. For example, even as users now can write product review
on eBay Neighborhood, eBay Desktop users still don’t have the access from within the
10
application. With eBay’s plan to add more social commerce features in its online
marketplace, further renovation of its current desktop application to encompass social
commerce activities seems to be a necessary move(Needle, 2007).
Facebook eBay Marketplace
By default, Facebook has provided its users
with functions that can be used for social
commerce purpose. On Facebook a user can
post a product review; he/she can upload
images/videos of product; and discussion
groups can be formed for people with similar
interest. Many online retailers have targeted
the website for their promotions and advertising campaigns. Among the major ecommerce sites, eBay maintains a strong presence on Facebook. It recently published
an “official” application called eBay Marketplace that allow users to share their eBay
activities with Facebook friends, such as item bought, sold, watched and details of a
friend’s eBay feedback history. The limitation of this eBay marketplace application is that
users have to customize their Facebook page in order to use the application. To use the
application, a user has to plough through tabs and menus to navigate to the application.
The content being displayed in the application is separated from the main “wall” page
and can only be accessed by going to a separate “application” page. It is not only
inconvenient to use (user has to switch back and forth between the facebook “wall” page
and the application page) but also greatly limits the exposure of the contents that the
user is meant to share with their friends online.
11
Other available eBay and Facebook Social Shopping Applications
The above-mentioned applications are just
some examples (and arguably most visible
ones) of the available eBay and Facebook
applications that relate to social commerce.
There are many other applications/widgets
created specifically to satisfy user’s need for social commerce functionalities. Many of
these applications serve a single social commerce purpose for either online shoppers or
online retailers. MyStoreMaps, for example, is a commercial application that embeds a
custom flash-map in eBay seller’s listings to show locations of past buyers around the
world. Its purpose is to help buyers get a quick idea of a seller’s experience in shipping
to their location.
On the shopper’s side, many simple widgets
are also available on Facebook to help users
search eBay items or perform other simple
eBay tasks without going to the website. These
kinds of applications are abundant but with
various levels of usefulness. eBay Shopping,
for example, is a simple application whose sole purpose is to allow Facebook users to
search and buy items (through the search result link) from eBay without leaving the
social network.
While many of the above-mentioned applications have dealt with the concept of social
commerce/Social Shopping in one way or another, very few of them successfully focus
on the communicative aspects of users’ online social shopping experience. In general,
applications that address the needs of social shopping are scarce. Among the third-party
12
applications that are currently available on eBay, only one (123 Show) that allows users
to search and embed product reviews in their listing pages. Second, among the existing
social shopping applications, many are designed to fulfill a single or a few social
shopping functions. Their usability is in general limited. Therefore, while all the “rings” of
social shopping features are already out there in one form or another, an application that
actually links them together is still needed.
The current eBay website is built to optimize the buying and selling activities between
individual customer and seller. eBay has been trying to insert social commerce features
into its websites. However, these features are either not in place yet or are scattered all
over the place on its website. Because of their low visibility in general, many of the social
commerce features are simply ignored by eBay users.
Even as the management team of eBay has promised eBay’s transaction to a social
commerce marketplace, a total social make-over of the website is still unlikely to happen
in the near future. Before that can happen, a practical way to improve eBay users’ social
commerce experience is therefore to create applications that merge the website’s
sophisticated commercial functionalities with the social networking features of a social
website, such as Facebook. This application should improve user’s overall social
shopping experience before, during and after the actual transaction on eBay.
13
Chapter II
EXPLORING A NEW SOCIAL SHOPPING ENVIRONMENT
The purpose of this project is to investigate the possibility to combine social media
functionality with online commerce. The central research task is to meet the challenge of
creating an application that effectively merges the existing shopping functionalities of an
online marketplace (eBay) with the social networking capability of a social network
community (Facebook) in order to create a unique social shopping environment for users.
Research Questions
My research questions are:
A) How can I combine functionalities of social media website (represented by
Facebook) with functionalities of online commerce website (represented by eBay)
in order to create unique social shopping experiences for online shoppers and
social media users?
B) What are the features that should be included in such applications in order to
facilitate user’s social shopping activities?
To answer these research questions, this project will first analyze the needs of online
social shoppers , design an application around these needs, and build the application
prototype that reach the goal of providing users with newly designed online social
shopping environment.
14
Analyzing Target Users and Activities
This application targets at an audience group that are users of both online auction
website (eBay) and online social network (Facebook). As both websites have huge
number of active users, it is estimated that a large amount of users among them may be
interested in an online environment that helps them engaging social shopping activities
with friends online. In order to design an application that serves this group of users, it is
necessary to identify the needs of these users, i.e. the information they look for, the
process they need to take and the goals they try to achieve. A social shopping scenario
is therefore described here in the following paragraphs to help illustrating user’s
needs/tasks when shopping socially online.
A is an active user of both eBay and Facebook. She wants to buy a new digital camera
to replace an old one. Knowing many of her Facebook friends own digital cameras, A
posted a short message on Facebook for their recommendations. Some of her friends
responded. One friend B recommended a specific model and sent A a link to a review
article. A replied on B’s comments and asked more questions regarding the camera. At
the same time A is browsing through eBay listings for potential candidates. She
bookmarked several listings using the “watch now” button on eBay. The information she
got from Facebook friends helps her to decide on which model to buy and the listing
information on eBay help her to decide which seller to buy from based on factors such
as price, distance and feedback score. A received the camera several days later. After
spending some time playing with the new camera, she wants more information about a
new feature of the camera. While she turns to her Facebook friends for help, she found
there are several fan groups for the camera on Facebook. She joins one of them, posts
some questions and receives the answer she needs. After A joined the fan group, she
also befriends several members from the group.
15
From this scenario some major needs/tasks for social shoppers can be identified. First of
all, identifying and locating the desired product is always a critical task. To begin with,
online shoppers need information regarding the exact products or a general category of
products. eBay provides a good venue, both on its website and through the Platform API,
for users to search for products, browse search results and check for great deal of
product information such as product specification, detailed description, price, auction
format, location, end time and seller information. Facebook, on the other hand, provides
a venue for finding user-generated content outside the boundary of online commerce
websites. Information related to the product of interest on Facebook can be found in the
forms of communication between friend, links for review articles, images and multimedia
contents, product fan group posts, etc. Product-related information on Facebook is
generally less technical, less commercial and more personal due to the “social” nature of
the networking website.
For users of Facebook, any shopping experience can be shared with their online
audience (friends, fellow fan group members or the general Facebook community)
throughout the online shopping process. Not only can they ask questions or collect
opinions from friends about products, Facebook user are also commonly seen to share
contents related to shopping experience, which may include but is not limited to: product
reviews, sharing technical know-how, sharing photos, deals alerts, etc.
The following chart lists the common activities of online social shopper as a summary to
the discussion above.
Table 1: Common online social shopping activities
16
eBay
Facebook

Searching for specific product

Seeking/giving advice

Searching for a certain type of

Creating product review

Search for information related to
product

Searching for/comparing product
information

Making purchase
the product of interest

Expand online social network by
common interest

Managing

Creating event invitation

Creating wish list
communication/messages

Managing transactions/tracking
shipment

Managing account

Uploading photos

Leaving feedback

Uploading videos

Creating product review

Sharing general shopping
experience

Sharing deals alarm
It can be argued that both eBay and Facebook are capable of supporting a majority of
the social shopping activities listed in the table above. eBay’s website provides its users
17
with sophisticated services for finding products, making purchase and managing
activities. The limitation of the eBay website is its lack of integration of social shopping
features. Facebook, on the other hand, is by default a social media hotbed with robust
online networking capabilities but limited online commerce features. How to combine the
strength of both websites to create an easy-to-use and meaningful social shopping
application is therefore a challenge this application tries to answer. On the other hand,
as social commerce is such a broad topic, it is not realistic to tackle all the issues with
just one project. This leads to the second challenge for the project, which is to pinpoint
the central issues within the area of social shopping and provide solution to them
specifically.
Prioritizing Social Shopping Tasks
While the previous section has laid out the common social shopping activities for users,
the focus in this section is to further narrow them down to several central tasks for one
application to handle.
For the sake of clarity, these tasks are grouped under two general categories:
“shopping” and “social.” Social shopping is at its core a form of online commerce. For
the application this means the functionality on the “shopping” aspect should cover the
shopping activities that all the way lead to actual purchase of products. These activities,
to break it down, include identifying the desired product, getting detailed listing
information and eventually purchasing the product. Shopping activities should also serve
as a “seed” or “incentive” for initiating social activates on Facebook.
For the “social” aspect, the key design goal of the application is to help users achieving
satisfying social experience without shifting back and forth between commercial and
18
social media websites. The application will allow users to create user-contribute contents
and share them with Facebook friends. These contents will include but not limit to posts,
links and images. The application should also allow users to expand their online social
network by having new friends either through friend introduction or by finding friends with
common interests.
Although in the discussion above I intentionally separate the major functions of the
application into two categories, in reality the two aspects of social shopping are certainly
not two separate entities that isolate from each other. The purpose of the application is
not to just put together functions of eBay and that of Facebook under one roof. Instead, it
means to integrate the functionalities in meaningful ways to form a bridge between the
two, therefore providing its users with a unique experience.
Based on the analysis above, the following is a list of the functionalities that I intend to
include in the proposed application:



Functionalities related to eBay product information
o
Search eBay listings by designated search keywords
o
Browse eBay search results in respond to search requests
o
Check for listing details for individual eBay items
Functionalities related to eBay purchase
o
Save (bookmark) item for future use
o
Direct link to the actual listing page for item purchase
Functionalities related to Facebook social communication
o
Access to user’s Facebook account to enable Facebook communication
o
Display user’s Facebook friends/groups
19
o
Search Facebook for information related to the item of interest
o
Communicate with friends about the item of interest
o
Share with friends in terms of links, images and other media formats
o
Expand user’s social network while doing social shopping
This proposed social shopping application doesn’t mean to create a new model of online
shopping in isolation from the existing commercial and social media frameworks. Instead,
the value of the application lies in its ability to link the rings of the existing functionalities
from eBay/Facebook and streamline them into a unique social shopping environment.
Chapter III
BUILDING THE SOCIAL SHOPPING APPLICATION
Once the application’s basic framework is specified, the focus now shifts to the tasks of
constructing the application, namely choosing the suitable technology, designing user
20
interface and eventually implementing the design. This process begins with the selection
of the right technology for the project.
Underlying Technology and Architecture
The project is developed in Adobe Flex Builder 3. The Programming language used is
Actionscript 3. The final product is an Adobe AIR application that that runs on user’s
desktop. I choose to make this project an AIR desktop application for several reasons.
Adobe AIR runtime lets developers to build rich Internet applications (RIAs) that run on
user’s desktop. AIR applications can run across different operating systems or platforms;
they are easily delivered using a single installer file; Flex environment also works greatly
together with other Adobe programs such as Photoshop, Firework and Flash to build
highly engaging, visually rich applications. Overall, Adobe AIR technology suits the
technical requirement of the development process quite well.
In order to retrieve data from both the eBay and Facebook websites, the application
needs to establish communication with the respective APIs (Application Programming
Interface) from both websites. The data flow pattern is like the following:
The application makes asynchronous calls to the Facebook server using the official
eBay and Facebook ActionScript Library in order to transfer data between the
application and web servers. Both eBay and Facebook API require user authorization
tokens to validate the connection. Once the connection is established, application can
send a variety of API calls to the eBay/Facebook servers.
Upon receiving the API call, the eBay/Facebook server returns JSON formatted data in
respond to the specific call requested. The application will listen to and handle the data
returned by the servers. After the built-in parser processed the data being received, they
21
could be stored locally and displayed on the screen with customized renderers. Figure 1
show an illustration of the data flow of the application.
Figure 1: Data exchange between application and servers
Interface Design
The first draft of the application serves as a testing ground for the underlying
communication structure between the application and the respective web services. The
goal at this stage was to test the basic communication and data retrieval capability.
Many mini programs were built at this stage to test individual eBay and Facebook
functionality. Figure 2 shows an example that was used to test out the capability to
retrieve search results through eBay’s server.
22
Figure 2: Early version, illustrating communication capability with eBay
As the early model had made progress in solving technical issues, more focus now was
put on the User Interface (UI) aspect of the application.
The interface design of the application follows the innovative interface design principles
laid out by Constantine and Lockwood (2000). These principles are:

The structure principle: The structure principle mainly deals with overall user
interface layout. It states that design should organize the interface in meaningful
and useful ways based on clear, consistent models that are apparent and
recognizable to users.

The simplicity principle: the design should make it simple for users to perform
common tasks and communicate clearly and simply in the user's own language.

The visibility principle: the visibility principle asks for the designer to make all
needed options and materials for a given task visible without distracting the user
with extraneous or redundant information.
23

The feedback principle: design should keep users informed of actions or
interpretations, changes of state or condition. The feedback principle is closely
coupled with the visibility principle mentioned above in order to provide users
with a clear, concise and easy-to-use interface.

The tolerance principle: the tolerance principle states the design should be
flexible and tolerant while also preventing errors wherever possible by tolerating
varied inputs and sequences and by interpreting all reasonable actions.
Constantine and Lockwood argue that interface design for desktop (client) applications
require distinct solutions. An effective design for desktop application interface should
arise from the criteria, goals and constraints inherited in the nature of this type of
applications. Desktop applications are different from standard websites or web
applications in their higher level of interactivity and more options for user actions. The
proposed application, for example, supports user interaction based on drag-and-drop
behaviors. Drag-and-drop mouse actions are not commonly seen for web sites or web
applications. This design choice is unique to the application and the special interactive
tasks that it is designed to achieve. This lead to a user interface that is different from a
traditional website or web application, which requires user to invest some efforts to learn
application’s functionality in exchange for increased interactivity. The principles by
Constantine and Lockwood focus on designing for innovative user interface to enhance
usability and reduce user learning time. Therefore, these principles are used as
guidelines for the UI design of the application.
In the early stage of UI design for the application, several mock-ups were made to
evaluate the effectiveness of various interface designs. Figure 3 shows one of them that
24
was later abandoned for its poor user interaction capability. As shown here the design
was full of fix-sized frames. Interaction within the application was severely limited. For
example, users can search for eBay items and chat with Facebook friends about the
item. The application brings these two useful functions together into one screen but still
lacks a way that allows for meaning interaction between the two.
Figure 3: UI design mock-up (a)
A second UI design as shown in Figure 4 was then introduced with the aim to explore
new ways of user interaction in the application. This design utilizes the drag-drop
capability provided by Flex to manage the layout of the application and to add interaction
among various components. For the traditional web applications or web sites, users
control the interface by clicking buttons and navigating through menus. Drag-and-drop
capability has never been fully utilized to support interactivity in these types of
applications. The proposed application, on the other hand, runs without the inherited
limitation of web applications or web sites such as limited space and rigid layout
25
arrangement. It is designed to open up new ways of interaction for users. The final UI
design is based on the second version of UI design with drag-drop capability.
Figure 4: UI design mock-up (b) with drag-drop capability
Chapter IV
OVERVIEW OF APPLICATION
26
The final version of the application (see Figure 5) aims to give users a unique and
meaningful social shopping experience by offering them new ways to mingle their eBay
and Facebook activities.
The challenge for creating such an application is two-fold. On one hand,
technical/programming issues must be solved to prove that the envisioned functionalities
can be actually achieved through codes. On the other hand, to design an effective,
meaning and visually pleasing user interface for the application is proved to be equally
challenging. Overall, more than thirty versions of the application were built over the
period of three months. During this process, technical issues and programming
challenges were tackled one by one; the UI design was revised many times as well.
In the final UI design, the use of draggable (droppable) components becomes a major
element that answers to the design challenge of enhancing interactivities. By giving the
various components the ability to be dragged around and freely arranged, the application
escapes the confine of the frames and tables shown in the earlier design. This also
introduces new method for managing and interacting with data and components of the
application. Below is an overview of the final version of the application and a brief
description of its components and features.
27
Figure 5: The final version design layout
Overview of Final Prototype
The application can be easily download as an installer file. Installation process is
straightforward. If needed, installer will ask the user to download the latest version of
Adobe AIR in order for the application (and other AIR applications) to run properly on
user’s computer. Once installed, the application can be accessed by clicking its desktop
icon or start menu icon. The application will ask user to log on to Facebook by showing a
separate login window (see Figure 6). Facebook login is required for retrieving Facebook
server-side data. If a user chooses not to log on to Facebook at this time, he/she will still
be able to launch the application and reach the default main “desktop” view. The
application will prompt the user to log on to Facebook later if it should access any
Facebook data locate on the server (displaying a list of Facebook friend, for example).
Login confirmation screen will be displayed upon a successful user login.
28
Figure 6: Facebook login window
Draggable and removable panels:
As discussed above, draggable components are a major feature of the application. Most
panel (window) components (see Figure 7 for example) in the application are drag-drop
enabled, which means they can be dragged around and freely arranged within the
application. User also has full control over a panel’s display status (show/disappear),
which is usually triggered by click of a button or specific user actions. Animation effects
are used throughout the application when users interact with the panels. For example,
panels will emerge from the boarder when called in and retreat to the original position
(out of the boarder of the desktop and invisible) when the “minimizer” is clicked. By
removing the movable panels from the desktop, the goal is to provide users with
uncluttered space to place and arrange items and friend icons. It is also hoped that the
use of animation effects will make the interaction more dynamic and appealing.
29
Figure 7: Drag-drop enabled panel with minimizer
Facebook friends display:
Once logged on to Facebook, user can click on the “Facebook” button
to call in
the Facebook friend list from the bottom of the application (login window will pop up to
prompt user to login if the user has not done so). This list (Figure 8) corresponds to the
user’s confirmed Facebook friends list. A member from the friend list is rendered with a
customized item renderer, which contains the member’s Facebook profile picture (50X50
pixels) and user’s first name. The friend list support user action in two ways. User can
choose a member from the list and drag the icon onto the desktop for later interactions.
User can also double-click on the friend’s icon to bring up the Facebook dialogue panel
from the bottom of the application. Compare to the way Facebook website displays a
30
user’s friends, the friend display list in the application is not only easier to access but
also allows for new ways of interaction.
Figure 8: Facebook friend list
Facebook dialogue panel:
Upon user double-click on any member of the Facebook friend list, the dialogue panel
(Figure 9) will rise from the bottom of the application. The panel retreats to the bottom
when the “minimize” icon was clicked. The dialogue panel contains the following
sections: images and names of the current friends that involves in the dialogue at the top
of the panel; a minimizer at the upper-right corner; a text input area followed by a “Post”
button that allow user to post new message to Facebook’s “main” wall as well as the
profile page; a comment text input area and “Comment” button that allow user to
comment on selected post; a post display area displays the posts originated from the
current user to the friend that being selected as well as the post time and numbers of
comments ; a comment display area shows the comments correspond to any messages.
When containing no user input texts, the “post” text input displays the hint text “what’s on
your mind?” Clicking on the text input eliminates the hint. This is identical to what users
would see if they use the Facebook website. The goal is to help users to adapt to this
new desktop environment by presenting design elements that Facebook users are
familiar with. This principle is enforced throughout the application by designing and
31
presenting visual elements that imitate Facebook and eBay’s respective choice of color,
layout and overall look and feel.
Figure 9: Facebook dialogue panel expanded
Search eBay button:
The “Search eBay” button
brings the search panel into the application from the
left boarder.
Search panel:
This contains the search bar and result display area (see Figure 10). Users can type in
search keywords in the search input area and click the “Search” button
to conduct
the search. Search results will be returned from eBay and displayed in the search result
area below the search bar. Alternatively, user can search the keyword on Facebook by
32
clicking the “Search Facebook” button
to obtain any search result related to the
search keywords.
Figure 10: Search panel
In the previous versions eBay search results were displayed in a default datagrid
component. This was soon determined not to be an optimized way for displaying the
data for two reasons. In a datagrid, photos, item titles and all other information were
forced to fit into small spaces available in each row, making them hard to read and hard
to select . Also the built-in sorting functions of datagrid can easily mess up the order of
data. In the final version, the search results are displayed in a customized TileList
component that shows nine results in a row and as many as four rows in the search
result display area (more rows can be displayed upon using the vertical scrollbar). Each
item in the search result list is rendered by a customized item renderer that displays a
photo of the item. For a quick review of the item information, user can place the mouse
33
cursor over the item for a short period to pop up a window that displays details of the
eBay listing, including item’s title, ending time, price, auction format, location, item
description and a larger picture that reveals more graphic details of the item.
Alternatively, user can double-click on the item in the search result list to go to the actual
eBay listing webpage, which shows up as a new page in user’s default web browser.
Every item displayed in the search result panel is drag-drop enabled. User can drag any
item from the panel and placed it on the application’s “desktop” (see Figure 11). In this
way user can bookmark (save) this item for future viewing or interaction. A saved eBay
item is represented by a “desktop eBay item” icon.
Figure 11: A saved eBay search result on desktop
Desktop eBay item icon:
Once an eBay item is saved on the desktop of the application, it becomes a desktop
eBay item. Like other draggable components, an desktop item icon can be dragged
around or drag over the “trash can” to delete it from the desktop.
A desktop item has three states: default, with friend list and friend chat. The default
display contains a photo of the item and a short title with link (see Figure 11). Click on
the item title will bring up a window that displays the actual listing page (see Figure 12).
Here user can further review the product detail and make purchase. Double-click inside
the display window will close it.
34
Figure 12: Listing page displayed in a window
If a user would like to share the link of the eBay item to Facebook friends, he/she can
drag any member from the Facebook friend list and drop it onto the eBay item icon. The
application will add the member into the list of friends to whom the link will be posted on
their Facebook wall. Once added into the list, an icon of the friend will be displayed on
top of the item (see figure 13). This is the second state of the desktop item icon. Doubleclick on the friend’s icon will delete the friend from the list.
35
Figure 13: desktop item icons with one showing friends added
User can double-click the desktop item icon to display the “chat” state (Figure 14). Chat
state is similar to the Facebook “dialogue” panel. Here a user can post message related
to the item to Facebook friends and make comments. The eBay item of the interest will
be displayed at the top of the panel with its title. Below them a list of the Facebook
friends involved in the discussion is displayed. User can double-click on any of the
friends to delete them from the list and therefore exclude them from the communication.
36
Figure 14: Chat state of a desktop item
Once a post is sent out to friends from the application, a post with message, photo and
link will be displayed on those friends’ Facebook wall (see Figure 15). User’s Facebook
friends can comment on the post just like what they would do normally to any Facebook
posts. URL Links can be included in the reply as well, such as links to review articles or
link to other Facebook user’s profile page. Once the application receives the reply
message from the Facebook server, it parses the data to look for URLs. Any links will
then be highlighted and made clickable.
37
Figure 15: Post from application to friend's Facebook page
Search Facebook Button:
The application allows users to search information related to an item on Facebook. A
user that wants to buy a product on eBay may be also interested in finding information
about the product on Facebook. Related information may include product pages/fan
groups and previous posts from friends that contain the keywords. Once the user
conduct a search on an item on eBay through the application, the exact search key
words will be used to search Facebook for related search results. To access the
Facebook search result, user needs to click on the “Search Facebook” button
next to the “search eBay” button to bring up the “Facebook search result” panel.
Facebook Search Result Panel:
38
The Facebook search result panel rise from the bottom of the application once it is called
upon. The panel displays the following contents: Facebook search results, the current
user’s Facebook group membership information and member information of groups that
the user has joined (see Figure 16). The content being displayed in this panel is
controlled by the three buttons at the bottom of the panel: “Search,” “Group”
and ”Members.”
By default, the “Facebook search result” panel displays the search results returned by
Facebook based on user’s search keywords. Useful search results include individual
Facebook user whose profile containing the keywords, fan group/fan pages for the item
of interest, relevant events organized containing the keywords or previous
communication between the user and friends that containing the keywords. Once the
Facebook search results are obtained, users can further interact with the application
based on the data received. User, for example, can view other user’s open profile or join
a fan group that is being displayed in the search results.
Figure 16: Facebook fan groups search results
39
User can view the group information of any group that he/she is a member of by clicking
on the “Groups” button. The “Groups” view displays the users’ Facebook groups in a
customized list (see Figure 17). For each group, an image of the group, group’s title and
brief description are displayed. User can choose a group by clicking on it. This will allow
the user to display more detailed group member information in the next “Members” view.
Figure 17: User's Facebook group list
Once user has chosen a group, he/she can view all members of the group by going to
the “Member” view (Figure 18). Similar to the eBay item display discussed above, the
group member view display the member information by a customized icon showing a
photo and name of each member.
40
Figure 18: Facebook group member list
Double-click on a user’s icon will pop-up an information window where user can view
more details of the member and add him/her as a Facebook friend (Figure 19).
Figure 19: Facebook Group Member Details
41
Trash can icon:
The trash can
on the desktop of the application is the equivalent to the “Recycle
Bin” in Windows operation system. Users can drag any unwanted items (eBay items or
friends) on the desktop into the trash can and effectively delete them from the desktop.
Once deleted, the item can’t be restored. Trash can helps to keep the desktop clean and
uncluttered.
Permission panel:
The Facebook permission panel can be called in by clicking the “setup” button
.
User needs to grant extended permissions to the application in order to access/update
data on the Facebook from outside the website. The application will check the Facebook
extended permission status once the user had logged into the Facebook through the
application. If determined additional permissions—post on Facebook, retrieve posts from
Facebook, upload images—were needed, the permission panel will pop up and prompt
the user to grant permission accordingly. User only needs to grant permission to the
application once.
42
Chapter V
DISCUSSION AND FUTURE EXTENSION
As the last chapter detailed the major components and functionalities of the application,
in this chapter I will discuss the ways users can use the application to improve social
shopping experience and the future plans to further improve the application’s social
shopping functionalities.
Example Usage of the Application
As a summary, the application is capable of performing the following tasks:

Search for eBay items

Browse eBay search results in respond to search requests

Check for listing details for selected eBay items

Direct link to the actual listing page

Save (bookmark) item in the application

Log user into Facebook

Display a list of Facebook friends of the current user of the application (require
Facebook log in)

Grant extended Facebook permissions for the application

Share the item on Facebook (title, link, picture)

Search Facebook fan groups/pages related to the eBay item of interest

Display user’s Facebook groups

View member information of Face groups, adding members as friends

Post and display messages to friends on Facebook
43

Post and display comments to posts on Facebook
Back to the camera-hunting example mentioned previously, a likely scenario of using the
application may begin with the Facebook user A posting questions about cameras, either
a general question about what kind of camera to buy or more specific one about
technical specification about a particular model. The post can be displayed to all of user
A’s Facebook friends, to specific friends or to the members of A’s Facebook fan groups.
Functioning as a Facebook client, the application automatically posts the message on
Facebook according to user’s chosen destination. Any feedback to the post then will be
retrieved and displayed in the application. Friend’s feedback comes in the form of
comments and links. A friend can add links to product pages or their Facebook friend’s
profile page. The product links can help user A to have more useful information. A
Facebook profile link can lead user to friend’s friend who knows a lot about the product
of interest. At the same time, while the conversation continues, user A may type the
keywords in the application to retrieve search results from eBay database. A will be able
to view the listing details of the product, compare between products, share them with
Facebook friends, save them in the application for future review or simply make
purchase.
While user A search the product on eBay, the application automatically searches the
Facebook and returned the search result. With a click of the “Facebook search result”
button, user A could view all the search results on Facebook that relate to the product.
She can view the information about the product fan groups on Facebook and all the
posts from the fan group. She can join the group and then view all group member’s
public information. If she wants, she can send any of them message or add them as
friends.
44
This scenario shows the application’s capability to mingle eBay’s shopping functionalities
with Facebook’s social network functionalities. As discussed above, these two
categories of functionalities should not be treated as separated entities if the application
aims to achieve a continuous and integrated social shopping experience for users.
The scenario above also shows the two main themes of the application: sharing
experience and expanding social network. Users of Facebook can have many reasons
to share their shopping experience. After all, sharing life experience with others is a main
reason for people to use Facebook. Buying an awesome product for a bargain price is
quite something to brag about. On the other hand, sharing an unsatisfactory product or
shopping experience may be equally motivating. Furthermore, user shouldn’t have to
wait until the actual purchase to start sharing their experience. The application
encourages its users to start sharing their experience before, during and after the actual
online shopping.
Expanding user’s social network is the second main theme of the application. The
application helps its users to maintain and expand their social networks by means such
as conversation, sharing of information, friends referring and expanding new social
network by common interest. All of these can happen anytime while user using the
application, before, during or after the actual online shopping.
This application aims to give user more freedom while using the application. In other
words, a user doesn’t need to follow a particular “path” in order to use the application.
As the example above has shown, to use the application a user doesn’t have to start
with a search of certain item on eBay or by asking question to friends for their
recommendation. The application provides its user with other opportunities such as
browse fan groups and individual user information on Facebook or just chats with friends.
45
While the application mainly targets at improving shopper’ online social shopping
experience, it can arguably also be used for sellers as an indirect word-of-moth
marketing tool on eBay. For example, sellers can utilize its capability to promote product
to members of Facebook fan groups (writing product reviews or giving discount coupon
code, etc).
Future Extension
The plan to further improve the application is two-fold. For short-term, more functions are
planned to add to the application and existing ones further optimized. The initial project
plan calls for the inclusion of image and video uploading support in the application.
These were not fully implemented due to time limit. A short term improvement should
allow users to store/ upload photos and videos to the Facebook website. These
functions should also be easy to use and in compliance to the existing drag-drop
scheme of the application. For example, user should be able to simply drag the photos
from outside the application, drop them onto the specific online album for them to be
uploaded to Facebook.
Being an Adobe Air application, this application should be easily modified to run on
multiple operation systems/platforms. So part of the short-term plan is to make the
application run on handheld devices such as iPhone, slate computers such as iPad and
also smart phones that run Android operation system.
A long-term plan for further improvement calls for the inclusion of more social media
networks and online commerce websites into the application. The current application
demonstrates the capability to facilitating user’s social shopping activities for Facebook
and eBay. For the future plan, the application should be able to include multiple social
46
media websites of user’s choice into the application. The source of shopping data should
not be limited to just eBay either. The application should give more freedom to users as
to what they can do and how to do it with the application in terms of social shopping
activities. Furthermore, as social shopping activities being just one aspect of user’s
social network universe, the application may become just a part of an overall social
networking environment that allows user activities for all aspects of their social network
activities.
47
References
1. Chevalier, Judith A. and Dina Mayzlin (2006), “The Effect of Word of Mouth on Sales:
Online Book Reviews,” Journal of Marketing Research, 43 (3), 345-354.
2. Constantine, L L., & Lockwood L. A. D. (2000). Inventing Interfaces: Tactics, Tricks, and
Techniques for Breakthrough Innovations. North Andover, MA: User Interface
Engineering
3. Facebook Press Room, Statistics (2009), www.facebook.com/press/info.php?statistics
4. Iyengar, Raghuram, Han, Sangman and Gupta, Sunil (2009), “Do Friends Influence
Purchases in a Social Network?” Harvard Business School Marketing Unit Working Paper
No. 09-123.
5. Needle, David (2007), “Whitman: eBay For 'Social Commerce',” InternetNews.com.
www.internetnews.com/bus-news/article.php/3706101
6. Oestreicher-Singer, Gal and Sundararajan, Arun, The Visible Hand of Social Networks in
Electronic Markets(November 19, 2008). Available at SSRN:
http://ssrn.com/abstract=1268516
7. Oestreicher-Singer, Gal and Sundararajan, Arun, Recommendation Networks and the
Long Tail of Electronic Commerce (January 2009). Available at SSRN:
http://ssrn.com/abstract=1324064
8. Stephen, Andrew T. and Toubia, Olivier (2009), “Deriving Value from Social Commerce
Networks,” Journal of Marketing Research, Forthcoming. Available at SSRN:
http://ssrn.com/abstract=1150995
9. Tedeschi, Bob (2006), “Like Shopping? Social Networking? Try Social Shopping,” New
York Times, Available at http://www.nytimes.com/2006/09/11/technology/11ecom.html
48