오늘은 오프라인 교육이 아니라 구글미트로 온라인 교육을 진행했다. 와 지난 5개월동안 맨날 늦게 일어나서 9시 기상은
엄청 일찍 일어나는 시간이었는데 이번주 내내 6시 반에 일어나서 교육 들으러 가다보니 9시까지 잘 수 있다는게 얼마나 행복한 일인지 깨닫게 됨... 직장인분들...대체 어떤 삶을 살고 계신건가요....
어쨋든 오늘부터는 리서치 끝내고 본격적으로 서비스 기능 개선 들어가는 날이라 오전에 짧게 이론 수업 끝내고 점심 먹기 전부터 바로 실습 시작. 일단 강의 내용부터 정리해봅시다.
Day 5 – UX전략 도출과 UI설계 방법론
UX전략 도출
- 내 프로젝트의 키워드를 찾고 이를 문장으로 발전시켜나가기
UX전략 원칙
- 비즈니스 전략과 UX디자인 사이. 기업 및 회사 자체에 대한 조사도 해야함
2. UI설계 방법론
1) UX작업의 시각화 과정
01 메뉴설계(menu tree, site map)
menu tree : 핵심 서비스가 절 드러나고 구성하고 메뉴를 통해 서비스 정체성을 부여
IA랑은 다름. 모든 페이지에 대한 구성보다는 최상단 핵심 메뉴에 대해서 정리하는 것
2) 이용자흐름 설계(User flow, Flow chart)
user flow: 특정 작업을 완료하기위해 서비스 내에서 움직이는 경로를 정리한 것
flow chart: 사이트 전체 흐름에 따라 데이터를 어떻게 처리하는지 기호나 도형을 통해 보여주는 것(약속된 기호들이 정해져있음. 의미대로 정해져있어 임의로 변화를 주면 안됨)
3) 정보구조설계 및 기능 정의(IA)
IA 정보구조도: 모든 메뉴와 페이지의 구조를 확인할 수 있는 방식
> 계층구조(메뉴가 많고 정보 구조가 복잡한 경우. 가장 보편적)
> 허브&스포크(홈 화면이 허브 역할을 하며 정보의 양이 많지 않은 경우)
> 탭패턴(정보 규모가 적은 경우 사용작 빠르게 내용 파악 가능
4) 화면설계(Wireframe, Storyboard)
와이어프레임: 디자인 고민x, 각 페이지의 기능 간 계와 구조를 정의하고 컨텐츠 레이아웃을 시각화
디자인 컨셉 도출 및 디자인(Mood board, Design)
스토리보드: 와이어프레임, 컨텐츠, 기능 정의 프로세스 등 서비스 구축을 위한 모든 정보가 들아감
=> 혼자서 UXUI공부 시작할 때 막막해서 노트폴리오에 올라와있는 다른 디자이너들의 개인프로젝트들 여러개 다 돌려보면서 정리해보고 공통적으로 들어간 부분 찾아서 프로젝트 진행 구조를 파악했었다. 그래서 user flow나 IA, 와이어프레임은 뭔지도 모르고 대충 남들이 하는대로 만들었었는데 지금 와서 생각해보니 참 말도 안되는 방식이었다. user flow, IA, 와이어프레임을 통해 프로젝트의 방향, 목표, 기능들을 확립하고, 이를 바탕으로 서비스를 디자인 해야하는데 난 반대로 했었다. 당장 디자인과 보이는 것에만 집중해서 선 디자인 후 UI설계 방법론을 만들었다. 과정을 통해 결과를 낸게 아니라 결과를 내고 결과에 맞춘 보여주기식 과정을 만들어낸 느낌..? 디자인 하다가 '어 이 기능도 있으면 좋을 것 같은데?' 하고 나중에 사이트맵이랑 와이어프레임에 추가하는 방식이었다. 진짜 개 엉망으로 공부했었구나.
그래도 이번 교육 진행하면서 나한테 절실했던 기본기에 대해 갖춰가는 느낌이라 다행이다. 다만 속도 따라가기는 여전히 힘든.....
실습 Day 5
Solution과 일레클 메뉴트리 사이트맵 작성
5일차인 오늘부터는 리서치를 마치고 내가 직접 UX를 설계하는 작업에 들어갔다.
그동안은 그냥 자료조사만 하다가 본격적으로 직접 뭔가를 만들어보려니 쉽지가 않았다.
일단 오늘의 실습 과제는
1. Solution 도출하기
2. As-is 사이트맵 작성
3. 메뉴구조 벤치마킹
4. 메뉴구성 - 사이트맵 작성하기
.
.
.
1. Solution 도출하기
어제는 설문조사 결과를 바탕으로 Painpoint와 Insight를 수정했다.
큰 틀은 바뀌지 않았지만 세부 내용이 수정된 부분이 좀 있었다.
수정된 내용을 고려해서 구체적인 해결책을 도출해봤다. 설문조사 결과 일레클이라는 서비스의
인지도 자체가 경쟁사들에 비해 현저하게 떨어졌다. 근데 브랜드 인지도라는게 단순히 서비스만 개선한다고
올라가는게 아니라 대대적인 마케팅과 오프라인 기기 개선도 수반되어야 하는 부분이라 좀 애매하다.
프로덕트 디자이너라면 전반적인 마케팅과 전기자전거 기기 자체, 이용 요금제들을 사용자의 니즈에 맞춰 일레클 서비스를 알릴 수 있겠지만 UXUI디자이너는 글쎄....
그래서 일단은 너무 밋밋하고 특징 없는 UI 디자인에 일레클의 브랜드컬러인 푸른색을 여러 CTA컴포넌트들에 사용해서 '따릉이=초록, 킥고잉=청록, 카카오바이크=노랑'과 같이 사용자들에게 일레클의 브랜드컬러를 확립해 인지도를 높이는데 최대한 도움이 되는 방향으로 개선을 진행하려한다.
나머진 사진에 나온대로~
2. 일레클 As-is 사이트맵
일레클이 현재 갖추고 있는 메뉴트리다. 일레클 앱에 들어가보면 알겠지만 진짜 뭐 현장대여나 다양한 요금제 말고는
사용자가 관심이 갈만한 부분이 없다. 메시지함도 메인화면이 아니라 메뉴바 안에 따로 있어서 사용자가 바로바로 공지를 확인할 수가 없다.
가장 큰 약점으로는 뭐 멤버십이나 포인트제도, 할인쿠폰과 같은 사용자 혜택이 없다. 야 비행기도 많이 타면 마일리지가 쌓이는데 전기자전거가 뭐라고 충성고객을 위한 혜택이 없냐. 일레클만 쓸 때는 몰랐는데 경쟁 서비스들이랑 비교해보니까 이렇게 불친절한 서비스가 없다. 이미 앱을 쓰고 있는 사용자들이 계속 사용할만한 메리트가 있어야지.
3. 메뉴구조 벤치마킹
카카오바이크는 카카오택시 앱 자체가 대중교통과 여행 등 다른 서비스가 주력인 서비스라 바이크에는 별다른 기능이
없어서 메뉴트리를 만들진 않았다.
킥고잉, 스윙, 지쿠를 보면 기본적으로 멤버십과 크레딧/포인트, 스탬프 리워드 등 서비스를 사용할수록 다양한 혜택들이 지급된다. 따릉이와 달리 전기자전거는 요금이 싼편이 아니라서 사용자들의 가장 큰 니즈가 항상 저렴한 가격, 요금제일 수밖에 없다.
4. 일레클 메뉴구성 사이트맵
Solution을 참고해서 여러 기능들과 UI를 개선한 일레클의 메뉴트리다. 자회사인 쏘카의 멤버십 '쏘카클럽'을 참고해 '일레클클럽' 멤버십을 만들었다. 유저리서치에서 사용자들이 서비스를 이용하면서 혜택을 원하면서도 멤버십에 대한 인지를 못한다는 결과가 나왔었다. 그래서 아예 네비게이션바를 만들어 사용자가 필요로하는 부분을 메인메뉴로 설정해 메인화면에 띄웠다.
신나게 타고나서 생각보다 비싼 이용 요금에 당황했다는 의견도 많았다. 현재는 모든 서비스가 대여 화면에 기본요금+분당 요금이 표기되어있는데 사실 목적지까지 얼마나 걸리는지, 몇 분이나 이용해야할지 잘 몰라서 우선 타고 나중에 결제하는 경우가 많다. 이를 반영해 대여할 때 목적지를 설정하면 예상 시간과 더불어 예상 이용 요금을 표기하는 방안을 생각해봤다. 추가로 예상 이용 요금 외에 요금제를 사욜할 때 최대 할인되는 금액을 함께 표기해 사용자의 요금제 구매를 유도할 수 있다.
여기까지가 실습 5일차 과정이다.
앞에서도 말했듯 리서치만 하다가 직접 뭔가를 만들어내려니 쉽지가 않다.
한편으로는 이제 본격적으로 서비스를 만들어가는 것 같아 재미있기도 하고.
일단 주말 푹 쉬어야지ㅎㅎ
맥주 가져와!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
본 후기는 유데미-스나이퍼팩토리 UI/UX 디자이너 인턴형 프로그램 학습 일지 후기로 작성 되었습니다.