야쿠르트 말고 다른 것도 팔아요!
'프레딧' UI/UX
[코드스테이츠 PMB 16기] W4D1
＃ 아래의 내용은 코드스테이츠 PMB 16기 과정 중 일간 과제를 수행하기 위한 학습 과정입니다.
＃ 오늘 UI/UX에 대해 처음 학습했기 때문에 초보 수준의 정리가 될 수 있습니다.
＃ 목표 : 다양한 서비스를 살펴보고 UI/UX에 대해 정리하기
✔ 시작하며
야쿠르트 아줌마~♪ 야쿠르트 주세요~♪
야쿠르트 없으면~♪ 요쿠르트 주세요~♪
이 노래를 아시나요?
아신다면 아마 이 글을 보고 계시는 분들은 내적으로 흥얼거리고 있을 겁니다. 이 노래를 부르면서 친구들과 야쿠르트가 맞냐, 요쿠르트가 맞냐 하며 논쟁이 붙었던 게 엇그제 같은데, 벌써 시간이 흘렀습니다.
어릴 적 밖에서 놀고 돌아오면, 냉장고에서 하나 꺼내마시고, 굳이 밑부분을 이빨로 뜯어서 먹기도 하고, 얼려도 먹었던 이 음료는 지금까지 누적 판매량 500억 병, 국민 1인 당 1,000병을 마신 국민 유산균 음료가 되었습니다.
이런 야쿠르트는 동네 마트에서도 판매했지만, 이른 바 '야쿠르트 아주머니'들을 통해 국민 유산균 음료가 될 수 있었다고 이야기하기도 합니다. 70~80년대 부터 당시 머스타드색 복장과 깔맞춤한 야쿠르트 카트를 끌고 동네를 구석구석 누비며 시장 점유율을 끌어올렸습니다. 요즘으로 따지면 D2C의 형태로 판매망을 구축한 것입니다.
최근에는 시대가 변화하면서 직접 끌고다니던 카트는 기계식 전동카트로 변경되었고, 여름이나 겨울에는 가림막을 설치해 야쿠르트 아주머니(현 프레시 매니저)의 근무 여건도 훨씬 좋아졌습니다. 그리고 프레시 매니저가 고객이 앱을 통해 주문하면 직접 배송을 해주는 시스템도 생겨나게 되었습니다.
오늘 이야기 할 '프레딧'은, 한국야쿠르트(hy)가 만든 야쿠르트를 포함한 다양한 건강식품을 판매하는 B2C 앱 서비스입니다.
저는 지난 주 집 근처에서 판매하고 계시던 프레시 매니저 분께 정말 우연히 유산균 음료를 구매한 일이 있었는데요. 늘 마트에 가서 유산균 음료를 구매했던 저는, 살면서 한번도 직접 구매한 적이 없었지만 그 날은 무슨 용기인지 성큼 걸어가서 상품을 구매한 뒤로, 꽤나 짜릿하고 신선한 경험에 '앞으로도 이용해볼까?' 하고 설치하게 된 서비스입니다.
오늘은 코드스테이츠 PMB에서 배운 내용을 기반으로 프레딧의 UI/UX를 살펴보도록 하겠습니다.
✔ 왜 프레딧이야?
＃ 해당 서비스를 왜 선택했는지 설명합니다. 구체적으로 작성해주세요.
프레딧 소개 - 출처 : 부산일보위에서도 언급했었지만, 이전에는 이런 서비스가 있는 지도 모르고 있다가, 1주일 전 겪었던 우연찮은 경험으로 해당 서비스를 알게 되었습니다. 평소에도 유산균을 종종 챙겨먹는 저는, 파우더 형태의 유산균을 선호하지 않아 발효유의 형태로 된 제품을 선호하는 편입니다. 그런 제품을 파는 서비스여서 선택하게 되었습니다.
이외에도 신선함이 생명인 상품들(샐러드, 계란, 우유, 밀키트 등)을 중심으로 상품을 판매하고 있는 것을 보면, 종합몰에서 구매하는 것보다 조금 더 신경을 쓸 것 같은 감정을 불러일으키고, 그동안 hy(한국야쿠르트)가 갖고 있던 기업 이미지를 기반으로 조금 더 믿고 구매의사가 생기는 것 같습니다.
직접 앱을 통해 아직 실제로 주문을 해보지는 않았지만, 앱 내 제품 가격을 보면 (요구르트 기준) 새벽배송이나 마트에서 구매하는 것보다 가격이 똑같거나 오히려 조금 저렴했습니다. 그리고 무료배송 혜택도 제공하고 있었습니다.
그리고 제품을 배송할 때 동네마다 계시는 프레시 매니저들이 직접 집 앞까지 배송을 해주는 시스템이기 때문에, 기존 택배보다는 조금 더 정성스러운 느낌을 받게되는 것 같습니다.
✔ 프레딧의 UX 뜯어보기
＃ 해당 서비스의 좋은 UX와, 아쉬운 UX를 각 3가지 이상 작성합니다.
○ 좋았던 UX
1) 알뜰하게 구매하기
앱 설치 후 랜딩 페이지에서 우측 하단 '장바구니'를 클릭하면, 위와 같은 이미지가 뜨게 됩니다.
프레딧 앱에서 원하는 목표인 회원가입을 유도하기 위해, 회색인 비회원 표시에 비해 초록색으로 강조하여 로그인 후 알뜰하게 구매하기 부분을 표기하였습니다.
그리고 로그인(회원가입)을 하면, 더 저렴하게 구매할 수 있다는 것을 소비자 심리에 심어주기 위해 알뜰하게 라는 키워드를 삽입하였습니다. 실제로 회원가입을 하면 다양한 쿠폰들을 제공합니다.
2) 카카오톡에서 선택
프레딧에서 판매하고 있는 상품을 다른 사람에게 선물할 때 볼 수 있는 페이지입니다. 보시다시피 익숙한 UI 구성을 토대로 구성해놓았습니다. 카카오톡 선물하기에서 선물을 결제하기 전 페이지와 비슷한 구조입니다.
대중적인 선물하기 서비스의 UI 구조를 가져와서 프레딧만의 방식으로 풀어놓았지만, 고객 경험 차원에서 카카오톡 선물하기와 비슷한 경험을 주려고 하였습니다. 또한 프레딧 선물하기 좌측 하단에 '카카오톡 선물하기'를 디폴트로 선택해놓았습니다. 고객의 입장에서 익숙한 UI 구조를 기반으로 바로 카카오톡을 통해 선물할 수 있도록 유도하고 있습니다.
3) 하단 카테고리
프레딧은 하단 네비게이션 바에 카테고리 탭을 배치하였습니다. 일반적으로 카테고리 탭은 좌측 상단에 배치하는 경우가 많습니다.(하단 이미지 참조) 하지만, 아래에 카테고리 탭을 배치하면서 고객이 손을 추가적으로 이동하지 않아도 하단에서 일반적으로 스마트폰을 잡고 있는 상태에서 왼손 엄지손가락만으로 조작이 가능합니다.
○ 아쉬운 UX
1) 짤리는 주소
저의 집 주소는 꽤 긴 편입니다. 개인정보라 어쩔 수 없이 모자이크 처리를 했지만, 크레딧의 경우 주소가 길면 뒷부분은 짤려서 표시가 됩니다.
→ 개선방안 : 주소가 나오는 표시방식을 1줄 표기 방식에서, 2줄 표기 방식으로 변경하여 짤림 없이 표시
2) 이 바코드는 어디에 쓰는 거에요?
하단 네비게이션 바를 통해 '마이프레딧' 탭에 들어가면 뜨는 화면입니다. 이 부분에는 (모자이크 처리 된) 바코드가 있는데, 앱을 처음 설치하는 고객의 입장에서 바코드가 눈에 잘 띄는 부분에 있는데도 불구하고, 바코드와 바코드 넘버 외에는 어떠한 설명도 되어있지 않아 고객의 입장에선 용도를 알 수가 없었습니다.
→ 개선방안 : 마이프레딧 창(좌)에서 바코드를 터치하면 뜨는 바코드가 확대되는 상세 화면(우)에 바코드에 대한 설명을 텍스트로 표기
3) 저도 좋은 쿠폰 있으면 등록하고 싶어요...
좌측 이미지는 프레딧의 '보유 쿠폰' 확인을 위한 페이지고, 우측은 제가 자주 이용하는 '이마트' 앱입니다.
프레딧의 경우 쿠폰 등록란을 상단에 배치해놓았지만, 일반적으로 앱 설치를 하는 고객들이 쿠폰을 등록하기보다는, 보유하고 있는 쿠폰을 확인하는 용도로 사용합니다. 먼저 고객에게 현재 보유한 쿠폰을 보여주고 쿠폰을 사용할 수 있도록 유도하는 것이 고객 경험 측면에서 도움이 되지 않을까 싶었습니다.
→ 개선방안 : 쿠폰등록은, '내 보유 쿠폰', '이달의 쿠폰' 우측에 '쿠폰등록' 탭을 별도로 제작하여 거기서 쿠폰등록을 할 수 있도록 기능 개선, 사용가능 쿠폰 결제 시 자동 적용(이마트 앱 참조)
