'글로벌 인터랙션' 프로젝트 진행을 위한 디자인 시스템 및 그리드 시스템 설계, 2차 사용성 테스트를 위한 스크립트 작성 및 프로토 타입 연결
00. 기말까지의 계획 작성
13주차에 들어 기말까지의 완결을 위해 다시 한 번 계획을 넘버링하여 작성했다. 이번주는 이 중에서 5번까지 시행했고, 이후 6번부터 다시 시작하여 최종 기말 발표를 준비할 예정이다.
01. 사용성 테스트 스크립트 기능 정리
우선 사용성 테스트에 사용할 스크립트가 정리되어야 이후 작업할 페이지를 특정할 수 있기 때문에, 가장 먼저 2차 사용성 테스트 스크립트를 다시 정리하였다. 추가하고 수정된 Task들을 단계에 추가하여 1차보다 더 다양한 기능을 탐색해볼 수 있도록 했다. 우측 버튼을 통해 2차 사용성 테스트 스크립트를 확인해볼 수 있다.
02. 전체 화면 그리드 시스템 확정
이후 기존의 화면을 수정하기 위해 전체 화면에 공통되게 적용될 그리드를 설정했다. 4단, 마진 16pt, 가터 16pt의 세로단을 사용했으며, 가로는 아이폰 기본 그리드 가이드를 참고하여 설정했다. 아래 사진은 기존에 존재했던 디자인 페이지에 그리드를 적용시켜 수정한 1차 수정본이다.
03. 기타 디자인 시스템 확립
이후 그리드 외에도 통일시키고 취합해야할 디자인 시스템이 잔존해있었기 때문에, 해당 항목을 모두 정리한 뒤 그에 해당하는 수정과 기준 설정을 거쳤다. 아래 스크린샷들이 각 항목마다의 통일 기준을 지정한 것이다.
04. 그리드, 디자인 시스템에 따른 전체화면 수정
위에서 정한 디자인 시스템에 따른 체크 사항을 목록으로 정리해 그리드만 맞추었던 화면들의 세부적인 내용을 다시 체크 후 수정하였다. 아래 스크린샷들이 통합 수정을 거친 각 화면들이다.
05. 최종 수정 화면으로 프로토타입 연결
그렇게 최종적으로 완성된 화면으로 사용성 테스트를 하기 위해 프로토타입으로 연결하는 과정을 거쳤다. 설정상 동일 시간대에 일어나는 태스크를 1개의 플로우로 묶어 총 4개의 플로우가 제작되었다. 아래는 그중 일부이다.
06. 아이콘 아이데이션
마지막으로 기존에 존재하는 '버디' 캐릭터 이미지가 타겟 연령층에 맞지 않는다는 피드백을 반영해 전반적인 로고로 사용할 아이콘을 새로 아이데이션 하는 과정을 거쳤다. 결론적으로는 캐릭터의 느낌을 가져가기보단 B, 결합, 겹침, 교집합 등의 키워드가 연상되는 플랙서블한 아이콘 시안을 가지고 여러가지의 디벨롭을 거쳤다.
