사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토(온라인 커머스 월드 2013 FALL) Overview: Inspirational Commerce For the Window Shopper: Fashion Kaleidoscope app Unique style for photography: Suitsupply.com Minimize navigation size: Lilybalou.be Full screen background images: Us.vanmoof.com Personalize your experience: Fab.com

1. (온라인 커머스 월드 2013 FALL)
2013.10.18
InnoUX CEO 최병호
InnoUX@InnoUX.com, @ILOVEHCI

2. © 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Table of Contents
• Overview: Inspirational Commerce
• For the Window Shopper: Fashion Kaleidoscope app
• Unique style for photography: Suitsupply.com
• Minimize navigation size: Lilybalou.be
• Full screen background images: Us.vanmoof.com
• Personalize your experience: Fab.com
1

4. http://www.slideshare.net/subburama/inspirational-commerce-solutions

5. http://kalei.do/
https://itunes.apple.com/us/app/kaleidoscope-fashion-
inspired/id505876558?ls=1&mt=8

21. © 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
For the Window Shopper: Fashion Kaleidoscope app
1. Home screen(time line)의 변화와 타인이 멋있게 입고 있는 스타일과
닮고 싶다는 욕구 판매
2. 구매 프로세스의 변화 추구: 스타일 탐색 > 스타일 선택 > 구매 대상
선택
3. 구매 대상 선택 UI의 개선 필요: ‘메뉴’ 방식과 affordance와 fun이
투영된 ‘구매 대상 직접 선택’ 방식 혼용
4. Shopping mall 연계 UI의 개선 필요: 단순 제품 나열 방식에서 비주얼
감성을 자극하는 방식으로 전환 필요
5. Social friends가 공유하는 스타일로의 접근 변화
6. Visual bookmarking의 commodity화 (예) Pin it
참조: http://mashable.com/2013/05/16/shopping-apps-tablet/

22. http://www.slideshare.net/subburama/inspirational-commerce-solutions

23. http://suitsupply.com/

38. © 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Unique style for photography : Suitsupply.com
1. 예술작품 같은 비주얼 충격: 고품격 제품 퀄리티 추구
2. 돋보기로 본 듯한 섬세한 제품 확대: 신뢰성 제고
3. 실제 모델이 직접 동영상 홍보: 강력한 흥미 유발
4. Size advisor 기능 및 실제 모델이 직접 동영상 설명 제공:
실효적인 구매 지원
5. ‘ADD TO CART’ 버튼 선택 직후 정보 제공: 명료한 피드백
6. ‘SHOP BY LOOK’ 메뉴 제공: WYSIWYG 접근 강화
참조: http://www.slideshare.net/StuartSilverstein/30-sites-deck-final2

39. http://www.lilybalou.be/

47. © 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Minimize navigation size: Lilybalou.be
1. Home page의 변화: 정보량과 내비게이션 바의 위치 혁신으로
정보주목도 강화
2. 매거진 방식 도입: 패션 매거진을 보는 즐거움의 이식과 종이
매거진에는 없는 인터랙션 스타일 접목으로 쇼핑 즐거움 배가
(예) 지면 부분 확대(!), 전체 화면으로 확대
참조: http://www.slideshare.net/StuartSilverstein/30-sites-deck-final2

48. http://us.vanmoof.com/

59. © 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Full screen background images: Us.vanmoof.com
1. Home page의 변화: background image의 교체와 한 개의
이미지으로만 정보주목도 강화
2. 직관적인 인터랙션 방식 도입: 옵션 마우스 오버 시 floating
info. Box 제공 및 옵션 선택 시 제품에 실제 착탈로 명료한 이해
유도
참조: http://www.slideshare.net/StuartSilverstein/30-sites-deck-final2

60. http://fab.com

68. © 2013 InnoUX & Innodesign All rights reserved.사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
Personalize your experience: Fab.com
1. 맞춤 카테고리: 선호하는 카테고리를 선택하여 웹/앱/이메일
대상으로 맞춤 서비스를 받을 수 있도록 구성
2. Social friends의 선호 제품 공유: SNS에서 선호하는 제품
공유로 conversion rate 상승 효과

69. 경청해주셔서
고맙습니다!