모바일 앱 UI 디자인 프로세스

목차

1. 미션
2. 앱 컨셉
3. 유저 페르소나
4. 와이어 프레임
5. 시각 언어
6. 무드 보드
7. 스타일 타일
8. UI & 프로토타입
9. 스타일 가이드
10. 반영
11. 참고 문헌

1.미션

모바일 앱 UI 라이브러리를 제작하면서,  비주얼 디자인 스킬을 향상 시키고 그 과정을 배울 좋을 기회를 얻었다. 비주얼 스타일 혹은 테마로 알려져 있기도 한 UI 라이브러리는 유저에게 좋은 경험을 주기 위해, 특정 앱 혹은 웹사이트에 적용된 커스터마이징 그래픽 인터페이스 요소 패키지이다.

다음은 필자의 디자인 프로세스이다.:

앱 컨셉 -> 유저 페르소나 -> 와이어 프레임 -> 시각 언어 -> 무드보드 -> 스타일 타일 -> 프로토타입 -> 스타일 가이드

기억해야 할 것은 이 프로젝트는 UX 디자인을 포함하지 않은 UI/비주얼 디자인(예를 들면 유저 리서치, 경쟁사 리서치, 유저 여정 지도, 정보 설계 등등)에 초점을 맞췄다는 점이다.

2.앱 컨셉

문제 정의

내 앱의 문제점은 강의와 워크샵을 찾기 어려운 데에서 출발했다. 나 같이 새로운 것을 배우기를 원하는 사람들에게, 본인에게 적절한 강의를 찾는 일은 꽤나 고역이었다.

가치 제안

일반적으로, 가치 제안은 서술의 형태를 띠며 주로 제일 먼저 말하는 문장이 된다. 그것의 제 1 목적은 당신의 제안에서 고객이 얻을 수 있는 기대 효과에 대해 이야기하는 것이다.

비슷한 사례로는 엘리베이터 피치가 있다. 당신이 앱 컨셉을 기억하기 쉽게 만들고 싶을 때, 너무나도 흥미로워서 눈을 뗄 수 없고, 반복적인 문구를 사용해야 한다. 나는 Jamie Levy의 책 <UX Strategy> 의 가치 제안 양식을 따랐다. 

BetterMe는 토론토에 있는 사람들이 간편하게 강의와 워크샵을 찾도록 도와주는 강의 리스트 업 어플리케이션이다.

4.와이어 프레임

유저의 목적과 행동을 이해한 후에, 공수를 덜 들인 와이어프레임을 만들기 위해 하단의 앱의 주요 특성(key feature) 리스트를 작성했다.

1.강의 리스트(인기순, 거리순, 개설순, 추천순 구분)
2.검색(카테고리, 유형, 가격 범위, 위치, 순위 등)
3.인스턴트 메시지(문의)
4.유저 프로필(게이미피케이션, 리스트를 학습하기 위해)

5.시각 언어

다른 형태들로 이루어진 문장들은 하나로 모여 같은 메시지를 전달할 수 있는 언어로 가공되어야 한다. 시각 언어는 다른 언어와 똑같다. 시각 언어의 문장은 컬러, 여백, 형태 및 이동으로 묶일 수 있다.

나는 니즈를 파악하기 위해 몇몇 유저를 인터뷰하고 좀 더 정확하게 시각 언어를 정의하기 위해 앱의 무드들을 서치했다.

인터뷰 질문:

1.이 앱을 왜 사용하겠습니까?
2.이러한 니즈가 충족되기 위해서는 어떤 무드가 필요하겠습니까?
3.이러한 무드를 어떻게 시각 언어로 구현하겠습니까?(컬러, 여백, 형태 및 이동)

6.무드 보드

디자이너로서, 우리는 과정의 속도를 올리고 최적화하는 데에 초점을 맞춘다. Atomic Design에서 얻은 아이디어는 UX 디자이너, UI 디자이너, 그리고 프론트 엔드 개발자가 수직적이 아닌 수평적으로 일하기에 좋은 개념이다.

클라이언트에게 초기에 프레젠테이션 할 때, 무언가를 어떤 방식으로 시각 디자인해야 할까?

디자인 프로세스에서, 무드보드는 시각 전달자 중 하나다. 우리가 페이지의 실제 레이아웃에서 벗어나 디지털 제품을 통해 우리가 얻는 느낌을 기술하는 이미지, 텍스트, 오브젝트로 구성된 콜라주이다.

나는 다른 유저 그룹을 타겟팅한 느낌을 프레젠테이션하기 위해  두 가지 구분되는 무드보드를 만들었다. 첫 번째 것은 학습과 연구에 어울리는 조용하고, 깨끗하며 미니멀한 느낌이다. 두 번째 것은 좀 더 역동적이다. 열정과 긍정적인 무드를 전달하는 생기 넘치고, 빠른 속도감의 느낌을 지녔다.

7.스타일 타일

스타일 타일은 클라이언트로 하여금 시각 언어를 이해할 수 있도록 돕는 컬러팔레트, 폰트, 버튼 스타일 같이 실제로 눈에 보이는 시각 디자인 요소들의 콜라주이다. 그것은 무드보드와 와이어프레임 사이의 갭을 이어준다. 이는 초기 단계에 디자인 피드백을 받는 데에 매우 유용하다.

스타일 타일은 사람들로 하여금 개별 요소가 한데 모이면 어떤 느낌인지 알 수 있게 해준다. 나는 15명의 친구들을 인터뷰하고 그들이 좋아하는 스타일을 고르게 했다. 그들 중 2/3이 첫 번째 스타일을 원했다.

“난 첫 번째가 좋아. 시각적으로 어필이 되고 앱을 더 둘러보는 데에 시간을 많이 쓰게 될 것 같아.”

“첫 번째는 미니멀리스틱하네. 난 이미지보다 아이콘이 더 좋아.”

“두 번째 스타일은 재미있긴 한데 강의 리스트 앱치곤 조금 과해보여.”

8.UI & 프로토타입

“그림이 단어 1,000개의 가치를 지닌다면, 프로토타입은 미팅 1,000개의 가치와 같다.” - IDEO

비주얼 스타일을 결정한 후에, 나는 중급 수준의 와이어프레임에 적용하고 몇몇 디자인을 반복해본다. 그러고 나서, InVision으로 고급 수준의 UI로 인터랙티브 프로토타입을 만들었다.

9.스타일 가이드

스타일 가이드는 커뮤니케이션을 개선하기 위해 설계되고 강제된 스타일 기준이다. 이는 디자인 기준을 통합시켜주고, 팀의 생산성에 지대한 영향을 끼친다.

10.반영

“스타일은 한때다. 좋은 디자인은 언어이지, 스타일이 아니다.” - Massimo Vignelli

이 프로젝트는 REDacademy의 UI 디자인 파운데이션 파트 타임 프로그램으로 진행된 것이다. 나는 2주간 BetterMe앱을 만들기 위해 컨셉부터 눈에 보이는 프로토타입까지 다양한 UI 디자인 방법을 탐구하고 연구했다.

11.참고 문헌

스타일 타일
스타일 타일로 시각 디자인 피드백 더 잘 받는 방법
디자인 스타일 가이드 만들기의 모든 것