본문 바로가기

FrontEnd/UI UX

[UI/UX] 기본 프로세스는?

728x90
반응형
NO STEP 1 STEP 2 STEP 3 STEP 4
1 목표수립 키파인딩
&
인사이트
무드보드 IA설계
2 관련 UX분석 와이어프레임 설계
3 이슈제기 런처아이콘
&
런치스크린
4 리서치 프로토타이핑

 

1. STEP 1 : 발견단계

 

◎ 목표수립 : 현재 당면한 문제, 서비스 구조적 취약점 검토, 비즈니스인 해결책 가설 수립

 

예시)
배경) 골프레저 대중화 및 많은 경쟁사 등장 젊은층도 골프레저에 관심을 갖기 시작
문제) 일부 연령층 사용, 이용 고객 수 낮음
구조적취약점) 홈페이지가 단순화되어 있고 정보가 부족함
목표:해결책 가설수립)
다양한 연령대가 선호할 수 있도록 홈페이지 디자인을 개선하고, 고객이 필요로하는 컨텐츠를 보강하면 많은 고객층을 확보할 수있을 것입니다.

 

◎ 관련 UX 분석

 

1. 시각디자인 : 다양한 연령츠이 선호할 수 있도록 어떻게 디자인하는 것이 좋을까?
2. 인터랙션 디자인 : 사용자들은 인터랙션을 어떤 정보를 보는 것이 가장 편리할까?
3. 정보 디자인 : 해당 사이트는 어떤 체계와 흐름, 형태로 구성되는 것이 바람직한가?
4. 서비스 디자인 : 해당 웹사이트는 어떤 상황에서 어떻게 활용될 수 있을까?

 

리서치 : 데스크리서치, 필드리서치 등

 

   ▷ 통계분석 : 방문수, 체류시간, 이동경로, 유입경로 등

   ▷ 문헌조사 : 서비스와 관련된 지식, 사례 조사(경쟁사 홈페이지 분석)

 

 

◎ 경쟁사 분석 이유 : 우리의 서비스를 객관적으로 바라보기 위함

○ 시장에서 통용되는 사용성을 발견하기 위해
○ 우리 서비스의 사용성으 개선하기 위해
○ 목표를 발견하고 집중하기 위해
○ 서비스가 시장 어디쯤에 있는지 파악하기 위해
○ 경쟁사의 강점과 약점을 알기위해
○ 우리 제품의 장단점을 파악하기 위해

 

   ▷ 필드리서치

      심층인터뷰(인터뷰 타겟 설정) : 관리자와의 인터뷰

 

      경영자 : 니즈(브랜드 이미지와 무관한 메인이미지로 자사 브랜드 이미지 하락, 코스 업데이트 필요)

      관리자 : 고충/이용동기/태도(부족한 정보로 인해 전화문의, 오프라인 문의가 많음)

 

 

2. STEP 2 : 도출 및 구체화

 

(현재 문제점 찾기) key findings → insight(앞으로 취해야할 변화)
01 메인
메인 화면에 콘텐츠 단순제공
메인 배경 이미지가 시설 이미지와 무관
확대/변경
메인메뉴 콘텐츠 다양화
메인 배경이미지를 시설이미지로 변경
02 콘텐츠 페이지
콘텐츠 공간이 협소, 배경이미지가 많은 비중 차지
코스이미지가 이전 버전, 다양한 코스를 보여주기에 부족
다양한 시설정보를 보여주기에 한계
변경/기능검토/확대
다양한 콘텐츠를 포함할 수 있도록 레이아웃 변경
코스 업데이트 및 코스경로를 다양하게 보여줄 수 있도록 기능 검토
리조트, 다이닝 등 우수시설정보를 보여줄 수 있도록 확대
03 게스트 서비스
비회원 예약시 전화번호 안내만 있어 전화예약기능 필요
부분 기능 추가
비회원 전화 예약기능 추가
04 추가기능
날씨정보, 이벤트, 갤러리, 골프챔피언십 정보 제공 필요
메뉴 추가
메인 메뉴 검토시 해당사항 추가

 

 

3. STEP 3 : 디자인 방향 설정

   ▷ 무드보드 : keyword 여행, 청량함, 에너지, 푸르른, 해양 여름, 휴식, 여유

   ▷ symbol 마크와 컬러를 사용하는 것이 좋습니다.

   ▷ symbol과 비슷한 마크와 그에 맞는 컬러들을 사용하면 이미지를 확실하게 잡을 수 있습니다.

   ▷ BI(Brand Identity)

   ▷ 런처아이콘(Launcher Icon) & Launch Screen

 

 

4. STEP 4 : 구현 단계

 

◎ IA(Information Architecture) : 정보 계층구조 설계

 

 와이어프레임(Wire Frame)

   ▷ 흑백의 윤관선으로 구조와 용도 파악(색상, 타이포그래피, 이미지 배제)

   ▷ 도구를 이용한 와이어프레임(Adobe XD)

 

프로토타이핑(Prototyping)

   ▷ XD를 배우는 것은 프로토타이핑의 일부입니다.

 

 

 

UI/UX를 진행할 때는 기존의 단계들을 거치면서 분석하는 과정 및 적용하는 것이 중요합니다.

그 중 경쟁사 분석을 통해 더 나은 결과물을 도출할 수 있다는 점은 어디를 가나 중요하게 생각되는 것 같네요!

 

UI/UX에 대해서 한 발 더 나가봐요!!

 

많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~

 

 

 

728x90
반응형

'FrontEnd > UI UX' 카테고리의 다른 글

[UI/UX] Adobe XD를 이용한 실습 및 단축키 사용법  (0) 2022.12.31
[UI/UX] UI/UX Design이란?  (0) 2022.12.30