b-slide final

B-Slide

Team B-Worm

송호련 / 이현주 / 조예인 / 한수교

Bookmark return system proposal

INDEX

1. SYSTEM�CONCEPT

2. INTERVIEW�&�MODELING

3. PERSONA

4. DEFINING�REQUIREMENTS

5. JOURNEY�MAP�&�USE�CASE

6. INFORMATION�ARCHITECTURE

7. UI�SCENARIO

8. WIREFRAMES

SYSTEM�CONCEPT

1. System concept

2. Focused Contents

3. Target user

4. Image mapping

SYSTEM�CONCEPT

*리턴: 북마크했던자료들을다시 보는 것

스마트폰잠금화면을통해

자료들로의리턴을 도와주는서비스

정보가 넘쳐나는뉴미디어시대에

새로운 정보 소장 방법, 북마크필요성 증대

FOCUSED�CONTENTS

“텍스트위주”

+ 이미지가부가적으로들어가는

뉴스기사,블로그등의글

리턴의가치가있는

“유용한정보”를담은북마크

*사용자의 기존 크롬 북마크,페이스북 저장,트위터 관심글, Pocket 등에서 사용자의북마크자료를 끌어온다.

TARGET�USERS

# 다시볼목적이나,나중에볼목적으로유용한정보들을많이북마크하지만리턴이힘든대학생

# 일이나과제등의특정목적으로북마크를하며,그와관련된다른정보들을쉽게접하고싶어하는대학생

# 북마크공유를많이하는대학생

IMAGE�MAPPING

콜렉션 위주 리턴 위주

여러 콘텐츠 유형

한 가지콘텐츠 유형

LitzApp

B-Slide

INTERVIEW&�MODELING

1. INTERVIEWEES

2. INTERVIEW RESULTS & CODING

INTERVIEWEES

INTERVIEW�RESULTS�&�CODING�(1)

Question A-G Code

북마크 서비스를평소 자주 사용하시나요?1. 자주가는용도2. 유용한 정보 -> 리턴

북마크를하신다면 어떤 서비스를이용해서하시나요? / 혹은 북마크기능이유사한 서비스?

일반적으로기본 서비스를이용 (크롬/익플 등의 기본서비스)

북마크를하시는 의도는 무엇인가요?1. 편하고 빠른 접근2. 다시 보기위한 용도3. 특정 목적 ( 학교 교과, 과제)에 필요한 정보 모음용도

주로 어떤 디바이스를사용해서북마크를하시나요?PC: 모바일에비해 즐겨찾기를추가하는depth가 없기 때문


Question A-G Code

북마크 했던 것들을지우거나 편집을하시나요?일반적으로기본 서비스를이용 (크롬/익플 등의 기본서비스)

어떤 웹페이지를주로 사용하고, 그 웹페이지를자주들어가려고하시나요?

포털 사이트, 학교 관련 사이트 (학교 포털 포함)

북마크했던걸다시 찾아보는편이신가요?

1. 북마크를다중적인 목적으로사용하고있다.2. 재방문율도북마크를한 목적 마다 다르다.그 중 항상 자주 가는 웹사이트(숏컷용)à자주사용반드시 이후에다시 가야 할 곳(과제 및 기억용)à자주사용업무와 과제에관련된 북마크가아닌 관심성 북마크->자주 사용하지 않고 기억이나지 않는다.

주로 어떤식으로다시 보려고 들어가시나요? 사용하는브라우저의기본 북마크 기능을이용


Question A-G Code

다시 안보신다면, 다시 보게 유도하려면어떻게해야할까요?

적당한 수준의알림 기능 : 읽게 하라!

북마크를분류하시는편인가요? 미분류 (편하고 빠르기때문)

북마크했던걸친구들에게공유한음이 있나요? 많은 사람이 이용하는카카오톡을통해 주로 한다.

폴더 단위의 공유에대해서 어떻게 생각하시나요? 단위별 공유가편하고 좋다고 생각한다.

서비스 피드백

1. 단위별 공유2. 자동분류3. 빠르게, 단순하게,자동으로4. 정보전달을핵심기능으로

PERSONA1. GENERATING PERSONA

2. PRIMARY PERSONA

3. SECONDARY PERSONA

GENERATING�PERSONA�:�BOOKMARKING�BEHAVIOR

GENERATING�PERSONA�:�INTERVIEWEE�BEHAVIOR�PATTERN

콘텐츠형의 북마크를 모은다. 제때 읽어볼수가 없을 경우가 더 많아일단 북마크를해놓는 편이다. 다양한 출처에서 콘텐츠를받는데 기본적인 크롬 url 북마크 외에도페이스북 save, 트위터 관심글 등각서비스에 맞는 방식으로 저장해 둔다. 리턴을해서 읽고자 하더라도 북마크가 자꾸쌓인다는 느낌을 받는다. 좋은 내용을 읽으면친구들에게 그때그때 공유를 한다.

그때 필요한 자료의 북마크를 저장한다. 주로과목이나 과제명으로 크롬 북마크 폴더를만들어서 그 안에 모은다. 북마크의 주제가확실한 편이고 이미 있는 북마크 외에도 연관자료검색을 필요로 한다. 그리고 필요한시기가 지나면 폴더 자체를 삭제한다. 필요에의해서 북마크를 하기 때문에 과제할 때가아니면 잘 찾지 않는다. 조모임의 경우폴더안의 링크를 하나하나 복사해서카톡방에 붙여넣는 방식으로 공유한다.

북마크는 지름길에 지나지 않는다. 정말 자주가는 사이트나 학생의 경후 학교 포털과 같이일상에 없어서는 안되는 사이트가 북마크되어있다. 북마크 바를 넘어가는 것(메뉴로저장)을 싫어해서 혹시라도 갯수가 늘어나지않도록 자주 정리한다.

PRIMARY / 다람쥐 SECONDARY / 철새 MINOR / 스프린터

PRIMARY�PERSONA

§ 이현정 (23세, 여) 연세대학교정보인터렉션디자인3학년

현정이는 3학년이되어 생각의 폭을 넓히기 위해 IT 소식을 자주 접하기로마음 먹고 구글에서 2015 IT Trend로 검색을 해보았지만 너무나방대한양의 검색결과와 알 수 없는 단어들의 나열에 질려버렸다. 이제까지는항상검색을 해서 새로운 자료를 찾아왔지만자신이 검색하는 자료가 과연얼마나 좋은지에 대해 의문을 갖기 시작했다. 이렇게 검색을하면 모든웹페이지를 둘러봐야하며 매번 좋은지 판단을 하기에는 무리가 있다고느꼈다. 그래서 같은 관심사를 가진 동기에게 어디서 읽을거리를찾느냐고물었더니 자주 찾는 블로그, 페이스북 페이지와 트위터에서팔로우 할 수있는 유명인들을 알려주었다.

동기가 알려준 출처의 컨텐츠를챙겨보기 시작한지 반 년 정도 흘렀는데이제는 받아보는 양이 너무 많아졌다. 블로그 기사 형식의 경우 한 번에 다읽을 수가 없어 나중에 읽자고 크롬 북마크를 해두는데점점 쌓여만 간다. 페이스북도 다른 이야기가아니었다. 나만 보기나 save로 등록해서 일단저장을 해두는데 생각보다다시 찾아보질 않는다. 자신이 이렇게여기저기서 북마크 한 것들만 제대로다시 보면 얻어가는게 많을거라고생각만하고 실천에 옮기기가쉽지 않다.

SECONDARY�PERSONA

§ 김규빈 (25세,남) 연세대학교철학전공 2학년

규빈이는 아직 2학년학생으로 아직 들어야 할 교양수업도 많고, 그수업들에는 조과제도많다. 그래서 교양 조과제에관련해서 리서치를해야하는 경우가 종종 있다. 이럴 때 규빈이는 해당 수업의 한 프로젝트마다과제 이름으로 우선 폴더를 만들고, 과제와 관련된 자료 url들을 해당 폴더에저장하고는 한다. 규빈이는 주로 책상에 앉아서 한두시간동안리서치를하는데, 리서치하는 시간이 조금 아깝다고 느껴진다. 이동할 때 폰으로 좀 더하고 싶지만, 아무래도 버스 안에서는 서서 가는 경우가 많아서 두 손으로검색창에 입력하고 찾는 것이 불편하기만하다.

이렇게 저장해 둔 북마크들을 한줄 한줄 복사하여카카오톡을 통해조원들과 공유한다. 일일이 링크를 복사해서메신저 창에 붙여넣는 것도귀찮지만, 메신저 창을 가득 채우는 긴 링크들에 눈쌀이 찌뿌려지고는한다. 규빈이는 과제가 끝나면 “이제 끝났다"라는심정으로 그 과제의 폴더를통째로 날려버린다.

REQUIREMENTS1. SCENARIO

2. REQUIREMENTS

3. EXPERIENCE ATTRIBUTES

Extracting�requirements�from�scenario�: Primary�persona�(1)

Scenario image Requirements

- 페이스북 저장, 트위터의 관심글, 크롬 북마크 기능에 저장된 텍스트 기반 웹 혹은모바일 페

이지 데이터를 가져올 수 있어야 한다. (큐레이션)

- 가져온 정보를 요약과 그림을 이용하여 가독성 있게 재가공하여야 한다. 또, 북마크된

콘텐츠의 원출처를 볼 수 있다. (보기)

- 추천 받은글을 자체 북마크하여 잠금화면에서 볼 수있다. (보기)

- 북마크한 글의 선호도와 읽은 정도를 자동으로 분석하여 우선순위를 설정해 사용자에게 제시

한다.



- 화면상하 스와이프를 통한본인이 직접 북마크한 다음 글, 이전 글로 이동할 수 있다. (보기)

1) 아래서 위 스와이프: 다음 북마크 글로이동

2) 위에서 아래 스와이프: 이전 북마크 글로 이동 (보기)

- 잠금화면에서 북마크 글의 요약본을 보다가 원하면 풀텍스트를 제공하는 원 앱의

화면 혹은 브라우저로 이동할 수 있어야 한다. (보기)

- 위아래로 스와이프시에 자기의 북마크를 볼 수있는 기능에 따른 위아래 화살표와 설명

- 잠금화면을 통해 북마크를 읽는 중 꺼지지 않는화면

- 풀텍스트를 읽다가 뒤로가기(안드로이드 폰에는 있음)를 누르면 다시 잠금화면의 보고

있었던 마지막 글로 재이동이 가능해야 한다.



- 본인이 직접 북마크 한현재 화면을 기준으로 왼쪽-오른쪽 스와이프를 통해 웹페이지 상에 서해당 글과

유사한 내용의 글들을 좌우 스와이프를 통해 추천받을 수 있다.

1) 왼쪽에서 오른쪽 스와이프: 현재 글을 기준으로 웹상에서 추천된 글로 이동

2) 오른쪽에서 왼쪽 스와이프: 현재 글을 기준으로 웹상에서 추천되어 본이전 글로 이동 (보기)

- 사용자의 정보를 기반으로 해당 즐겨찾기 된 글과 가장 유사하고, 사용자의 니즈를 맞출 수있는 글을 추천할

수 있는기능 (큐레이션)

- 좌우 스와이프시에 현재화면 기준으로 추천된 새로운 콘텐츠를 받아 볼수 있는 기능에 따른 좌우 화살표와

설명이 필요하다.

- 가져온 정보 (추천된 웹페이지)를 요약과 그림으로 가독성 있게 즉시 재가공하여야 한다. (카드형식)

- 잠금화면에서 북마크 요약카드를 보다가 원하면 풀텍스트의 페이지로 이동할 수 있어야 한다.



- 페이스북 저장, 트위터의 관심글, 크롬 북마크 기능에 저장된 텍스트 기반 웹혹은 모바일 페이지 데이터를

끌어온 글을 기준으로 추천 받은 글을대기화면 상에서 ‘B-Slide’로자체 북마크 할수 있다. (큐레이션)

- 이미 ‘자주 보고 싶은 글’에 추가된 글인지 확인할 수있어야 한다.

- 해당 화면에 있는 글을 URL복사나 카카오톡 연계를 통해 바로 공유할 수 있어야 한다.

- 공유가능 옵션들을 제시할 수있어야 한다.



- 본인의 다양한 플랫폼으로부터 (페이스북, 트위터, 크롬브라우저) 북마크된 글의 총 데이터, 잠금화면에서

보는 순서를 관리할 수 있는 모바일 앱이 있어야 한다. (큐레이션)

- 앱 상의 북마크 리스트에서도 풀텍스트로 이동할 수있어야 한다. (보기)

- 앱은 “사용 리포트”를 제공하여 사용자의 하루 콘텐츠 사용기록을 제공할 수 있다.

- 풀텍스트 이용 이후, 뒤로가기로 브라우저를 끄고 난 후앱의 해당화면으로 돌아올 수있어야 한다.

Extracting�requirements�from�scenario�: Secondary persona�(1)


- 웹과 모바일에서 동시 사용 가능한 브라우저 크롬과의 연계성 모색 필요. (큐레이션)

- 크롬 북마크 기능에 저장된 텍스트 기반 웹 혹은모바일 페이지 폴더와 데이터를

가져올 수있어야 한다. 동기화를 통한 크로스 디바이스 서비스 제공. (큐레이션)



- 본인이직접북마크한현재화면을기준으로좌우스와이프를통해웹페이지상에서해당글과유사한내용의글들을

추천받을수있다.

1) 왼쪽에서오른쪽스와이프: 현재글을기준으로웹상에서추천된글로이동

2) 오른쪽에서왼쪽스와이프: 현재글을기준으로웹상에서추천되어본이전글로이동

-추천받은글을자체북마크하여대기화면에서볼수있다. (보기)

-사용자의정보를기반으로해당즐겨찾기된글과가장유사하고, 사용자의니즈를맞출수있는글을추천할수있는기능

(큐레이션)

-잠금화면과연계된앱에서사용자추천의세부기능의선택 (키워드중심으로, 사람들이많이본글, 최신순등) (큐레이션)

-웹 &모바일텍스트콘텐츠에태그기능제공

-웹 & 모바일텍스트의핵심정보를추출하여자동으로태깅할수있다.

- 새로운북마크활동으로인한변동사항을크롬북마크에반영한다.



- 공유가능 옵션들을 제시할 수있어야 한다.

- 해당 화면에 있는 글을 URL복사나 카카오톡 연계를 통해 바로 공유할 수 있어야 한다.

- 앱 상에서는 북마크된 웹페이지들의 폴더 단위 링크 공유가 가능해야 한다.

EXPERIENCEATTRIBUTES

1. KEYWORD CLOUD

2. MOOD BOARD

DESCRIBE�AND�OPTIMIZE�RELATIONSHIPS� KEYWORD�CLOUD

리턴

걸러주는

관심사

커스터마이즈

맞춤

추천

심플

세련

깔끔

분류

나선택

재미

부메랑

CUMMUNICATION�TOOL� MOOD�BOARD

JOURNEY�MAP&�USE�CASE

1. JOURNEY MAP

2. USE CASE 1, 2

JOURNEY�MAP

USE�CASE�1�:�CHOOSE�AND�READ�BOOKMARKS�IN�THE�LOCK-SCREEN

USE�CASE�1�:�CHOOSE�AND�READ�BOOKMARKS�IN�THE�LOCK-SCREEN

Main Success Scenario:

1. 사용자가 잠금화면을 켠다.

2. B-Slide는 사용자가 미리 큐레이션한 북마크 풀 속에서 북마크를 선택한다.

3. B-Slide는 해당 북마크를 카드형으로 요약하여 화면에 제시한다.

4. 사용자는 카드형태로 요약된 북마크를 본다.

5. 상하 스와이프를 통해 다음 북마크 카드로 넘어간다.

6. 사용자는 자신이 리턴하기 원하는 북마크를 찾을 때까지 계속 4, 5를 반복하여 북마크 카드를 스캔한다.

7. 리턴을 원하는 북마크 카드를 찾으면 화면을 눌러 Full-Text로(원출처) 이동한다.

8. 사용자는 Full-Text를 읽는다.

Extensions:

4a. 카카오톡 등 각종 알림 등장한다.

4a1. B-Slide가 카카오톡, SMS등 디바이스의 각종 알림을 인식한다.

4a2. B-Slide는 잠금화면에서 북마크 카드 하단에 다른 디바이스의 각종

알림들을 띄운다.

Brief Description:

위-아래 스와이프를통해 잠금화면에서

sync한 북마크 보기

Primary Actor: 사용자

Precondition: 잠금화면활성화

Trigger: 잠금버튼을눌러 잠금화면을 켠다.

USE�CASE�2�:�CURATIONING�BOOKMARKS�FOR�RETURN

*큐레이션 : 개인이 기존 북마크 서비스를 통해 모은 북마크 자료를 가지고와서, 리턴하고자하는 북마크를 선별하거나, 순서를 정하는 행위

USE�CASE�2�:�CURATIONING�BOOKMARKS�FOR�RETURN

Main Success Scenario

1. B-Slide 앱을실행한다.

2. 설정창으로이동한다.

3. 동기화설정으로진입한다.

4. 사용하던북마크서비스에로그인하여 B-Slide와연동시킨다.

5. 리턴하고자하는북마크범위(폴더)를선택한다.

6. 리턴을위한옵션(순서등)을설정한다.

Extension:

2a: 초기실행

2a1. 초기설정화면이실행된다.

4a. 로그인실패

4a1: 로그인실패메시지가출력된다.

4a2: 4번으로이동한다.

5a: B-Slide에서 추가된북마크연동

5a1. B-Slide에서 추천받아사용자가자신의북마크에추가한다.

5a2. 추가된북마크는리턴대상에포함된다

Brief Description:

앱의 설정창에서 리턴 자료를 선별하는

큐레이션 작업을 진행

Primary Actor: 사용자

Precondition: B-Slide앱의 활성화

Trigger: B-Slide의 앱을 켠다.

INFORMATIONARCHITECTURE

1. SITE MAP

2. TASK FLOWS

SITE�MAP

잠금화면

유저가큐레이션한즐겨찾기카드

추천페이지카드

원문보기 즐겨찾기공유 추천제외 원문보기 즐겨찾기

추가

앱

즐겨찾기목록

다중선택

태그설정 추천자료보기 읽음처리

즐겨찾기공유

리포트 설정

동기화설정

잠금화면설정

1.0 2.0

3.0 3.1

3.0.1 3.0.2 3.1.1 3.1.2 3.1.3

4.0 6.0 7.0

4.0.1.1

7.0.1

4.0.1.1.3 4.0.1.1.4 4.0.1.1.5 4.0.1.2.1

7.0.2

4.0.1.2

단일선택

원문보기 즐겨찾기공유

4.0.1.1.1

태그설정 읽음처리

4.0.1.2.24.0.1.1.2 4.0.1.2.3

태그별보기

5.0

출처별보기

태그수정

5.0.2

4.0.1.3

표시방법설정

리스트 매거진

4.0.1.3.1 4.0.1.3.2

정렬기준설정

레코드기반

과거추가순

4.0.1.4.1 4.0.1.4.2

최근추가순 랜덤

4.0.1.4.3 4.0.1.4.4

4.0.1.4

태그삭제

5.0.3

잠금화면사용여부

카드정렬기준설정

추천설정

7.0.3

지금동기화자동동기화사용여부

출처목록 제외목록추천기준

키워드사용

트래픽사용

7.0.3.1.1 7.0.3.1.2

추가 삭제

7.0.3.2.1 7.0.3.2.2

사용 해제

7.0.1.2.1

사용 해제

7.0.2.1.1

즐겨찾기공유

3.1.2

출처계정추가

출처계정삭제

7.0.2.3.1 7.0.2.3.2

출처켜기 출처끄기

7.0.2.3.3 7.0.2.3.4

사이트 키워드

7.0.3.2.1.1 7.0.3.2.1.2

이 글 제외이사이트제외

4.0.1

3.1.1.23.1.1.14.0.1.4

7.0.1.1 7.0.1.2 7.0.2.1 7.0.2.2 7.0.2.3

7.0.1.2.2

7.0.2.1.1

7.0.2.1.2

7.0.3.1 7.0.3.2

TASK�FLOW�1�:�FROM�LOCK-SCREEN�TO�FULL-TEXT

TASK�FLOW2�:�BOOKMARK�CURATION

UI�SCENARIO1. UI MAP

2. UI STORYBOARDS

3. PRIORITIZATION LIST

LOCK-SCREEN

1-1.

INSTANTLY CHOOSE AND READ

1-2.

GET RECOMMENDATION AND READ

1-3.

SHARE

LOCK-SCREEN

2.

CHANGE WHAT I SEE ON LOCK-SCREEN

APPLICATION

1-1.

SEE BOOKMARK LIST

1-2.

SHARE BOOKMARKS

1-3.

SEE RECOMMENDATIONS

1-4.

ADD TAG TO BOOKMARKS

APPLICATION

2.

CURATION

APPLICATION

3.

GET PERSONAL DATA FROM REPORT PAGE

APPLICATION

4.

EDIT TAGS

PRIORITIZATION�LIST

Requirement DescriptionUser

ImportanceBusiness

ImportanceTechnical Feasibility

ResourceFeasibility

1보기

내 북마크 요약 카드잠금화면에 자신의 북마크의 내용이

사진과 함께 요약되어있는카드를 본다.High High High High

2 보기 추천 콘텐츠 요약 카드내 북마크 카드를 오른-왼 스와이프하여추천

콘텐츠를 본다.High High Medium High

3 보기 북마크 풀텍스트요약카드를 탭하여 다른 브라우저 혹은 SNS앱으로

이동, 북마크 원본 페이지(풀텍스트)를 본다High High High High

4 큐레이션북마크 싱크

(SNS, 웹 계정연결)

SNS와 웹 브라우저 계정을 연동하여북마크 정보를B-slide로 가져온다. 반대로 새 북마크B-slide 폴더를 통해 크롬으로 연동한다.

High High Medium High

5 큐레이션 북마크 제시순서 설정 잠금화면에서 볼 북마크의순서 기준을 설정한다. High Medium High High

PRIORITIZATION�LIST

Requirement DescriptionUser

ImportanceBusiness

ImportanceTechnical Feasibility

ResourceFeasibility

6 큐레이션 콘텐츠 추천 설정키워드, 트래픽에 기반하여

웹에서부터 비슷한 콘텐츠를 색인하여 추천한다.High High Medium Medium

7 기타 추천받은 콘텐츠 북마크하기잠금화면과 앱에서 자신의외부에서가져온

북마크와 추천받은 북마크를 재북마크 할 수 있다.High High High High

8 기타 북마크 공유하기잠금화면과 앱에서 공유버튼을통해

카카오톡, SMS, 메일의 방법을 선택하고,URL 을 공유가능.

High Medium High HIgh

9 기타 북마크 리스트 싱크한 북마크의 총 목록을 본다. Medium Medium High High

10 기타 북마크 사용정보 (Report)유저의 특정 기간동안의

북마크 사용정보를 볼 수 있다.Medium Low High High

11 기타 그 외 북마크 설정앱의 설정에서 잠금화면 기능을켜고 끈다.잠금화면과 앱 설정에서 보기 싫은 북마크를

추가한다.Low Low High High

TECHNOLOGY

키워드 기반추천

사용자가 추가한 북마크 페이지에서 주요 키워드를 추출해내고, 해당

키워드와 연관성이 높은 페이지를 추천하는 방식이다. 키워드를

추출하는 알고리즘은 대표적으로 TF-IDF가 있는데, 해당

페이지에서는 자주 등장하는 단어이지만 다른 페이지에서는 자주

등장하지 않는 단어들을 추출한다. 그런 단어들일 수록 페이지의

키워드일 확률이 높으므로, 문서 추천에 효과적으로 활용할 수 있다.

트래픽 기반추천

사용자가 추가한 북마크 페이지로 유입되는 트래픽을 분석하여,

유사한 유입 트래픽 양상을 보이는 페이지를 추천하는 방식이다.예를

들어 특정 검색어로 유입되는 트래픽이 많다면 해당 단어를 검색하여

정확도가 높은 페이지를 추천하고, 특정 사이트에서의 링크를 통한

유입이 많다면 그 사이트에서 링크한 다른 페이지를 추천하는 등의

방법이 있을 수 있다.

b-slide final

Design