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에 대해서 한 발 더 나가봐요!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~

'FrontEnd > UI UX' 카테고리의 다른 글
[UI/UX] Adobe XD를 이용한 실습 및 단축키 사용법 (0) | 2022.12.31 |
---|---|
[UI/UX] UI/UX Design이란? (0) | 2022.12.30 |