SlideShare a Scribd company logo
1 of 155
Download to read offline
2016년 국내외
커머스 디자인
트렌드 및 전망:
주목할 해외 사례 중심으로
2016
Billy(최병호)/BillyChoi@Gmail.com
중앙대학교 교수
홍익대학교 영상대학원(HCI개론 강의)/
연세대학교 공학대학원(서비스디자인경영 강의)/
성균관대학교 일반대학원 휴먼ICT융합학과(교수)/
HEDcentric UX미래융합전략연구소(연구소장)
Research Data: http://www.slideshare.net/BillyChoi/
Blog: http://blog.naver.com/soularchitec
Twitter/Facebook: ILOVEHCI
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Table of Contents
Part I.
1. Card-like Layouts(Card design)
2. Storytelling
3. Hamburger Menu(Hidden Menus)
4. Large Backgrounds(Background Videos and Animation)
Part II.
1. Visual commerce – UGC 기반의 랜딩 페이지: Boom, Calvin Klein
2. Visual commerce - AR 기반의 쇼핑몰: Preksh
3. A.I.-powered online shopping assistant: 1-800-Flowers, The North Face
4. Conversational commerce: Allo, Operator app
1
Card-like Layouts
(Card design)
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Sources
• http://apiumtech.com/blog/11-mobile-design-trends-2016/
• http://www.friday.ie/journal/5-e-commerce-design-trends-2016/
• http://blog.exitbee.com/7-ecommerce-design-trends-2016-need-know/
Card-like Layouts(Card design): Overview
 One of the most popular mobile app design trends that started in 2014 continued to
expand in 2015, rocks in 2016 and is about to stay for long.
 Another way to make UX more dynamic and meaningful is by using card layouts.
• Small chunks of information in “cards” are easily sorted and adapted to user
preferences.
• The greatest benefit of adopting the cards layout is they work extremely well
with responsive web design which is why they are very popular in e-commerce
websites.
 Cards are not just known to deliver a richer, neater experience to website visitors,
but are also known to be highly responsive and are one of the core components of
material design, as stated by Google.
3
http://www.randco.com/
http://www.randco.com/
http://www.randco.com/
1
1
 특징
• 시선의 흐름에 부합하는 카드에
동영상 제공으로 몰입 및 체류
유도(1번 영역)
• 카드 타이틀을 카드 영역 내에
국한하지 않은 접근
• 그러나, 카드 타이틀 칼라와 카드
이미지 칼라 간 간섭으로
legibility와 readability가 떨어짐
http://www.reserved.com/
http://www.reserved.com/
 특징
• 2개의 카드를 1개의 청크로 묶어서
접근
• 정형화된 카드 형식 탈피
• 그러나, 2개의 카드가 1개의
청크라는 단서가 취약하여 보완
필요
http://www.reserved.com/
http://www.ebay.com/
http://www.ebay.com/
http://www.nastygal.com
http://www.nastygal.com
 특징
• 테마형 카드 레이아웃
• 메인 페이지(home page)와 콘텐츠
페이지(content page)의 관계에서의
카드 레이아웃
• 그러나, 특정 조건(위치 등)에
부합하지 않는다고 하여 에러(404
등)와 유사한 느낌의 카드를
제시하는 것은 사용자 경험을
저해시키는 위험이 있음
http://www.ebay.com/
http://www.nastygal.com
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Card-like Layouts(Card design): Strategies and Considerations
 시선의 흐름을 유도할 수 있는 카드
레이아웃 추구 필요; 즉 모든 카드 강조 지향
필요 (예) 영상 자동 플레이 등
 규격화된 카드 레이아웃에서 탈피해서 응용
추구 고려 (예) 최근 카툰 레이아웃, 테마형
카드 레이아웃 등
 단, 카드와 카드 타이틀 간 간섭 방지, 여러
개의 카드를 하나의 청크로 접근할 경우
명료한 그룹핑 제시 필요
 또한, 특정 조건에 부합하지 않는 카드는
노출하지 않는 방향 필요
 결국, 카드 디자인은 이미지에 의해 승패가
결정된다고 봐도 과언이 아니므로, 더욱
주의를 해야 함
15
Storytelling
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Sources
• http://apiumtech.com/blog/ux-designers-higher-degree-responsibility-2016/
• http://apiumtech.com/blog/11-mobile-design-trends-2016/
• http://www.instantshift.com/2016/08/17/2016-rocking-web-design-trends/
• https://blog.amasty.com/magento-design-trends-2016/
• http://www.tmogroup.asia/top-6-hottest-ecommerce-design-trends-to-embrace-in-2016/
Storytelling: Overview
 For many companies, mobile app is the link between their online and offline presence and it needs to tell a
good story featuring the user as the main character.
• People love stories, people love to recognise themselves in a story, it makes them better understand the
idea of the product or service and see all the benefits they could have.
• Here it is especially important to have a story, to make people interested in your app as now we are
quite picky with the apps we install and maintain.
• Many brands design mobile apps that way that users browse the app actually being part of the story, for
example jewellery and wedding brands do that really good, their mobile apps are full of emotions and
love stories.
 User-driven storytelling is recognized as an effective way to deliver a memorable pitch.
 Good stories are simple. Here are 5 elements of a good story: good stories are emotional, they are truthful or
believable, the best stories are real, great stories, are valid and work for almost any audience.
 Although storytelling is not an easy thing to achieve in eCommerce, many fastest-growing eCommerce
stores are now practicing this strategy to their advantage.
 about ‘clicks’, only remember ‘gestures’.
• WForget hat if, you are accessing the same website on your smartphone?
• we expect most websites to work on their scrolling first, while clicking taking over the second priority.
17
http://www.randco.com/
http://www.randco.com/
http://www.randco.com/
http://www.randco.com/
http://www.randco.com/
http://www.randco.com/
http://www.randco.com/
 특징
• 모델의 스타일과 제품의 연결고리
형성; 1개의 스타일에 여러 개의
제품 매핑
• 가로 스크롤 방식의 정보 접근
• 다양한 스타일 제시
• 큰 사이즈의 얼굴 사진의 주목성
• 그러나, 모델의 독특한 스토리가
미약하고, 가로 스크롤
인터페이스가 불편하며, 1개의
스타일에 사용된 여러 개의 제품을
일시에 구매할 수 없음
• 그렇지만, 스토리텔링의 초기 접근
방식으로 간주할 수 있으며, 몇 개의
문제를 보완한다면 매력적인 경험을
제시할 가능성이 있음
https://serioverify.com/
https://serioverify.com/
https://serioverify.com/
https://serioverify.com/
https://serioverify.com/
 특징
• 주로 세로 스크롤(parallax
scrolling)로 전체 내용 자연스럽게
연동(클릭은 최소화); 흥미와 주목성
강화 효과
https://serioverify.com/
http://www.munchkin.com/
http://www.munchkin.com/
http://www.munchkin.com/
http://www.munchkin.com/
http://www.munchkin.com/
 특징
• 제품의 타깃이 살아갈 미래를
위해서 제품을 판매하는 우리는
무엇을 해야 하는가라는 자신들의
화두를 구매자에게 판매하고 있음
• 환경 오염을 인정하면서 나무를
심겠다는 솔루션으로 설득하고 있음;
즉 교환 가치 뿐만 아니라 사회
가치까지 고려함; 그들의 다음
행보가 궁금하고, 그들을 궁금하게
함
http://www.munchkin.com/
http://www.munchkin.com/
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Storytelling: Strategies and Considerations
 특정 인물에게 주목하게 하여 스토리로
제품까지 견인하게는 모델 추구 필요
• 이때, 스토리에 포함된 다양한 제품의
개별 구매와 일괄 구매를 동시에 제공
고려
 스토리텔링을 단순한 교환 가치가 아닌
타깃층의 미래 삶을 위한 사회 가치로
접근하면서 구체적인 실행 지침을 포괄하는
방향성 추구 필요
 클릭보다는 특정 제스처(예로 세로 스크롤
등)로 스토리텔링 경험을 취할 수 있도록
고려
• 단, 사용성 이슈가 발생할 위험성도
있으므로 이에 대한 대안 모색 필요 (예)
가로 스크롤 사용성 이슈 등
39
http://www.reserved.com/
http://www.reserved.com/
http://www.reserved.com/
Hamburger
Menu(Hidden
Menus)
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Sources
• http://www.instantshift.com/2016/08/17/2016-rocking-web-design-trends/
• http://www.friday.ie/journal/5-e-commerce-design-trends-2016/
• http://wpall.club/wordpress-articles-board/wp-ecommerce-web-design-trends/
Hamburger Menu(Hidden Menus): Overview
 Looks like a hamburger with a bunch of few short lines, and present at the top in
almost all websites.
 When clicked, expands and shows submenus present within.
• Over the last few years minimalism has continued to be one of the most
consistent web design trends, focussing on clean, simple and easy to navigate
aesthetics and giving prominence to imagery and large backgrounds.
 However, research has proven that demoting the main navigation into a drop-down
menu reduces engagement, dwell time and even effect sales on both desktop and
on mobile! It’s been reported that some mobile sites are now moving away from the
hamburger menu in favour of a mini nav that is front & centre.
44
http://whiteclaw.com/
http://whiteclaw.com/
http://whiteclaw.com/
http://www.randco.com/
http://www.randco.com/
http://www.randco.com/
http://www.randco.com/
 특징
• 페이지 상단(왼쪽 또는 오른쪽) 위치;
반응형 디자인에 유용
• 햄버거 메뉴 클릭 시, 화면 전체
반전(dim out)시킨 후 메뉴 제공;
주목성 및 인식성 높음
• 그러나, 햄버거 메뉴에 익숙하지
않은 경우에 접근성이 떨어지고,
메뉴 선택 후 이동한 페이지에서
선택한 메뉴명과 연계된 단서가
미흡함
http://whiteclaw.com/
https://www.etq-amsterdam.com/
https://www.etq-amsterdam.com/
https://www.etq-amsterdam.com/
https://www.etq-amsterdam.com/
https://www.etq-amsterdam.com/
https://www.etq-amsterdam.com/
https://www.etq-amsterdam.com/
https://www.etq-amsterdam.com/
https://www.etq-amsterdam.com/
https://www.etq-amsterdam.com/
 특징
• 페이지 상단(왼쪽) 위치; 반응형
디자인에 유용
• 햄버거 메뉴 클릭 시, 왼쪽 메뉴
영역 노출 및 콘텐츠 영역 반전(dim
out)
• 그러나, 첫 페이지에서 햄버거
메뉴의 단서가 부재하고, 메뉴 선택
후 이동한 페이지에서 택한
메뉴명과 연계된 단서가 부재함
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Hamburger Menu(Hidden Menus): Strategies and Considerations
 ‘핵심 서비스를 메인 페이지(home
page)에서 스토리텔링 방식으로 집중시켜서
구매로 이끌 수 있다면’ 햄버거 메뉴 채택은
현실적인 방안으로 간주할 수 있음
 그러나, 메뉴의 접근 횟수가 빈번하고,
내비게이션의 목적(현재 위치, 이동할 위치,
전체 구조 파악)에서 취약점이 발생할 경우
햄버거 메뉴 채택은 재고할 필요가 있음
• 웹과 모바일 채널에서 개별적인 채택도
가능할 수 있음. 예를 들면 웹에서는
메뉴 노출, 모바일에서는 햄버거 메뉴
채택
 햄버거 메뉴 위치는 왼쪽 상단을 권장하며,
메뉴 개수가 많을 경우에는 별도의 왼쪽
메뉴 영역 활용 권고
62
Large
Backgrounds
(Background
Videos and
Animation)
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Sources
• http://blog.exitbee.com/7-ecommerce-design-trends-2016-need-know/
• http://wpall.club/wordpress-articles-board/wp-ecommerce-web-design-trends/
• https://blog.amasty.com/magento-design-trends-2016/
Large Backgrounds(Background Videos and Animation): Overview
 What most eCommerce businesses are now tapping into, are large or full scape
backgrounds. While this trend has been followed by many business websites over the
years, eCommerce is just starting to see it in action.
 This design technique is considered to be minimal, yet it ensures an extremely
positive user experience.
 Using high quality and large product images as backgrounds for collections or
using product videos on web pages, compels the online shopper to ‘get the look’.
Apart from being able to deliver a richer shopping experience to your visitors, they
also help the most extensive of online stores look clean and professional. For example,
above mentioned eCommerce store, Nasty Gal actually uses a product shot on their
homepage to draw a visitor’s attention immediately to a particular range on their
website.
 Using background images and animation adds engaging dimensions to a web page.
64
Source: https://blog.goodvid.io/what-is-visual-commerce-and-why-it-matters-for-online-retail/
※ 참조: http://www.socialannex.com/blog/2016/01/14/51-vital-visual-commerce-statistics/
• 55% of content creators plan to prioritize visual content in 2016.
• Visual content works better for retention. People tend to remember 80% things
they see or do versus only 10% of things they hear and 20% of the things they read.
• Compelling images get 94% more views than basic visuals.
• 67% consumers say that high quality visual content is more important than product
description or customer ratings.
• By 2017, 74% of all web traffic will be video.
• Shoppers who view videos are 1.8x more likely to purchase than non-viewers.
• When featuring video on the site, retailers report 40% increase in purchases.
• 84% of millennial shoppers say that UGC influences their purchases.
Source: http://blog.hubspot.com/marketing/video-marketing-statistics#sm.0006dw8tvwq3cv310bl2bw5czwcla
http://www.nastygal.com/
http://www.randco.com/
http://www.randco.com/
http://www.randco.com/
http://www.randco.com/
http://www.reserved.com
http://www.reserved.com
http://www.reserved.com
http://www.reserved.com
http://www.reserved.com
http://www.reserved.com
http://www.reserved.com
http://www.reserved.com
https://www.etq-amsterdam.com/
https://www.etq-amsterdam.com/
http://us.christianlouboutin.com
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Large Backgrounds(Background Videos and Animation): Strategies and Considerations
 시선을 압도하고 구매까지 견인하는데
효과적인 방안임
 1개의 (배경) 이미지가 강렬한 효과를
유발할 가능성이 높고, 2개 (배경) 이미지는
대조 효과로 흥미를 유발시킬 수 있음
 제품 정보 페이지에서도 큰 (배경) 이미지 및
영상를 활용하여 제품의 매력도를 강화하는
경향이 보임
 단, 체감할 수 있는 빠른 로딩 타임의 고려가
최우선적이어야 함
83
Exponential [ekspənenʃəl]
Exponential means growing or increasing
very rapidly.
• 점진적 변화가 아닌 급진적, 기하급수적 변화
• 즉, 기술의 진화에 따른 사회, 경제적 변화가
점진적으로 오는 것이 아니라 순식간에 급격하게 온다.
• 적은 값의 움직임(입력)으로 큰 작용(출력)을 얻을 수
있는 변화
Source: 싱귤래리티 유니버시티 글로벌 서밋
Visual commerce
– UGC 기반의
랜딩 페이지:
Boom
,Calvin Klein
http://www.boombycindyjoseph.com/
http://www.boombycindyjoseph.com/
http://www.boombycindyjoseph.com/
http://www.boombycindyjoseph.com/
BOOM! Shows Real Products on Real People
• BOOM! cosmetics company gives customers
the option to submit original photos with
their product reviews. When a shopper sees
these user-generated photos of real people
using the product they are considering, they
can quickly tell whether it meets their
expectations.
• User-generated photos coupled with
customer reviews effectively communicates a
comprehensive customer experience that
allows shoppers to connect on a personal
level and imagine themselves using your
product.
• BOOM! also implements visual UGC
throughout their site with a selfie contest and
rotating customer photos on their homepage.
Source: http://blog.hubspot.com/marketing/attention-grabbing-examples-user-
generated-content-ecommerce#sm.0006dw8tvwq3cv310bl2bw5czwcla
Source: http://explore.calvinklein.com/en_US/explore (2016.4.20)
Source: http://explore.calvinklein.com/en_US/explore (2016.4.20)
Source: http://explore.calvinklein.com/en_US/explore (2016.4.20)
Source: http://explore.calvinklein.com/en_US/explore (2016.4.20)
Source: Calvin Klein App (2016.4.20)
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Strategies and Considerations
• I ____ in #MyCalvins(Campaign: #MyCalvins) is not only the first thing
that grabs your attention as your scope out the iconic brand’s
customized landing page, you will also see user-generated content
filtered from savvy fans wearing their favorite CK looks on Instagram.
With a combined reach of 106 million followers, the stars could fill the
top 50 U.S. cities with likes, comments and shares. (Source:
http://www.reelativity.co/six-brands-that-love-visual-storytelling/)
• 새로운 시나리오의 등장 가능성 제시!
 사용자가 첫 대면하는 페이지를 사용자의 콘텐츠로 대부분 채운다.
이렇게 되면, 페이지에 등장한 사용자는 온라인 매체에 데뷔하는
놀라운 경험을 하게 되고, 이것은 곧 자발적인 경험의 공유를
촉발하게 된다.
 사용자의 콘텐츠는 비주얼만 올릴 수 있는 파트너 앱을 활용하여
수급한다. 이것은 상생할 수 있는 생태계 구축을 용이하게 한다.
 사용자의 콘텐츠는 자신의 사연이 투영된 옷을 직접 또는 다른 이가
입고 사진을 찍어서 만든다. 이때 메시지는 아주 임팩트가 강한
키워드를 선정할 수 있도록 유도하는 구조를 만들어야 한다. (예) I
____ in #MyCalvins
 참여한 사용자와 수익을 공유한다.
 사용자가 직접 새로운 캠페인을 만들어서 운용하도록 하여
‘지속가능한 로열티 강화’를 유도한다.
95
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Everything you need to know about user-generated content in ecommerce
• Visuals are everything. Over 1.8 billion of photos are uploaded and shared by
consumers on social media daily.
• 92% of consumers worldwide say they trust word-of-mouth more than any kind of
advertising.
• 82% of shoppers say that user-generated content is extremely valuable when
deciding on purchases.
• Brands see 25% increase in conversions when user-generated photos are used
instead of professionally made product shots by brands.
• UGC can improve conversion rates 6.4% for clothing, 2.4x for jewelry, 1.7x for
footwear and 1.6x for products in beauty and consumer electronics verticals.
Source: https://blog.goodvid.io/everything-you-need-to-know-about-user-generated-content-in-ecommerce/
96
https://getflowbox.com/solutions/social-commerce
Visual commerce
- AR 기반의
쇼핑몰: Preksh
Source: http://www.entreprennovators.com/interview-saikat-sinha-preksh-worlds-first-visual-commerce-platform/
• At present there is a huge gap between online shopping and offline
shopping. If we look at eCommerce, there are only two ways of searching a
product. Firstly ‘The Search Tab’ which is generally placed on the top of the
website/app, secondly ‘Search by category Tabs’ placed on the top left of
the website/app. However if we look at offline shopping, search &
purchase happens mostly by ‘Looking Around’. We wanted to use
augmented reality & virtual reality to implement this aspect of ‘Looking
Around’ in online shopping.
• We have developed an Augmented Reality Solution that allow consumers to
‘walk-through’ real brick and mortar stores, ‘pick’ products off the
shelves and purchase online while inside the Virtual Store. We bring in the
real-life shopping experience to the consumers.
Source: https://www.vow360.com/dashsquare (2016.2.16)
Source: https://www.vow360.com/dashsquare (2016.2.16)
Source: https://www.vow360.com/dashsquare (2016.4.20)
Source: https://www.vow360.com/varnam (2016.4.20)
Source: https://www.vow360.com/varnam (2016.4.20)
Source: https://www.vow360.com/varnam (2016.4.20)
Source: https://www.vow360.com/varnam (2016.4.20)
Source: https://www.vow360.com/unilet (2016.4.20)
Source: https://www.vow360.com/unilet (2016.4.20)
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Strategies and Considerations
• 단품(제품)이 아닌 ‘총체적 경험’ 판매 시대!
 오프라인 월드 -> 온라인 월드 -> 오프라인 월드(AR)
• 구매를 원하는 제품의 접근 어려움 발생
 실시간 채팅 서비스(상담) 필요
 재고가 없어도, 설사 판매하지 않는 제품이라도 ‘상담’을 통해
선주문(또는 선결제) 가능
• 제품 검색 필요
 탐색의 재미는 충분하나 ‘빠른 검색’의 필요성이 사라진 것은
아님. 더욱 강화된 검색 서비스로의 접근 필요(또는 실시간
채팅 서비스로 보완 가능)
• AR 영역과 AR 외 영역 간 결합 문제 발생
 쇼핑몰의 기본적인 기능 시 사용품질 확보 필요 (예) 상세
페이지로의 이동, 즐겨찾기 메시지
• 취급하는 제품 종류에 따른 정보 퀄리티 재고 필요
 토이와 전자제품은 차원이 다른 요구사항이 있으므로, 각각의
제품 특성에 적합하게 정보를 접근하도록 하고, 적합한
해상도 등을 제공해야 함
109
A.I. - powered
online shopping
assistant:
1-800-Flowers,
The North Face
“Online shopping can be
overwhelming. There are so many
choices and products from so
many different sources,”
“can help retailers make sense of
massive amounts of unstructured
data to improve and personalise
the online shopping experience.”
Keith Mercier, ecosystem manager of Watson
출처: http://www.iamdigitalnews.com/2016/04/14/is-fashion-ready-for-the-ai-revolution/
Source: https://www.ibm.com/blogs/commerce/2016/08/boosting-online-retail-sales-artificial-intelligence/
참조: http://www.mobilecommercedaily.com/1800flowers-unwraps-ibm-watson-powered-mobile-gift-concierge-signaling-ais-rise
• 1-800-Flowers used IBM Watson-powered digital gift
concierge uses cognitive capabilities to tailor product
suggestions for shoppers.
• Dubbed as “GWYN” (Gifts When You Need), the concierge
will engage consumers in conversation on the company’s
desktop and mobile web sites. Shoppers, rather than browse
the company’s inventory in search of the right bouquet or gift
basket, will be able to tell GWYN what they are looking for,
then select and order the product from inside the
conversational interface.
https://www.1800flowers.com/gwyn-1800flowers?cm_sp=flowers-_-homepage-_-tier3-gwym-Tgwyn
https://www.1800flowers.com/gwyn-1800flowers?cm_sp=flowers-_-homepage-_-tier3-gwym-Tgwyn
https://www.1800flowers.com/gwyn-1800flowers?cm_sp=flowers-_-homepage-_-tier3-gwym-Tgwyn
https://www.1800flowers.com/gwyn-1800flowers?cm_sp=flowers-_-homepage-_-tier3-gwym-Tgwyn
https://www.1800flowers.com/gwyn-1800flowers?cm_sp=flowers-_-homepage-_-tier3-gwym-Tgwyn
https://www.1800flowers.com/gwyn-1800flowers?cm_sp=flowers-_-homepage-_-tier3-gwym-Tgwyn
https://www.1800flowers.com/gwyn-1800flowers?cm_sp=flowers-_-homepage-_-tier3-gwym-Tgwyn
https://www.1800flowers.com/gwyn-1800flowers?cm_sp=flowers-_-homepage-_-tier3-gwym-Tgwyn
https://www.1800flowers.com/gwyn-1800flowers?cm_sp=flowers-_-homepage-_-tier3-gwym-Tgwyn
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
The North Face sees A.I. as a perfect fit
• "지난 20년 동안 하얀 배경에 격자 형태로 제품을 진열하는
방법으로 온라인 쇼핑을 제공했었다.
• 고객들은 이런 인터페이스 아래 제품을 찾아야 한다. 우리는
사이트 내부 검색과 탐색 기능을 개발했다. 그러나 여전히
소비자가 직접 제품을 찾아 결정해야 한다.
• 이에 오프라인 매장에서 발생할 수 있는 대화를 생각해봤다
그리고 이를 온라인에 이식할 수 있는지 조사했다. '이런 옷이
필요합니다.’ '이런 옷을 원합니다.'같은 대화들이다“
• 오프라인 직원들이 재킷 선택 시 도움을 줄 때 고객이
경험하는 것과 가장 가까운 경험을 제공할 수 있는 도구
• 중량, 보호 기능, 스타일 등 고객들의 요구를 파악하는 것은
힘든 일이다.
• "재킷 분류는 어려운 일이다. 모두 각기 다른 활동과 환경을
염두에 두고 만들어졌기 때문이다. AI는 이렇게 처리가 힘들
정도로 선택지가 많을 때 가장 강력한 도구가 되어준다.”
by Cal Bouchard, Director of E-Commerce at The North
Face
Source: http://bit.ly/1mBWZoJ
122
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
The North Face sees A.I. as a perfect fit(cont.)
• The North Face teamed up with IBM to use its Watson
natural-language, machine learning system as well as
software builder Fluid; it created the Expert Personal
Shopper (XPS) software that uses the Watson technology.
• The A.I.-powered online shopping assistant, which has been
12 months in the making, is live on The North Face site.
Once in the jackets and vests section, click on Shop with
IBM Watson.
• 신규 고객을 중심으로 고객들이 이 회사가 공급하고 있는
350종의 재킷 가운데 자신에게 맞는 재킷을 더 손쉽게 찾는
방법을 고안하면서 AI를 이용하기로 결정
• The North Face brand's mission of applying technology to
transform the retail experience customers can now use
natural conversation as they shop online via an intuitive,
dialog-based recommendation engine powered by Fluid
XPS and receive outerwear recommendations that are
tailored to their needs.
• XPS will ask questions about factors like location,
temperature or gender to provide a recommendation that
seeks to meet the shopper's specific usage and climate
needs.
source: http://bit.ly/1my0jAZ
Source: http://prn.to/1PVPdSn
Source: http://bit.ly/1KQrgvw
123
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
The North Face sees A.I. as a perfect fit(cont.)
• A 60% click-through rate for trying product
recommendations;
• Average consumer engagement times of two minutes;
and
• Assurance from 80% of users that they would use the
platform again during the shopping experience.
• “If people are engaging with the tool, that’s a good thing.
The goal eventually is to turn that engagement into
conversion.” by Cal Bouchard, Director of E-Commerce at
The North Face
Source: http://bit.ly/1QBMz0v
124
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
The North Face sees A.I. as a perfect fit(cont.)
• It’s designed to mimic the type of interaction you might
have with sales staff in-store.
• “고객들의 후기에서 드러난 사실이 있다. 가장 많은 도움을
필요로 했던 사람들이 가장 큰 도움을 받았던 것이다. 파우더
스커트와 고어텍스 등 자켓 기술에 대해서도 이야기하지
않는다. 그런 용어를 모르는 사람들이 이 시스템으로 인해
가장 도움을 많이 받았다. 반면 자켓을 좀 아는 고객들과
무엇이 필요한지 아는 고객들은 인공지능 시스템의 도움이
필요 없다는 점”
• “아주 많은 테스트를 해봐야 한다. 인공지능은 고객이 이
질문에는 긍정, 저 질문에는 부정할지 아는 의사결정
분지도가 아니다. 인공지능은 훨씬 유동적이다. 수많은
테스트를 거쳐 논리의 구멍을 찾아내야 한다. 다른
소프트웨어보다 테스트에 훨씬 시간이 많이 들어가게 된다”
by Cal Bouchard, Director of E-Commerce at The North
Face
• 현재 노스페이스는 4월 출시될 새로운 디자인 작업 중에
있는데 이는 좀 더 인터랙티브하고 좀 더 모바일 친화적일 수
있도록 설계되었다. 자켓 이면의 기술에 대해서도 더 많은
정보는 물론 관련 정보 링크, 기사, 블로그까지도 제공할 수
있게 될 전망.
Source: http://bit.ly/1QBP3Md
Source: http://bit.ly/1mBWZoJ
125
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
https://www.thenorthface.com/XPS
Conversational
commerce: Allo,
Operator app
http://msg.ai/#features
Source: http://blog.brandingbrand.com/news/why-you-need-to-engage-in-conversational-
commerce?utm_content=32652930&utm_medium=social&utm_source=twitter (2016.4.19)
“It made me feel excited, and my Operator seemed genuinely interested in what I
was looking for. She sent over a couple of initial options to get a feel for what
direction she should go. After I provided some feedback and sent over some example
images of dresses I liked, she continued to send over more suggestions tailored to
my preferences and price range.”
https://googleblog.blogspot.kr/2016/05/allo-duo-apps-messaging-video.html
Google assistant
in Allo
https://www.operator.com/
Source: https://www.operator.com (2016.2.16)
Source: https://www.operator.com (2016.2.16)
Source: https://www.operator.com (2016.2.16)
Source: https://www.operator.com (2016.2.16)
Source: https://www.operator.com (2016.2.16)
Source: https://www.operator.com (2016.2.16)
© 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망:
주목할 해외 사례 중심으로
Strategies and Considerations
• 가장 중요한 경험의 요체는?
 신뢰성 확보! 그러나 미흡한 상태임
 편승 효과(bandwagon effect) 활용 필요: 다수의 사용자가
의사결정을 한 것에 자신의 판단을 맞춤. 그 이후에는 무리
효과(herd effect)가 작동할 가능성이 높음
• 설득력 높이는 전략은?
 유사성-매력(similarity-attraction) 전략 채택 필요! 그러나
결핍된 상태임
 해당 전략은 긍정적인 감정을 유발하고 유대감을 형성하는데
기여를 할 수 있으며, 성격이 유사한 전문가의 선호도가
높아져 구매력이 상승할 가능성이 있음
 그러므로, 텍스트의 톤과 매너 그리고 길이 등이 중요함
• 구매력 높이는 전략은?
 측면별 제거(elimination by aspects) 전략 채택 필요!
그러나 부재함
 판단의 참조점(reference point)을 다르게 해서 구매 유도
필요. 예를 들면, 상당히 비싼 물품을 팔기 위해서 더 비싼
다른 물품의 가격과 비교 처리
• 향후 차별화 전략은?
 텍스트 외에 비주얼 커뮤니케이션 전략 채택 필요
 비주얼 검색 엔진을 탑재하여 소통과 구매 촉진 유도 가능함
152
https://play.google.com/store/apps/details?id=com.google.android.apps.tachyon
Video call in Duo
경청해주셔서
고맙습니다!

More Related Content

What's hot

Smart TV UX/UI Insight
Smart TV UX/UI InsightSmart TV UX/UI Insight
Smart TV UX/UI InsightBilly Choi
 
2015년 UX 최신 트렌드 및 전망
2015년 UX 최신 트렌드 및 전망2015년 UX 최신 트렌드 및 전망
2015년 UX 최신 트렌드 및 전망Billy Choi
 
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!Billy Choi
 
IoT 차세대 제품의 UX 통찰
IoT 차세대 제품의 UX 통찰IoT 차세대 제품의 UX 통찰
IoT 차세대 제품의 UX 통찰Billy Choi
 
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?Billy Choi
 
UX/UI의 이해와 전략적 접근
UX/UI의 이해와 전략적 접근UX/UI의 이해와 전략적 접근
UX/UI의 이해와 전략적 접근Billy Choi
 
Ux research guide
Ux research guideUx research guide
Ux research guideKim Taesook
 
Zero Effort & Connected(ZEC) UI/UX Strategy
Zero Effort & Connected(ZEC) UI/UX StrategyZero Effort & Connected(ZEC) UI/UX Strategy
Zero Effort & Connected(ZEC) UI/UX StrategyBilly Choi
 
UXUI INSIGHT 2015 by U PLEAT
UXUI INSIGHT 2015 by U PLEATUXUI INSIGHT 2015 by U PLEAT
UXUI INSIGHT 2015 by U PLEATUPLEAT_INSIGHT
 
인류학적 상수, SW+인문포럼의 존재 이유
인류학적 상수, SW+인문포럼의 존재 이유인류학적 상수, SW+인문포럼의 존재 이유
인류학적 상수, SW+인문포럼의 존재 이유Billy Choi
 
[Rightbrain] AI서비스와 UX의 역할 - 챗봇/AI스피커 사업소개서
[Rightbrain] AI서비스와 UX의 역할 - 챗봇/AI스피커 사업소개서[Rightbrain] AI서비스와 UX의 역할 - 챗봇/AI스피커 사업소개서
[Rightbrain] AI서비스와 UX의 역할 - 챗봇/AI스피커 사업소개서RightBrain inc.
 

What's hot (12)

Smart TV UX/UI Insight
Smart TV UX/UI InsightSmart TV UX/UI Insight
Smart TV UX/UI Insight
 
2015년 UX 최신 트렌드 및 전망
2015년 UX 최신 트렌드 및 전망2015년 UX 최신 트렌드 및 전망
2015년 UX 최신 트렌드 및 전망
 
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!
 
IoT 차세대 제품의 UX 통찰
IoT 차세대 제품의 UX 통찰IoT 차세대 제품의 UX 통찰
IoT 차세대 제품의 UX 통찰
 
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?
 
소셜커머스 카카오박스
소셜커머스 카카오박스소셜커머스 카카오박스
소셜커머스 카카오박스
 
UX/UI의 이해와 전략적 접근
UX/UI의 이해와 전략적 접근UX/UI의 이해와 전략적 접근
UX/UI의 이해와 전략적 접근
 
Ux research guide
Ux research guideUx research guide
Ux research guide
 
Zero Effort & Connected(ZEC) UI/UX Strategy
Zero Effort & Connected(ZEC) UI/UX StrategyZero Effort & Connected(ZEC) UI/UX Strategy
Zero Effort & Connected(ZEC) UI/UX Strategy
 
UXUI INSIGHT 2015 by U PLEAT
UXUI INSIGHT 2015 by U PLEATUXUI INSIGHT 2015 by U PLEAT
UXUI INSIGHT 2015 by U PLEAT
 
인류학적 상수, SW+인문포럼의 존재 이유
인류학적 상수, SW+인문포럼의 존재 이유인류학적 상수, SW+인문포럼의 존재 이유
인류학적 상수, SW+인문포럼의 존재 이유
 
[Rightbrain] AI서비스와 UX의 역할 - 챗봇/AI스피커 사업소개서
[Rightbrain] AI서비스와 UX의 역할 - 챗봇/AI스피커 사업소개서[Rightbrain] AI서비스와 UX의 역할 - 챗봇/AI스피커 사업소개서
[Rightbrain] AI서비스와 UX의 역할 - 챗봇/AI스피커 사업소개서
 

Similar to 2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로

사례 연구를 통한 온라인 커머스 uxui 방향성 검토
사례 연구를 통한 온라인 커머스 uxui 방향성 검토사례 연구를 통한 온라인 커머스 uxui 방향성 검토
사례 연구를 통한 온라인 커머스 uxui 방향성 검토Billy Choi
 
2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI 2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI Billy Choi
 
[디지털마케팅특강] 2017, 페이스북 타겟광고와 리마케팅 전략 맛보기
[디지털마케팅특강] 2017, 페이스북 타겟광고와 리마케팅 전략 맛보기[디지털마케팅특강] 2017, 페이스북 타겟광고와 리마케팅 전략 맛보기
[디지털마케팅특강] 2017, 페이스북 타겟광고와 리마케팅 전략 맛보기규문 최
 
Social Media Marketing 2015 Trend
Social Media Marketing 2015 Trend Social Media Marketing 2015 Trend
Social Media Marketing 2015 Trend Innobirds Media
 
1주차 발표자료 20100707 ver1.0
1주차 발표자료 20100707 ver1.01주차 발표자료 20100707 ver1.0
1주차 발표자료 20100707 ver1.0승원 서
 
중앙대 대학원 패션 창업 비즈니스학과 박사과정용 Lean startup 기반의 패션 e-commerce - 17년 12월 15일(발표후...
중앙대 대학원 패션 창업 비즈니스학과 박사과정용   Lean startup 기반의 패션 e-commerce - 17년 12월 15일(발표후...중앙대 대학원 패션 창업 비즈니스학과 박사과정용   Lean startup 기반의 패션 e-commerce - 17년 12월 15일(발표후...
중앙대 대학원 패션 창업 비즈니스학과 박사과정용 Lean startup 기반의 패션 e-commerce - 17년 12월 15일(발표후...희택 이
 
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기Billy Choi
 
마케팅 담당자를 위한, 2시간짜리 실전 소셜미디어 운영법
마케팅 담당자를 위한, 2시간짜리 실전 소셜미디어 운영법마케팅 담당자를 위한, 2시간짜리 실전 소셜미디어 운영법
마케팅 담당자를 위한, 2시간짜리 실전 소셜미디어 운영법Jay Cho
 
UX/UI의 이해와 도전
UX/UI의 이해와 도전UX/UI의 이해와 도전
UX/UI의 이해와 도전Billy Choi
 
2016년 소셜미디어 기상도, 뜨는 sns 지는 sns
2016년 소셜미디어 기상도, 뜨는 sns 지는 sns2016년 소셜미디어 기상도, 뜨는 sns 지는 sns
2016년 소셜미디어 기상도, 뜨는 sns 지는 snsJay Cho
 
3주차 ppt용
3주차 ppt용3주차 ppt용
3주차 ppt용승원 서
 
[창업&예비창업자] 사업계획서 작성 실무
[창업&예비창업자] 사업계획서 작성 실무[창업&예비창업자] 사업계획서 작성 실무
[창업&예비창업자] 사업계획서 작성 실무더게임체인저스
 
ALL ABOUT VISUAL STORYTELLING
ALL ABOUT VISUAL STORYTELLING ALL ABOUT VISUAL STORYTELLING
ALL ABOUT VISUAL STORYTELLING Innobirds Media
 
브랜드 저널리즘의 성공 요건
브랜드 저널리즘의 성공 요건브랜드 저널리즘의 성공 요건
브랜드 저널리즘의 성공 요건Juny Lee
 
WGSN 가이드.pdf
WGSN 가이드.pdfWGSN 가이드.pdf
WGSN 가이드.pdfjones cho
 
WGSN 매뉴얼.pdf
WGSN 매뉴얼.pdfWGSN 매뉴얼.pdf
WGSN 매뉴얼.pdfBaeSubin2
 
스마트워크 시대의 SNS 방향과 대응전략
스마트워크 시대의 SNS 방향과 대응전략스마트워크 시대의 SNS 방향과 대응전략
스마트워크 시대의 SNS 방향과 대응전략Youngwoo Song
 
뉴스레터 1월
뉴스레터 1월뉴스레터 1월
뉴스레터 1월Jiwon Yoon
 
091119 박찬우님 1인창조기업 출력용 091117
091119 박찬우님 1인창조기업 출력용 091117091119 박찬우님 1인창조기업 출력용 091117
091119 박찬우님 1인창조기업 출력용 091117JUNGEUN KANG
 
2017 인플루언서 마케팅 트렌드 (인플루언서 마케팅 오픈그룹 세미나 2회 픽업 문용희)
2017 인플루언서 마케팅 트렌드 (인플루언서 마케팅 오픈그룹 세미나 2회 픽업 문용희)2017 인플루언서 마케팅 트렌드 (인플루언서 마케팅 오픈그룹 세미나 2회 픽업 문용희)
2017 인플루언서 마케팅 트렌드 (인플루언서 마케팅 오픈그룹 세미나 2회 픽업 문용희)(페이스북) 인플루언서 마케팅 오픈그룹
 

Similar to 2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 (20)

사례 연구를 통한 온라인 커머스 uxui 방향성 검토
사례 연구를 통한 온라인 커머스 uxui 방향성 검토사례 연구를 통한 온라인 커머스 uxui 방향성 검토
사례 연구를 통한 온라인 커머스 uxui 방향성 검토
 
2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI 2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI
 
[디지털마케팅특강] 2017, 페이스북 타겟광고와 리마케팅 전략 맛보기
[디지털마케팅특강] 2017, 페이스북 타겟광고와 리마케팅 전략 맛보기[디지털마케팅특강] 2017, 페이스북 타겟광고와 리마케팅 전략 맛보기
[디지털마케팅특강] 2017, 페이스북 타겟광고와 리마케팅 전략 맛보기
 
Social Media Marketing 2015 Trend
Social Media Marketing 2015 Trend Social Media Marketing 2015 Trend
Social Media Marketing 2015 Trend
 
1주차 발표자료 20100707 ver1.0
1주차 발표자료 20100707 ver1.01주차 발표자료 20100707 ver1.0
1주차 발표자료 20100707 ver1.0
 
중앙대 대학원 패션 창업 비즈니스학과 박사과정용 Lean startup 기반의 패션 e-commerce - 17년 12월 15일(발표후...
중앙대 대학원 패션 창업 비즈니스학과 박사과정용   Lean startup 기반의 패션 e-commerce - 17년 12월 15일(발표후...중앙대 대학원 패션 창업 비즈니스학과 박사과정용   Lean startup 기반의 패션 e-commerce - 17년 12월 15일(발표후...
중앙대 대학원 패션 창업 비즈니스학과 박사과정용 Lean startup 기반의 패션 e-commerce - 17년 12월 15일(발표후...
 
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
 
마케팅 담당자를 위한, 2시간짜리 실전 소셜미디어 운영법
마케팅 담당자를 위한, 2시간짜리 실전 소셜미디어 운영법마케팅 담당자를 위한, 2시간짜리 실전 소셜미디어 운영법
마케팅 담당자를 위한, 2시간짜리 실전 소셜미디어 운영법
 
UX/UI의 이해와 도전
UX/UI의 이해와 도전UX/UI의 이해와 도전
UX/UI의 이해와 도전
 
2016년 소셜미디어 기상도, 뜨는 sns 지는 sns
2016년 소셜미디어 기상도, 뜨는 sns 지는 sns2016년 소셜미디어 기상도, 뜨는 sns 지는 sns
2016년 소셜미디어 기상도, 뜨는 sns 지는 sns
 
3주차 ppt용
3주차 ppt용3주차 ppt용
3주차 ppt용
 
[창업&예비창업자] 사업계획서 작성 실무
[창업&예비창업자] 사업계획서 작성 실무[창업&예비창업자] 사업계획서 작성 실무
[창업&예비창업자] 사업계획서 작성 실무
 
ALL ABOUT VISUAL STORYTELLING
ALL ABOUT VISUAL STORYTELLING ALL ABOUT VISUAL STORYTELLING
ALL ABOUT VISUAL STORYTELLING
 
브랜드 저널리즘의 성공 요건
브랜드 저널리즘의 성공 요건브랜드 저널리즘의 성공 요건
브랜드 저널리즘의 성공 요건
 
WGSN 가이드.pdf
WGSN 가이드.pdfWGSN 가이드.pdf
WGSN 가이드.pdf
 
WGSN 매뉴얼.pdf
WGSN 매뉴얼.pdfWGSN 매뉴얼.pdf
WGSN 매뉴얼.pdf
 
스마트워크 시대의 SNS 방향과 대응전략
스마트워크 시대의 SNS 방향과 대응전략스마트워크 시대의 SNS 방향과 대응전략
스마트워크 시대의 SNS 방향과 대응전략
 
뉴스레터 1월
뉴스레터 1월뉴스레터 1월
뉴스레터 1월
 
091119 박찬우님 1인창조기업 출력용 091117
091119 박찬우님 1인창조기업 출력용 091117091119 박찬우님 1인창조기업 출력용 091117
091119 박찬우님 1인창조기업 출력용 091117
 
2017 인플루언서 마케팅 트렌드 (인플루언서 마케팅 오픈그룹 세미나 2회 픽업 문용희)
2017 인플루언서 마케팅 트렌드 (인플루언서 마케팅 오픈그룹 세미나 2회 픽업 문용희)2017 인플루언서 마케팅 트렌드 (인플루언서 마케팅 오픈그룹 세미나 2회 픽업 문용희)
2017 인플루언서 마케팅 트렌드 (인플루언서 마케팅 오픈그룹 세미나 2회 픽업 문용희)
 

More from Billy Choi

현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기
현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기
현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기Billy Choi
 
용산FM 라디오 방송 with 최병호 교수
용산FM 라디오 방송 with 최병호 교수용산FM 라디오 방송 with 최병호 교수
용산FM 라디오 방송 with 최병호 교수Billy Choi
 
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...Billy Choi
 
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략Billy Choi
 
인공지능을 활용한 비즈니스 전략 사례
인공지능을 활용한 비즈니스 전략 사례인공지능을 활용한 비즈니스 전략 사례
인공지능을 활용한 비즈니스 전략 사례Billy Choi
 
스타트업 메타씽킹
스타트업 메타씽킹스타트업 메타씽킹
스타트업 메타씽킹Billy Choi
 
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안Billy Choi
 
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문죽느냐 사느냐; AI 시대, 우리에게 필요한 질문
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문Billy Choi
 
인공지능 마이크로 트렌드 및 통찰
인공지능 마이크로 트렌드 및 통찰인공지능 마이크로 트렌드 및 통찰
인공지능 마이크로 트렌드 및 통찰Billy Choi
 
AI based BM 평가 및 개선 체크리스트
AI based BM 평가 및 개선 체크리스트AI based BM 평가 및 개선 체크리스트
AI based BM 평가 및 개선 체크리스트Billy Choi
 
2020 UX 화두 및 통찰
2020 UX 화두 및 통찰2020 UX 화두 및 통찰
2020 UX 화두 및 통찰Billy Choi
 
인공지능(AI)과 사용자 경험(UX)
인공지능(AI)과 사용자 경험(UX)인공지능(AI)과 사용자 경험(UX)
인공지능(AI)과 사용자 경험(UX)Billy Choi
 
사회문제 해결형 R&D 트렌드와 통찰
사회문제 해결형 R&D 트렌드와 통찰사회문제 해결형 R&D 트렌드와 통찰
사회문제 해결형 R&D 트렌드와 통찰Billy Choi
 
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)Billy Choi
 
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)Billy Choi
 
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성Billy Choi
 
2019년 이후의 커머스 디자인 트렌드 전망
2019년 이후의 커머스 디자인 트렌드 전망2019년 이후의 커머스 디자인 트렌드 전망
2019년 이후의 커머스 디자인 트렌드 전망Billy Choi
 
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론Billy Choi
 
철학과 과학 그리고 게이미피케이션(‘Player engaging’ 위해 핵심적으로 고찰이 필요한 이론과 개념 중심으로)
철학과 과학 그리고 게이미피케이션(‘Player engaging’ 위해 핵심적으로 고찰이 필요한 이론과 개념 중심으로)철학과 과학 그리고 게이미피케이션(‘Player engaging’ 위해 핵심적으로 고찰이 필요한 이론과 개념 중심으로)
철학과 과학 그리고 게이미피케이션(‘Player engaging’ 위해 핵심적으로 고찰이 필요한 이론과 개념 중심으로)Billy Choi
 
Social Innovation and Gamification: UX Redefined (게이미피케이션으로 사회혁신을 추구하는 UX/서비스...
Social Innovation and Gamification: UX Redefined (게이미피케이션으로 사회혁신을 추구하는 UX/서비스...Social Innovation and Gamification: UX Redefined (게이미피케이션으로 사회혁신을 추구하는 UX/서비스...
Social Innovation and Gamification: UX Redefined (게이미피케이션으로 사회혁신을 추구하는 UX/서비스...Billy Choi
 

More from Billy Choi (20)

현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기
현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기
현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기
 
용산FM 라디오 방송 with 최병호 교수
용산FM 라디오 방송 with 최병호 교수용산FM 라디오 방송 with 최병호 교수
용산FM 라디오 방송 with 최병호 교수
 
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...
 
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략
 
인공지능을 활용한 비즈니스 전략 사례
인공지능을 활용한 비즈니스 전략 사례인공지능을 활용한 비즈니스 전략 사례
인공지능을 활용한 비즈니스 전략 사례
 
스타트업 메타씽킹
스타트업 메타씽킹스타트업 메타씽킹
스타트업 메타씽킹
 
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안
 
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문죽느냐 사느냐; AI 시대, 우리에게 필요한 질문
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문
 
인공지능 마이크로 트렌드 및 통찰
인공지능 마이크로 트렌드 및 통찰인공지능 마이크로 트렌드 및 통찰
인공지능 마이크로 트렌드 및 통찰
 
AI based BM 평가 및 개선 체크리스트
AI based BM 평가 및 개선 체크리스트AI based BM 평가 및 개선 체크리스트
AI based BM 평가 및 개선 체크리스트
 
2020 UX 화두 및 통찰
2020 UX 화두 및 통찰2020 UX 화두 및 통찰
2020 UX 화두 및 통찰
 
인공지능(AI)과 사용자 경험(UX)
인공지능(AI)과 사용자 경험(UX)인공지능(AI)과 사용자 경험(UX)
인공지능(AI)과 사용자 경험(UX)
 
사회문제 해결형 R&D 트렌드와 통찰
사회문제 해결형 R&D 트렌드와 통찰사회문제 해결형 R&D 트렌드와 통찰
사회문제 해결형 R&D 트렌드와 통찰
 
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)
 
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)
 
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성
 
2019년 이후의 커머스 디자인 트렌드 전망
2019년 이후의 커머스 디자인 트렌드 전망2019년 이후의 커머스 디자인 트렌드 전망
2019년 이후의 커머스 디자인 트렌드 전망
 
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론
 
철학과 과학 그리고 게이미피케이션(‘Player engaging’ 위해 핵심적으로 고찰이 필요한 이론과 개념 중심으로)
철학과 과학 그리고 게이미피케이션(‘Player engaging’ 위해 핵심적으로 고찰이 필요한 이론과 개념 중심으로)철학과 과학 그리고 게이미피케이션(‘Player engaging’ 위해 핵심적으로 고찰이 필요한 이론과 개념 중심으로)
철학과 과학 그리고 게이미피케이션(‘Player engaging’ 위해 핵심적으로 고찰이 필요한 이론과 개념 중심으로)
 
Social Innovation and Gamification: UX Redefined (게이미피케이션으로 사회혁신을 추구하는 UX/서비스...
Social Innovation and Gamification: UX Redefined (게이미피케이션으로 사회혁신을 추구하는 UX/서비스...Social Innovation and Gamification: UX Redefined (게이미피케이션으로 사회혁신을 추구하는 UX/서비스...
Social Innovation and Gamification: UX Redefined (게이미피케이션으로 사회혁신을 추구하는 UX/서비스...
 

2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로

  • 1. 2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 2016 Billy(최병호)/BillyChoi@Gmail.com 중앙대학교 교수 홍익대학교 영상대학원(HCI개론 강의)/ 연세대학교 공학대학원(서비스디자인경영 강의)/ 성균관대학교 일반대학원 휴먼ICT융합학과(교수)/ HEDcentric UX미래융합전략연구소(연구소장) Research Data: http://www.slideshare.net/BillyChoi/ Blog: http://blog.naver.com/soularchitec Twitter/Facebook: ILOVEHCI
  • 2. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Table of Contents Part I. 1. Card-like Layouts(Card design) 2. Storytelling 3. Hamburger Menu(Hidden Menus) 4. Large Backgrounds(Background Videos and Animation) Part II. 1. Visual commerce – UGC 기반의 랜딩 페이지: Boom, Calvin Klein 2. Visual commerce - AR 기반의 쇼핑몰: Preksh 3. A.I.-powered online shopping assistant: 1-800-Flowers, The North Face 4. Conversational commerce: Allo, Operator app 1
  • 4. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Sources • http://apiumtech.com/blog/11-mobile-design-trends-2016/ • http://www.friday.ie/journal/5-e-commerce-design-trends-2016/ • http://blog.exitbee.com/7-ecommerce-design-trends-2016-need-know/ Card-like Layouts(Card design): Overview  One of the most popular mobile app design trends that started in 2014 continued to expand in 2015, rocks in 2016 and is about to stay for long.  Another way to make UX more dynamic and meaningful is by using card layouts. • Small chunks of information in “cards” are easily sorted and adapted to user preferences. • The greatest benefit of adopting the cards layout is they work extremely well with responsive web design which is why they are very popular in e-commerce websites.  Cards are not just known to deliver a richer, neater experience to website visitors, but are also known to be highly responsive and are one of the core components of material design, as stated by Google. 3
  • 7. http://www.randco.com/ 1 1  특징 • 시선의 흐름에 부합하는 카드에 동영상 제공으로 몰입 및 체류 유도(1번 영역) • 카드 타이틀을 카드 영역 내에 국한하지 않은 접근 • 그러나, 카드 타이틀 칼라와 카드 이미지 칼라 간 간섭으로 legibility와 readability가 떨어짐
  • 10.  특징 • 2개의 카드를 1개의 청크로 묶어서 접근 • 정형화된 카드 형식 탈피 • 그러나, 2개의 카드가 1개의 청크라는 단서가 취약하여 보완 필요 http://www.reserved.com/
  • 15.  특징 • 테마형 카드 레이아웃 • 메인 페이지(home page)와 콘텐츠 페이지(content page)의 관계에서의 카드 레이아웃 • 그러나, 특정 조건(위치 등)에 부합하지 않는다고 하여 에러(404 등)와 유사한 느낌의 카드를 제시하는 것은 사용자 경험을 저해시키는 위험이 있음 http://www.ebay.com/ http://www.nastygal.com
  • 16. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Card-like Layouts(Card design): Strategies and Considerations  시선의 흐름을 유도할 수 있는 카드 레이아웃 추구 필요; 즉 모든 카드 강조 지향 필요 (예) 영상 자동 플레이 등  규격화된 카드 레이아웃에서 탈피해서 응용 추구 고려 (예) 최근 카툰 레이아웃, 테마형 카드 레이아웃 등  단, 카드와 카드 타이틀 간 간섭 방지, 여러 개의 카드를 하나의 청크로 접근할 경우 명료한 그룹핑 제시 필요  또한, 특정 조건에 부합하지 않는 카드는 노출하지 않는 방향 필요  결국, 카드 디자인은 이미지에 의해 승패가 결정된다고 봐도 과언이 아니므로, 더욱 주의를 해야 함 15
  • 18. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Sources • http://apiumtech.com/blog/ux-designers-higher-degree-responsibility-2016/ • http://apiumtech.com/blog/11-mobile-design-trends-2016/ • http://www.instantshift.com/2016/08/17/2016-rocking-web-design-trends/ • https://blog.amasty.com/magento-design-trends-2016/ • http://www.tmogroup.asia/top-6-hottest-ecommerce-design-trends-to-embrace-in-2016/ Storytelling: Overview  For many companies, mobile app is the link between their online and offline presence and it needs to tell a good story featuring the user as the main character. • People love stories, people love to recognise themselves in a story, it makes them better understand the idea of the product or service and see all the benefits they could have. • Here it is especially important to have a story, to make people interested in your app as now we are quite picky with the apps we install and maintain. • Many brands design mobile apps that way that users browse the app actually being part of the story, for example jewellery and wedding brands do that really good, their mobile apps are full of emotions and love stories.  User-driven storytelling is recognized as an effective way to deliver a memorable pitch.  Good stories are simple. Here are 5 elements of a good story: good stories are emotional, they are truthful or believable, the best stories are real, great stories, are valid and work for almost any audience.  Although storytelling is not an easy thing to achieve in eCommerce, many fastest-growing eCommerce stores are now practicing this strategy to their advantage.  about ‘clicks’, only remember ‘gestures’. • WForget hat if, you are accessing the same website on your smartphone? • we expect most websites to work on their scrolling first, while clicking taking over the second priority. 17
  • 25. http://www.randco.com/  특징 • 모델의 스타일과 제품의 연결고리 형성; 1개의 스타일에 여러 개의 제품 매핑 • 가로 스크롤 방식의 정보 접근 • 다양한 스타일 제시 • 큰 사이즈의 얼굴 사진의 주목성 • 그러나, 모델의 독특한 스토리가 미약하고, 가로 스크롤 인터페이스가 불편하며, 1개의 스타일에 사용된 여러 개의 제품을 일시에 구매할 수 없음 • 그렇지만, 스토리텔링의 초기 접근 방식으로 간주할 수 있으며, 몇 개의 문제를 보완한다면 매력적인 경험을 제시할 가능성이 있음
  • 31.  특징 • 주로 세로 스크롤(parallax scrolling)로 전체 내용 자연스럽게 연동(클릭은 최소화); 흥미와 주목성 강화 효과 https://serioverify.com/
  • 37.  특징 • 제품의 타깃이 살아갈 미래를 위해서 제품을 판매하는 우리는 무엇을 해야 하는가라는 자신들의 화두를 구매자에게 판매하고 있음 • 환경 오염을 인정하면서 나무를 심겠다는 솔루션으로 설득하고 있음; 즉 교환 가치 뿐만 아니라 사회 가치까지 고려함; 그들의 다음 행보가 궁금하고, 그들을 궁금하게 함 http://www.munchkin.com/
  • 39.
  • 40. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Storytelling: Strategies and Considerations  특정 인물에게 주목하게 하여 스토리로 제품까지 견인하게는 모델 추구 필요 • 이때, 스토리에 포함된 다양한 제품의 개별 구매와 일괄 구매를 동시에 제공 고려  스토리텔링을 단순한 교환 가치가 아닌 타깃층의 미래 삶을 위한 사회 가치로 접근하면서 구체적인 실행 지침을 포괄하는 방향성 추구 필요  클릭보다는 특정 제스처(예로 세로 스크롤 등)로 스토리텔링 경험을 취할 수 있도록 고려 • 단, 사용성 이슈가 발생할 위험성도 있으므로 이에 대한 대안 모색 필요 (예) 가로 스크롤 사용성 이슈 등 39
  • 45. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Sources • http://www.instantshift.com/2016/08/17/2016-rocking-web-design-trends/ • http://www.friday.ie/journal/5-e-commerce-design-trends-2016/ • http://wpall.club/wordpress-articles-board/wp-ecommerce-web-design-trends/ Hamburger Menu(Hidden Menus): Overview  Looks like a hamburger with a bunch of few short lines, and present at the top in almost all websites.  When clicked, expands and shows submenus present within. • Over the last few years minimalism has continued to be one of the most consistent web design trends, focussing on clean, simple and easy to navigate aesthetics and giving prominence to imagery and large backgrounds.  However, research has proven that demoting the main navigation into a drop-down menu reduces engagement, dwell time and even effect sales on both desktop and on mobile! It’s been reported that some mobile sites are now moving away from the hamburger menu in favour of a mini nav that is front & centre. 44
  • 52. http://www.randco.com/  특징 • 페이지 상단(왼쪽 또는 오른쪽) 위치; 반응형 디자인에 유용 • 햄버거 메뉴 클릭 시, 화면 전체 반전(dim out)시킨 후 메뉴 제공; 주목성 및 인식성 높음 • 그러나, 햄버거 메뉴에 익숙하지 않은 경우에 접근성이 떨어지고, 메뉴 선택 후 이동한 페이지에서 선택한 메뉴명과 연계된 단서가 미흡함 http://whiteclaw.com/
  • 62. https://www.etq-amsterdam.com/  특징 • 페이지 상단(왼쪽) 위치; 반응형 디자인에 유용 • 햄버거 메뉴 클릭 시, 왼쪽 메뉴 영역 노출 및 콘텐츠 영역 반전(dim out) • 그러나, 첫 페이지에서 햄버거 메뉴의 단서가 부재하고, 메뉴 선택 후 이동한 페이지에서 택한 메뉴명과 연계된 단서가 부재함
  • 63. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Hamburger Menu(Hidden Menus): Strategies and Considerations  ‘핵심 서비스를 메인 페이지(home page)에서 스토리텔링 방식으로 집중시켜서 구매로 이끌 수 있다면’ 햄버거 메뉴 채택은 현실적인 방안으로 간주할 수 있음  그러나, 메뉴의 접근 횟수가 빈번하고, 내비게이션의 목적(현재 위치, 이동할 위치, 전체 구조 파악)에서 취약점이 발생할 경우 햄버거 메뉴 채택은 재고할 필요가 있음 • 웹과 모바일 채널에서 개별적인 채택도 가능할 수 있음. 예를 들면 웹에서는 메뉴 노출, 모바일에서는 햄버거 메뉴 채택  햄버거 메뉴 위치는 왼쪽 상단을 권장하며, 메뉴 개수가 많을 경우에는 별도의 왼쪽 메뉴 영역 활용 권고 62
  • 65. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Sources • http://blog.exitbee.com/7-ecommerce-design-trends-2016-need-know/ • http://wpall.club/wordpress-articles-board/wp-ecommerce-web-design-trends/ • https://blog.amasty.com/magento-design-trends-2016/ Large Backgrounds(Background Videos and Animation): Overview  What most eCommerce businesses are now tapping into, are large or full scape backgrounds. While this trend has been followed by many business websites over the years, eCommerce is just starting to see it in action.  This design technique is considered to be minimal, yet it ensures an extremely positive user experience.  Using high quality and large product images as backgrounds for collections or using product videos on web pages, compels the online shopper to ‘get the look’. Apart from being able to deliver a richer shopping experience to your visitors, they also help the most extensive of online stores look clean and professional. For example, above mentioned eCommerce store, Nasty Gal actually uses a product shot on their homepage to draw a visitor’s attention immediately to a particular range on their website.  Using background images and animation adds engaging dimensions to a web page. 64
  • 66. Source: https://blog.goodvid.io/what-is-visual-commerce-and-why-it-matters-for-online-retail/ ※ 참조: http://www.socialannex.com/blog/2016/01/14/51-vital-visual-commerce-statistics/ • 55% of content creators plan to prioritize visual content in 2016. • Visual content works better for retention. People tend to remember 80% things they see or do versus only 10% of things they hear and 20% of the things they read. • Compelling images get 94% more views than basic visuals. • 67% consumers say that high quality visual content is more important than product description or customer ratings. • By 2017, 74% of all web traffic will be video. • Shoppers who view videos are 1.8x more likely to purchase than non-viewers. • When featuring video on the site, retailers report 40% increase in purchases. • 84% of millennial shoppers say that UGC influences their purchases.
  • 84. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Large Backgrounds(Background Videos and Animation): Strategies and Considerations  시선을 압도하고 구매까지 견인하는데 효과적인 방안임  1개의 (배경) 이미지가 강렬한 효과를 유발할 가능성이 높고, 2개 (배경) 이미지는 대조 효과로 흥미를 유발시킬 수 있음  제품 정보 페이지에서도 큰 (배경) 이미지 및 영상를 활용하여 제품의 매력도를 강화하는 경향이 보임  단, 체감할 수 있는 빠른 로딩 타임의 고려가 최우선적이어야 함 83
  • 85. Exponential [ekspənenʃəl] Exponential means growing or increasing very rapidly. • 점진적 변화가 아닌 급진적, 기하급수적 변화 • 즉, 기술의 진화에 따른 사회, 경제적 변화가 점진적으로 오는 것이 아니라 순식간에 급격하게 온다. • 적은 값의 움직임(입력)으로 큰 작용(출력)을 얻을 수 있는 변화 Source: 싱귤래리티 유니버시티 글로벌 서밋
  • 86. Visual commerce – UGC 기반의 랜딩 페이지: Boom ,Calvin Klein
  • 90. http://www.boombycindyjoseph.com/ BOOM! Shows Real Products on Real People • BOOM! cosmetics company gives customers the option to submit original photos with their product reviews. When a shopper sees these user-generated photos of real people using the product they are considering, they can quickly tell whether it meets their expectations. • User-generated photos coupled with customer reviews effectively communicates a comprehensive customer experience that allows shoppers to connect on a personal level and imagine themselves using your product. • BOOM! also implements visual UGC throughout their site with a selfie contest and rotating customer photos on their homepage. Source: http://blog.hubspot.com/marketing/attention-grabbing-examples-user- generated-content-ecommerce#sm.0006dw8tvwq3cv310bl2bw5czwcla
  • 95. Source: Calvin Klein App (2016.4.20)
  • 96. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Strategies and Considerations • I ____ in #MyCalvins(Campaign: #MyCalvins) is not only the first thing that grabs your attention as your scope out the iconic brand’s customized landing page, you will also see user-generated content filtered from savvy fans wearing their favorite CK looks on Instagram. With a combined reach of 106 million followers, the stars could fill the top 50 U.S. cities with likes, comments and shares. (Source: http://www.reelativity.co/six-brands-that-love-visual-storytelling/) • 새로운 시나리오의 등장 가능성 제시!  사용자가 첫 대면하는 페이지를 사용자의 콘텐츠로 대부분 채운다. 이렇게 되면, 페이지에 등장한 사용자는 온라인 매체에 데뷔하는 놀라운 경험을 하게 되고, 이것은 곧 자발적인 경험의 공유를 촉발하게 된다.  사용자의 콘텐츠는 비주얼만 올릴 수 있는 파트너 앱을 활용하여 수급한다. 이것은 상생할 수 있는 생태계 구축을 용이하게 한다.  사용자의 콘텐츠는 자신의 사연이 투영된 옷을 직접 또는 다른 이가 입고 사진을 찍어서 만든다. 이때 메시지는 아주 임팩트가 강한 키워드를 선정할 수 있도록 유도하는 구조를 만들어야 한다. (예) I ____ in #MyCalvins  참여한 사용자와 수익을 공유한다.  사용자가 직접 새로운 캠페인을 만들어서 운용하도록 하여 ‘지속가능한 로열티 강화’를 유도한다. 95
  • 97. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Everything you need to know about user-generated content in ecommerce • Visuals are everything. Over 1.8 billion of photos are uploaded and shared by consumers on social media daily. • 92% of consumers worldwide say they trust word-of-mouth more than any kind of advertising. • 82% of shoppers say that user-generated content is extremely valuable when deciding on purchases. • Brands see 25% increase in conversions when user-generated photos are used instead of professionally made product shots by brands. • UGC can improve conversion rates 6.4% for clothing, 2.4x for jewelry, 1.7x for footwear and 1.6x for products in beauty and consumer electronics verticals. Source: https://blog.goodvid.io/everything-you-need-to-know-about-user-generated-content-in-ecommerce/ 96
  • 99. Visual commerce - AR 기반의 쇼핑몰: Preksh
  • 100. Source: http://www.entreprennovators.com/interview-saikat-sinha-preksh-worlds-first-visual-commerce-platform/ • At present there is a huge gap between online shopping and offline shopping. If we look at eCommerce, there are only two ways of searching a product. Firstly ‘The Search Tab’ which is generally placed on the top of the website/app, secondly ‘Search by category Tabs’ placed on the top left of the website/app. However if we look at offline shopping, search & purchase happens mostly by ‘Looking Around’. We wanted to use augmented reality & virtual reality to implement this aspect of ‘Looking Around’ in online shopping. • We have developed an Augmented Reality Solution that allow consumers to ‘walk-through’ real brick and mortar stores, ‘pick’ products off the shelves and purchase online while inside the Virtual Store. We bring in the real-life shopping experience to the consumers.
  • 110. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Strategies and Considerations • 단품(제품)이 아닌 ‘총체적 경험’ 판매 시대!  오프라인 월드 -> 온라인 월드 -> 오프라인 월드(AR) • 구매를 원하는 제품의 접근 어려움 발생  실시간 채팅 서비스(상담) 필요  재고가 없어도, 설사 판매하지 않는 제품이라도 ‘상담’을 통해 선주문(또는 선결제) 가능 • 제품 검색 필요  탐색의 재미는 충분하나 ‘빠른 검색’의 필요성이 사라진 것은 아님. 더욱 강화된 검색 서비스로의 접근 필요(또는 실시간 채팅 서비스로 보완 가능) • AR 영역과 AR 외 영역 간 결합 문제 발생  쇼핑몰의 기본적인 기능 시 사용품질 확보 필요 (예) 상세 페이지로의 이동, 즐겨찾기 메시지 • 취급하는 제품 종류에 따른 정보 퀄리티 재고 필요  토이와 전자제품은 차원이 다른 요구사항이 있으므로, 각각의 제품 특성에 적합하게 정보를 접근하도록 하고, 적합한 해상도 등을 제공해야 함 109
  • 111. A.I. - powered online shopping assistant: 1-800-Flowers, The North Face
  • 112. “Online shopping can be overwhelming. There are so many choices and products from so many different sources,” “can help retailers make sense of massive amounts of unstructured data to improve and personalise the online shopping experience.” Keith Mercier, ecosystem manager of Watson 출처: http://www.iamdigitalnews.com/2016/04/14/is-fashion-ready-for-the-ai-revolution/
  • 113. Source: https://www.ibm.com/blogs/commerce/2016/08/boosting-online-retail-sales-artificial-intelligence/ 참조: http://www.mobilecommercedaily.com/1800flowers-unwraps-ibm-watson-powered-mobile-gift-concierge-signaling-ais-rise • 1-800-Flowers used IBM Watson-powered digital gift concierge uses cognitive capabilities to tailor product suggestions for shoppers. • Dubbed as “GWYN” (Gifts When You Need), the concierge will engage consumers in conversation on the company’s desktop and mobile web sites. Shoppers, rather than browse the company’s inventory in search of the right bouquet or gift basket, will be able to tell GWYN what they are looking for, then select and order the product from inside the conversational interface.
  • 123. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 The North Face sees A.I. as a perfect fit • "지난 20년 동안 하얀 배경에 격자 형태로 제품을 진열하는 방법으로 온라인 쇼핑을 제공했었다. • 고객들은 이런 인터페이스 아래 제품을 찾아야 한다. 우리는 사이트 내부 검색과 탐색 기능을 개발했다. 그러나 여전히 소비자가 직접 제품을 찾아 결정해야 한다. • 이에 오프라인 매장에서 발생할 수 있는 대화를 생각해봤다 그리고 이를 온라인에 이식할 수 있는지 조사했다. '이런 옷이 필요합니다.’ '이런 옷을 원합니다.'같은 대화들이다“ • 오프라인 직원들이 재킷 선택 시 도움을 줄 때 고객이 경험하는 것과 가장 가까운 경험을 제공할 수 있는 도구 • 중량, 보호 기능, 스타일 등 고객들의 요구를 파악하는 것은 힘든 일이다. • "재킷 분류는 어려운 일이다. 모두 각기 다른 활동과 환경을 염두에 두고 만들어졌기 때문이다. AI는 이렇게 처리가 힘들 정도로 선택지가 많을 때 가장 강력한 도구가 되어준다.” by Cal Bouchard, Director of E-Commerce at The North Face Source: http://bit.ly/1mBWZoJ 122
  • 124. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 The North Face sees A.I. as a perfect fit(cont.) • The North Face teamed up with IBM to use its Watson natural-language, machine learning system as well as software builder Fluid; it created the Expert Personal Shopper (XPS) software that uses the Watson technology. • The A.I.-powered online shopping assistant, which has been 12 months in the making, is live on The North Face site. Once in the jackets and vests section, click on Shop with IBM Watson. • 신규 고객을 중심으로 고객들이 이 회사가 공급하고 있는 350종의 재킷 가운데 자신에게 맞는 재킷을 더 손쉽게 찾는 방법을 고안하면서 AI를 이용하기로 결정 • The North Face brand's mission of applying technology to transform the retail experience customers can now use natural conversation as they shop online via an intuitive, dialog-based recommendation engine powered by Fluid XPS and receive outerwear recommendations that are tailored to their needs. • XPS will ask questions about factors like location, temperature or gender to provide a recommendation that seeks to meet the shopper's specific usage and climate needs. source: http://bit.ly/1my0jAZ Source: http://prn.to/1PVPdSn Source: http://bit.ly/1KQrgvw 123
  • 125. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 The North Face sees A.I. as a perfect fit(cont.) • A 60% click-through rate for trying product recommendations; • Average consumer engagement times of two minutes; and • Assurance from 80% of users that they would use the platform again during the shopping experience. • “If people are engaging with the tool, that’s a good thing. The goal eventually is to turn that engagement into conversion.” by Cal Bouchard, Director of E-Commerce at The North Face Source: http://bit.ly/1QBMz0v 124
  • 126. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 The North Face sees A.I. as a perfect fit(cont.) • It’s designed to mimic the type of interaction you might have with sales staff in-store. • “고객들의 후기에서 드러난 사실이 있다. 가장 많은 도움을 필요로 했던 사람들이 가장 큰 도움을 받았던 것이다. 파우더 스커트와 고어텍스 등 자켓 기술에 대해서도 이야기하지 않는다. 그런 용어를 모르는 사람들이 이 시스템으로 인해 가장 도움을 많이 받았다. 반면 자켓을 좀 아는 고객들과 무엇이 필요한지 아는 고객들은 인공지능 시스템의 도움이 필요 없다는 점” • “아주 많은 테스트를 해봐야 한다. 인공지능은 고객이 이 질문에는 긍정, 저 질문에는 부정할지 아는 의사결정 분지도가 아니다. 인공지능은 훨씬 유동적이다. 수많은 테스트를 거쳐 논리의 구멍을 찾아내야 한다. 다른 소프트웨어보다 테스트에 훨씬 시간이 많이 들어가게 된다” by Cal Bouchard, Director of E-Commerce at The North Face • 현재 노스페이스는 4월 출시될 새로운 디자인 작업 중에 있는데 이는 좀 더 인터랙티브하고 좀 더 모바일 친화적일 수 있도록 설계되었다. 자켓 이면의 기술에 대해서도 더 많은 정보는 물론 관련 정보 링크, 기사, 블로그까지도 제공할 수 있게 될 전망. Source: http://bit.ly/1QBP3Md Source: http://bit.ly/1mBWZoJ 125
  • 144. Source: http://blog.brandingbrand.com/news/why-you-need-to-engage-in-conversational- commerce?utm_content=32652930&utm_medium=social&utm_source=twitter (2016.4.19) “It made me feel excited, and my Operator seemed genuinely interested in what I was looking for. She sent over a couple of initial options to get a feel for what direction she should go. After I provided some feedback and sent over some example images of dresses I liked, she continued to send over more suggestions tailored to my preferences and price range.”
  • 153. © 2016 Billy All rights reserved.2016년 국내외 커머스 디자인 트렌드 및 전망: 주목할 해외 사례 중심으로 Strategies and Considerations • 가장 중요한 경험의 요체는?  신뢰성 확보! 그러나 미흡한 상태임  편승 효과(bandwagon effect) 활용 필요: 다수의 사용자가 의사결정을 한 것에 자신의 판단을 맞춤. 그 이후에는 무리 효과(herd effect)가 작동할 가능성이 높음 • 설득력 높이는 전략은?  유사성-매력(similarity-attraction) 전략 채택 필요! 그러나 결핍된 상태임  해당 전략은 긍정적인 감정을 유발하고 유대감을 형성하는데 기여를 할 수 있으며, 성격이 유사한 전문가의 선호도가 높아져 구매력이 상승할 가능성이 있음  그러므로, 텍스트의 톤과 매너 그리고 길이 등이 중요함 • 구매력 높이는 전략은?  측면별 제거(elimination by aspects) 전략 채택 필요! 그러나 부재함  판단의 참조점(reference point)을 다르게 해서 구매 유도 필요. 예를 들면, 상당히 비싼 물품을 팔기 위해서 더 비싼 다른 물품의 가격과 비교 처리 • 향후 차별화 전략은?  텍스트 외에 비주얼 커뮤니케이션 전략 채택 필요  비주얼 검색 엔진을 탑재하여 소통과 구매 촉진 유도 가능함 152