UnivCam — 케이스 스터디 & 디자인 프로세스

핵심 컨셉

저희 팀(개발자들과 디자이너인 저)은 2017년 6월에 이 프로젝트를 시작했습니다. 목표는 분명했습니다. 대학생이 수업에서 찍은 사진을 깔끔하고 직관적으로 정리할 수 있는 앱을 만드는 것. 많은 학생이 강의를 기록하거나 복습하려고 휴대폰으로 사진을 찍습니다.

Google Forms 리서치

아이데이션

기존 갤러리 앱의 문제는 단순합니다. 앨범 기능은 있지만 "공부"가 1순위 목적이 아니라는 점입니다. 사용자가 학습 사진에만 집중할 수 있도록, 일상 사진이나 밈 이미지와 분리하고 싶었습니다. UnivCam이 그 둘을 나누고 정리합니다.

사용자가 겪는 문제

1. 강의 중 슬라이드가 빠르게 지나가서 필기나 캡처가 어렵다.
2. 강의에서 찍은 사진은 일상 사진과 섞이기 쉽고, 썸네일이 작아 더 그렇다.
3. 섞여버린 사진을 다시 정리하는 일이 번거롭다.

일반적인 대학생의 갤러리 — 강의 사진과 일상 사진을 구분하기 어렵습니다.

디자인 과제

명확한 차별점이 없다면 UnivCam은 또 하나의 갤러리 앱일 뿐, 기본 갤러리에서 굳이 옮겨갈 이유가 없습니다.

해결 방법

1. 홈 화면에 위젯을 두어 UnivCam 카메라에 빠르게 접근하게 한다. UnivCam으로 찍은 사진은 디바이스 갤러리가 아니라 UnivCam 앨범에 자동 저장된다.
2. 앨범과 사진 정리에 최적화된 사용자 경험을 만든다.
3. 색상을 절제하고 장식을 최소화해 강의 사진이 돋보이게 한다.
4. 이렇게 해서 사용자가 강의 사진을 디바이스 갤러리가 아닌 UnivCam에 저장하도록 유도한다.

시작

타깃은 분명했습니다. 학습 사진을 깔끔하게 정리하고 싶은 대학생. 온라인 리서치와 강의에서 사진을 자주 찍는 친구들의 이야기를 토대로 잠재 사용자 페르소나를 만들었습니다.

Job Stories

UnivCam을 강의 콘텐츠를 더 잘 캡처하는 도구로 정의하기 위해 Job Story를 작성했습니다.

1. 강의실에서, 강의 내용을 사진으로 남기고 싶다. 그래야 나중에 어디서든 휴대폰으로 복습할 수 있다.
2. 교수의 슬라이드가 빠르게 지나갈 때, 카메라로 캡처하고 싶다. 그래야 나중에 다시 볼 수 있다.
3. 강의에서 사진을 찍을 때, 원하는 방식으로 분류하고 싶다. 그래야 스크린샷이나 일상 사진에 방해받지 않고 학습할 수 있다.

유저 플로우

작업 전에 유저 플로우를 그려, 계획을 점검하고 와이어프레임 기반을 단단히 다졌습니다. 가장 중요한 기능은 디바이스 갤러리와 UnivCam 이미지를 분리해 사용자가 학습 사진에만 집중할 수 있게 하는 것이었습니다. 정리·분류는 기본이고, 빠른 촬영과 UnivCam 앨범 직접 저장으로 앱 간 사진 이동의 불편함을 없앴습니다.

Lo-fi 스케치

Lo-fi 그래픽 와이어프레임에 들어가기 전에 종이에 거친 와이어프레임을 그렸습니다. UI 트렌드 중 하나인 Complexion Reduction — 볼드 타이포그래피, 절제된 색, 충분한 여백 — 을 따랐습니다. 장식을 줄이면 사용자가 UnivCam의 핵심 콘텐츠인 사진과 앨범에 집중할 수 있기 때문입니다.

와이어프레임

스케치를 토대로 빠르게 Lo-fi 와이어프레임을 만들었습니다. 이 단계의 목표는 사용자 테스트라 디테일은 최소화했습니다. **MarvelApp**으로 클릭 가능한 프로토타입을 공유하고, Google Forms로 피드백을 모았습니다.

페인 포인트

수집한 피드백을 토대로 여러 화면을 다시 그렸습니다. 핵심 페인 포인트와 해결 방식은 다음과 같습니다. (이미지를 클릭하면 확대됩니다.)

페인 포인트 1: "앨범 선택" 화면의 라벨이 모호해 어떤 앨범을 골라야 할지 헷갈려 했습니다.

페인 포인트 2: 사용자가 폴더 추가 방법을 몰랐습니다. 첫 사용자는 "앨범 추가" 버튼을 찾는 데 보통 10초 이상 걸렸습니다.

페인 포인트 3: "즐겨찾는 앨범" 화면에서 즐겨찾기 버튼을 누르면 앨범이 앱에서 사라지는 것처럼 보였습니다. 같은 화면의 "앨범 추가" 버튼도 모호했고요 — 즐겨찾는 앨범을 만드는 건지, 메인 화면의 새 앨범을 만드는 건지 알기 어려웠습니다.

검증

개선안을 같은 사용자들과 다시 테스트했습니다. 아래 표가 그 결과로, 사용자가 미션을 어려움 없이 끝내면 성공으로 표시했습니다.

디자인 공유와 To-do

Trello로 개발자들과 디자인 작업과 디테일을 공유했습니다. 화면 디자인이 끝날 때마다 보드에 올리고 개발자에게 필요한 정보를 함께 전달했습니다. 보드는 두 개로 나눴습니다 — 디자인 스펙 보드와 To-do 보드. 개발자는 진행 상태에 따라 To-do 카드를 옮겼습니다.

Hi-fi 프로토타입

스케치와 와이어프레임을 토대로 Adobe Photoshop으로 Hi-fi 프로토타입을 만들었습니다. Zeplin을 UnivCam 슬랙 채널과 연동해 협업했고, 진행 상황은 Trello와 슬랙으로 추적했습니다. (이미지를 클릭하면 확대됩니다.)

프로토타입 사용자 테스트

페인 포인트 4: 프로토타입으로 추가 테스트를 진행했는데, 가장 큰 이슈는 앨범 상세 화면의 탭 바였습니다. 사용자는 새로 찍은 사진이 어떤 앨범에 저장될지 알 수 없었습니다. 이 화면의 탭 바를 빼고, 상단 내비게이션에 카메라 버튼을 넣었습니다.

클릭 가능한 목업 — Adobe XD

Hi-fi 프로토타입을 토대로 Adobe XD에서 클릭 가능한 목업을 만들어 다음 라운드 테스트와 개발자 핸드오프에 활용했습니다. XD는 화면 간 흐름을 파란 선으로 시각화해줘서 좋아하는 도구입니다. 다음 단계에서는 MarvelApp으로 더 디테일한 목업을 만들었습니다.

완성된 UI 디자인

UnivCam의 자세한 디자인은 Behance에서 볼 수 있습니다.

프로토타입 사용해보기

MarvelApp 클릭 프로토타입

UnivCam

여름방학 동안 학교 앱 동아리 개발자들과 함께 디자인했습니다. 많은 학생들에게 도움이 되기를 바랍니다.

iOS 소스 (GitHub) Android 소스 (GitHub)

Muzli 블로그 피처드: 2018년 영감을 줄 인터레스팅 UX 케이스 스터디 TOP 10