UX/UI 분석 및 개선 케이스 스터디1-런드리고
2023년 9월 둘째주부터 12월 말까지 총 4달 간 케이스 스터디를 진행했다.
이번 한 학기 동안 스터디를 진행하면서 얻은 결과, 그리고 앞으로의 계획에 대해 기록해보려 한다. 시험기간 일주일 전과 시험 주간은 휴회했고, 주 1회로 하되, 대면 비대면을 섞어가며 진행했다.
<커리큘럼>
앱서비스 개선을 목적으로 2주 당 하나의 프로젝트로 설정했다.
1주 - 앱서비스 1개 선정해 서비스 UI와 UX의 장점과 단점 분석 / 서비스 분석
2주 - 분석한 단점을 보완할 수 있는 UI 디자인 제안
이렇게 한 주는 서비스를 사용해보며 UX에서의 장점과 단점을, UI에서도 장점과 단점을 도출해내고 회의 시간에 공유하는 시간을 가졌다.
그를 바탕으로 공통적으로 모이는 단점, 또는 개선사항이 많은 페이지를 정하고 개수에 맞춰 UI를 개선해오는 것이 2주차 과제이다.
총 5개의 프로젝트를 진행했고, 선정한 앱서비스는 아래와 같다.
-런드리고
-스타벅스
-따릉이
-멜론
-배달의 민족
그 첫번째 프로젝트는 런드리고다.
런드리고를 간단히 소개하자면 (주)의식주컴퍼니에 의해 출시된 ‘비대면 세탁 서비스’이다.
2019년 3월 서비스를 런칭하고 출시 4년 만에 회원 수 62만 가구를 확보하며 현재 진행형으로 성장 중인 기업이다. 개인적 평가는 잠재시장을 공략한 영리한 운영방식이 돋보인다는 것. ‘세탁’서비스를 생각해보자면, 우리 주변에 등장한 24시간 무인 세탁소. 크린토피아 서비스만이 독보적이라 생각했는데, 코로나 시기를 거쳐 주변에서 아주 쉽게 찾아볼 수 있게 되었다. 이를 온라인으로 옮겨 집 앞으로 수거, 배송할 수 있다면? 혼자 사는 가구도, 식구가 많아 빨래감이 많은 이들도 너무나 편리하게 사용할 수 있지 않은가.
서비스의 주요기능인 '세탁'과 관련한 리빙 아이템, 라이프 스타일 전반의 아이템을 무료로 배송해주는 커머스 플랫폼의 형식도 가져간 점이 인상적이다.
런칭 이후 비대면 수선 서비스 신설, 런드리고 자체 라이프스타일 브랜드 ‘라이프고즈온’ 런칭, 독자적인 자동 의류 출고 시스템 개발, 스마트 무인 세탁소 런드리24, B2B 사업 리뉴얼로 런드리고 ’호텔&비즈니스’ 런칭 등 세탁 산업의 틈새 시장을 공략해 ‘세탁’과 관련한 분야에 빠르게 발을 넓히고 있다.
크게 정리하자면
모바일 세탁 & 수선 서비스 ‘런드리고’
스마트 무인 세탁소 ‘런드리24’
호텔 세탁 서비스 ‘런드리고 호텔 & 비즈니스’
라이프스타일 브랜드 ‘라이프고즈온’
이 있다. 런드리고를 시작으로 무인 세탁소, 기업들을 겨냥한 호텔 세탁까지. 그저 ‘세탁’에만 집중하는 기업이 아니다. 라이프 스타일, 의식주 문제의 전반을 해결해나가겠다는 비전을 가진 브랜드다. 그 중 런드리고의 핵심사업이자 앱서비스인 런드리고를 다루고자했다.
1주차 - 런드리고 UX / UI 장단점 분석
4분할해서 각각의 장단점을 분석했다.팀원 4명의 의견을 종합해 가장 많이 나온 의견들, 또는 공감하는 의견들을 적어보겠다.
(1) UI (버튼 크기, 색상 등 시각적 요소)
-UI (버튼 크기, 색상 등 시각적 요소) 장점
런드리고의 아이덴티티를 드러내는 메인컬러를 곳곳에 적절히 배치했음
하단 탭바의 아이콘의 가시성이 좋음 (‘수거신청’이 메인 기능인 만큼 런드리고 로고 활용한 점이 좋다/ 각지고 볼드한 아이콘이 브랜드와 잘 어울리는 선택)
홈화면의 월정액 플랜 소개 UI, 사용법 UI에서 플랜이 취급하는 의류 이미지, 그래픽을 활용한 점에서 서비스 범위 유추 가능. (이해도를 높이는 디자인)
-UI (버튼 크기, 색상 등 시각적 요소) 단점
수거 신청함의 세탁물 맡기는 방법 버튼의 투명도가 너무 낮아서 눈에 잘 띄지 않음.
가이드 및 가격표의 설명이 홈에 존재하는 것은 좋으나, 그 크기와 두 가지의 분류가 모호하다는 단점이 있음. (잘 보이지 않음) 색상의 차이, 또는 위치 조정으로 서비스 유입(월정액 가입)에 가장 결정적인 단서의 가시성을 높일 필요성이 있음.*
스토어의 카테고리의 가시성이 아쉬움. 가로 스크롤로 인해 많은 카테고리가 숨겨져 있기에 스토어 홈에서는 어떠한 상품군이 있는지 알기 쉽지 않아보임. (가로 스크롤 형태를 바꿀 필요성이 있음)*
UI 개인적 의견
> 애초에 레이블링, 텍스트 위계의 우수성을 보고 클론 디자인을 목표로 잡았던 서비스이기에, UI의 문제점은 적었다. GUI, 즉 그래픽적인 부분에서의 아쉬움은 없었는데, 하나 갈리는 것이 ‘수거신청’ 탭에 크게 자리하는 일러스트(애니메이션)가 과하다는 지적이 있었던 반면에, 나는 라이프 스타일과 관련한 브랜드, 그리고 ‘세탁’없는 생활을 제공하는 편안한 브랜드 무드와 감성적인 일러스트는 오히려 장점이라고 생각했다. 다만, 화면의 2/3를 차지해 정작 유저의 시선을 유도해야하는 ‘수거신청’ 버튼의 주목도가 떨어진다는 것은 동의한다. 하지만 일러스트가 없다면 단조로울 것 같다는 의견이다.
또, 많은 이용권(플랜)과 처음보면 다소 헷갈릴 수 있는 설명에 그래픽 요소와 사진을 적절히 활용해 이해를 돕는다는 점이 좋았다. 특히 많이 언급된 장점은 텍스트를 과감히 크게 사용하고 있지만, 정보의 위계를 잘 지켜 시선이 머물러야하는 곳에 집중도가 상당히 높다는 것이다.
(2) UX (Writing, IA, 기능, 시각적X 사용성에
관련한 요소)
-UX (Writing, IA, 기능, 시각적X) 장점
숫자를 활용한 UX 라이팅 (베딩온리32 > 32,000원 등의 가격을 플랜 이름에 반영한 점, 배송 횟수, 세탁물 개수도 직관적인 숫자로 보여주고 있다는 점에서 사용자가 빠르게 정보를 얻는 데에 도움)
홈에 가격표 탭, 안심 정찰 가격 등으로 소비자에게 투명한 가격 정보를 제공한다는 감상을 줌
어플 전체적으로 레이블링이 잘 되어있음
하단 네비게이션의 레이블링만으로 어떤 기능을 가리키는지 알 수 있음
앱을 열자마자 보이는 페이지가 서비스 구매할 수 있는 홈 화면인게 좋음(여러 번 이용, 한 번 이용이 가장 먼저 보이게 됨.)서비스 구매를 해야 다른 메뉴가의미가 있는 것이기 때문에 가장 먼저 해야하는 행동을 처음에 보이도록 한 것.
홈에서 전반적인 서비스 정보와 가입절차를 모두 해결 가능하며,스토어, 수거신청까지 각 탭별로 많은 기능들이 들어가기 보다는 하나의 기능에 집중이 잘 되어있음.* (홈 화면에서 모든 기능을 연쇄적으로 제공)
-UX (Writing, IA, 기능, 시각적X) 단점
스토어 카테고리가 굉장히 많은데, 검색 기능을 보유하고 있지 않음 검색기능이 추가가 필요함
스토어 속 특정 카테고리들의 불필요성을 느낌. ‘패브릭', ‘의류/신발 관리'는 “세탁 앱"이라는 런드리고와 어울리지만 다른 카테고리들은 ‘굳이 이 앱에서 사야되나?’라는 생각이 들게 함
스토어 레이블링과 서비스 구매페이지 레이블링의 모호성.
홈화면은 따지자면 서비스 구매페이지인데, ‘홈’이라는 단어가 기능을 예측 불가능하도록 함.
오히려 레이블링만 보면 스토어가 서비스 구매 페이지라고 오해 가능.
스토어 메뉴에서 제품들을 정렬 순서 옵션이 없는 점이 아쉬움
스토어에서 제품에 대한 구매 리뷰기능이 없는 점이 의문임. 기존 소비자들이 다른 쇼핑몰에서 경험하는 기본적인 익숙한 기능이 없다는 점이 아쉬움
제품 구매 플로어의 쓸데없이 깊은 뎁스.
제품 구매 플로우에서 제품 페이지에서 바로 구매가 가능한 것이 아니라 장바구니에 담고 그 이후에 장바구니 페이지로 이동하여 결제하는 과정에서 소비자 이탈 현상이 일어날 것 같음.
결제프로세스 중 간편결제의 부재로 인한 아쉬움을 보이는 사용자 존재* (간편 결제 서비스가 있으면 좋을듯)
너무 많은 플랜. 드라이 온리, 런드리 온리, 런드리 &드라이... 등 반복되는 동어로 인해 사용자에게 혼란을 줄 수 있을 것 같음. 또한 이들의 차이를 한 눈에 파악하기는 더욱 어려움*
UX 개인적 의견
>잘 만들어진 앱이어도, UX의 단점을 찾기는 굉장히 쉽다. 런드리고는 주 기능이 아니어서 그런지 스토어탭은 조금 엉성한 느낌까지 났는데, 검색기능의 부재, 정렬 순서 옵션, 리뷰기능이 없다는 점. 우리가 ‘쇼핑’을 목적으로 어플리케이션을 켰을 때, 가장 먼저 찾는 기능들이다. 이런 기능이 없는 커머스 플랫폼에서 구매하고싶다는 욕구가 들까? 또 결제까지의 너무 많은 액션이 필요하다는 점이다. 제품 구매를 위해 상세페이지에 들어갔다. 바로 구매는 없고 장바구니에 담은 뒤, 장바구니에서만 구매할 수 있다는 것인데, 플랜을 결제해야 스토어 구매가 가능한(옷 배송 시에 같이 배송된다는 것.) 서비스 특성 상 이러한 구조로 설정한 듯 한데, 런드리고가 자사 브랜드 ‘라이프고즈 온’도 있는데, 이 브랜드의 제품을 구매하려면 런드리고 앱 내의서비스 결제를 해야만 구매할 수 있다는 설정은, 과연 매출 측면에서 도움이 될지, 접근성이 너무나 떨어지는 것은 아닌지 의문이 든다. 하지만 사업적 지식이 아직 많지 않은 상태라 함부로 판단하기에는 어려움이 따를 것 같다. 장점으로는 서비스 기능이 적은 만큼, 홈화면에서 서비스 결제까지의 뎁스가 간결하다는 것. 구매로의 유도가 잘 설계되어 있다는 것을 꼽을 수 있을 것 같다.
2주차 - 런드리고 UX / UI 개선
개선방향성
앞서 분석한 바를 통해 UI 컴포넌트 구성과 텍스트 위계의 장점이 두드러지는
(1) 홈 화면, 이용가이드 화면의 클론디자인과 상대적으로 사용성이 떨어지는 (2) 스토어 탭 개선을 목적으로 잡았다.
(1) 홈 화면, 이용가이드 화면의 클론디자인
홈화면의 클론디자인
이용가이드 페이지의 클론디자인 (2) 스토어 탭 개선
실제 런드리고 스토어탭과 단점 논의 내용
스토어 개선 방향이다. 크게 4가지로 정리할 수 있었고
기능적으로 수정할 부분과 추가할 부분들을 공통사항으로 정해 반영했다.
참고 레퍼런스 (어바웃펫, SSG.COM의 홈)우선 런드리고 스토어의 가장 큰 문제는 우리가 일반적으로 사용하는 커머스 플랫폼의 사용성과는 너무 다르다는 점에 있었다. 어떠한 대상을 타겟팅하고 있든 간에 UI는 보편성을 가져가야 한다. 이전에 내가 사용했던 쇼핑앱과 시각적인 구성이 일치해야 사용자가 스스로 예측하고 액션으로 옮길 수 있을 것이다.
스토어 탭을 개선할 때에 일반적인 커머스 플랫폼을 참고했다. SSG 닷컴, 그리고 어바웃 펫, 사진에는 없지만 11번가도 참고했다.
<내 결과물>
시간 관계상 와이어프레임까지만 진행했다.런드리고는 기존에 홈화면에서 > 상품 카테고리화면으로 전환이 아닌 홈화면 자체에서 카테고리를 제시하고 화면 전환없이 아래로 스크롤하는 구성이었다. 광고배너가 그대로 유지되면서 화면을 차지하고, 거기에 필터기능도 없으니 ‘카테고리 선택’의 액션을 취할 때, 플로우가 엉성하다는 느낌이 강하게 왔다.
공통적 개선점을 언급하자면
1. 카테고리 가로 정렬 구성을 화면 중앙에 아이콘과 함께 구성했다.
런드리고는 세탁 관련 물품, 라이프 스타일 제품군부터 식품까지 그 범위가 넓었는데, 그 많은 카테고리가 한 눈에 들어오지 않는 점이 가장 단점이었다. 이를 아이콘 + 텍스트 구성으로 가시성을 높였다. 또한 기존에 탭 전환이 없는 구성에서
카테고리를 선택하면 해당 카테고리 페이지로 한 차례 넘어가는 구성으로 변경했다.
예를 들어 ‘패브릭’을 선택하면 패브릭 제품군을 볼 수 있는 페이지가 나오고, 그 패브릭 안에서 세부 카테고리를 가로 스크롤 구성으로 다시 선택할 수 있는 것이다.
2. 검색 기능 추가
스토어 홈에서 상품을 검색할 수 있는 텍스트 박스를 추가했다.
3. 정렬아이콘의 모호함을 없앴다.
보통 상품 박스가 한줄에 2개씩 정렬 & 하나로 정렬 이렇게 두개를 통상적으로 많이 사용하는데,
런드리고는 그 반대로 활용하고 있었으니, 네개의 박스 아이콘으로 변경했다.
( + 4번의 경우는 상세페이지를 만들지 않아서 생략했다. )
+공통 개선점 외에 추가적으로 언급하고 싶은 부분
런드리고 스토어 앞에 로고를 넣어 정체성을 강조했고, 하단 바의 ‘이용내역’ 페이지를 추가했다는 것이다. 보통 플랜 결제이면서도, 주기적으로 나의 물건들을 세탁하는 서비스라면 당연히 전의 결제 내역이나 어떤 서비스를 이용했는지, 어떤 세탁을 맡겼는지 아는 것이 중요하다고 생각했다. 그리고 수거와 배송이 동반되는 서비스이니까 서비스 진행상황도 매우 중요해지는 지점이라고 생각했다. 이용내역에서 이러한 중요한 지점들을 보여줄 수 있다면 어떨까. 기존에는 마이페이지의 일부였다. 또 카테고리를 세분화했다. 같은 패브릭으로 묶어 내가 원하는 상품에 접근하기 어려웠던 전에 비해
패브릭 > 양말 / 수건 / 침구 / 이너 / 상의 로 상위개념을 한 차례 분리했다.
<팀원 결과물>
팀원 1기존의 스토어 UI에서 많이 벗어나지 않은 채, 개선점을 잘 반영해주셨다. 개인적으로 배너 경계선 부분에 라운딩을 주셨는데 마치 팝업이 아래에서 위로 올라온 것과 같은 디자인이 아기자기한 느낌을 주는 것 같다.
다만 가로 카테고리가 문제로 언급되었는데, 카테고리가 눈에 띄게 변한 점은 없었다는 건 아쉬운 점이다.
'할인상품' 'EXCLUSIVE' 등의 필터를 적용할 수 있는 점이 좋았고, 품절 상품 제외 라디오 버튼은 생각하지 못한 부분이라서 센스있게 넣어주신 게 좋았다.
팀원 2카테고리가 더보기 아이콘을 통해서 팝업으로 뜬다는 점이 재밌었다. 검색 박스를 상단이 아닌 중앙에 넣는다는 상상은 못했는데, 생각보다 UI 라는 게 제한된 같은 기능이 들어가도 배치에 따라서 다른 느낌을 줄 수 있다는 걸 새삼 느끼게 됐다.
팀원 3위 팀원과 비슷하게 검색란을 중앙에 넣는 케이스를 찾아보고 싶다는 마음이 생겼다. 검색 칸에 텍스트 입력하는 액션 취할 때도 만들어 주셨다. 화면이 전환되지 않고 그 상태가 유지되면서 검색을 할 수 있는 것 같은데, 화면 반절을 이미 배너가 차지하고 있어서 다소 텍스트 크기가 작아질 것 같아서 그 부분이 조금 아쉬웠다. 왼쪽에 검색 버튼의 역할이 불분명해서 그게 없어진다면 그 라인의 복잡함이 다소 줄어들지 않을까?
마치며
텍스트의 볼드함의 정도, 굵기는 서비스 분위기와 성격을 인식하게 해주는 요소가 될 수 있다는 점.
서비스 플로우에 하나라도 어색한, 일반적인 구성이 아닐 때 사용자가 느낄 수 있는 부조화는 매우 크다는 거.
런드리고 스토어는 입점한 브랜드의 수 그리고 규모가 아직은 많이 크지 않아서 UX적 측면에서는 아쉬움이 컸던 것 같다. 덕분에 개선할 점을 단번에 찾을 수 있었다는 점이 좋았다. GUI까지 완성하지 못한 건 아쉽지만, 기능 추가와 구성 변경 만으로도 얻은 점이 많았던 스터디였다.
