아이디어스 리디자인 - 상품을 찾는 경험 개선
올해 5월부터 이직 준비를 위해 디자인 포트폴리오를 만들기 시작했다. (지금은 아주 만족스러운 회사로 이직 성공!) 그동안 회사에서 또는 개인적으로 작업했던 프로덕트들을 하나하나 살펴보며 어떤 내용으로 포트폴리오를 구성할지 고민하는 과정에서, 신규 프로젝트를 구축했던 경험은 많았지만 기존 서비스를 개선했던 경험이 부족하다고 느꼈다. from. designer라는 스터디 그룹에서 실제 서비스의 불편한 UI를 찾아 Redesign 해보는 스터디가 있어서 바로 참여했다.
리디자인할 서비스를 찾는 과정
아래 3가지 기준으로 리디자인할 서비스를 탐색했다.
1. 내가 평소 즐겨 사용하고 있는 서비스
자주 사용해 본 경험이 있는 서비스를 리디자인 대상으로 선정해서, 실제 사용자의 입장으로 서비스를 이용하는 과정을 더욱 수월하게 파악하고자 했다.
2. 앱스토어 리뷰가 30,000개 이상인 서비스
사용자 인터뷰나 설문조사를 진행하지 않을 예정이었기 때문에, 앱스토어 리뷰를 통해 다른 유저의 이용 후기를 얻기 위함이다. ‘30,000개 이상의 리뷰’로 기준을 잡은 이유는 리뷰의 개수로 얼마나 많은 사람이 알고 있고 이용 중인 서비스인지 짐작할 수 있기 때문이다. 그리고 스터디원들과 피드백을 주고받기 위해 스터디원들도 한 번쯤 이용해본 경험이 있는 서비스를 선정하고 싶었다.
3. 이전에 구축했던 프로덕트와 유사한 서비스
리디자인할 서비스를 찬찬히 뜯어보는 과정에서 얻게 되는 아이디어를 내 프로덕트에도 적용해보고 싶었다.
[이미지 1] 아이디어스 로고위 기준으로 선택한 서비스는 “아이디어스(idus)”이다.
국내 핸드메이드 시장을 선도하는 대한민국 No.1 복합 핸드메이드 플랫폼
아이디어스는 손으로 만든 가치있는 작품들을 작가들이 직접 등록/판매하는 마켓플랫폼
누적 거래액 7600억 원, 앱 다운로드 1,550만 건
출처: https://team.idus.com/
cf. 아이디어스에서는 판매자를 '작가', 상품을 '작품'이라는 용어로 사용하고 있지만, 이 글에서는 이해하기 쉬운 보편적인 용어를 사용하고자, '판매자'와 '상품'이라는 용어를 사용했다.
리디자인할 부분 찾기
아이디어스 앱의 개선할 지점을 찾기 위해 2가지 방법을 사용했다.
1. 휴리스틱 평가
휴리스틱 평가란 사용성 평가 방법중 하나로, 시간이나 정보가 불충분할 때 사용자가 합리적인 판단을 할 수 없거나, 굳이 체계적인 판단을 할 필요가 없는 상황에서 신속하게 사용하는 어림짐작의 기술이다.
Nielsen Norman Group의 10가지 평가 기준으로 아이디어스 앱의 사용성을 평가해보았다.
[이미지 2] 휴리스틱 평가표를 나름 만들어보았다.휴리스틱 평가에서 낮은 점수를 준 항목 중 일부 내용은 아래와 같다.
1. 사용 시 불필요한 과정을 거치지 않는가?
2. 메뉴를 사용하면서 눈에 피로감을 주지 않는 시각적 흐름을 제공하고 있는가?
앱 전체적으로 정보가 빼곡하게 많아 직관성이 떨어졌고, 특히 카테고리의 가짓수가 많아서 원하는 카테고리를 찾는 데 시간이 꽤 소요되었다. 수많은 정보 속에서 내가 원하는 정보를 찾는 데 방해가 된 요소들이 있었다. (구체적인 내용은 아래 '개선할 점과 개선 방향' 글 부분에 담았다.)
2. 앱스토어 리뷰
1년 이내에 작성된 리뷰 중, 개발상의 오류를 제외한 리뷰 위주로 검토했다.
[이미지 3] 아이디어스 앱스토어 리뷰의 일부커머스 서비스, 마켓플랫폼은 구매자가 쉽고 빠르게 원하는 상품을 찾을 수 있는지가 정말 중요하다. 그러나 일부 후기 내용 중, “앱 내 디자인이 뒤죽박죽, 직관적이지 않아서 찾는 게 힘들다”는 후기가 있었다. 내가 사용했을 때의 경험과 유사한 내용이었다.
그래서 현재 아이디어스에서 사용자가 원하는 상품을 어떻게 찾을 수 있는지 flow를 살펴보았다. 상품을 찾는 여러 경로가 있겠지만, 대표적인 2가지의 flow로 추렸다.
경로 1. ‘검색' 탭에서 상품 키워드를 검색 → 상품 리스트 확인 → 필터를 통해 검색 범위 설정
경로 2. ‘카테고리’ 탭에서 원하는 상품군을 선택 → 상품 리스트 확인 → 필터를 통해 검색 범위 설정
위 휴리스틱 평가에서도 언급했듯이, '경로 2'처럼 카테고리 탭을 이용해 상품을 찾는 과정에서 불편함을 느꼈었다. 그래서 카테고리 탭을 이용해 상품을 찾을 때의 불편한 점을 집중적으로 파악하고 개선하고자 했다.
개선할 점과 개선 방향
1. 카테고리 화면
문제 1. 상위 카테고리와 하위 카테고리가 동일한 위계로 구성
[이미지 4] 아이디어스 카테고리 화면'도자기'는 공예의 일부이기 때문에, ‘공예’ 카테고리의 하위 카테고리로 들어가야 한다. 그러나 현재 동일한 위계로 설계되어있다. 아이디어스는 판매자가 상품을 판매하려고 등록할 때 상품 카테고리를 선택해야 한다. 만약 도자기를 만드는 판매자라면, 상품 카테고리를 '공예'로 선택해야 할지, '도자기'로 선택해야 할지 고민이 될 것이다.
문제 2. 카테고리 명과 매칭되지 않는 이미지 사용
[이미지 5] 카테고리명과 매칭되지 않는 이미지 사용'도자기' 카테고리에 소주잔 이미지가 있거나, '향수/화장품/뷰티' 카테고리에 꿀 이미지가 있는 등 카테고리 명과 관련성이 떨어지는 이미지가 사용되고 있었다. 그래서 이미지 자체를 사용하지 않고 아이콘으로 대체하거나 아예 텍스트로 카테고리 화면을 구성하도록 개선하고자 했다.
그러나 카테고리 화면에서 사용된 이미지는 카테고리 명을 설명하는 수단 이외의 목적이 있음을 발견했다. 해당 카테고리에서 가장 인기 있는 상품의 이미지를 활용하고 있었는데, 이는 가장 인기 있는 상품의 판매자에게 주어지는 리워드 수단으로 보인다.
따라서 카테고리를 이미지와 함께 배치하는 방법은 유지하되, 판매자들이 상품을 등록할 때 정확한 카테고리를 선택할 수 있도록 카테고리를 재구성할 필요가 있다. (소주잔 공예를 하는 작가가 판매 카테고리를 설정할 때 ‘공예’ 카테고리 대신 ‘도자기’라는 카테고리를 선택하지 않도록)
문제 3. 37개의 카테고리 속에서 원하는 카테고리를 찾기까지 상당한 시간이 소요된다.
[이미지 6] 37개의 카테고리37개의 많은 카테고리가 상위 카테고리로 Grouping 되어 있지 않고 단순히 나열되어 있어서, 원하는 카테고리가 어디에 있는지 예측할 수 있는 단서가 없다. 내가 찾는 카테고리가 상단에 있다면 다행이지만, 그렇지 않다면 이 많은 카테고리를 하나하나 살펴봐야 한다.
문제 4. 이미지가 원형이어서, 모서리 영역의 이미지가 가려진다.
카테고리에 이미지를 배치하는 것은 이미지를 통해서도 해당 카테고리에 대해 부가적인 정보를 제공하기 위한 의도가 있을 것이다. 그러나 원형 이미지는 사각형 이미지보다 보이는 부분이 적다. 더 풍부한 정보를 담으려면 사각형 형태의 이미지가 적합할 것이다.
해결 1. 카테고리 재구성
[이미지 7] 카테고리 재구성37개의 카테고리를 Grouping 할 수 있는 상위 카테고리를 설정하고, 그에 해당하는 하위 카테고리를 정리했다. 카테고리 간의 명확한 구분을 두어서 판매자가 상품 카테고리를 설정할 때 혼동되는 다른 카테고리가 없도록 하는 것이 목표였다.
해결 2. 상위 카테고리로 Grouping 한 UI를 통해 카테고리를 찾는 시간을 단축
[이미지 8] 개선한 카테고리 화면상위 카테고리를 Bold한 title로 명시하고 그 아래에 하위 카테고리들을 이미지와 함께 배치했다. 하위 카테고리가 없는 상위 카테고리는 단일메뉴로 하단에 배치하였다. 카테고리 배치 순서는 기존 아이디어스의 카테고리 순서와 유사하게 구성했다.
해결 3. 이미지를 모서리 둥근 사각형 형태로 수정
기존 카테고리 이미지에서 사용된 원형의 느낌은 살리되, 보이는 이미지의 범위를 넓히도록 모서리 둥근 사각형 형태로 이미지를 배치하였다.
2. 필터 화면
문제 1. 선택지 상의 범위가 겹치고, 선택지가 모호한 기준으로 나뉜다.
[이미지 8] 아이디어스 상품 필터상품 필터를 크게 5가지로 제공하고 있다.
기획전 할인 중
배송비
정렬
할인율
가격대
필터 선택지를 보면 범위가 중복되는 부분이 있어 원하는 필터를 설정할 때 혼란을 준다. 예를 들어, 할인율 필터의 '30% 이상 할인' 선택지는 '20% 이상 할인' 선택지에 포함되는 할인 범위이다. 선택지 간의 범위가 겹치지 않게 구성해야 한다.
또한, 배송비 필터의 '2,500원 이하만 보기'와 '3,000원 이하만 보기'는 필요성이 떨어지는 선택지라고 생각한다. 구매하려는 상품이 무료배송인지 유료배송인지는 구매 의사결정에 유의미한 영향을 주는 요소이지만, 배송비가 2,500원인지 3,000원인지 등은 구매 의사결정에 유의미한 영향을 주는 요소인지 불확실하다. (아이디어스 직원이 아니어서 이 필터가 필요한 필터인지 아닌지 알 수 없지만, 개인적으로 필요한 필터인지 의문이다)
문제 2. 복잡하고 드롭다운으로 구성된 필터
선택지가 복잡하고 드롭다운 형태의 필터여서, 필터 세부 내용을 확인하고 사용하기 위해서는 사용자가 필터를 눌러 펼쳐보는 행동이 추가되기 때문에 불편함을 줄 수 있다.
해결 1. 직접 범위를 조절하는 슬라이드 필터로 변경
[이미지 9] 개선한 상품 필터 화면많은 필터 선택지를 시각적으로 단순화하고 사용자가 원하는 범위를 자유롭게 설정할 수 있도록 슬라이더를 사용했다. 슬라이더를 조절하는 단위를 설정한다면(ex. 할인율 슬라이더는 10% 단위로 조절, 가격대는 1000원 단위로 조절), 기존보다 편리하게 사용할 수 있을 것으로 예상한다.
추가로, 슬라이더 사용으로 인해 필터 화면의 좌우 너비를 확장했고, 필터 적용 버튼을 추가했다. 기존에는 필터 적용 버튼이 없고, 사용자가 필터 선택지를 다르게 선택할 때마다 상품이 나열되어 있는 background에서 필터가 적용되는 것이 보였었다. 개선한 필터 화면은 좌우 너비를 확장하여 상품이 나열된 background가 보이지 않기 때문에 필터 적용 버튼이 별도로 필요했다.
해결 2. 드롭다운 구조를 없앴다.
수많은 선택지를 숨기기 위해 드롭다운 메뉴를 사용했던 기존 방식은 개선된 필터 화면에서 선택지를 단순화했기 때문에 더 이상 필요하지 않았다.
총평
이번 리디자인 스터디는 내 디자인에 논리와 타당성을 고민하고 스터디원에게 공유할 수 있어서 성장할 수 있었던 좋은 경험이었다. 아쉬웠던 점은, 개선한 방향이 왜 사용자에게 더 좋은 경험을 줄 수 있는지에 대한 이론적인 근거가 조금 부족했던 것 같다. 그래서 40가지의 UX 심리학 법칙을 공부하는 다른 스터디에 참여해서 부족했던 부분을 보완할 계획이다.
