Social Shopping w/ Semantic Power

Jesse Wang @aiwang jessew@vulcan.comDr. Huajun Chen Zhejiang University

Design, Architecture, and Lesson Learned

Outline

• Motivation• Technologies• Architecture and Design• Iterations and Evaluations• Summary, Questions and Answers

MOTIVATION1

Social Shopping in China

• Similar to Groupon, Living Social, but not exactly the same

• Very popular, especially among young people

Problems in Social Shopping

Too many

Choices

Limited Search

& Browse

Further info

needed

6

Example: Together with Friends

Example: Seafood Buffet Dinner at • Many options for seafood

buffet• Need N friends to buy a

table or 2• Need know where and

when exactly (restrictions apply)

• Possible bus-route and weather info

• …

Inception

Invites friends

Another Example: Family Trip Planning

SocialNetworks

ServicesCalendar Widget

Weather Widget

Location WidgetActivity widget

8

Will Your Friends Join?How Long Does It Take to Reach Consensus?

9

Tools to Help?

10

Dream: One Application

• Serves a dynamically organized small, temporary, ad-hoc community of interest

• Collects, integrates, analyzes data and options• Helps decision making for:

– Group/social purchase– Group vacation planning– Team event planning

11

Enters CC: Collaboration Compass

Collaborative, D.I.Y. information integration portal

12

TECHNOLOGIES2

CC: Collaboration Compass

• Collaboration Compass (CC) is a micro-wiki widget-based dynamic

system that uses a combination of posts, charts, tweets, online WS

API mash-ups, etc., to integrate heterogeneous data and support on-

the-fly social collaboration.

• It is based on Semantic MediaWiki Plus (SMW+) and a semantic

mash-up engine called sMash by Zhejiang University.

Collaboration Compass

Semantic MediaWiki +

Wiki Widgets Semantic Data

sMash

API Mashups

What is sMash

Synchronization With Online APIs

Mapping data to an Ontology

Integration with Semantics

Search and Navigation with Semantics Metadata

Standard Mashup Development Steps

1.Think of a mashup scenario.I want to see photos of all famous beaches around the world.

2. Look for APIs manually. Flickr 、 VirtualEarth 、 WindowsLiveSpace

3. Design mashup logic.Flickr+WindowsLiveSpaceVirtualEarth

4. Read the API document and master the usage of those APIs, and write the codes.

5. Publish and share mashups.

16

Semantic Mashup - sMash

• Semantically markup online web service APIs• Mapping these APIs and underlying data

model to a common upper ontology• Data can be consumed via a more general

purpose API using semantic data• Limited transformation is needed for mash up

and integration purpose

17

As API Façade and Ontology Map

sMash

S.Mash and Social Shopping

“G14 mobile Group-buying”

topic creator

Social Shopping

APIs

Semantic Mashup engine

Create wiki page

Invite friends

Manage Information

Comment APIs

Production Information

APIs

Purc

hase

Comm

ent

sDetail information

Filter G14 mobile

Microblog APIs

@this plan

SNS APIs

Semantic Wiki

Information Aggregation

Social Participation

Everything is based on Semantics

19

What is a Semantic Wiki

• A wiki that has an underlying model of the knowledge  described in its pages.

• To allow users to make their knowledge explicit and formal

• Semantic Web Compatible

Semantic Wiki

Two Views of Semantic Wikis

Wikis for Metadata

Metadata for Wikis

20

Basics of Semantic Wikis

• Still a wiki, with regular wiki features– E.g. Category/Tags, Namespaces, Title, Versioning, ...

• Typed Content– E.g. Page/Card, Date, Number, URL/Email, String, …

• Typed Links– E.g. “capital_of”, “contains”, “born_in”…

• Querying Interface Support– E.g. “[[Category:Person]] [[Age::<30]]”

21

22

Advanced Features of Semantic Wikis

Forms Auto-completion Visualization

Queries Notification Data I/O, Browsing

Characteristics of Semantic Wikis

23

Semantic Wikis

What is the Promise of Semantic Wikis?

• Semantic Wikis facilitate Consensus over Data

• Combine low-expressivity data authorship with the best features of traditional wikis

• User-governed, user-maintained, user-defined

• Easy to use as an extension of text authoring

24

The ultimate Data aggregator

CC = sMash + Semantic MediaWiki

• Wiki as social platform. We add the social functionality of semantic

wiki in the system to improve the flexibility of customizing social

shopping and data integration application.

• Semantic metadata. The system leverage the semantic power of both

semantic media wiki and semantic mash-up so that advanced knowledge

processing capability is enabled

• Mash-up support. The system uses a mash-up engine to integrate all

kinds of web data sources (restful web services) so that online

information can be easily imported to wikis as content sources

26

DESIGN AND ARCHITECTURE3

CC Goals

For smaller social circle on more targeted, transient, recurring topics

Mini wiki widgets for modular, editable, annotatable UI contents.

Wiki widgets can connect to mash-up APIs, synchronizing content automatically.

Mashups are annotated and composited semantically with mappings to wiki ontologies

Popular Social Networks Services supported.

Users will be able to collaborate through the web interface, email, SNS and mobile applications.

Core System Architecture

Collabration Compass System

Compass Portal

Families, Enterprises, Interest Groups…

Semantic Mash-up Engine

News

Mashup

Location

Mashup

Social

Mashup

Music

Mashup

Event

Mashup …Photo

Mashup

Composition IntegrationRecommendation

Subject

Filtering

Topic

Aggregation

Data

Visualization

Knowledge

Extraction

Feed,

News

Wikidget

Photo

Wikidget

Event

Wikidget

Media

Wikidget

Database

Wikidget

Custom

View…

…

Wiki Bundle Portal

Creation Tool

Wikidget Data

Importing Tool

Wiki Bundle Templates Repository

Wikidget Repository

Wikidget

Configuration Tool

29

Design Principles

Everything is an (open) wiki page, on Wiki Object Model.• Both data and UI are stored as wiki pages

Everything is in the cloud.• SNS, Deals, Comments, Blogs…… CC is just like a cloud bus

Keep things simple.• Simple UI, simple workflow, simple ontology…

Basic Design Ideas (1/2)

• Integrate and import all kinds of SNS services such as RenRen, MSN, Sina-Weibo, QQ, etc. on the fly by sMash to SMW.– No need to create and maintain a new SNS service.

• Integrate different types of online data APIs by sMash and import mashuped data directly to SMW. – Data are delivered at real-time, no need to maintain a

huge data center.

• Each mashup corresponds to a wiki widget that is responsible for data visualization for mashuped data.

Basic Design Ideas (2/2)

• Filters and content recommender are necessary– Only relevant data will be delivered instantly.

• Offer a number of mashup-based wiki widgets templates.– Can be configured and used all together by

members of the group.

• Mobile rendering will also be supported in the future.

32

Data Page vs. UI Page

• A data page is generated by the sMash engine.• A UI page is created by user based on certain

templates.

SNS Data Pages

Deal Data Pages

Blog Data Pages

Other Data Pages

……

UI Pages

Page Templates

ASK Queries

ASK Queries

ASK Queries

WebAPI

33

A Sample Data Page

34

A Sample UI Page

35

Technical Architecture

Data are mashuped from online APIs.

All data are mapped to the ontology so that heterogeneous data can be merged.

All data are imported to SMW as semantic data pages.

UI pages retrieve data from data pages through “ASK Query”.

A UI page is typically comprised of several wiki widgets that control the display of the semantic data.

Each wiki widget is a kind of semantic result format that can control the display of semantic data.

All data pages and UI pages can be searched by a customized facet search engine.

36

The CC:Social Shopping Ontology

One category page is created for each class of the ontology

37

Facet Search Implementation

Two places where we use facet searches

Search all UI pages based Semantic Content in that Pages.

Filtering deal data pages while configuring social-shopping.

38

Problems with Original Faceted Search

• Cannot search final (rendered) content that is generated through ASK Queries and templates

• Need index the rendered content of UI pages

39

Solution: Deep Indexing

• For each UI page, we generate a corresponding data page (called UI-data-page) by executing those ASK queries of that UI page.

• The facet search engine simply indexes these UI-data-pages. While users search a UI-data-page, they will be re-directed to the corresponding UI pages.

• We then write a spider(like a search engine spider) to periodically execute those UI pages to update corresponding data pages.

40

Data Sources Integrated

• Meituan,Lashou, 55tuan, Nuomi, Ftuan, Manzo

Social Shopping (6)

• Sina, TencentMicro Blog

(2)

• Kaixin, Renren, Tencent (QQ)Social Networks

(3)

• Travelling of 163, dili360Travel

(2)

• DoubanEntertainment

(1)

• Weather, Map and Traffic Information, Pictures from Flickr , etc

Other (4)

41

Screenshots

42

Updated Screenshots

Section Reserved For

43

44

45

46

47

Iterations and Evaluations

48

Evaluation Feedbacks

Team Review

Internal Feedbacks

External Evaluation

49

Team/Stakeholder Review Feedbacks

• More like a mixture of technologies and data• No clear, simple purpose through UI• Duplicate ways of storing data/metadata• UI is very cumbersome and confusing• Workflows are too many and unclear• Ontology was way to complicated and

irrelevant

50

Result of Changes

• Overdraft the architecture and technology-design

• Simplified the workflow (into 2)• Organized the data and responsibilities• Re-designed the ontology to just meet the

requirement of this scenario• Re-design the UI

51

The Internal Feedback

• Invite friends who are totally unfamiliar with the system

• Methods:– Face-to-Face interaction – Online Survey Form

52

Major Results of The First Internal Test

• The benefit of using the system is not intuitive.– It takes a while for them to know why the site is

useful to them.

• The workflow is still complex– The testers are confused about the workflow at the

beginning.

• It takes time to learn using the facet search– They like Taobao-style facets.

53

Lesson 1. Why use it?

• The benefits of using the system must be simple and more obvious to end users. – Benefit 1: you can search deals all together. – Benefit 2: you can invite friends to vote against

deals.– Benefit 3: you can easily retrieve relevant

information from many other sites.

54

Lesson 2. How to use it?

• Previous workflow:

– Starting from searching user pages is not good for incubating user groups.• We do not have that much pages for user to search at the beginning.• Many users just end up with searching deals.

• New workflow:

– Starting from searching deals is good for incubating user groups.

Search user-pages Search deals Create UI pages Customize UI pages Votes

Search dealsJoin an user page

or create a new pageVote deals on pages

55

Lesson 3. New Facet search

• We must develop a brand-new facet search engine given its important role in the whole system.– More intuitive to use– Only display useful facets– Hide non-useful info in the results.– The ontology also needs to be modified to support

new facets we want.

56

Lesson 4. More data needed

• We also want to integrate more data to improve user experience. – Product info from Taobao.com– Shops/store info from Jiepang.com

57

Constantly Changing Pieces

Workflow: from complex to simple

UI: Simple and simpler: New facet search

Ontology: simple but extensible

New and updated data sources

Performance optimization

External Evaluation

• Around 40 students participate the evaluation.– http://www.sojump.com/report/1818509.aspx?default=1

• An online questionnaire is setup, and 30 answer sheets are collected in total.– We invited 10 students (get paid) to come to lab to do on-site

evaluation. – Each student was asked to invite at least three more friends

(through CCWiki’s SNS components) to join the evaluation. To control the evaluation, further invitation are not allowed.

– Each invited student received an earphone as a gift.

1.The frequency that you use group purchasing ？

选项 (Options) 小计 比例 (Ratio)

基本不用 (Seldom) 7 23.33%

每月 1 到 5 次 (1-5 times per month) 21 70%

每月 5 次以上 (Over 5 times) 2 6.67%

本题有效填写人次 30

Most students have group purchasing experiences.

2.The most frequently used group purchasing web site ？

Rank Name Number that mentioned

1 美团 (Meituan) 9

2 百度团购 (baidu) 6 (not a group purchasing website)

3 淘宝聚划算 (taobao) 4

4 团 800(tuan 800) 4

5 窝窝 (wowo) 4

6 糯米网 (Nuomi) 2

7 大众点评网 (Dazhong) 2

8 拉手 (Lashou) 2

9 360 团购 (360tuan) 2

10 QQ 团购 (Qqtuan) 1

11 口碑 (koubei) 1

12 Google 实惠 (google) 1

CCWiki covers most of the most popular group purchasing website in China. The data has already enough coverage.

3.The mostly used SNS web site ？

Rank Name Frequency

1 Sina microblog 15

2 Tencent microblog 13

3 Renren 12

4 Kaixin 0

It is important to integrate Sina Weibo (Microblog) ， and useless to integrate

Kaixin

4.How do you evaluate our general idea of CCWiki from an end user point of view?

选项 (Options) 小计 比例

有创新，又实用 (Novel and useful ) 16 53.33%

有创意，但不实用 (Novel but not useful) 5 16.67%

创意一般，还算实用 (Not impressed, but useful) 9 30%

没有创意，也不实用 (Not novel, and not useful) 0 0%

本题有效填写人次 30

The general idea of CCWiki is accepted. From interview, almost all students said they would like to use the website.

5.How do you evaluate the UI style

选项 小计 比例

美观，简洁大方 (Beautiful, simple and elegant) 5 16.67%

看上去还算美观，过得去 (Good enough, acceptable) 16 53.33%

不怎么漂亮，勉强看下 (Not great, but acceptable) 9 30%

这皮肤，看了都不想再用这个网站了 (Ugly UI, I don’t even want to enter it)

0 0%

其它 [ 详细 ] 0 0%

本题有效填写人次 30

6.Evaluate our facet search engine

选项 小计 比例关键字搜索和分类准确，过滤功能使用方便(Keyword search and index have high accuracy, the facet filters are easy to use.)

11 36.67%

搜索和分类不准确，过滤条件使用方便(Search and index not entirely accurate, but filters are easy to use.)

3 10%

关键字搜索和分类准确，但过滤什么的用起来没实际效果(Search and index accurate, but facets filter not useful)

6 20%

搜索分类不准确，过滤使用也没效果(Search and index not accurate, facets filter not useful)

3 10%

其它 [ 详细 ] 7 23.33%

本题有效填写人次 30

Our facet search needs further improvement with regards to both search accuracy and facets design.

7.Grade the Faceted Search

选项小计 比例

5 分 ( 最高分 ) 4 13.33%

4 分 12 40%

3 分 13 43.33%

2 分 1 3.33%

1 分 0 0%

本题有效填写人次 30

8.How do you evaluate the function of “Group Page”(The voting page or decision page) ？

选项 小计 比例以团购为中心，发起社交讨论、评价，比较创新The idea is novel

20 66.67%

功能比较实用It is useful in real-life

13 43.33%

在实际生活中可能用大不到It is not useful in real-life

6 20%

群组页面功能齐全，设计得比较合理The group page is sound, design is generally good

3 10%

想法是比较好，但群组页面的实现需要提高The idea is good, but implementation needs further improvement

12 40%

本题有效填写人次 30

9.Grade the function of “Group Page”

选项小计 比例

5 分 ( 最高分 ) 7 23.33%

4 分 15 50%

3 分 8 26.67%

2 分 0 0%

1 分 0 0%

本题有效填写人次 30

10.Evaluate the function of data mashup ？

选项小计 比例

感觉用不上，多余的(I feel not useful)

3 10%

想法是比较实用的，可惜实现得还不好，还要大量改进(Useful, but need major improvement)

24 80%

其它 [ 详细 ] 5 16.67%

本题有效填写人次 30

11. Evaluate the function of SNS mashup?

选项 小计 比例多此一举，不如直接用浙大团聚网的帐号Not useful, better to use the SMW’s account directly

0 0%

挺方便的，因为我的关系圈都在这些网站上Very useful, because all of my friends are on those SNS websites.

24 80%

这个想法是很好的，但用起来还是不太方便The idea is great, but somehow still inconvenient

5 16.67%

其它 [ 详细 ] 1 3.33%

本题有效填写人次 30

12. Please grade the function of SNS

选项小计 比例

5 分 ( 最高分 ) 8 26.67%

4 分 16 53.33%

3 分 5 16.67%

2 分 1 3.33%

1 分 0 0%

本题有效填写人次 30

13.If you use CCWiki, which category of social activities would you like to launch?

选项 小计 比例

一起网购 Shopping together 3 10%

餐饮小聚 Restaurants 12 40%

组队旅行 Team travel 4 13.33%

娱乐聚会 Entertainment and Party 10 33.33%

共同生活 Life style 1 3.33%

其它 0 0%

本题有效填写人次 30

14.Which functions among SNS, facet search, group page and data mashup do you think are useful ？

选项小计 比例

SNS 功能 (SNS Mashup) 17 56.67%

团购搜索功能 (Deal Searching) 19 63.33%

群组页面 (Group page or decision page) 16 53.33%

数据聚合功能 (Data Mashup) 13 43.33%

本题有效填写人次 30

15.Please grade the whole site

16.Do you know the Semantic Web and Google Knowledge Graph ？

75

Other general comments summary

• UI and engineering still has lots of room to be improved – Details and details.

• Need to ensure user data privacy.• Mashuped data is too much, less and useful is

the #1 rule.• Data accuracy is important

• The user should have no right to edit the page as in wiki

• Real-time data should be integrated

Summary of External Evaluation

• Social shopping is a good application for students.

• The overall idea are well accepted by most participants.

• Deal facets search, launch a social event, and information mashup

are all useful to them, but the usability needs further improvement.

• User experience needs further improvement, they care about

details, even a small button or a text.

• We are more and more confident that CCWiki will be accepted by

ZJU’s students if we keep moving on after this round of evaluation.

77

Future Development Plan *

• Further Improvement

– Better micro-blogging integration

– Bugs\Privacy\Further UI improvement.

• Incubate User Group

– Through ZJU’s BBS and distributing brochures

• Business Model

– Integrate coupon information

– Advertisements for those deals providers.

– CCWiki will be designed as a website that everybody can organize a small-scale social event.

We can start from ZJU, and expand to other universities.

* Further development on-hold at this point

Who may like the system?

Any user who wants a more structured discussion or collaboration on a topic• Sport team organization: roster, schedules, reminders, scores, fields, photos• Wedding, baby shower or other complicated process management• Project leaders who want collaborative information collecting beyond Microsoft Excel and Email

Any user who wants to build a more structured Content Management System• A local food guide or places of interest in a small town• A knowledge-base of architecture firm• Department and Office location, contact info and so on in a large corporation

Users who need a collaborative project portal• Distributed software project management system• School district donation management

Users who want to integrate online data sources and internal databases• Medical scientists need clinical trial data together with some Linked Open Data and/or their

local databases• Financial engineers analyze their model results with some historical market data.

Potential Applications

Agile project management in a small group.

Human-fresh search ( 人肉搜索： Social Search).

Party organization and family meet up.

Small-scale workshop/conferences organization.

Small interesting groups or working groups.

Other social applications……

Project Team

Jesse Wang

Project Supervisor

1 Senior Developer

ZJU-Investment

3 Full-time Developers

ZJU-Investment

4 Graduate Students

ZJU-Investment

1 Technical Supporter

Vulcan

Huajun Chen

ZJU Co-supervisoer

Thank you!Questions?

81

SNS

Mashups

Wiki

Backup slides start next…

82

Semantic MediaWiki Markup Syntax

[[Property::Value | Display]]

Zhejiang University is located in [[Has location::Hangzhou]], with[[Has population::39000|about 39 thousands]] students.

In page "Property:Has location”:[[Has type::Page]]

In page "Property:Has population”:[[Has type::number]]

83

Special Properties

• “Has Type” is a pre-defined “special” property for meta-data– Example: [[Has type::String]]

• “Allowed Values” is another special property– [[Allows value::Low]], – [[Allows value::Medium]], – [[Allows value::High]]

• In Halo Extensions, there are domain and range support– RDFs expressivity– Semantic Gardening extension also supports “Cardinality”

84

Define Classes

Beijing is a city in [[Has country::China]], with population [[Has population::2,200,000]].

[[Category::Cities]]

Categories are used to define classes because they are better for class inheritance.

The Jin Mao Tower ( 金茂大厦 ) is an 88-story landmark supertall skyscraper in …

[[Categories: 1998 architecture | Skyscrapers in Shanghai | Hotels in Shanghai | Skyscrapers over 350 meters | Visitor attractions in Shanghai | Landmarks in Shanghai | Skidmore, Owings and Merrill buildings]]

Category:Skyscrapers in China Category: Skyscrapers by country

85

Database-style Query over Wiki Data

{{#ask:[[Category:Skyscrapers]][[Located in::China]][[Floor count::>50]][[Year built::<2000]][[Year built::>2008]] …

}}

Example: Skyscrapers in China higher than 50 stories, built between 2000 and 2008

ASK/SPARQL query target

Data via DBpedia

Advanced Semantic Wiki Features

• Semantic forms or templates• Auto-completion based on semantics• Powerful visualizations based on

semantics/structures/types• Advanced search and queries (ASK query, faceted search,

SPARQL, etc.)• Semantic notifications (personalized information filtering)• Import and Export of Semantic Data• Data Integration: identification, disambiguation, merging,

trust, security/privacy, …

86