A social/group shopping experiment done with semantic technologies: API mashup, wiki, search and with evaluations

1. Jesse Wang
@aiwang
jessew@vulcan.com
Dr. Huajun Chen
Zhejiang University
Social Shopping w/ Semantic Power
Design, Architecture, and Lesson Learned

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

3. MOTIVATION

4. Social Shopping in China
• Similar to
Groupon, Living
Social, but not exactly the
same
• Very popular, especially
among young people

5. 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
• …
6

7. Another Example: Family Trip Planning
Inception
Social
Networks
Invites
friends
Calendar Widget
Services
Weather Widget
Location Widget
Activity widget

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

9. Tools to Help?
9

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
10

11. Enters CC: Collaboration Compass
Collaborative, D.I.Y. information integration portal
11

12. TECHNOLOGIES
12

13. 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 onthe-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

14. What is sMash
Search and Navigation with
Semantics Metadata
Integration with Semantics
Mapping data to an Ontology
Synchronization With Online APIs

15. 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+WindowsLiveSpaceVirtualEarth
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
16

17. As API Façade and Ontology Map
17

18. S.Mash and Social Shopping
Social
Participation
Create wiki page
“G14 mobile Group-buying”
Manage
Information
topic creator
Information
Aggregation
SNS
APIs
Semantic Wiki
Everything is based on mobile
Semantic Mashup
G14
engine
Semantics
Microblog
APIs
Social Shopping
APIs
Comment
APIs
Filter
Production
Information
APIs

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
19

20. Two Views of Semantic Wikis
Wikis for Metadata
Metadata for Wikis
20

21. 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
22

23. Characteristics of Semantic Wikis
23

24. 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, usermaintained, user-defined
• Easy to use as an
extension of text
authoring
24

25. 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 ARCHITECTURE
26

27. CC Goals
For smaller social circle on
more
targeted, transient, recurring
topics
Mini wiki widgets for
modular, editable, annotatab
le 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
Services supported.
Users will be able to collaborate
through
the
web
interface, email, SNS and mobile
applications.
Networks

28. Core System Architecture
…
Families, Enterprises, Interest
Groups…
Compass Portal
Feed, New
s Wikidget
Photo
Wikidget
Event
Wikidget
Media
Wikidget
Database
Wikidget
…
Custom
View
Collabration Compass System
Wiki Bundle Portal
Creation Tool
Wiki Bundle
Templates
Repository
Wikidget Data
Importing Tool
Wikidget
Configuration Tool
Wikidget
Repository
Subject
Topic
Knowledge
Data
Filtering
Aggregation
Extraction
Visualization
Semantic Mash-up Engine
Recommendation
News
Mashup
Social
Mashup
Composition
Location
Mashup
Event
Mashup
Integration
…
Music
Mashup
Photo
Mashup

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…
29

30. 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.

31. 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
Web
API
Deal Data
Pages
ASK Queries
UI Pages
Blog Data
Pages
……
Other Data
Pages
Page
Templates
32

33. A Sample Data Page
33

34. A Sample UI Page
34

35. Technical Architecture retrieve data from data
All data pages and UI pages can be
UI pages
searched by a customized facet search
engine.
All data are imported to SMW
as semantic data pages.
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 are mapped to the
ontology so that heterogeneous
data can be merged.
Data are mashuped
from online APIs.
35

36. The CC:Social Shopping Ontology
One category page is created for
each class of the ontology
36

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.
37

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
38

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 UIdata-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.
39

40. Data Sources Integrated
Social Shopping
(6)
Micro Blog
(2)
Social Networks
(3)
Travel
(2)
Entertainment
(1)
Other
(4)
• Meituan,Lashou, 55tuan, Nuomi, Ftuan
, Manzo
• Sina, Tencent
• Kaixin, Renren, Tencent (QQ)
• Travelling of 163, dili360
• Douban
• Weather, Map and Traffic
Information, Pictures from Flickr , etc
40

41. 41

42. 42

43. 43

44. 44

45. 45

46. 46

47. Iterations
and Evaluations
47

48. Evaluation Feedbacks
Team Review
Internal Feedbacks
External Evaluation
48

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
49

50. Result of Changes
• Overdraft the architecture and technologydesign
• 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
50

51. The Internal Feedback
• Invite friends who are totally unfamiliar with the
system
• Methods:
– Face-to-Face interaction
– Online Survey Form
51

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.
52

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.
53

54. Lesson 2. How to use it?
• Previous workflow:
Search user-pages
Search deals
Create UI pages
Customize UI
pages
Votes
– 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:
Search deals
Join an user page
or create a new page
Vote deals on pages
– Starting from searching deals is good for incubating user groups.
54

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.
55

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
56

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
57

58. 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.

59. 1.The frequency that you use group purchasing？
Most students have group purchasing experiences.
选项 (Options)
小计
基本不用 (Seldom)
7
每月1到5次 (1-5 times per month)
21
每月5次以上 (Over 5 times)
2
本题有效填写人次
30
比例 (Ratio)
23.33%
70%
6.67%

60. 2.The most frequently used group purchasing web site？
CCWiki covers most of the most popular group purchasing website in
China. The data has already enough coverage.
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

61. 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

62. 4.How do you evaluate our general idea of
CCWiki from an end user point of view?
The general idea of CCWiki is accepted. From
interview, almost all students said they would like to use
the website.
选项 (Options)
小计
有创新，又实用 (Novel and useful )
16
有创意，但不实用 (Novel but not useful)
5
创意一般，还算实用 (Not impressed, but useful)
9
没有创意，也不实用 (Not novel, and not useful)
0
本题有效填写人次
30
比例
53.33%
16.67%
30%
0%

63. 5.How do you evaluate the UI style
选项
小计
美观，简洁大方 (Beautiful, simple and elegant)
5
看上去还算美观，过得去 (Good enough, acceptable)
16
不怎么漂亮，勉强看下 (Not great, but acceptable)
9
这皮肤，看了都不想再用这个网站了 (Ugly UI, I don’t even
want to enter it)
0
其它 [详细]
0
本题有效填写人次
30
比例
16.67%
53.33%
30%
0%
0%

64. 6.Evaluate our facet search engine
Our facet search needs further improvement with regards to both
search accuracy and facets design.
选项
小计 比例
关键字搜索和分类准确，过滤功能使用方便
(Keyword search and index have high accuracy, the facet
11
36.67%
filters are easy to use.)
搜索和分类不准确，过滤条件使用方便
(Search and index not entirely accurate, but filters are easy to
3
10%
use.)
关键字搜索和分类准确，但过滤什么的用起来没实际效果
6
(Search and index accurate, but facets filter not useful)
20%
搜索分类不准确，过滤使用也没效果
3
(Search and index not accurate, facets filter not useful)
10%
其它 [详细]
7
本题有效填写人次
30
23.33%

65. 7.Grade the Faceted Search
选项
小
比例
计
5分(最高分)
4
4分
12
3分
13
2分
1
1分
0
本题有效填写人次
30
13.33%
40%
43.33%
3.33%
0%

66. 8.How do you evaluate the function of “Group Page”(The
voting page or decision page)？
选项
以团购为中心，发起社交讨论、评价，比较创新
The idea is novel
功能比较实用
It is useful in real-life
在实际生活中可能用大不到
It is not useful in real-life
群组页面功能齐全，设计得比较合理
The group page is sound, design is generally good
想法是比较好，但群组页面的实现需要提高
The idea is good, but implementation needs further
improvement
本题有效填写人次
小计
20
13
6
3
12
30
比例
66.67%
43.33%
20%
10%
40%

67. 9.Grade the function of “Group Page”
选项
小
比例
计
5分(最高分)
7
4分
15
3分
8
2分
0
1分
0
本题有效填写人次
30
23.33%
50%
26.67%
0%
0%

68. 10.Evaluate the function of data mashup？
选项
感觉用不上，多余的
(I feel not useful)
小
比例
计
3
10%
想法是比较实用的，可惜实现得还不好，
24
还要大量改进
80%
(Useful, but need major improvement)
其它 [详细]
5
本题有效填写人次
30
16.67%

69. 11. Evaluate the function of SNS mashup?
选项
多此一举，不如直接用浙大团聚网的帐号
Not useful, better to use the SMW’s account directly
挺方便的，因为我的关系圈都在这些网站上
Very useful, because all of my friends are on those SNS
websites.
这个想法是很好的，但用起来还是不太方便
The idea is great, but somehow still inconvenient
小计
0
24
5
其它 [详细]
1
本题有效填写人次
30
比例
0%
80%
16.67%
3.33%

70. 12. Please grade the function of SNS
选项
小
比例
计
5分(最高分)
8
4分
16
3分
5
2分
1
1分
0
本题有效填写人次
30
26.67%
53.33%
16.67%
3.33%
0%

71. 13.If you use CCWiki, which category of social activities
would you like to launch?
选项
小
比例
计
一起网购 Shopping together
3
餐饮小聚 Restaurants
12
组队旅行 Team travel
4
娱乐聚会 Entertainment and Party
10
共同生活 Life style
1
其它
0
本题有效填写人次
30
10%
40%
13.33%
33.33%
3.33%
0%

72. 14.Which functions among SNS, facet search, group page
and data mashup do you think are useful ？
选项
小
比例
计
SNS功能 (SNS Mashup)
17
团购搜索功能 (Deal Searching)
19
群组页面 (Group page or decision page)
16
数据聚合功能 (Data Mashup)
13
本题有效填写人次
30
56.67%
63.33%
53.33%
43.33%

73. 15.Please grade the whole site

74. 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
75

76. 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
– BugsPrivacyFurther 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
77

78. 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.

79. 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……

80. Project Team
Jesse Wang
Project Supervisor
Huajun Chen
ZJU Co-supervisoer
1 Senior Developer
ZJU-Investment
3 Full-time Developers
ZJU-Investment
4 Graduate Students
ZJU-Investment
1 Technical Supporter
Vulcan

81. Thank you!
Questions?
Wiki
Mashu
ps
SNS
Backup slides start next…
81

82. Semantic MediaWiki Markup Syntax
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]]
82

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”
83

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
84

85. Database-style Query over Wiki Data
Example: Skyscrapers in China
higher than 50 stories, built
between 2000 and 2008
ASK/SPARQL query target
{{#ask:
[[Category:Skyscrapers]]
[[Located in::China]]
[[Floor count::>50]]
[[Year built::<2000]]
[[Year built::>2008]]
…
}}
85

86. 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