Everything is an (open) wiki page, on Wiki Object Model.Both data and UI are stored as wiki pagesSNS, Deals, Comments, Blogs…… CC is just like a cloud bus
Unsatisfied: unclear purpose, complex UI, sluggish performance, very user unfriendlyAfter major changes, still not so satisfactory. No clear focus, need simpler UI, search interface not intuitive, other usability issuesLarger scale evaluation (40), relatively satisfied result. Simple, effective, helpful.
Further ImprovementBugs\Privacy\Further UI improvement.Integrate 新浪微博 as a major SNS serviceAnalyze each website before mashup, retain only those useful information. (宁少勿乱)
Social shopping with semantic power
Dr. Huajun Chen
Social Shopping w/ Semantic Power
Design, Architecture, and Lesson Learned
Architecture and Design
Iterations and Evaluations
Summary, Questions and Answers
Social Shopping in China
• Similar to
Social, but not exactly the
• Very popular, especially
among young people
Problems in Social Shopping
Example: Together with Friends
Example: Seafood Buffet
• Many options for seafood
• Need N friends to buy a
table or 2
• Need know where and
when exactly (restrictions
• Possible bus-route and
Another Example: Family Trip Planning
Will Your Friends Join?
How Long Does It Take to
Dream: One Application
• Serves a dynamically organized
small, temporary, ad-hoc community of
• Collects, integrates, analyzes data and options
• Helps decision making for:
– Group/social purchase
– Group vacation planning
– Team event planning
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.
Semantic MediaWiki +
What is sMash
Search and Navigation with
Integration with Semantics
Mapping data to an Ontology
Synchronization With Online APIs
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.
3. Design mashup logic.
4. Read the API document and master the usage
of those APIs, and write the codes.
5. Publish and share mashups.
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
S.Mash and Social Shopping
Create wiki page
“G14 mobile Group-buying”
Everything is based on mobile
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
• Semantic Web Compatible
Two Views of Semantic Wikis
Wikis for Metadata
Metadata for Wikis
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]]”
Advanced Features of Semantic Wikis
Data I/O, Browsing
What is the Promise of Semantic Wikis?
• Semantic Wikis facilitate
Consensus over Data
• Combine low-expressivity
data authorship with the
best features of
• User-governed, usermaintained, user-defined
• Easy to use as an
extension of text
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
For smaller social circle on
targeted, transient, recurring
Mini wiki widgets for
modular, editable, annotatab
le UI contents.
Wiki widgets can connect to
Mashups are annotated and
composited semantically with
mappings to wiki ontologies
Users will be able to collaborate
interface, email, SNS and mobile
Core System Architecture
Families, Enterprises, Interest
Collabration Compass System
Wiki Bundle Portal
Semantic Mash-up Engine
Everything is an (open) wiki page, on Wiki
• 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
• 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
– Can be configured and used all together by
members of the group.
• Mobile rendering will also be supported in the
Data Page vs. UI Page
• A data page is generated by the sMash engine.
• A UI page is created by user based on certain
Technical Architecture retrieve data from data
All data pages and UI pages can be
searched by a customized facet search
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.
The CC:Social Shopping Ontology
One category page is created for
each class of the ontology
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
Problems with Original Faceted Search
• Cannot search final (rendered) content that
is generated through ASK Queries and
• Need index the rendered content of UI
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.
Data Sources Integrated
• Meituan,Lashou, 55tuan, Nuomi, Ftuan
• Sina, Tencent
• Kaixin, Renren, Tencent (QQ)
• Travelling of 163, dili360
• Weather, Map and Traffic
Information, Pictures from Flickr , etc
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
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
The Internal Feedback
• Invite friends who are totally unfamiliar with the
– Face-to-Face interaction
– Online Survey Form
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
• It takes time to learn using the facet search
– They like Taobao-style facets.
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
– Benefit 3: you can easily retrieve relevant
information from many other sites.
Lesson 2. How to use it?
• Previous workflow:
Create UI pages
– 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:
Join an user page
or create a new page
Vote deals on pages
– Starting from searching deals is good for incubating user groups.
Lesson 3. New Facet search
• We must develop a brand-new facet search
engine given its important role in the whole
– 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.
Lesson 4. More data needed
• We also want to integrate more data to improve
– Product info from Taobao.com
– Shops/store info from Jiepang.com
Constantly Changing Pieces
Workflow: from complex to simple
UI: Simple and simpler: New facet search
Ontology: simple but extensible
New and updated data sources
• Around 40 students participate the evaluation.
• 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
– 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？
Most students have group purchasing experiences.
每月1到5次 (1-5 times per month)
每月5次以上 (Over 5 times)
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.
Number that mentioned
6 (not a group purchasing website)
3.The mostly used SNS web site？
It is important to
integrate Sina Weibo
useless to integrate
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
有创新，又实用 (Novel and useful )
有创意，但不实用 (Novel but not useful)
创意一般，还算实用 (Not impressed, but useful)
没有创意，也不实用 (Not novel, and not useful)
5.How do you evaluate the UI style
美观，简洁大方 (Beautiful, simple and elegant)
看上去还算美观，过得去 (Good enough, acceptable)
不怎么漂亮，勉强看下 (Not great, but acceptable)
这皮肤，看了都不想再用这个网站了 (Ugly UI, I don’t even
want to enter it)
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
filters are easy to use.)
(Search and index not entirely accurate, but filters are easy to
(Search and index accurate, but facets filter not useful)
(Search and index not accurate, facets filter not useful)
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
9.Grade the function of “Group Page”
10.Evaluate the function of data mashup？
(I feel not useful)
(Useful, but need major improvement)
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
The idea is great, but somehow still inconvenient
12. Please grade the function of SNS
13.If you use CCWiki, which category of social activities
would you like to launch?
一起网购 Shopping together
组队旅行 Team travel
娱乐聚会 Entertainment and Party
共同生活 Life style
14.Which functions among SNS, facet search, group page
and data mashup do you think are useful ？
SNS功能 (SNS Mashup)
团购搜索功能 (Deal Searching)
群组页面 (Group page or decision page)
数据聚合功能 (Data Mashup)
16.Do you know the Semantic Web and Google
Other general comments summary
• UI and engineering still has lots of room to be
– 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.
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
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
• Financial engineers analyze their model results with some historical market data.
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……
1 Senior Developer
3 Full-time Developers
4 Graduate Students
1 Technical Supporter
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”:
In page "Property:Has population”:
• “Has Type” is a pre-defined “special” property for
– 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”
Beijing is a city in [[Has
country::China]], with population [[Has
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
Database-style Query over Wiki Data
Example: Skyscrapers in China
higher than 50 stories, built
between 2000 and 2008
ASK/SPARQL query target
Advanced Semantic Wiki Features
• Semantic forms or templates
• Auto-completion based on semantics
• Powerful visualizations based on
• Advanced search and queries (ASK query, faceted
search, SPARQL, etc.)
• Semantic notifications (personalized information
• Import and Export of Semantic Data
• Data Integration: identification, disambiguation,
merging, trust, security/privacy, …