5 day 2024.02.03.

14. 서비스 기획서 작성하기

9. UIUX 예시

 

1. UX/UI 7가지 가이드의 문항을 평가하여 정량적으로 측정 → 각 7가지 항목을 점수화 & 차트화

출처: zero-base Corp.

: 서비스의 목적'을 명확하게 파악하고, (30초 이내) 빠른 시간 내, 목적을 달성 할 수 있도록 인터페이스 구축

- 잘한 부분/취약한 부분의 인사이트를 분석하여, 취약한 부분을 개선해야함

예) 서비스 리뉴얼, 모바일 중심 체계화(사용자 인터페이스 체계화)

 

2. Beusable의 사이트의 고객 경험을 분석

- 사이트 분석 및 A/B테스트

출처: zero-base Corp.

- 사용자의 서비스를 기획할 때, 사용자의 행동에 맞는 서비스 기획

출처: zero-base Corp.

출처: zero-base Corp.

출처: zero-base Corp.

 

3. 프로모션 없이, UX만으로 '신규가입 유저'를 235% 늘리는 방법

 

(출처) https://bit.ly/44jcsQt

1) 초기 접근 단계 - 오일나우 App

   - 로그인 없이 사용 가능하도록 설정

   - 사용자의 접속 시간을 짧게 유지하며 검색 기능 유도

   - 장기적인 관점에서 이탈율 증가를 확인

 

2) 유저 유지 단계 - 로그인 후 기능 확대 및 개선

   1. 최초 앱 실행 시 사용자에게 기름값에 대한 질문 던지기

   2. 회원가입의 이점을 구체적으로 제시하기 (예: 기름값을 절약할 수 있는 23가지 방법)

   3. 사용자의 선택을 간소화하기 (예: 간편 회원가입을 카카오톡, Apple/Google 두 가지 방법으로만 제공)

 

 

11. 서비스 분석

 

- 사용자 분석, 전자정부 UX/UI분석을 이해 바탕으로, 서비스 분석진행

- UX/UI 분석은 어떤 UX와 UI에 대한 항목들을 정의 & 항목에 맞춰서 분석

- 서비스 분석은 실제 사용자 측면에서 이 서비스를 이용하는데, 어떠한 브랜드에 대한 컨셉 인지, 콘텐츠 고민

 

1. 서비스 분석방법 1

 

1) 사용자 측면

- 제공되는 콘텐츠가 사용자의 주요 관심사인가?

- 사용자들에게 필요한 요소 및 요구되는 사항은 적절히 배치되어 있는가?

- 사용자에게 제공되는 콘텐츠는 유용한 것인가?

Ex) '제로베이스' 교육을 결제한 사람들을 분석하고, 이에 상응하기 위한 컬리큘럼&수업 제공

 

2) 서비스 측면

- 콘텐츠의 우선순위를 나눌 수 있는가?

Ex) 메인컨텐츠/서브컨텐츠를 구분하여 제공

- 무엇이 중요한 콘텐츠이며, 빠진 콘텐츠는 없는가?

- 서비스의 동선이 존재하며, 목적지까지는 쉽게 갈 수 있는가?

- 집중해서 제공해야 하는 서비스에 시간적인 변화를 제공하는가?

 

2. 서비스 분석방법 2

 

1) 브랜딩(Branding)

- 폭 넓은 인지도를 가지고 신뢰성을 전달하고 있는가?

- 기업의 경영철학, 목표를 바르게 전달하고 있는가?

- 기업의 아이덴티티를 사용자에게 가치 있고, 신뢰할 수 있도록 구성하였는가?

- CI(기업 로고), BI(브랜드 로고), Naming(상호 및 상표 네이밍)으로 기업 이미지를 통합하고 있는가?

 

2) 콘텐츠(Contents): 서비스에 대한 콘텐츠 구성

- 서비스하고자 하는 콘텐츠 및 소식이 자세하며, 전반적인 설명과 깊이 있게 구성되어 있는가?

- 사용자에게 필요한 콘텐츠를 구성하고 있는가?

Ex) 채용공고 관련 사이트에 들어가서, 채용공고 기간/파트 등 확인이 가능해야함

 

3) 정보 구조(IA, Information Architecture)

- 콘텐츠의 계층구조와 분류가 논리적이며 체계적으로 구성되어 있는가?

Ex) 각 컨텐츠와끼리 연관성이 있는지?

 

4) 인터페이스(Interface): 요소가 어디에 있는지? 사용자의 움직이 어떻게 이루어져야 하는지?

- 네이게이션의 구조가 사용성에 무리가 없는가?

- 검색 창, 콘텐츠 바로보기 등 정보를 손쉽게 탐색하고 접근할 수 있는가?

- 현재 위치를 표시해 주어, 깊이가 깊어져도 쉽게 원하는 정보로 이동할 수 있는가?

 

5) 디자인(Design)

- 컬러가 브랜드 이미지와 맞도록 구성되어 있는가?

Ex)(디자이너가 아니고, 디자인이 주관적이지만) 브랜드 방향성에 맞게, 메인/서브 컬러/전체 룩앤필이 통일성이 있는지?

- 메인컬러와 서브컬러가 조화로운가?

- 전체적인 Look & Feel의 통일성이 존재하는가?

 

3. 예시. 서비스 분석 결과

출처: zero-base Corp.

- AS-IS: 각 항목에 대한 정량적으로 점수를 채점하고 도식화

- TO-BE: 현재 서비스의 UX/UI 척도를 평가하여 개선 방향 도출

 

4. 예시. 인사이트 도출하기

출처: zero-base Corp.

1) 분석 단계

   - 서비스 분석을 통한 사용자 인사이트 도출 (장단점 파악)

   - 인사이트를 통한 개선점 도출

   - 자사 분석 및 타사 분석 (상위 10위 기업 포함)을 통한 트렌드 파악 및 각 기업의 아이덴티티 인지

 

2) 목표 설정 단계

   - Target: 사용자의 기술 환경에 맞는 서비스 기획 (2030대는 모바일 중심)

   - 지속적인 콘텐츠 관리 (미들 스탠다드)

   - 그룹사 홈페이지를 통한 브랜드 이미지 구축

   - 브랜딩 강화 (기업의 목표에 맞게, 타겟 & 방향성 구축)

 

3) 콘텐츠 구성 단계

   - Contents: 타겟과 사용자 목적에 맞는 콘텐츠 구성

 

4) 사용성 분석 단계

   - Usability: 서비스 분석을 통한 방향성 정의

 

 

14. 트랜드 분석

 

- 사용자 분석, 전자정부 UX/UI분석, 서비스 분석

- 새 우리가 시장에서 어느 위치에서 달리고 있는지? 어디를 향해 달려가는지? 파악 필요

- 기획자는 서비스 리딩하는 사람

- 트랜드를 통해, 제한적인 인터페이스 구축

 

1. UX/UI 트랜드 분석

1) 사용자의 배경을 구성하는 요소 분석 방법

- 새로운 기술, 변화를 감지

Ex) 트랜드를 파악하고, 서비스 방향성에 맞게 개발 구현 의뢰 → 회원가입 인터페이스는 요즘 간편 로그인으로 2개정도만 추구 (병렬식으로 선택안이 많다고 좋은 것은 아님)

- 국내/외 사이트 리뷰

Ex) 랭킹, 어워드 사이트

- 국내/외 에이전시 리뷰

- 기능별/서비스별 사이트 구분

- 랭킹 순위 제공 서비스 사이트

- 고객층 데이터 분석 리포트

Ex) 최근 서비스 & 트랜드 근황 파악

 

2. 예시 (UX/UI 트랜드: 진행중인 서비스와 관련된 트렌드를 파악하여 설계의 방향으로 활용)

1) 트렌드 검색 및 분석 단계

   - "OOOO년 UX/UI 트렌드"를 검색하여 최신 트렌드 파악

 

2) 인사이트 도출 단계

   - 대담한 표현, 커스텀 콘텐츠, 마이크로인터렉션, 새로운 형태의 스마트폰, 모바일 하단 영역 확장, 내비게이션의 새로운 시대

           Ex) 미니멀리즘 / 단순한 UX(시간절약) / 디포커싱과 화려한 색감&톤다운된 파스텔톤(서비스마다 상이) / 음성 사용자 인터페이스 발전 / 모바일 친화적 / 온 보딩(서비스의 핵심을 전달하는 기능으로, 아이콘이 아닌 '간결한 텍스트&임팩트있는 일러스트'로 고객 호기심 자극) /  타이핑그래핑 / 3D 디자인 (자동자 서비스의 경우, 상품이미지 구체화) / 동영상 인터랙션

 

3) 트렌드 적용 단계

   - 제공/운영/설계하는 서비스에 적합한 트렌드를 선택하여 적용

 

4. 사용자의 행동 배경과 패턴을 조사하는 분석 방법 (디자인 트랜드 분석)

- 사용자의 변화를 읽는 미시적 분석

- 경쟁업체 디자인 중심 분석

- 트렌드 반영한 국내외 디자인 사이트

- 국내/외 디자인 트렌드 분석 리포트

 

5. 예시 (디자인 트랜드: 서비스의 전략 도출 및 키워드를 뽑아낼 때 사용할 수 있는 데이터로 활용)

1) 트렌드 검색 및 분석 단계

   - "OOOO년 디자인 트렌드"를 검색하여 최신 트렌드 파악

   - 연말/연초에 출간되는 디자인 트렌드 리포트 활용

 

2) 인사이트 도출 단계

   - 다크모드, 3D그래픽, 모바일 고려한 최소한의 디자인(미니멀리즘), AI 음성 상호 작용, 공백 프레임, 타이포그래피

Ex) 비밀번호 없는 로그인 / 에어 제스쳐 / 전체화면 페이지 / 마이크로 인터랙션(사용자의 성향 분석 가능한 '좋아요/싫어요') / 굵은 글꼴 / 접이식 디스플레이 / 레이어와 플로팅 요소(웹사이트를 약간 3D로 구성) / 편안한 색상 / parallax 애니메이션(멀리있는 것을 slow, 가까이에 있는 것 speed하게 적용해서 입체감&실체감 부각) / 뉴모피즘(Neumorphism) 두가지 트렌드가 하나로 합쳐지는 것(디보싱 x 엠보싱)으로 퀄리티가 좋아야

 

3) 트렌드 적용 단계

   - 제공/운영/설계하는 서비스에 적합한 트렌드를 선택하여 적용