[레퍼런스 분석] 오늘수거 UXUI 분석

 

0. 대상 서비스

 

출처 : https://www.sugeo.onl/onl-story

 

어글리랩이 운영하는 <오늘수거>는 쓰레기를 현관문 앞에 내놓으면 알아서 수거해가는 서비스다. 

오늘수거에서 제공해주는 검은색 큰 봉지 혹은 박스에 쓰레기를 담으면 되는데 이때, 따로 분리수거를 할 필요가 없다는 점이 바쁜 현대인들에게 매우 매력적인 요소로 다가온다. 심지어 음식물 쓰레기도 흐르지 않게 잘 묶기만 한다면 오늘수거에서 제공하는 봉지에 담아서 그냥 문 앞에 내놓으면 된다.

 

이렇게 수거해간 쓰레기들은 어글리랩의 '리사이클링 허브'에서 4단계의 전처리 공정을 통해 재활용이 가능한 원료로 탈바꿈된다. 

사용자에겐 극도의 편리성을 제공함과 동시에 사회적으로도 좋은 영향력을 미치는 서비스인 셈이다.

필자 역시 2023년 7월부터 지속적으로 사용하고 있는 서비스 <오늘수거>의 앱 UXUI를 분석해봤다.

 

 

1. 화면 구성 

 

오늘 수거 앱의 주요 랜딩 페이지들은 다음과 같다.

bottom bar를 각각 클릭했을 때의 랜딩 페이지

 

이 중 서비스의 주요 지표와 매출이 발생하는 <수거신청>의 퍼널을 들여다보면 다음과 같다.

<수거신청> 퍼널

 

Bottom bar에서 수거신청 클릭 후 완료까지 7단계가 있다.

쿠팡은 구매 클릭 후 완료까지 2단계, 29cm가 약 3단계를 거치는 것에 비하면 긴 편이다. 이커머스 도메인과 단순 비교하기 애매한 면이 있기는 하지만 그걸 감안하더라도 퍼널 자체는 분명 긴 편이다.

 

그러나, 주소와 결제 카드를 한 번 등록해뒀다면 위 과정이 체감상 그리 길게 느껴지지는 않는다.

보이는 것처럼 주관식이나 서술형으로 텍스트를 기입하는 게 아니라 전부 클릭만 몇 번 하면 되는 간편한 방식이라 중간 단계에서 이탈이 많이 발생할 것 같지는 않아보였다. 

그동안 분석가로 일하면서 경험했던 이탈이 많이 발생한 핵심 퍼널(ex. 구매 퍼널)의 구간은 보통 '이용자가 텍스트를 직접 입력해야 하는 단계' 혹은 '선택해야 하는 것들이 특정 페이지에 마구잡이로 몰려 있거나' 혹은 '혼동을 주는 UI가 반복되는' 경우였다.

이러한 관점에서 수거신청 퍼널은 단계가 길기는 하지만 크리티컬한 이탈이 발생하는 구간은 없다고 판단했다.

 

2. 서비스 주요 타겟 

 

오늘수거의 주요 사용자층은 아마 다음과 같지 않을까 추정한다.

(1) 직장을 다니고 있는 2030 1인 가구

(2) 친환경, 소셜 임팩트에 관심이 많은 사람 등

 

이외에도 오늘수거는 기업 고객을 대상으로도 서비스를 제공 중인데 본 글에선 개인 고객들만 대상으로 삼는다.

 

 

3. 문제 정의 및 가설 설정

(1) 문제 정의를 위한 탐색

1번 화면구성 부분에서 언급했던 수거신청 퍼널처럼 개선하면 좋을 것 같은 포인트가 여럿 있었지만, 좀 더 근거가 있는 개선 포인트를 발견하고 싶은 마음에 앱 리뷰를 둘러보았다.

그리고 유독 반복적으로 등장하는 불만 포인트가 있었는데 바로...

 

서비스 제공 지역이 '서울' 한정이라는 걸 몰랐다.

Google PlayStore 리뷰 중 일부

 

현재 오늘수거는 '서울 지역'에서만 한정적으로 이용이 가능한 상태다. 

서울에 거주 중이고 이미 1년 5개월 전부터 서비스를 이용해왔던 나는 겪지 못했던 불편함인데 위 리뷰들을 보고 아래와 같은 생각이 들었다.

 

Q1)  정말 가입 이전에 이용 가능한 지역을 확인할 수 없는걸까?
>> 가입 이전에 이용 가능 지역을 확인할 수 없다면 가입 단계에서 이용 가능 지역을 인지시켜야 한다.

Q2) 가입 이전에 이용 가능한 지역을 확인할 수 있으나 어떠한 이유로 인해 이용자들이 확인을 하지 않고 있다.
>> 이용 가능 지역을 확인할 수 있는 기능이 잘 보이지 않거나 직관적으로 인지할 수 없는 상태일 것이다.

 

 

(2) 문제 정의를 위한 검증

Q1) 정말 가입 이전에 이용 가능한 지역을 확인할 수 없는걸까?

>> 기각. 확인할 수 있다. 

(좌)미가입 이용자가 서비스 진입 시 마주하는 첫 화면 / (우)이용지역 버튼 클릭 시 마주하는 화면

 

로그아웃 상태에서 오늘수거 서비스에 진입했을 때 처음 마주하는 화면으로 가입/로그인 기능 상단에 보라색의 '이용지역' CTA를 확인할 수 있었다. 그리고 이용지역 버튼을 클릭하면 서울 지도와 함께 서비스가 한정적으로 진행되고 있음을 알 수 있다.

그렇다면 여기서 두 가지 세부 가설이 발생한다.

• 첫째, 원래 위 페이지에 이용지역을 확인할 수 있는 버튼이 없었는데 최근에 생겼다.
• 둘째, 기존에도 위 페이지처럼 이용지역을 확인할 수 있는 버튼이 있었지만 이용자들이 인지조차 하지 못했거나 클릭하지 않았다.

둘 중 첫 번째가 맞다면 앱 리뷰에서의 불만 사항들은 해당 기능을 제공하지 않았던 시기에 생겼던 리뷰였을 것이다.

다만, 이건 내부 사정을 모르는 외부인으로서 확인할 방법이 없다보니, 어쩔 수 없이 두 번째 가설이 맞을 것이라 추정할 수밖에 없었다.

또한, 미가입자가 마주하는 화면을 확인하기 위해 로그아웃을 하고 첫 화면에 랜딩 후 가입 퍼널을 경험할 때 나 역시 놀랍게도 처음에는 위의 두 보라색 버튼을 인지하지 못했었다. 그래서 두 번째 가설이 유력할 것이라 생각했다.

 

이 추측에 대한 근거를 좀 더 만들기 위해 주변 지인들에게 배경을 미리 얘기하지 않고 오늘수거를 가입해보라고 요청했다.

 

 

Q2) 가입 이전에 이용 가능한 지역을 확인할 수 있으나 어떠한 이유로 인해 이용자들이 확인을 하지 않고 있다.

>> 채택

 

 

 

친한 지인 두 명에게 아무런 배경과 맥락을 설명하지 않고 그냥 평범하게 평소 앱 가입하듯이 가입해보라고 했다. 매우 적은 표본이라 신뢰도에 있어서 한계가 분명하지만 그럼에도 불구하고 2가지 인사이트를 얻을 수 있었다.

 

먼저, 해당 버튼이 화면에 떡하니 있음에도 불구하고 있었다는 사실조차 인지하지 못하는 이용자들이 있다(나 포함).

그리고 버튼이 있다는 걸 인지했더라도 일단 가입을 하고 메인화면으로 넘어간 후에 지역을 입력하는 이용자가 있다.

 

둘 중 어느 경우에 속하더라도 어쨌든 가입을 한 이후에나 이용지역을 확인한다는 것이고, 그렇게 될 경우 '속았다'라는 불쾌한 경험을 할 가능성이 높아질 것이다.

 

그렇다면, 둘 중 어느 경우가 서비스 관점에서 더 크리티컬할까?

후자의 경우 버튼을 봤음에도 자의적으로 클릭을 하지 않은 반면, 전자는 버튼을 인지하지 못하고 지나쳤기 때문에 속았다는 부정적인 감정을 더 크게 느낄 것이다.

 

 

 

 

이를 바탕으로 아래와 같이 문제를 정의하고 가설을 설정하였다.

(1) 대상
- 미가입 신규 유저

(2) 구체적인 문제
- 현재 오늘수거는 '서울 지역'에서만 이용 가능한 서비스이다.
- 이 사실을 가입 후에 알아차리고 뒤늦게 탈퇴 혹은 앱 삭제를 하는 신규 유저들이 존재한다.
- 미가입 신규 유저가 최초로 마주하는 화면에 <이용지역>이라는 버튼이 있으나 이를 인지하지 못하고 가입 단계로 넘어가버리는 유저들이 존재한다.
- 서울 외 지역 거주 중인 유저들은 '앱 설치'와 '가입'이라는 2개의 적극적인 액션을 거쳤음에도 이용을 하지 못한다는 (속았다는) 불편한 경험과 함께 이탈하고 만다.

(3) 가설
- 미가입 신규 유저가 가입 이전에 <이용지역>을 인지할 수 있다면 속았다는 불쾌한 경험을 줄일 수 있을 것이다.

(4) 기대효과
- 탈퇴율 감소
- 향후 서비스 이용 지역 확대시 잠재적 이용 유저 확보 기대

 

 

4. 개선 방안

 

Figma로 제작

 

(1) AS-IS

1. 시각적 우선순위 부족
   기존의 ‘오늘수거 미리 알아보기’ 버튼과 '이용지역' 버튼, 그리고 소셜 로그인 버튼 간에 위계가 불분명하다고 느꼈다. 
   검은색 배경과 하얀색 배경이 위아래로 붙어서 대조를 이루는 상황에서 자연스레 시선이 하얀 배경의 카카오 로그인 버튼과 네이버 로그인 버튼으로 향했는데, 이게 의도한 것인지도 궁금하다. 만약 의도한 것이라면 서울 외 지역의 유저들이 겪을 부정적인 경험을 유도한 것으로 볼 수밖에 없어서 의도한 것은 아닐 것 같다. 
   한편으로는 검은색 배경에 연보라색 버튼으로 디자인된 이유도 궁금하다. 저 색상이라서 눈에 더 띄지 않는 것 같은데 이건 디자인적 지식이 부족한지라 명확하게 설명은 못 하겠다.
   
   
2. 컨텍스트 부족
   ‘이용지역’ 버튼의 텍스트가 구체적인 행동을 유도하지 못하고 다소 추상적으로 느꼈다. '이용지역'이라는 단어는 사용자의 구체적인 행동을 연상케하지는 않아 해당 버튼을 인지했더라도 그냥 스쳐지나갈 수 있을 것 같다. 
   
   
3. 많은 요소로 인한 노이즈
   클릭 요소와 텍스트 요소가 여기저기 산재해있다고 느꼈다. 챗봇으로 연결될 수 있는 우측 최상단의 아이콘과 두 개의 보라색 버튼, 그리고 SNS 로그인 가능 여부를 알려주는 'SNS 계정으로 간편하게' 텍스트와 카카오/네이버 로그인 버튼, 마지막으로 또 챗봇으로 연결될 수 있는 최하단의 버튼까지.
   로고와 이미지를 제외하면 총 7개의 요소가 있는데 첫 화면이라고 하기엔 사용자가 선택할 수 있는 요소가 많은 것 같다. 동일한 기능을 하는 중복 요소도 있어서 이런 요소들을 좀 줄여서 사용자의 선택권을 줄여주고 집중해야 하는 요소들만 남기는 게 좋을 것 같다.

 

(2) TO-BE

변경한 디자인의 의도와 목표는 다음과 같다.
⓵ 사용자들이 가입 전에 봐야할 내용들을 확인하게 만드는 것

⓶ 그걸 잘 확인한 다음 가입한 사용자들은 적어도 이용 지역 제한이란 이유 때문에 탈퇴하지 않을 것

 

1. 이미지 제거 및 배경색 통일
   해당 화면은 미가입 유저들이 앱 진입 시 최초로 보는 화면으로 제공해야 하는 기능들이 명확해야 한다. 
   기존에 해당 화면에 삽입돼있던 이미지는 리사이클링 브랜드라는 것을 다시 한 번 드러내기 위한 목적이었다고 생각하는데, 사실 오늘수거 앱을 설치한 유저들은 이미 그 사실을 알고 있는 상태로 들어오는 경우가 많을 것이라 굳이 이미지가 필요한가 싶었다. 무엇보다도 이미지 때문에 정말 사용자들이 확인해야 할 내용들(버튼)의 우선순위가 분산되는 느낌이었다. 이런 이유로 기존의 이미지는 제거했다.
   
   또한, 배경색을 검은색으로 통일했다. 기존에는 검은색과 하얀색이 같이 대조를 이루던 상황이었는데 그렇다 보니 산만한 느낌이 들었고 시선이 분산됨을 느꼈다. 이런 이유로 배경색을 하나로 통일하고자 했는데 로고가 하얀색이므로 배경색을 검은색으로 통일하였다. 
   
   
2. '오늘수거 미리 알아보기'와 '이용지역' 버튼의 색상 및 위치 변경
   내부 데이터를 봐야 알 수 있는 부분이지만, 아마도 기존의 디자인에선 '오늘수거 미리 알아보기'와 '이용지역' 연보라색 버튼에 대한 클릭률 자체가 낮았을 것으로 추측한다. 그게 맞다면 실제 가입자들 중에선 이용지역 제한으로 인해 서비스를 이용할 수 없는 사용자들도 적지 않았을 것이다. 
   변경된 디자인에서 가장 중요한 것은 '이용지역 제한으로 인해 서비스를 이용할 수 없는 사용자들에게 이 사실을 미리 인지시키고 가입에 대한 선택권을 제공'하는 것이었다. 즉, '현재는 서울에만 서비스를 제공하고 있는데 그래도 가입할거야?'라는 질문을 가입 이전에 먼저 사용자들에게 던지고, 사용자는 이에 대해 '그래도 일단 가입하고 우리 지역으로 서비스 확대될 때까지 기다릴래' 혹은 '그래? 그럼 가입 안 할래'와 같은 선택을 할 수 있게끔 만드는 것이었다.
   
   따라서 '오늘수거 미리 알아보기'와 '이용지역' 버튼을 시선이 많이 가는 화면 중간의 살짝 아래쪽에 위치시켰다. 
   또한, 기존의 '이용지역'을 '서비스 가능 지역 보기'로 변경하였다. 구체적인 행동을 텍스트로 반영함으로써 사용자의 행동을 유도하고자 했다.
   색상 역시 변경하였다. 해당 버튼들은 현재 브랜드에 대한 내용을 담고 있으므로 연결성이 필요하다고 생각했다. 그래서 로고의 주황색을 반영했다.
   
   
3. 요소 축소
   'SNS 계정으로 간편하게'라는 텍스트를 제거했다. 사용자들은 오랜 앱 사용 경험을 바탕으로 노란색 배경의 카카오 아이콘과 초록색 배경의 네이버 아이콘만 봐도 소셜 로그인 버튼이라는 걸 잘 인지한다. 
   또한, 'Kakao로 로그인하기'와 'Naver로 로그인하기' 텍스트를 제거한 후 원형의 작은 아이콘으로 변경하였다. 이유는 위와 동일하다.
   마지막으로 최하단에 위치했던 '가입에 어려움이 있어요' 버튼을 삭제했다. 해당 버튼을 클릭하면 우측 최상단에 위치한 아이콘과 동일하게 챗봇으로 연결된다. 굳이 동일한 기능을 하는 버튼을 중복으로 넣을 필요가 없다고 생각했다.

 

 

5. 액션 아이템

AB 테스트로 가설 검정

 

AB 테스트를 통해 변경한 디자인이 기존 디자인보다 '더 나은지'를 검증해볼 수 있다.

여기서 '더 낫다'라는 기준은 다음과 같다.

 

서비스 가능 지역 외에 거주 중인 사용자들의 불쾌한 경험을 감소시킨다.

 

 

AB 테스트는 인과관계를 확인하기 위해 많이 활용한다. 즉, 특정 요소의 변경이 결과에 인과적인 영향을 미치는지를 보기 위한 방법이다. 이런 이유로 AB 테스트는 보통 '1개의 요소만을 변경'해서 진행하는 게 가장 깔끔하다. 변경 요소 외의 모든 요소들이 통제되어야 결과가 해당 요소로 인한 것인지를 확인할 수 있기 때문이다.

 

그러나, 이번 디자인 변경은 여러 요소들의 변화가 담겨 있다. 따라서, 이 AB 테스트를 통해 특정 버튼의 변화나 기능의 변화에 따른 인과적인 영향을 볼 수는 없다. 다시 말해 결과 지표를 견인한(혹은 하락시킨) 요소가 '서비스 가능 지역 보기' 버튼 때문이라고 특정할 수 없다는 것이다.

결국 실험의 결과로 알 수 있는 것은 '특정 버튼의 변화가 아닌, 변경된 전체 디자인으로 인한 결과'이다. 간혹 실무에서 AB 테스트를 진행하다 보면 여러 요소들이 변경되었음에도 결과를 해석할 땐 본인이 원하는 방향으로 해석하는 경우가 있는데 이는 잘못된 의사결정으로 이어질 수 있음으로 경계해야 한다.

 

AB 테스트를 통해 확인하고자 하는 것은 다음과 같다.

(1) A군 : 기존 디자인으로 유입된 미가입 사용자
(2) B군 : 변경된 디자인으로 유입된 미가입 사용자
(3) 가설 : B군 가입자들의 가입 후 1일 이내 탈퇴율이 A군보다 낮을 것이다.
(4) 지표
- Success Metric : (1 - 신규 가입자 중 가입 후 1일 이내 탈퇴자 비율)
- Sub Metric : 이용지역 버튼(B군에선 서비스 가능 지역 보기 버튼) CTR
- Guardrail Metric : 가입 전환율 (해당 페이지 진입 유저 수 대비 가입 전환율)

 

변경된 디자인에서 이용 가능한 지역을 확인했음에도 가입을 하는 사용자들은 그걸 감수하고 가입한 것이므로 탈퇴율이 기존보다 낮을 것이다. 가입 후 '1일'은 사실 내부 데이터를 확인할 수 없기 때문에 추정해서 넣은 수치이다. 정확하게 보려면 가입 전에 '이용지역' 버튼을 클릭하지 않고 가입한 후 탈퇴한 사용자들의 탈퇴 duration을 확인해야 한다.

 

결과에 대해 좀 더 디테일하게 보려면 보조 지표로 A군의 이용지역 버튼 CTR과 B군의 서비스 가능 지역 보기 버튼의 CTR을 볼 수도 있다. 변경된 디자인에서의 '서비스 가능 지역 보기' 버튼 클릭률이 기대만큼 높지 않을 수 있다. 만약, 기존 디자인에서의 버튼 클릭률과 비슷한 수준이라면 Success Metric을 잘못 해석하게 될 여지가 있다. 따라서, 해당 지표롤 보조 지표로 가져가 결과를 다각도로 해석하는 게 좋다.

가드레일(하락해서는 안되는 지표) 지표는 가입 전환율로 가져갈 수 있다. 변경된 디자인이 사용자들에게 가입 전 서비스 가능 지역을 인지시킬 수 있는 게 맞다면 기존보다 가입 전환율이 하락할 수 있다. 그러나, 가입 전환율이 좀 떨어지더라도 정말 활동 의지가 있는 사용자들(즉, 인텐드가 높은 유저들)의 가입이 중요하다면 이 지표는 가드레일 지표로 가져가지 않아도 된다.