Flip the Cart! : Reimagining Next in eCommerce

Samir Dash
mobilewish@gmailcom
v1.0, August 2014This is a concept project only.
1
Flip the Cart!
Reimagining Social Commerce

Contents
• Background
• Research & Analysis
•Secondary Research
• Quick Dip-stick Study (Primary Research)
• Competitive Analysis
• Information Architecture
• Life Goals & User Stories
• Unique User-pain-points
• High Level Design (HLC) Goals
• Key Performance Indicators (KPIs) & MVP
• Unique User Scenarios/Use Cases/Story-boards
• Proposed Conceptual Model
• Interaction Design
• Interaction Features & Design Goals
• High Level UI Flow
• Responsive & Fluid Layout
• Detailed Wireframes
• Facebook Page and Facebook App
•Prototype
• Quick Paper prototype
•Visual Design
•Appendix
2

BACKGROUND.
Social Commerce = Social Networking + eCommerce
This is a concept project that attempts to think beyond what Amazon and Flipkart are doing to redefine the
next in e-commerce through the usage of social media. In the current project, due to limitation in time and
scope, I have chosen an example how we can integrate existing Social Networking sites like Facebook with a
conceptual e-commerce eco-system (I call it “BagItAll”).
Disclaimer:
I just used the name “BagItAll” for giving the concept a name for easy reference. On the event of any accidental coinciding with any real
organisation, please excuse and ignore.
3

RESEARCH & ANALYSIS.
• Secondary Research
• Quick Dip-stick Study (Primary Research)
4

E-commerce Landscape
INTERSHOP, FALL 2013
6

2013
Majority e-commerce share in all types of
sales is in clothing / apparel industry .
7

Peer Recommendations Are More Influential Than
Any Other Form of Advertising
http://blog.crowdtap.it/2013/08/65-of-shoppers-use-social-media-to-find-perfect-gift/
8

Check-out Process and Cart Abandonment
UPS
9

Top 10 Reasons for Cart Abandonment
UPS
11

Drivers of Positive Feedback
UPS
13

E-Commerce Over Devices
UPS
14

App Based Comparison Shopping
UPS
15

Time Spent on Social Media
UPS
16

Social Media Sites and Retailers
UPS
17

Why Like Brands on Facebook?
UPS
18

Why Buy Online?
Civic Consulting (via TNS) 2011
19

India & Socio-Commerce Landscape
Social media and mobile are helping accelerate eCommerce adoption. The social and mobile
trends that are prominent worldwide are also underway in India. With 51 million Facebook
users (5 million of whom joined in the past three months alone), India is ranked as Facebook’s
third-largest audience in the world after the US and Brazil.12 Social networks have not been
major drivers of eCommerce transactions in other markets, yet these sites play an important
role in driving consumers online and getting them to engage with brands.13 And in mobile,
India has close to 1 billion wireless subscribers: As of May 2012, the Telecom Regulatory
Authority of India reported more than 929 million wireless subscribers in the country.14 While
3G penetration today is estimated to be in the low single digits and users complain of low
network speeds, mobile will be a key tool in helping users connect in a market where overall
Internet penetration remains low.15
The eCommerce market in India is smaller than other markets ... growing the fastest.
+
India is ranked as Facebook’s 3rd-largest audience in the world
=
e-Commerce + Social Media has the largest potential in India
TRENDS IN INDIA’S eCOMMERCE MARKET
Forrester Research, 2012
20

MASSCLUSIVITY
http://www.trendwatching.com/trends
/MASSCLUSIVITY.htm
'exclusivity for the masses’ is all
about consumer’s need for
respect and privilege among the
masses
STATUS ANXIETY
consumers' never-ending quest
for status and standing out
amidst a SEA OF SAMENESS
and MASS CLASS standards.
[Alain de Botton]

Take-away:
UPS
• Facilitating a seamless omnichannel experience
• Providing information on delivery options and shipping costs up-front
• Providing tracking info and keeping shoppers informed proactively on delivery status
• Delivering products when expected
• Enabling a “hassle-free” returns experience in the shopper’s channel of choice
22

Value curve : Competitive Analysis
From subjective value curve analysis
Discounts &
offers
Shopping cart
experience
Checkout
experience
Social media
integration
Rewarding
users
Shipping &
tracking
Customer
service
Competitive
pricing
Amazon Flipkart Others
Opportunities
24

Insight from market analysis:
UPS
• Amazon and Flipkart keep on improving on the performance factors which are critical
in nature.
• Social media integration has a lot of scope in countering the market competitions from
big players
• Also the eco-system can be scaled based on seamless integration with existing social
network eco-systems.
• Need is to discover and identifiy the new and unique user pain points to provide
delightful experience
25

Quick Dip-stick (Primary /Qualitative)
26

Local apparel sore owner
Male, 44, Bangalore,
Runs an apparel store in Rammurthy nagar
Educated – BA in Arts
Owns a second hand laptop and uses BSNL
wifi to connect and download music etc.
Uses 2 Chinese made smart-phones.
Every months he travels to Kolkatta to get
clothes for store.
“I don’t believe Flipkart can kill local market..people will still
buyt ..majority of the population don’t know how to operate
a TV set , forget about computer”
“Giving good discount on low priced cloths is difficult
..sometimes have to sell at 1rupee margin”
Mobile
Emotional
Economic power
Low High
Ravi
Works at a multinational mobile
manufacturer company at Bangalore.
Highly Educated -- B-tech
Frequently buys from Amazon & Flipkart.
“Most of the time I together buy with friends at office and
they deliver to the office, saves shipping charge ”
“Had one occasion I and a friend purchased the same T-shirt
as there was 50% sale BUY1 GET 1 offer on it..I just wanted
one ”
Mobile
Emotional
Economic power
Low High
Anand
Student at NIFT, Bangalore.
Frequently buys from malls and sometimes
from Flipkart
“the problem with online buying is that I can not try it ”
“only if I get good offers online, then only I buy it.. Sometime
some of my friends order and if that is good I order it ”
“Last year I had order a bangle set, but I had to travel for a
week and the delivery boy returned it back! I had to contact
customer care and took me 2 days to get it again. ”
Mobile
Emotional
Economic power
Low High
Nancy
Software Engineer
Male, 31, Bangalore,
Fashion student
Female, 27, Bangalore,
27

INFORMATION ARCHITECTURE.
• Life Goals & User Stories
• Unique User-pain-points
• High Level Design (HLC) Goals
• Key Performance Indicators (KPIs) & MVP
• Unique User Scenarios/Use Cases/Story-boards
• Proposed Conceptual Model
28

Persona : Life Goals
Seller Buyer
I want to :
Get discount
Get best deal
Free shipping
Hassle free refund/return
Feel exclusive
Easy tracking and follow up
I want to :
Sell more
Save buyer retention cost
More buyer loyalty
Low cost effective SEO
Get new customers
Save on logistics
30

Buyer Stories – 1/2
I want to buy a similar red top that Sarita wore in last birthday party.
Wow! I like Amir’s cap in Dhoom 3, how can I buy a similar hat?
Oh! I can not pay 200INR for shipping charge of a Tee of Rs 350INR !
The offer Buy 2 Get 1 free is great, but I need only one Tee.
I want to buy this new blue shirt, but need to check if it is really a good deal!
Oh I already purchased this Saree, I didn’t remember I had 500INR worth of reward
points with me, which I could have redeemed.
I already got 20% discount, is there any way I can get a better deal?
31

Buyer Stories – 2/2
Why should I waste my time in writing a review or give rating for a pair of Jeans I have
purchased recently?
Is there a way if I get to know if my friends got a great deal in buying T-shirts?
Can I share my shipping charge with my friend if I order to ship it to his address along
with his delivery?
If I give you a customer, shall I get a discount the way I get it from my local store?
Oops! I am expecting a delivery at my home tomorrow, but I am leaving for Delhi
tonight due to some urgent family needs. Is there any way the delivery boy can deliver
at a friend’s place on time?
32

Seller Stories
The low priced items are hard to sell online as their shipping charge is high.
How can I save on cost of adding new customers to my online store?
How can I spread the word about my new offers and discounts?
How can I improve the customer loyalty and improve return customer base?
Can I sell more wile reducing the cost on logistics?
How can I get better recommendation on my offers and products?
I need to improve the SEO of my site.
33

Already solved pain points in recent times
E-Commerce giants like Amazon and Flipkart have already solved many of the age old e-
commerce related buyer pain-points, namely:
1. Delivery/Shipping time:
Providing 1 day delivery and fast track premium shipping options
2. Payment options:
Proving Cash –on-delivery payment mode.
3. Hassel free order :
Providing apps that read barcode to scan to order at one click
But still there are many pain points, that needs to be addressed. Some of the key paint points/user
challenges are listed in the coming slides:
35

It is hard for user change the shipping
address once the item is en-route/in-transit :
“Oops! I am expecting a delivery at my home tomorrow, but I
am leaving for Delhi tonight due to some urgent family needs.
Is there any way the delivery boy can deliver at a friend’s
place on time? ”
It is hard to believe someone’s feedback on
item as the person and his environment is
unknown:
Even if ratings are there it is tendency in people to
ask and go by what known friends recommend.
“I want to buy this new blue shirt, but need to check if it is
really a good deal!”
Challenge - 2
Challenge -1 Proposed Solution
Proposed Solution
Allow user to change it even if the shipping item is in
transit. The change in address should be
communicated to the delivery value system.
Add more feedback user reviews and rating from the
known friend circle using social media.
Give weight-age to these in display list.
36

For small amount of purchase, in most of the
cases shipping charge is too much:
“Can I share my shipping charge with my friend if I order to
ship it to his address along with his delivery? “
”Oh! I can not pay 200INR for shipping charge of a Tee of Rs
350INR !”
Sometimes local store provides equally good
discounts (or better due to personal
contacts/ loyalty):
“I want to buy this new blue shirt, but need to check if it is
really a good deal!”
If I give you a customer, shall I get a discount the way I get it
from my local store?
Challenge - 4
Challenge -3 Proposed Solution
Proposed Solution
Provide user options to reduce the shipping charge .
Suggest these ways upfront – such as sharing
shipping charge with a friend if same location etc.
Provide more ways to save money to make the deal
attractive.
The user can help in improving your SEO, in return of
saving more bucks or getting a good deal.
37

High Level Design (HLC) Goals
38

Business Goals
Peer-Influence Co-experience Rewarding Anxiety-free
Linear Responsive Upfront Anxiety-free
Design Goals
High Level Design (HLC)
Drive influence to result
into conversion – using
social media.
Encourage sharing and
group collaboration to
drive more savings for
buyers and
Incentivize users to
generate more sales and
improve customer base.
Providing information
upfront contextually to
remove anxiety free
shopping experience.
Linearity in flow can help
less cognitive load and
match metal model.
Flexibility for cross device
and resolutions.
What is needed by the
user should be upfront-
goal oriented and
suggestive.
Providing transparency
and contextual
information to avoid
anxiety.
39

Key Performance Indicators (KPIs) & MVP
40

Unique KPIs for Delighters (Differentiators)
• Sharing Shipping Cost between two buyer from same location or deliver to one location.
• Free shipping by clubbing two or more orders from same location.
• Getting real time suggestion on how to get better deal or more discounts /bonus points.
• Getting rewards / discounts for adding friends
• Getting significant rewards for first purchase by newly added friend
• Able to get the same deal that your friend got recently.
• Get the exact same or similar dress/apparel that you saw in a photograph.
• Get the exact same or similar dress/ apparel of your favourite film-star wearing in a movie.
• Track how up-to-date your circle is on recent fashion.
• Getting more discounts and savings on buying is on your hands.
42

Features Usage Analysis
Used
Always
Used Frequently
Used
Occasionally
Used
Rarely
Used by a Few Used by Some Used by Many Used by Everyone
Login / logout
Shopping history
Track shipping
User feedback
Rate products
Product refund
Product return
About site
FAQ
Search Products
Browse products
Shopping cart
Forget password
Update shipping info
Access profile
User feedback
Rate products
Signup
Customer support
43

Unique User Scenarios/Use Cases/Story-boards
44

Delighters: What You See Is What You Get
Fashion and Fads are part of social growth. Perhaps the most noticeable aspect of human as a social animal is clothing – so after
food it is the next basic need of human.
So it’s common in a user to expect that he gets influenced by what others wore and what fashion is in trend. This sense of trending
among social circle is one of the major influencers of apparel buying decisions.
So this can be a delighter where the user can get same or similar options and availability status from a simple photograph showing
something a friend wore in user’s last meeting or birthday party.
45

Delighters: Group Shopping = Free Shipping
Shipping of product is a touch point where e-commerce concept interacts with real world. One of the major shopping cart
abandonment happens dues to mismatched expectations related to shipping – i.e. The shipping price is relatively higher than the
item purchased or the shipping date can not meet the expected date of the buyer.
Secondary research shows, FREE shipping is one of the best bet in ecommerce success. So, it can be a delighter if the shipping
charge can be made FREE or relaxed significantly without adding burden on the buyer’s pocket.
46

Delighters : Fan Following=Happy Buying
Massclusivity or the tendency in man to appear exclusive in mass is one of the major drives that drives fashion and so as the related
buying decisions. Many successful marketing startegy have used this using fan following metanlity in masses and use well known
celebrities in advertisements. Many collectable business also runs on this concept. So how about allowing the user to get the same
or similar clothing that the celebrity or movie star wore in certain movie or titles.
47

Delighters : Rewarding Experience
Rewarding users to add more users to the system is an age old trick. How about adding more buyers? Adding friends to user’s circle
and creating buzz can be rewarded with points or discounts that can help the user in his shopping.
Similarly adding pre-defined key words (to improve SEO) in feedbacks, shares etc. can be encouraged through rewards.
Same is the case for providing rating and user reviewes.
Getting some significant discounts on first purschase of a friend the user has added to the system can be one of the delighters
where both the seller and the buyers feel satisfied (e.g. The same way the typical local store offers BUY 1 GET 1 offers wherre both
paty feel being at the win-win situations.)
48

• can invite friends to his circle from his SNS accounts (we have used example of Facebook here)
• Friends in a circle can group-shop – they can share the shipping cost together if from same city or even the
combined shopping cart can gets eligible for a FREE shipping to single delivery address.
• can get rewards points or limited specific discounts to post his user reviews or ratings and comments and share
them with his SNS channels like FB timeline.
• can gift any of friends on their birthday / anniversaries.
• Can change his shipping address of his in-transit item
• Web via PC/Tablet/ Mobile access with Responsive layout
• The experience of the device version on browser and native app will be similar and optimised for device
• Ability to connect user’s SNS account to build circle inside s-commerce eco-system
• BagItAll (s-Commerce eco system)
- website
- mobile/tablet device app
• Facebook (SNS components)
- Facebook Page of the brand
- Facebook App providing similar experience within facebook based on user data (such as media/photographs)
- User’s Facebook page to share user updates (by the user) on offers or deals based on user’s interest.
Proposed Eco-system Concept: Overview
Features
Components
User can...
50

High level architecture of proposed eco-system
Predicting user needs
Suggestions based on
likings and customized
offers
Get recommendations
from friends circle
….
Sharing and group shopping
Group discounts & shipping
Gifting friends and en-route shipping
changes
….
1
2
3 4
5
BagItAll Cloud
FB App
(BagItAll)
FB Page of
User
Use user’s data
to generate
offers,
suggestions
User “likes” list
User media
User
preference
Friends list
1. User connects with BagItAll cloud through browser or cusatom device app
2. Search results and suggestions based on user’s direct profile & preference + bigdata analysisi from connected social media account (Facebook)
3. Suggestions, user recommendations, offers etc. gets pushed to Facebook app of the BiagItAll FB App and BagItAll FB Page. Also user gets rewards to
share on his FB timeline.
4. FB App of the eco-system collects data from User’s timeline and encourages sharing of interesting offers to the user. Also can help user pick a dress
based on photographs.
5. Related content is displayed to the user
User
Sharing/
Likes
gets
posted
FB Page
(BagItAll)
Sharing/
Likes
gets
posted
BagItAll s-commerce Eco-system Facebook Eco-System
51

INTERACTION DESIGN.
• Interaction Features & Design Goals
• High Level UI Flow
• Responsive & Fluid Layout
• Detailed Wireframes
• Facebook Page and Facebook App
52

Interaction Features & Design Goals
53

• A compelling user experience that is driven by Social.
• Takes advantage of the immersive and tactile nature of tablets
• A more flowing UI, that is more conducive to a sit-back, leisurely browsing experience
• Uses swipes, pinches, flicks
• Makes better use of limited screen real estate
• Highly personalized rich and engaging shopping experience
• Completely re-thought powerful search and filtering capabilities that are sure to delight your shoppers.
Interaction: Features
Linear Responsive Upfront Anxiety-free
Design Goals
Linearity in flow can help
less cognitive load and
match metal model.
Flexibility for cross device
and resolutions.
What is needed by the
user should be upfront-
goal oriented and
suggestive.
Providing transparency
and contextual
information to avoid
anxiety.
54

Following Mental Model : Linear Flow
Easier for user to remember his location on a liner UI flow.
The UI Flow matches the metal model of the user in linearity of his steps of his intended actions.
NOTE : that in most of the ecommerce best practices, it is advised to keep the checkout process linear to match the mental model of the buyer/user.
However typical browse and search activities to find out products and adding them to cart ,by the user, prior to checkout is also seen by the user as
a linear flow.
Sidebar view
Navigation Menu
Primary view
Browse Products
Primary view
Search Products
Primary view
User Dashboard
Fixed view
Shopping Cart
Primary view
Checkout
At any point of time a Primary view is visible with addition to either the Sidebar view or Fixed view.
55

Mental Model: Linear & Goal Oriented Flow
Typical experience of any user on the ecommerce site is determined by his goals.
The above diagram shows different goals placed in linearity from the entry point of the user in to the system till the checkout.
Browse
products
Search for
Products
Check Cart
Update Cart
Checkout
Manage personal details,
check history, tracking
details, customized offers,
manage friends list for
group shopping & shipping
etc.
Explore
site
Entry Point
Shopping experience
56

CheckoutBagItAll Party WearsParty WearsBagItAll
Sidebar view: Navigation Menu
One click navigation to reach anywhere in site
Primary view: Browse Products
This is main view that user faces for the first time when he lands on
the site. This is the view from where the user starts his journey.
Cart is visible to the user at the same time with giving indication s on
how to improve it.
Explore
site
Browse
products
Entry Point
58

CheckoutBagItAll Party Wears CheckoutSearch for...
XBagItAll
Primary view: Browse Products
This is main view that user faces for the first time when he lands on
the site. This is the view from where the user starts his journey.
how to improve it.
Primary view: Search Products
If the user is not happy with browsing , he can have single tap single
field search field (i.e. forgiving format pattern)
how to improve it.
Search for
Products
Browse
productsExplore
site
59

Checkout
Search for... XBagItAll My Dashboard X CheckoutBagItAll
Primary view: User Dashboard
This view provides user’s personal tracking information, shopping
history, customized offers and social networking features such as
adding connections, sending requests to friends for group shipping
etc.
how to improve it.
Primary view: Search Products
If the user is not happy with browsing , he can have single tap single
field search field (i.e. forgiving format pattern)
how to improve it.
Search for
Products
etc.
Browse
products
60

My Dashboard X CheckoutBagItAll Checkout
ShippingDetails Order Summary Payment
Return & Refund Policy Terms of Service
Primary view: User Dashboard
This view provides user’s personal tracking information, shopping
history, customized offers and social networking features such as
adding connections, sending requests to friends for group shipping
etc.
how to improve it.
Primary view: Checkout with Cart
This view provides user with a simple linear flow for checkout with
the cart details which can be modified at any point of time.
etc.
Check Cart
Update Cart
h for
ucts
61

BagItAll Party Wears
CheckoutBagItAll Party Wears
PortraitLandscape
Responsive Layout: Fluidity in Containers
Even though the primary design targets the landscape mode of 7-10
inch tablet with a minimum of 1024 px width , when the user
rotates the device and holds it in portrait mode, the layout
gracefully fits into the width of minimum of 768px resolution.
768pt 256pt
768pt
63

BagItAll Party WearsBagItAll Party Wears gItAll Party Wears Checkout
Portrait Mode: Bezel swipe enabled for sidebars
The current design enables bezel swipes from left and right sidebars to accommodate
Navigational menu and shopping cart respectively.
User at any point of time can access both of these options from edge swipe from left or right.
64

Landscape
Party WearsBagItAll
Portrait
Portrait Mode: Navigational Menu
In portrait mode the navigational menu is available in a bezel swipe from left.
65

CheckoutBagItAll Party Wears
Landscape
gItAll Party Wears
Portrait
Checkout
Portrait Mode: Shopping Cart
In portrait mode the cart is available in a bezel swipe from right.
66

gItAll Party Wears Checkout Checkout
ShippingDetails PaymentOrder Summary
Portrait Mode: Checkout from Shopping Cart
The Checkout link is available in the top of the Cart . User can any time access the cart and
initiate the checkout process.
67

CheckoutBagItAll PartyWears
Checkout
Shopping Cart: More than just a cart
The shopping cart is the most critical component of any ecommerce system.
The USER becomes a BUYER from the moment he adds items to his cart.
Most of the Shopping cart abandonment results due to a number of factors.
Proposed design focuses more on the cart making it a fixed view to allow :
transparency and removing the anxiety factor from the minds of the user (buyer).
Colt Men's Slim
Fit Shirt Black
JACK & JONES
Men's Slim Fit
Casual Shirt
1
2
674.00
1874.00
Subtotal (3 items): 2548.00
You have Rs. 315 worth
of Reward Points.
Redeem
Now
Group Shopping Suggestions
+ 30% Discount + FREE Shipping
Ankur
900 INR
Sarita
900 INR
+ 3 More
You can get 1 more Jack
Jones Men’s Slim Fit at
50% discount!
Price: 674.00
You Pay: 337.00 (-50%)
Add to Cart
Total (3 items): 2748.00
Your order is NOT eligible for FREE
Delivery. Club your shipping with
Sarita to get FREE SHIIPING.
Shipping (Estimated): 200.00
3
2748.00
Reward points/
Discounts options
available with the
account
Total amount
(estimated) reflects
here , so even if the
cart section has
vertical scroll, user
can still view it
without the need to
scroll
Group Shopping
Info – hints user on
options to get more
benefits like
consolidated
discounts or
discounted/free
shipping
Unit wise price
breakdowns
Suggestions based
on resulting cart
price, if any further
offer applies
Shipping cost if
applies
If shipping cost is
there, then options
for FREE shipping
Total amount
(estimated)
Fixed section
with vertical
scroll
support.
Total no.
of items in
cart
69

Checkout
Colt Men's Slim
Fit Shirt Black
JACK & JONES
Men's Slim Fit
Casual Shirt
1
2
674.00
1874.00
of Reward Points.
Redeem
Now
Ankur
900 INR
Sarita
900 INR
+ 3 More
50% discount!
Price: 674.00
You Pay: 337.00 (-50%)
Add to Cart
3
2748.00
You have Rs. 315 worth of
Reward Points.
Redeem Now
Ankur
900 INR
Sarita
900 INR
+ 3 More
Reward points/ Discounts
options available with the
account
Group Shopping Info – hints
user on options to get more
benefits like consolidated
discounts or discounted/free
shipping
Group Shopping Option: More Savings OR FREE shipping
The buyer can club his shopping with his friends/circles to get the benefits of group shopping.
This information is estimated by the system in real time and is provided upfront in the cart.
Clubbing shopping options appear if :
1. Adding together the shopping carts of two or more friends results in final cart price that is
eligible for some bulk discounts or offers.
2. If all clubbed friends are from same location (i.e. City or zones) both can share shipping charge
(e.g. 50% each if two are clubbed. ) or FREE shipping if total cart worth is eligible FREE
delivery.
1 2
70

Y
o
G
+ 3
CheckoutBagItAll PartyWears
Browse Products : More than just browsing
This is main view that user faces for the first time when he lands on the site. This
is the view from where the user starts his journey. Throughout the browsing
experience the cart is visible to the user at the same time with giving indications
on how to improve it.
Fixed section
with vertical
scroll
support.
1. The categories list
is available as a
dropdown
Price < 2000 | Size Medium | Color Any | Brand Any | Rated by my circle Yes | more...
2. Minimized tray
for buyer
preference & filters
See available choices
JACK & JONES Men's Slim Fit Casual Shirt
2,495.00 1,247.50
Shipping: 200 INR
Eligible for FREE Shipping.
Ships in 1 day.
Cash on delivery available
Rating
Add to Cart
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
Add to CartSee available choices
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
4. Recommendation
from user’s circle
along with standard
ratings
3. Shipping cost and
FREE shipping
related info upfront
+12
1
2
3
4
71

Checkout
Colt Men's Slim
Fit Shirt Black
JACK & JONES
Men's Slim Fit
Casual Shirt
1
2
674.00
1874.00
of Reward Points.
Redeem
Now
Ankur
900 INR
Sarita
900 INR
+ 3 More
50% discount!
Price: 674.00
You Pay: 337.00 (-50%)
Add to Cart
3
2748.00
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
Add to Cart
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
X
Cash On Delivery
Eligible for Cash On Delivery
My Circle Recommendation
Show What is rated by my circle
Color
+ ADD
Size
L M S + ADD
Price
Brands
200 5000
Less than 5000 INR
+ ADD
Minimized tray for buyer preference & filters
Expanded tray / panel for buyer preference & filters
Product Filters: Ubiquitous in product exploration
Product filter helps user in filter out the products displayed on the page to narrow
down the result. This is an important control in any e-commerce application as
the user is empowered to quickly narrow down his search result based on his
specific need.
72

Checkout
BagItAll
Colt Men's Slim
Fit Shirt Black
JACK & JONES
Men's Slim Fit
Casual Shirt
1
2
674.00
1874.00
of Reward Points.
Redeem
Now
Ankur
900 INR
Sarita
900 INR
+ 3 More
50% discount!
Price: 674.00
You Pay: 337.00 (-50%)
Add to Cart
3
2748.00
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
Add to Cart
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
Minimized tray for buyer preference & filters Men’s Wear
Men’s Wear
Women’s clothing
Kid’s wear
Unisex
Accessories
Bags
Party Wears
Movie Star Specials
Product Categories: Grouping available products
Product categories is available from the top menu and is available through-out
the pages where the major goal of the user is to browse or search products.
1 2
1. The main view provides categories and options to explore
2. The quick options to search and change through categories
can be accessed from top bar.
73

BagItAll Men’s
ClothingPrice < 2000 | Size Medium | Color Any | Brand Any | Rated by my circle
Yes | more...
Best Deals in Men’s Clothing
Popular in Your Circle
Landing Screen:
Browse & Search
The landing screen of the site provides upfront the
controls to browse & search along with the quick
panel for adjusting the filters.
2
1
1. The main view
provides
categories and
options to explore
while the quick
options to search
and change
through categories
can be accessed
from top bar.
2. Shopping cart is
always available
through out the
product
exploration
74

Add Friend & get rewards
BagItAll Men’s Clothing
See availablechoices
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
Add to Cart
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
Add to CartSee availablechoices
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
Best Deals in Men’s Clothing
+12
Suggest your friends and get more discounts
For every Facebook friend you add
to your circle you get 10 Reward
Points!
Start Now
For every recommendation of any product you have
brought to your circle you can get 3% additional
discount on any of your items you buy on the same day.
Get discounts now!
Browse & Search Flow:
Finding the product
customer wants
75

2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Rating
Sarita via Facebook
JACK & JONES
Men's Slim Fit
Casual Shirt
JACK & JONES
Men's Slim Fit
Casual Shirt
See availablechoices
Add to Cart
+12
Who in your circle has recommendedit
JACK & JONES
Men's Slim Fit
Casual Shirt
Kumara Swami
What your friends recommend
Gift your friend and get 30% OFF Suggest to a friend and get 2 reward points
+
Similar Items
Special offer for the week:
BUY 2 GET 1 FREE
Don’t need more than one? Check if
any of your friends are interested
Invite friends for group
buying
+ More details
Its a too large now what can I do?
View all customer reviews
Very good piece. Loved the black .
Great shirt..can use it for office
too.
JACK & JONES Men's Slim Fit Casual Shirt X
JACK & JONES
Men's Slim Fit
Casual Shirt
JACK & JONES
Men's Slim Fit
Casual Shirt
More Details
More
Browse Products :
Touch enabled
Native device supported
gestures like Pinch & Zoom,
swipes etc. are used to explore
the products seamlessly and
efficiently over the touch
enabled devices/tablets.
2
1
1. The user’s need is
anticipated by the
system and is used
to suggest similar
products and
offers.
2. Pinch & zoom is
used to view the
zoom view of the
images which is
natural to tablet
usage.
76

BagItAll
Spot a Dress
Invitations
Shared by Friends
Offers for you
Gifts
Request a Refund/Return
Change On-Route Shipping
Contact Helpdesk
Customer Service
LOGOUT
About Us
Contact Us
Refund/Return Policy
Socialize
5
2
7
3
Global Navigation Menu: Left Sidebar
The global; navigation menu is available as a sidebar component at left that can
be accessed from tap of icon or left swipe.
.
77

My Dashboard X CheckoutBagItAll
Spot a Dress
JACK &
JONES Men's
Slim Fit
Casual Shirt
JACK &
JONES Men's
Slim Fit
Casual Shirt
3
1 2
1
JACK &
JONES Men's
Slim Fit
3
2
More Details
More Details
Matching Results
My Dashboard XBagItAll
Spot a Dress
JACK &
JONES Men's
Slim Fit
Casual Shirt
JACK &
JONES Men's
Slim Fit
Casual Shirt
3
1 2
1
JACK &
JONES Men's
Slim Fit
3
2
More Details
More Details
Matching Results
JACK &
JONES Men's
Slim Fit
Casual Shirt
More Details
1
Special Feature: “Spot a Dress”
This is one of the delighters in the proposed concept of the social ecommerce, where the user can get the suggestions of similar dress bnased on a
photograph either taken via device camera (in case of app native camera is used/ in case of web, webkit supports camera tag that can be used to trigger
builtin camera to take a snap). Also the user’s photo stream from his social network like Facbook / Flickr/ Instagram etc. Can be used to pick a photo to
suggest related dress available in the shopping catalogue. .
21
.
1. In case of native
app version, the
camera view
finder can be
shown inline in
the app, which can
be used to take
photo to spot a
dress in it
2. Other than
camera, photo can
be uploaded and
streams from
Facebook and
Flickr etc. Can be
used.
3. The suggested list
of similar dress
(products) appear
once the photo is
selected by the
user.
.
78

Invitations (5)
Special offer for the week:
BUY 2 GET 1 FREE
“Hey Samir, I am planning to
buy this.. Check this out... If you
think it’s a good deal for you we
can buy it together to get a
third one free. Also I will get
the Shipping free. What do you
think?”
Accept & Add to my CartNo. Thank you.
FREE Shipping to both of you.
GROUP SHOPPING
Mary wants to club her shopping cart with you,
so that you both are eligible for a FREE shipping
to the same location. Would you like to accept it
and both of your items delivered to your
shipping address?
+ More details
+ More details
Accept & verify details.No. Thank you.
Friend request to add to circle:
Inbox (5)
Sent (23)
Compose Message
Send Friend requests.
3
1
2
1. GROUP SHOPPING:
Sharing a shopping with a friend
2. Request for group buying in order to save on
shipping charges.
3. Friend request
.
Special Feature: “Invitations”
This section of the site allows user to send and receive
invitations/requests for group buying to get benefit of
special discounts or sharing the shipping charges or
combine qualify for the FREE shipping etc.
Also the inbox lists any friend requests to be added to
other’s circles.
79

Gifts (3)
Happy B’Day
A FREE T-Shirt of your choice
“Wish you a wonderful birthday “
+ More details
Accept & claim
Happy B’Day
Received (3)
Gifted (7)
Gift from Ashwin:
75% discount coupon!
Accept & claim
+ More details
Send a gift now
2 Birthdays 3 Anniversary this week
1
2
3
Special Feature: “Gifts”
This section of the site allows user to send and receive
gifts on their birthday or anniversaries. Any user can
send special offer coupons or even free products by
paying negligible amount on his own expense
1. List of friends having birthday or
anniversaries. The user can send them
special discounted gifts (i.e. dress)
2. User has received 75% discounted
clothing.
3. User has received a free T-shirt where the
sender has paid the remaining amount
after the heavily discounted price.
.
80

Shared by Friends (2)
I rate it 5 Stars!
New arrivals of Flying Machine
+ More details
Received (2)
Shared (7)
Got a very good deal
BUY 1 GET 1:
“50% discount on Lee !”
Know more
+ More details
Know more
SHARE NOW
Share now with
friends and get
2 Reward points
New Arrivals at
Flying Machine
Special Feature:
“Shared by Friends”
This section allows user keep track of updates from his
circle of friends, who have shared the great deals they
felt are worth sharing.
This also lists if any has recommended, rated or given
feedback on any product he has used.
1. User is encouraged to share to friends.
2. User has received a nice offer related
share.
3. User has received the update on his friend
rating a product.
.
1
2
3
81

Change On-Route Shipping
SHARE NOW
Your Pending
Deliveries
BAGIT102993
BAGIT106883
BAGIT988766
Selected Order No:
BAGIT106883
We allow you to change your shipping address even when your
shipments are on transit. Just mention the changed address
and we will deliver to the new address. (No need to pay
anything extra if your new address is with in same city)
JACK & JONES Men's
Slim Fit Casual Shirt
Current Shipping Address
#264, 2nd cross, 5th Main, R M Nagar,
Bangalore – 560016
Ship it to my selected friend’s home below:
( We found 2 friends from your circle in your city )
OR
just ship it to my new location: + ADD LOCATION
Find a friend in a different city (New shipping charge might apply)
#12, 5th cross, 7h
Main, MG Road,
#12, 5th cross, 7h
Main, MG Road,
Special Feature:
“Change On Route Shipping”
This section allows user to change his shipping address
even when even when his shipments are on transit.
User just needs to mention the changed address and
the shipment will be deliver to the new address. (No
need to pay anything extra if the new address is with in
same city)
This is one of the killer features of the proposed
system.
1. Initial shipping details
2. Auto suggested list of friends in same city
3. Custom address can be provide.
.
1
2
3
82

SHARE NOW
Got a very good deal
BUY 1 GET 1:
“50% discount on Lee !”
MORE
Shared by Friends (2) Gifts (3)
Happy B’Day
“Wish you a wonderful
birthday”
MORE
FREE T-Shirt of your choice
Rs. 350
worth of Coupons.
My Free Coupons
Redeem Now >
My Circle
252 Friends
In your Circle.
Specially Offers Only for Me Quick Links
My Public Profile
My Account
My Preference
Settings
My Dashboard: User’s own space
This section allows him to track his shipping, managing
profile, preference and circles.
1. Personalised/ customised offers for the
user
2. Quick links to key sections
3. Updates from different sections.
.
1 2
3
83

Facebook Page & Facebook Page App
84

BagItAll
I rate it 5 Stars!
BagItAll
Mary rates it 5 Star!
Mary via BagItAll
I rate it 5 Stars!
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
New arrivals of
Flying Machine
BagItAll
Share on Facebook : Beyond the boundary of the e-Commerce site
When user links his facebook profile with site, he is prompted to “Like” the FB Page of “BagItAll”
Different promotions, offers and updates along with feedback on products user has purchased, are encouraged to be shared over
Facebook by offering rewards of points and discounts etc. . This helps the creating the buzz of the site and new products among
user’s circles outside the ecommerce site.
1. Faceboiok Page of “BagItAll”, where the update of any linked user is updated.
2. Facebook shared by a friend appears on FB stream
.
1
2
85

BagItAll
BagItAll
JACK &
JONES
Men's Slim
Fit Casual
Shirt
JACK &
JONES
Men's Slim
Fit Casual
Shirt
3
1 2
1
2
More Details
More Details
JACK &
JONES
Men's Slim
Fit Casual
Shirt
More Details
1
Spot a Dress Gift Your Friends Share & Earn
MatchingResults
Everything on user’s consent :
Faceboook App getting user information
When the new user is added to the Facebook app page of “BagItAll”, at every critical
step, the app must ask for user permission to continue.
86

JACK &
JONES
Men's Slim
Fit Casual
Shirt
JACK &
JONES
Men's Slim
Fit Casual
Shirt
3
1 2
1
2
More Details
More Details
JACK &
JONES
Men's Slim
Fit Casual
Shirt
More Details
1
Spot a Dress Gift Your Friends Share & Earn
Matching Results
BagItAll
Samir
JACK & JONES
Men's Slim Fit
Casual Shirt
JACK & JONES
Men's Slim Fit
Casual Shirt
More Details
Facebook App: Spot a Dress feature and more
Out side the ecommerce site, the user can also get the feature of spot a dress feature
via the Facebook app of the “BagItAll”
1. Faceboiok Page of “BagItAll”, where the user’s photo stream is used to suggest similar products/dress.
2. The user can post his result to his timeline in Facebook.
.
1
2
87

PROTOTYPE.
• Quick Paper Prototypes
88

BagItAll
Colt
Fit Sh
JACK
Men
Casu
Subtotal (3
You have Rs.
of Reward Po
Group Shopp
+ 30% Discount
Ankur
900 INR
You can get
Jack Jones M
Fit at 50% d
Price:
You Pay:
Total (3 item
Your order is
Delivery. Clu
Sarita to get
Shipping (Es
3
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Cash on delivery
available
Rating
Add to Cart
2,495.00 1,247.50
Shipping: 200 INR
Ships in 1 day.
Cash on delivery
available
Rating
Men’s Wear
Men’s Wear
Women’s clothing
Kid’s wear
Unisex
Accessories
Bags
Party Wears
Movie Star Specials
Paper Prototype:
Slide-down categories menu in the quick prototype
against the digital wireframe
89

Paper Prototypes:
Basic layouts, side bar and and
slide down panel
90

VISUAL DESIGN.
• Sample Mock-ups
91

Quick Mock-up:
Showing main view with
ubiquitous shopping cart
93

Quick Mock-up:
Showing main view with global
navigation
94

Quick Mock-up:
Responsiveness that works across landscape and portrait mode
95

Quick Mock-up:
Responsiveness in sidebar enabled layout that works across landscape
and portrait mode and pushes the main view differently.
96

APPENDIX
• Acknowledgements
• References
97

Acknowledgements
The Noun Project
http://thenounproject.com/
Some of the icons used in the wireframes and diagrams are taken from The Noun Projects . The credit goes to the creator of the respective icons.
98

References
2013 E-Commerce Report
INTERSHOP, FALL 2013
Consumer market study on the functioning of e-commerce and Internet marketing and selling techniques in the retail of goods
Civic Consulting (via TNS) 2011
http://ec.europa.eu/consumers/archive/consumer_research/market_studies/docs/study_ecommerce_goods_en.pdf
European B2C E-commerce Report 2014
Ecommerce Europe (via GFK ) 2014
10 problems with social networking
Yahoo She Philippines 2012
https://ph.she.yahoo.com/10-problems-with-social-networking-.html
UPS Pulse of the Online Shopper™ Global Study
United Parcel Service of America, Inc, September 2013
99

Thank You.
For more information please feel free to contact me at mobilewish@gmail.com or call +91 8971962520
100

Flip the Cart! : Reimagining Next in eCommerce

More Related Content

What's hot

Similar to Flip the Cart! : Reimagining Next in eCommerce

More from Samir Dash

Recently uploaded

Flip the Cart! : Reimagining Next in eCommerce