UX.UI 포트폴리오 과정 8일차 - 와이어프레임 및 UI제작 & 중간 발표
지금까지 만들어둔 와이어프레임에 UI를 더해 어제 배운 프로토타입을 적용시켜 최종 산출물로 나아가는 과정중에 있다.
사실 어제 프로토타입을 배운 김에 와이어프레임에 이것저것 Action을 걸어 보았는데
수정하다보니 플로우가 꼬이기도 하고 보기도 안좋아서 초기화시키고 UI까지 모두 다듬은 후 프로토타입을 제작하기로 했다.
와이어 프레임 & UI 제작
시간이 없는 관계로 우리가 주로 보여주고자 하는 리뷰 탭 개선과 '마이 사이즈' 기능 UI 제작을 중점적으로 하고 있다.
중간발표
오후에는 팀별로 진행상황을 간단하게 발표하는 시간이 있었다.
오프라인에 있는 팀들은 직접 확인이 가능하니 어떤 팀이 무엇을 하고 있는지는 대강 알고 있었는데 이번 발표를 계기로 온라인 팀에서 어떤 활동을 하고 있는지도 알게 되어서 재밌었다.
우리 팀 발표는 내가 맡아서 급하게 발표때 보여주기 위한 화면을 만들어보았다.
사실 실제 발표에서 썼던 자료는 이것보다 거친 느낌이었는데 다른 팀들 발표하는 것을 보니 다들 깔끔하게 정리해가며 만드는 것 같아 발표 이후 좀 더 다듬은 상태다.
개선 전과 변화가 없는 단계는 하얀 박스로 표시하고, 개선한 단계는 붉게 표시했다.
강사님께서 문제 상황과 그에 대한 개선 방향을 세개 이상 제시하라고 하셔서 그것들을 중점적으로 발표를 진행했다.
Pain Point 1. 매번 신체 사이즈 필터를 설정해야 한다.
우리가 만들었던 퍼소나는 한번에 모든 가족들의 옷을 구매하려고 한다.
그렇다면 자신의 옷을 살 때에는 리뷰를 필터링 할 때 자신의 키, 몸무게 등을 입력해주고
배우자나 자녀의 옷을 살 때에는 또 그에 맞게 새로 값을 입력해줘야 한다.
일반적으로 인터넷 쇼핑을 할 때에는 유저 한 명이 자신의 옷만을 구매하는 경우가 많겠지만
키즈를 포함한 전연령 제품 + 기본템을 많이 판매하는 스파오 브랜드의 특성 상 이렇게 다른 사람의 옷을 구매하는 경우도 많을 것이라고 생각했다.
(실제로 리뷰를 살펴보니 캐릭터 수면잠옷의 경우 가족끼리 맞춰 입는 후기가 상당했다)
그래서 초기 앱을 실행할 때 로그인 이후 '마이 사이즈' 등록 화면을 띄워 신체 정보를 등록할 수 있도록 만들었다.
이때 이 기능 사용을 원치 않는다면 '바로 쇼핑하러 가기' 버튼을 눌러 메인 화면으로 이동할 수 있지만 사이즈 등록을 권장하는 것이 개발 의도이기 때문에 신규 등록 버튼을 검게 표현해 주었다.
Pain Point 2. 리뷰 탭의 필터 UI가 직관적이지 못하다.
기존 스파오 앱을 보면 리뷰 탭에서 신체 사이즈 필터링이 가능하다.
현재 UI를 살펴보면 버튼 형식으로 되어있어서 마치 여러 개를 자유롭게 설정할 수 있는 것처럼 보이지만
사실은 양 끝점을 지정하면 범위가 지정되는 방식이었다.
즉, 162-164cm와 171-173cm를 선택하면 그 두 개의 버튼만 선택되는 것이 아닌 그것을 포함하여 그 사이 버튼들도 함께 선택된다.
몸무게 필터 역시 마찬가지였다.
이 UI는 지오다노에서도 사용하고 있었는데 생긴 것도 기능도 완전히 똑같았다.
상기 UI는 직관적이지 못할 뿐만 아니라 필터 간격이 너무 세분화 되어있어서(키는 2cm 간격, 몸무게는 2kg간격) 하나하나 읽어보아야 하는 어려움이 있었다. 또 여러 옵션을 드롭다운 목록에서 일일히 선택해 주어야 한다는 점도 불편했다.
그래서 슬라이더 형식을 이용해 하나에 창에서 여러 필터를 한번에 적용할 수 있도록 개선해보았다.
스파오의 메인 컬러인 빨간색을 포인트로 사용해주었고 이외 강조하고자 하는 버튼들은 검은색으로 표현해주었다.
붉은 색을 이용하면 확실히 스파오 앱이라는 정체성이 뚜렷하게 나타나지만 눈이 좀 아프고 자칫 정신없어 보일 수 있어서 꼭 필요한 부분에만 선택적으로 색을 집어넣었다. 또 명도와 채도, 투명도 조절을 통해 나타나는 미세한 색감 차이를 비교해보면서 색상을 선택했다.
추가 개선사항 - 로그인 프로세스 세분화
기존의 회원가입 및 로그인 화면이 좀 복잡해보여서 더 깔끔하게 바꾸어보았다.
그 과정에서 만들어야 할 페이지도 늘어났지만 강사님께서 이렇게 과정을 분리한 것이 사용자 친화적인 것 같다고 좋은 피드백을 주셔서 뿌듯했다.
스파오는 이랜드 산하 브랜드라 이랜드 통합 멤버십을 제공하는데
사실 스파오 앱까지 깔 정도면 이랜드의 다른 브랜드보다는 스파오 자체에 관심이 있는 경우라고 생각했다.
또 스파오 앱에 들어온 것인데 emember라는 로고가 최상단에 뜨니 왠지 개인정보가 막 흘러나갈 것 같은 느낌도 들고
신규 회원가입은 어디서 해야하는건지도 알기가 어려웠다.
그래서 맨 처음 스파오 앱을 깔아 실행하는 상황을 가정했을 가장 먼저 로그인 또는 회원가입을 진행할 수 있도록 만들었다.
물론 이에 강제성을 부여하면 불편감을 느낄 수 있으니 둘러보기 버튼도 만들어 두었다.
이후 회원가입 창에서 이메일을 입력하면 다음 단계인 비밀번호 입력으로 이동하고 이후 앞서 선보였던 '마이 사이즈 등록'이후 회원 가입을 완료할 수 있다.
사실 버튼에 (로그인/회원가입) 이라고 적어둔 만큼 (기존 회원인 경우/신규 가입인 경우)를 나누어 프로토타입을 제작하고 싶은 마음이 있는데 우리가 개선할 핵심 기능이 아니라서 두 경우 모두 같은 흐름으로 진행되도록 통일해둔 상태다.