위클리과제 | 클래스101 | PMB12기

 

과제를 서술하기 전, 파일을 첨부하겠다. IA의 경우 너무 커서 캡처로 담기지 않았다. 백로그, 화면 디자인 및 스토리 보드 모두 캡처로 보는 것보다는 파일로 확인하는 것이 더 잘 보일 것이라 생각이 된다. 

 

백로그 및 스토리보드.pptx

3.22MB

 

클래스101 IA AS-IS.pdf

2.07MB

클래스101 IA TO-BE.pdf

2.43MB

 

 

 

*클래스101에서 이미 사용하고 있는 기능의 경우 서술하지 않았습니다*

*디자인을 할 때 1920 x 1080 사이즈로 작성을 하여 사진이 매우 큽니다!*

 

백로그 작성

 

백로그는 1) 처음 회원가입을 한 경우 / 수강한 수업이 없을 경우 2) 기존에 회원가입을 한 경우 / 수강하고 있는 수업이 있는 경우 3) 공통으로 나누어 작성을 해보았다. 

 

IA 정보구조도 AS-IS 

 

 

IA 정보 구조도는 일부분만 캡처를 했다. 클래스101이 굉장히 방대했기 때문에 내 예상과 달리 더욱 IA 너무 커져 캡처가 불가능했다. 1 DEPTH는 오렌지 컬러로 시작하여 갈수록 연해지는 컬러를 선정했다. DEPTH는 3까지 분석을 하였다.

 

 

IA 정보구조도 TO-BE

 

 

IA의 많은 부분 중 내가 추가한 부분만 캡처를 했다. 먼저 헤더에 댓글 알림을 넣었다. 그 다음으로는 OO님을 위한 추천 클래스, OO님 OO을 학습하셨군요, OO대 인기 클래스 모음을 넣었다. 즉 메인 페이지 상단 부분에 개인에게 맞춰진 콘텐츠 추천 박스를 삽입을 하였다. 또 각각의 페이지 안에는 필터, 공유하기, 추천 클래스를 넣어 뒤로 가기 버튼의 필요 없이 계속 개인에게 맞춰진 콘텐츠가 보이는 화면을 설계하고자 했다. 

 

 

화면 디자인

홈페이지 헤더 부분에 댓글을 추가한 것을 확인할 수 있다. 

 

댓글 페이지는 위와 같이 디자인을 해보았다. 

이미 수강하고 있는 수업이 있거나 설문조사를 끝낸 경우에는 위와 같은 화면이 보인다 .

- OO님을 위한 추천 클래스

- OO님 OO를 학습하셨군요

- OO대 인기 클래스 모음 -> OO대 = 유저 연령

으로 페이지가 구성이 된다. 

 

수강 이력이 없거나 설문조사를 하지 않았을 경우에는 위와 같은 화면이 보인다.

OO님을 위한 추천 클래스 대신에 설문조사 요청 배너를 삽입을 하였고, 그 아래로는 OO대 인기 클래스 모음으로 구성이 되었다. 

추가한 페이지의 모습은 위와 같다. 먼저 필터를 플로팅 메뉴로 적용을 하여 계속해서 유저의 스크롤을 따라다니게 디자인을 생각해보았다. 

 

각 콘텐츠 페이지 하단에는 개인화 추천이 계속해서 이어지게끔 디자인을 했다.

 

수업 페이지 안에 댓글을 좌측으로 위치하게 하여 영상과 댓글을 동시에 이용할 수 있도록 디자인을 해보았다. 

 

 

스토리보드

헤더 부분의 댓글 아이콘과 그 아이콘의 기능에 대해서 설명하였다. 

 

댓글 페이지이며 그 페이지 안의 기능들을 설명하였다. 

 

메인 페이지이며 1) 수강이력이 있는 경우와 2) 수강이력이 없고 설문조사를 하지 않은 경우에 보이는 화면을 다루어보았다.

 

추천 클래스 페이지 내부이며 필터를 삽입 후 기능에 관한 설명을 하였다. 

 

페이지 하단에 추천 콘텐츠 박스를 넣는 것에 대해 설명해보았다. 

 

댓글 기능이며 관련하여 추가적으로 넣은 댓글 기능을 작성하였다.