[UI 디자인 프로세스] 2-01. 업무 프로세스

ㅣ플러스 엑스 UI 강의 후기 02ㅣ

---

Plus X 에이전시 대표 프로젝트 소개

요약: 우리 이런 프로젝트 했어. ~ 프로젝트에서는 이런 인사이트가 있었고 이런부분이 아쉽 or 좋았어. 

 

플러스 엑스가 진행한 프로젝트 과정을 보면서 작업 과정을 유추 해 볼 수 있었다. 

1. 해결 해야 할 미션 정립
2. 목표 정의 
3. 디자인 원칙 정립 (키워드-문장형)
4. 앞선 원칙을 효과적으로 표현 할 수 있는 디자인 방향성 설정 (컨셉, 워딩, 이미지 방향, 컬러, 느낌, 인터렉션....)

 

위 4가지 진행상황의 예시.

[ L포인트 프로젝트 구축] 
1. 미션 : 고객에게 잔존해 있던 롯데멤버십의 이미지를 개선 엘포인트만의 브랜드 메시지를 전달
2. 목표 정의:  Good Impression
엘포인트가 고객에게 좋은 인상으로 남을 수 있게 합니다. 
3. 디자인 원칙:   
(1) Familiarity 
고객의 이력을 기반으로 한 상황에 맞는 메시지로 고객을 친근하게 챙겨줍니다. 
(2) Fun
미션을 달성할 때마자 포인트가 올라가는 마이크로 인터렉션으로 재미를 느낍니다.
4. 디자인 컨셉.. 

뉴스 펌

 

 프로젝트를 진행할때 브랜드 가치를 찾고 이 인사이트가 연결되어 디자인으로 표현 되도록 설계한다.   
 프로젝트의 각 상황에 맞게 (제품특성,경영 상황 등)을 고려 하여 최적화된 방법을 모색해서 디자인 한다.

 

또다른 예)

  

[이마트 장보기 앱]
- 장보기 메모 서비스 기능 (장보기 전에 필요한 물품을 메모 해 놓을 수 있다.)
- 서비스만의 킬러피터가 될 만한 포인트를 중점적으로 표현 함 


[AVON_아모레퍼시픽]  비즈니스 컨셉을 만드는 과업 
- 미국 방문판매 화장품 브랜드 인수  
- 상황: 미국에는 인터넷이 활성화 되지 않아 방문판매가 많음. -> 이 점을 알고 아모레가 인수
- 목표: 종이 카칼로그를 DT로 바꾸는 것을 목표로 함. 
- 해결 과정: 경쟁사, 고객, 내 외부 관계자를 인터뷰 -> 니즈 발굴
- 해결 방법: 매달 발행되는 종이 카탈로그를 앱으로 만듬
- 증명: A-카탈로그형 ,B- 앱 인터페이스 형 -> 내외부 반응으로 A형으로 결정

 

 

 플러스엑스에서는 파트너 사를 선정할 때 두가지를 고려한다고 한다. 

1. 해보지 않았던 영역에 대한 도전인가? 
2. 새로운 시도가 가능한 여건인가?

또한 에이전시와 의뢰자의 갑을 관게가 아닌  크리에이티브 파트너로 생각하고 일 한다. 

---

 

02_01. UI 업무 프로세스

요약: 우리는 5 단계로 일 해. 

 

 

1. step 스터디&리서치
고객사 브랜드 디자인 분석. 유사 서비스 디자인 리서치 임직원 인터뷰

1-1 고객사의 브랜드 디자인을 분석하고 브랜드 에센스를 찾는다. 
1-2 고객사와 유사한 서비스 리서치, 경쟁사 디자인 리서치.새로운 시장, 트렌드를 이해하고 고객사 제품의 비즈니스에 맞게 제안한다.
1-3. 임직원 인터뷰: 내부 관계자들의 각 위치에 따른 니즈 파악 프로젝트 방향성을 알아봄. 


2. Step 디자인 컨셉, 제안
2-1 디자인 컨셉 도출: 디자인 키워드 및 키워드 도출
2-2 디자인 원칙 정의: 컬러, 폰트, 이미지등 
2-3 주요 페이지 디자인 :시안 디자인제작 ( 홈, 서브, 상세페이지 위주로)
2-4 컨셉 프로토타입 제작: 프로토 타입 툴. 에펙, 피그마, HTML5 등 도구 사용
2-5 디자인 전략 방향성 제안: 디자인 문서 작업 
전체적인 전략 방향성에 맞춰 디자인 제안 문서를 만듬. 디자인 시안을 효과적으로 보여주고 파트너사 설득하기 위함. 


3. Step 공통 디자인 가이드 제작
디자인 규칙을 만듬 (디자이너, 기획자, 개발자 협업)

 

3-1. 서체 스타일 정의  (폰트, 사이즈, 자간, 행간) 
3-2. 비주얼 스타일 정의  (이미지)
3-3. 아이콘 스타일 정의 :디자인 전반에 대한 요소 정의
3-4. 그리드 시스템 정의 : 일관성있는 화면 구축을 위해 
3-5. UI 컴포넌트 스타일 정의 : 버튼, 인풋, 공통적 사용 되는 디자인 요소 시스템 만듬 
3-6. 공통 인터랙션가이드 정의 : 인터렉션, 화면 전환 등 트렌지션을 작업하여 공통 인터렉션 가이드를 만듬

4Step. 프로덕트 디자인 
4-1. 전체 페이지 디자인
4-2. 마이크로 인터랙션 디자인 : 이미지 에셋, 디테일한 UI 요소 작성
4-3. UI 가이드 제작 : 앞선 작업이 수행되면 만든 요소들을 활용하여 가이드를 제작한다, 
4-4. 개발 커뮤니테이션 : 개발자와 소통. 
4-5. 이슈 팔로업

5Step. 프로덕트 디자인 가이드
지속가능한 비즈니스가 되도록 운영에 필요한 콘텐츠 가이드를 제작하여 배포  

 

5-1. 그래픽 스타일 가이드 제작
5-2. 아이콘 스타일 가이드 제작
5-3. Contents Maintenance 가이드 제작
5-4. UI 시스템 가이드 제작
5-5. 모션 가이드 제작
5-6. 최종 산출물 패킹


UXUI 프로세스 UI 디자이너와 UX 디자이너가 프로젝트를 동시에 진행하면서 각 영역의 전문성이 필요한 부분에 더 집중해서 하나의 프로덕트를 완성!

크게 디자인 제안/  확정된 디자인 구축으로 나누어 진행된다.  * 상황에 따라 달라질 수 있음. 

.

 

---

[🌰인사이트]

● 브랜드 가치를 찾고 비즈니스 전략을 염두하여 새로운 브랜드 방향성을 제안 한다.
- 브랜드 가치를 찾을 때 데스크 리서치 방법은 물론 내, 외부 관계자들의 인터뷰를 통한 인사이트, 회사의 사정을 고려하여 가장 효과적인 방법을 찾는다. 

●파트너사를 선정하는 기준
- 자사 (플엑)가 발전 할 수 있는 방향이 되도록 새로운 관점을 찾을 수 있는 프로젝트를 선호한다.
  재밌겠다. 
- 의뢰자와는 크리에이티브 파트너로 더 나은 방향성을 찾기 위한 활동들에 몰입한다. 
  아주 재밌겠다.  

---

[🌞 목표]

▶   UI 프로세서를 실무에 활용 하자. 큰 프로세스 가이드를 잡고 개발자와 디자이너에게 일정을 공유 하여 차근차근 체계적으로 촘촘하게 기획을 하자.

이유: 구성원 모두가 납득 되는 일을 하고 있음을 인지하기, 이해도 높이기,  협업 시너지 내기, 프로젝트의 과정을인지하여 과업을 효율적으로 수행하기 

---