Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2011-01-20 popong webpage

58 views

Published on

!!

Published in: Design
  • Be the first to comment

  • Be the first to like this

2011-01-20 popong webpage

  1. 1. 1 POPONG webpage Planning Project POPONG 8/4/2016 Project POPONG Written by Youngjun Park (ganzi@popong.com)
  2. 2. 2 POPONG webpage Planning Project POPONG 8/4/2016 History 출력날짜 : 2016년 8월 4일 오전 12시 43분 Ver. 개정내용 작성자 날짜 0.1 • 문서 최초 작성 박영준 1-20 변경내역 관리
  3. 3. 3 POPONG webpage Planning Project POPONG 8/4/2016 Index & Legend 1. Website Specification 웹사이트 스펙 2. Use Case 사용사례 3. Components 페이지 구성요소 4. UX Scenario 사용 시나리오 5. References 참조 사이트 INDEX
  4. 4. 4 POPONG webpage Planning Project POPONG 8/4/2016 Website Specification
  5. 5. 5 POPONG webpage Planning Project POPONG 8/4/2016 Website Specification 웹사이트 이름 POPONG Website (Public Open Political engineeriNG website) 지원되는 브라우저 Internet Explorer 7.0이상 버전 Mozilla FireFox Google Chrome Safari 사용 언어 한국어 기준해상도 웹 : 1024 X 768(차후 협의) 모바일 : 960 X 480 Target User 정치/시사관련 파워블로거 및 논객 정치에 관련된 글을 작성하려는 일반 유저 정치 관련 backdata를 원하는 유저 Contents 정치인에 관련된 통계와 정보를 infographic으로 제공 제공된 결과물을 트위터/페이스북으로 보내기 텀블러를 이용하여 각각의 글에 대한 permalink 제공 정치인 DB의 API를 제공하여 사용자들이 원하는 indicator와 서비스들을 추가 메인 페이지를 개인화 포탈과 같은 UX로 제공
  6. 6. 6 POPONG webpage Planning Project POPONG 8/4/2016 Use Case
  7. 7. 7 POPONG webpage Planning Project POPONG 8/4/2016 Use Case Best scenario 파워블로거 A씨 블로그에 정치와 관련된 포스팅을 주로 하는 파워블로거 A씨는 선거에 출마한 정치인 X씨와 Y씨의 성향을 비교 하기 위해 POPONG(가제) 웹사이트를 찾았다. A씨는 POPONG 웹사이트에서 제공하는 infographic 툴을 이용하 여 비교하려는 정치인들과 중점적으로 부각시킬 indicator를 찾아서 선택한다. 그리고 유저들이 만들어 놓은 indicator중에서 두 정치인을 더 잘 비교할 수 있는 것이 있는지를 살펴본 후, 세팅을 종료하고 결과를 출력한다. 화면에 두 정치인의 성향이 비교된 그래프가 나오자, 그는 결과 저장 버튼을 눌러 화면을 저장하고 자신의 블로 그에 돌아와 글을 작성하기 시작한다. 트위터/페이스북 주사용 유저 트위터와 페이스북에서 POPONG 웹사이트에 대해 알게된 B씨는 자신의 지역구에 출마한 정치인들의 성향과 과 거 이력을 알아보기 위해 데이터베이스에 접근한다. 데이터베이스에서 두 정치인을 선택한 후 indicator를 바꿔 가면서 보다가, 표결법안 성향분석을 보고 결과를 트위터와 페이스북에 퍼가기로 마음먹는다. 그는 infographic 화면 아래에 존재하는 트위터/페이스북으로 보내기 버튼을 이용하여 해당 페이지를 두곳으로 퍼트린다. 트위터 와 페이스북으로 퍼가는 순간 내용이 텀블러에 저장되며 permalink가 남아 B씨는 이후에도 자신이 남겨놓은 링 크에 들어가서 내용을 확인한다. Worst scenario 악성이용자 C씨 디씨와 네이버 등지에서 정치 관련 페이지마다 악성댓글을 다는 C씨는 웹상에서 POPONG의 존재를 알고 접속 하여 기능을 써 보던 중, 자신이 싫어하는 정치인에 대해 흑색선전을 하는 도구로 이용하기로 마음먹는다. 해당 정치인의 데이터베이스에서 indicator를 바꿔가며 검색하던 중, 사람들이 오해할 만한 부분을 찾아내고 즉시 그 화면을 저장하여 여기저기 웹사이트에 퍼나르기 시작한다. 그가 주장의 근거로 삼은 스크린샷에는 POPONG 웹 사이트의 로고가 박혀있어 사람들은 덩달아 POPONG웹사이트의 신뢰도가 낮다고 생각하게 된다. 인터넷에 익숙치 못한 D씨 D씨는 고령으로 인터넷에 익숙하지 못한 편이나, 정치와 관련된 글들을 자주 읽는 편이다. 정치에 관련된 포스 팅을 읽다가 POPONG을 접하게 된 D씨는 호기심을 가지고 사이트에 접속하게 되나, indicator와 infographic의 복잡성때문에 사이트를 이용하지 못하고 포기하게 된다.
  8. 8. 8 POPONG webpage Planning Project POPONG 8/4/2016 Components
  9. 9. 9 POPONG webpage Planning Project POPONG 8/4/2016 Components 페이지 구성요소 웹사이트 로고 Infographic 생성이 가능한 데이터베이스 표시화면 - Data에 기반 - 사용자들이 선택 및 생성할 수 있는 indicator제공 - Indicator에 따라 보기 쉽게 표시된 infographic제공 텀블러 서비스 연동 - 인포그래픽을 기반으로 글을 작성하려는 사용자들에게 permalink제공 - 글 내에 자동적으로 인포그래픽이 포함 - 트위터/페이스북에 연동될때 이미지가 포함된 링크를 제공 Facto.me와 유사한 서비스 - 해당 정치인(을 기반으로 걸러낸 data)에 관한 사실을 한두문장으로 표현 - 문장을 작성하고 poll이나 평가, 공감 등 유저들의 피드백을 가시화할 수 있는 기능 추가 트위터/페이스북 연동 - 트위터/페이스북 API를 이용하여 해당 서비스에 접속하고 글을 올릴 수 있도록 함 - 트위터/페이스북 위젯을 이용하여 POPONG 메인페이지에서 작성된 글에 대한 RT현황, 좋아요 현 황 등을 확인할 수 있도록 함
  10. 10. 10 POPONG webpage Planning Project POPONG 8/4/2016 UX Scenario
  11. 11. 11 POPONG webpage Planning Project POPONG 8/4/2016 Best scenario Neutral scenario Worst scenario UX scenario POPONG Main page Data infographic Tumblr service Facto.me like service Twt/Fb Data infographic capture Exit Bulletin board posting Exit Bulletin board posting Exit Bulletin board Posting + Twt/Fb Exit Setting Dev page Exit
  12. 12. 12 POPONG webpage Planning Project POPONG 8/4/2016 Reference
  13. 13. 13 POPONG webpage Planning Project POPONG 8/4/2016 Reference 개인화 포탈 위자드닷컴 www.wzd.com BBC웹사이트 http://www.bbc.co.uk/ 아이구글 http://www.google.com/ig

×