brunch

라이킷 52 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김효진 Jun 28. 2021

모바일투썸이 '투썸하트'로 새롭게 업데이트되었다.

투썸하트 UIUX 분석하기

투썸플레이스를 방문하였다가 "지금, 투썸하트 앱을 다운로드하세요"라는 팜플랫을 받았다.

투썸하트? 원래 앱 이름이 투썸하트였나, 오랜만에 앱 스토어에서 투썸을 검색하게 되었다.

사실, 회사 근처에 제일 가까운 카페가 투썸이었기 때문에 아침에 투썸오더를 통해 커피를 미리 주문해 놓으려고 몇 번을 시도하였지만, 투썸오더가 지원되지 않는 매장이었고(투썸오더라는 시스템을 도입하였다면 전 매장이 시행될 것이라고 생각했지만, 지원되지 않은 매장이 은근히 많았다. 그렇다고 아침에 좀 더 멀리에 있는 투썸에 가는 건 아닌 것 같아 가까운 매장에서 현장 결제를 하였다.), 로그인이 되지 않거나, 디카페인 아메리카노는 매장에서만 주문할 수 있었고, 개인컵 주문은 받지 않는다는 다양한 이유 때문에 이용하지 않고, 결국 삭제를 해버린 아쉬움이 많이 남는 플랫폼이다.

6월 20일 새로운 버전으로 전면 수정되었기 때문에, 사용자의 불편사항을 얼마나 해소해줄지 내심 기대되었다.

이 글은 투썸하트를 분석하고, 동시에 개인적인 생각을 담은 글이다.

이 글의 목차

1. 모바일투썸에서 투썸하트로 변경된 이유

2. v3.0.0 새로운 기능

3. 앱 미리보기

4. 스플래시(Splash)

5. 앱 권한 정보

6. 온보딩(Onboarding)

7. 회원가입(Sign up)

8. 메인 페이지 ★

9. 투썸하트

10. 홀케이크 예약 ★

11. 마지막 한 줄

iOS 기준으로 작성되었다.

⁕ : 개인적 생각

1. 모바일투썸에서 투썸하트로 변경된 이유

앱 이름이 바뀐다는 것은 큰 이슈가 있지 않는 이상, 쉽게 변경할 수 있는 부분이 아니라고 생각하였기 때문에, 변경된 이유가 무엇인지 기사, 홈페이지 등에서 정보를 찾아보았다.

투썸플레이스는 이르면 내년 상반기 상장을 노리고 있다. 이를 위해 현재 기업가치 높이기에 역량을 집중하고 있는 상황이다. 특히 'CJ'의 색을 지우고 투썸 색 입히기에 속도를 높이고 있다. 현재 CJ그룹의 통합멤버십 서비스인 cjone 서비스를 내달 13일부로 종료하며 CJ그룹 임직원에게 부여되던 할인 혜택도 다음 달 중으로 종료한다는 방침이다.

투썸플레이스 관계자는 “CJ ONE 통합회원서비스(회원가입)는 종료 예정”이라며 “로그인, 쿠폰 이용 종료 계획은 현재 정해진 바 없으나, 향후 투썸플레이스 모바일앱과 멤버십 프로그램을 활성화할 계획”이라고 밝혔다.
투썸은 이르면 다음 달 중 새로운 자체 앱인 모바일투썸을 출시하고 자체 앱 강화에 나선다는 방침이다. 실제로 투썸은 지난해부터 모바일 애플리케이션 개발을 통해 비대면 주문 비중을 높이고 있다. 여기에 배달의 민족이나 요기요 등과 연계해 배달 서비스를 더욱 강화할 예정이다.

김윤섭, "이디야에서 투썸플레이스까지"… 커피 프랜차이즈 'IPO 레이스' 완주할까, 『FETV』,2021,05,28

투썸플레이스가 상장을 검토하지 않기로 결정했다. 대신 과감한 투자를 통한 기업 가치 및 브랜드 가치 증대에 집중할 계획이다.

독립된 브랜드로서 경쟁력을 키우기 위해 IT 인프라도 확충했다. 200억 원을 들여 내부 시스템을 구축하고 모바일 앱 등 향상된 고객 서비스를 준비해왔다. 올해 초에는 빅데이터 전담 조직을 설립하고, 데이터를 통해 꿈(Dream)을 실현한다는 의미에서 D-Center로 명명하기도 했다. 분사 이후부터 준비해온 새로운 모바일 앱과 멤버십 프로그램은 이달 내로 론칭할 계획이다.

김효혜, 강우석, [단독] 투썸플레이스, 상장 추진 안 한다,『매일경제』,2021,06,01

투썸플레이스는 이제 CJ와 제휴가 종료된다고 한다. 전화번호로 CJ 멤버십 정립은 6월 20일까지이며, 차근차근 홀로서기를 해나가고 있는 것 같다.

투썸하트 / 모바일투썸 리뉴얼 및 서비스 일시 중단 안내

2. v3.0.0 새로운 기능

4주 전까지만 해도 2.3.5 버전으로 정기적인 업데이트, 일부 기능 개선에서 그쳤지만, 6월 20일 3.0.0 버전으로 업데이트되었다. 개편 번호는 1로 시작하는데, 2에서 3으로 앞자리가 변경되었다는 것은 서비스 전체를 뒤엎을 변화가 생긴 것이다.

App Store - 투썸하트 / 버전 기록

3. 앱 미리보기

왼: 업데이트 전 '모바일투썸' 앱 미리보기 / 오: 업데이트 후 '투썸하트' 앱 미리보기

투썸하트 / 앱 미리보기

이제까지 투썸의 앱 미리보기 디자인은 주로 블랙, 화이트 배경에 기능 설명 텍스트, 목업으로 구성되어 있었다. 그러나 업데이트된 앱 미리보기의 배경에 퍼플이 등장하였다. 투썸에서 디자인 시스템을 오픈해 놓은 것이 아니기 때문에 정확한 이유는 알 수 없었지만, 18주년 기념 '미스터리 텀블러’ 이벤트에 대한 기사를 통해 추측해 볼 수 있었다.

투썸플레이스 / 투썸플레이스가 올해 크리스마스 시즌 테마인 '윈터 판타지'를 모티브로 겨울 시즌 기획상품을 순차 출시하였다.

이번 상품은 투썸의 올해 크리스마스 시즌 테마인 '윈터 판타지(Winter Fantasy)'를 모티브로 자유롭고 화려한 분위기의 퍼플과 세련된 톤의 연보라 색상을 활용했다. 추운 겨울 따뜻한 온기를 담아낼 폴딩 포트와 푸드자, 텀블러로 구성했다.

크리스마스 페스티벌의 분위기를 신비로운 '퍼플' 컬러

투썸의 이번 크리스마스 시즌 테마인 '퍼플'

밤하늘처럼 차분한 톤의 진한 '퍼플' 컬러

이지은, 투썸플레이스, 메인 컬러 '퍼플' 활용한 시즌 한정 MD 출시, 『위키트리』,2020,11,10

퍼플: 자유로움, 화려함, 신비로움, 차분한 밤하늘

⁕ 앱 미리보기에서 퍼플이 차지하는 범위가 넓다 보니, 앱 로고와 자연스럽게 이어지지 못하는 것 같아 아쉬웠다. 또한 앱을 실행시켰을 때 퍼플을 사용한 UI 요소가 없었기 때문에, 단순 앱 미리보기에서만 퍼플을 사용한 것이라면 좀 더 명확한 이유가 필요할 것 같다.

4. 스플래시(Splash)

투썸하트 Splash

⁕ 스플래시에 Main BI와 Emblem 모두가 있다 보니 투썸플레이스가 중복된다는 느낌이 들었다. 문제가 되지 않는다면, 흰색 배경에 투썸플레이스 BI 또는 Emblem만 있어도 좋을 것 같다.

투썸플레이스 홈페이지 / 투썸플레이스 소개

Main BI와 Emblem 둘 중에 하나만 사용한다면 어떤 느낌일지 작업해 보았다.

5. 앱 접근권한

투썸하트 / 앱 권한 정보 안내

앱 접근권한 안내는 법률에 의거하여 필수적이다.

정보통신망 이용촉진 및 정보보호 등에 관한 법률, 제22조의 2(접근권한에 대한 동의)에 따라 스마트폰, 태블릿 PC에서 사용할 수 있는 애플리케이션은 접근권한이 필요한 이유를 사용자가에게 알리고 접근권한 동의를 받아야 한다. 또한 선택 접근권한은 사용자가 동의하지 않아도 서비스를 이용할 수 있어야 한다.

투썸하트, 앱 설명 안에 앱 접근 권한 동의 규정 안내가 명시되어있다.

⁕ 앱 접근권한 안내에서 위치서비스(GPS)가 필수로 되어있었다. 이유를 살펴보니 주변 매장, 매장 검색 시 사용된다고 한다. 타사 서비스의 경우 위치정보 동의를 하지 않아도 홀케이크 예약, 사이렌 오더를 제외하고는 모든 서비스 이용이 가능하다. 하지만 투썸의 경우 로그인에서부터 접근을 막았다 “위치권한이 필요합니다. 설정을 변경하시겠어요?”

단순 등급 확인, 충전해 놓은 카드의 잔액 확인, 메뉴 검색만 하고 싶더라도 위치서비스가 허용되어 있어야 했기 때문에, 사용자가 선택할 수 있는 여지를 주지 않았다는 점에서 아쉬웠다.

6. 온보딩(Onboarding)

투썸하트 사용자 가이드

앱을 설치한 사용자에게 투썸의 핵심 기능(투썸하트, 투썸오더, 선물하기, 결제)에 대해 안내해준다. 총 6페이지로 이뤄져 있으며, 시작하기를 클릭하여 스킵도 가능하다.

7. 회원가입(Sign up)

7-1. 로그인 / 회원가입 - 약관 동의

투썸하트 / 회원가입 - 약관 동의

회원 가입하기 클릭 시 로딩 화면이 등장할 때가 있다. 로딩 화면을 통해서도 서비스의 특징을 나타낼 수 있는데, 투썸의 경우 커피와 케이크 일러스트를 활용하여 화면을 구성하였다. 로딩 시간이 오래 걸리지는 않았지만, 로딩이 될 때까지 사용자가 기다릴 수 있도록 유도하였다.

7-2. 회원가입 - 정보 입력

투썸하트 / 회원가입 - 정보 입력

⁕ 처음 정보 입력 페이지에 진입했을 때 타이틀(회원님의 소중한 정보를 입력해주세요.) 밑으로 보이는 4줄의 문장이 "입력해야 하는 정보가 많은 건가?", "어려운 문항이 있어 설명을 미리 읽어봐야 하는 건가?"라는 의문이 들게 하였다(읽어보기 전).

글을 분석해보면, 첫 줄을 제외하고는 마케팅 정보 수신에 관련된 내용이다. 항목 동의 여부는 뒤에 나오기 때문에 안내 문구또한 뒤로 옮겨, 사용자가 정보 입력 페이지에 처음 진입했을 때 부담을 느끼지 않도록 하는 방안을 생각해 보았다.

아이디, 비밀번호, 이메일을 입력해 주세요.

마케팅 정보 수신 항목에 동의하시면 다양한 이벤트, 신상품 등 여러 정보를 보내드립니다.

항목에 동의하지 않아도 서비스 가입 및 이용 가능합니다.

약관 동의 → 본인인증 → 정보 입력

본인인증 단계에서 이름, 휴대폰 번호, 생년월일, 성별을 이미 입력하였기 때문에 다음 단계인 정보 입력에서 이름, 휴대폰 번호, 생년월일, 성별은 자동 입력된다.

저장되어 있는 데이터를 불러오기때문에, 사용자가 입력하지 않아도 되는 정보를 표시할 때는 위의 이미지(투썸하트 정보입력 페이지)와 같이 표현하는 경우가 많았다.

PC에서 저장해놓은 아이디, 비밀번호를 불러오는 경우, 정보와 함께 form field에 색이 채워진다. 평소 자주 접할수 있는 부분이기때문에, 사용자에게 입력된 정보라는 것을 금방 환기시켜줄 수 있을 것이다.

W컨셉트 로그인 페이지 / 저장해놓은 아이디, 비밀번호를 불러올 경우 정보와 함께 form field에 색이 채워진다.

7-3. 즉각적인 피드백

투썸하트 / 즉각적인 피드백

제공된 데이터의 성공, 실패를 알릴 적절한 시기는 사용자가 정보를 제공 한 직후가 좋다.

또한 제공된 데이터의 정확성을 사용자에게 즉시 알려주기 때문에 실시간 인라인 검증이라고 할 수 있다. 이 접근 방식을 통해 사용자는 제출 버튼을 눌러 오류를 확인할 때까지 기다릴 필요가 없으며, 오류를 더 빨리 확인하고, 수정할 수 있다.

7-4. 회원가입 완료

투썸하트 / 회원가입 완료

8. Main Page ★

왼: 모바일투썸 로그인 전, 메인 페이지 / 오: 투썸하트 로그인 전, 메인 페이지

⁕ 업데이트 전, 투썸의 메뉴 전체를 알고 있는 사용자가 아닌 이상 아메리카노, 디카페인, 라떼 검색은 간단할 수 있지만, 시즌 메뉴, 기간 한정 메뉴, 신메뉴의 경우 어떻게 검색하면 좋을지 고민에 빠지는 경우가 생길 수 도 있다고 생각한다. 이번 업데이트를 통해 과감하게 검색창을 삭제하고, 사용자가 음료를 검색하는 방식에서, 신제품을 이미지와 함께 스와이프 하여 확인할 수 있게 한 점이 좋았다.

이벤트 배너의 경우 이전보다 훨씬 깔끔해진 것 같아 좋았다.

신규 메인 페이지는 현재 이벤트 배너와 신제품 소개가 전부이지만 계속 유지할 것인지, 베스트 제품, 홀케이크 소개와 같은 콘텐츠가 더 늘어날 것인지 다음 업데이트가 궁금해진다.

왼: 로그인 전, 메인 페이지 / 오: 로그인 후, 메인 페이지

⁕ 투썸 신메뉴의 경우 로그인 후 메인 페이지에서 확인할 수 없어 아쉬웠다. 예를 들어 등급, 기프트카드 잔액만 확인하러 들어왔지만 메인에 시즌 한정 메뉴인 수박배주스, 수박주스 이미지가 보인다면 오더로 이어질 수 있다고 생각한다. 실제로 앱에서 수박배주스, 수박주스 콘셉트 이미지가 매우 시원한 느낌을 주었다.

8-1. Tab bar → 햄버거 메뉴(Drawer menu)

왼: 기본 햄버거 메뉴 / 오: 스크롤하여 햄버거 메뉴의 더 많은 정보 확인

기존 탭 바를 없애고 모든 정보를 햄버거 메뉴에서 확인할 수 있게 변경되었다.

⁕ 아이폰 xs기준 햄버거 메뉴에 많은 정보가 있었지만 더 많은 콘텐츠가 있음을 예상할 수 있는 시각적인 단서가 없어 스크롤을 뒤늦게 하였다.

마이페이지의 경우 전자영수증, 현금영수증, 닉네임 설정들 다양한 기능을 가지고 있지만 상대적으로 밑에 자리하고 있다 보니, 마이페이지 찾기가 쉽지 않았다. "ooo 님의 현재 등급은 ooo입니다." 이 부분은 스크롤하더라도 고정이기 때문에, 이름을 클릭하면 마이페이지로 이동할 수 있게 하면 좋을 것 같다는 생각을 하였다. 현재는 클릭 요소가 아니다.

8-2. 즐겨찾기

투썸하트 / 투썸오더에서 즐겨찾기 설정해놓으면 메인에서 확인할 수 있다.

좋아하는 메뉴를 즐겨찾기에 추가할 수 있는 방법은 투썸오더에서만 가능하다. 투썸 오더에서 즐겨찾기를 추가하면 메인에서 확인할 수 있으며, 바로 주문하기도 가능하다. 최대 3개까지 메인에서 확인할 수 있으며, 반복적인 뎁스를 거치지 않아도 메인 페이지에서 내가 좋아하는 메뉴를 바로 주문할 수 있어 좋았다.

9. 투썸하트

투썸하트는 결제 시 하트를 적립하여 혜택으로 돌려드리는 멤버십 서비스이다.

투썸하트 WHITE / BLACK / RED 등급

⁕ 정립된 하트의 숫자보다 하트 아이콘이 더 큰 비중을 차지하기 때문에, 자연스럽게 사용자의 시선은 하트로 향할 것이다. 그러나 하트의 수가 증가하더라도 숫자에만 변화가 있을 뿐, 하트에는 변화가 없다. 하트 정립 시 모으는 재미를 더하기 위해, 즉각적으로 하트가 다음 등급의 색으로 채워지는 모션이 있으면 좋지 않을까 생각해 보았다. WHITE 등급은 5개만 모으면 되지만 BLACK 등급의 경우 20개를 모아야 하기 때문에, 사용자가 지루해하지 않게 채워나가는 재미를 더해주면 좋을 것 같다.

하트를 모으면 이렇게 다음 등급으로 채워지는 모션이 있으면 어떤 느낌일지 궁금하여 작업해보았다.

10. 홀케이크 예약 ★

⁕ 아쉬웠던 점은 운영시간이 아니라면 홀케이크 예악 탭 자체가 활성화되지 않았다. "주문 가능한 매장이 없습니다."라는 모달이 등장하였다. 그렇기 때문에 사용자가 홀케이크 메뉴가 궁금하다면 영업시간 이외에는 홈 → 햄버거 메뉴 클릭 → 맨 밑에 메뉴 소개 → 기본 설정(커피&음료) 변경 → 메뉴 선택에서 커피&음료 선택 해제 후 케이크 선택 → 확인을 거쳐야 했다.

홀케이크 예약이 단순 예약 목적이 아닌 홀케이크 메뉴 둘러보기, 검색의 기능도 함께 가지고 있을 것이라고 생각하기 때문에, 영업시간 이외에는 사전 예약 주문을 받지 않더라도 홀케이크 예약 텝 선택 시 케이크 확인은 할 수 있도록 하면 좋을 것 같다.

또한 사용자 리뷰(App Store, Google Play)를 확인해 보면 홀케이크에 대한 문의사항이 많았다. 그만큼 관심과 수요가 높다고 생각한다. 그러나 홀케이크 예약을 하려면 홈에서 스와이프 하여 마지막 탭을 선택해야 한다. 그렇기 때문에, 홈 메뉴 탭 순서를 투썸오더, 홀케이크 예약, 쿠폰, 선물하기, 스탬프로 구성하면 좋을 것 같다는 생각을 하였다.

10-1. 홀케이크 선택

투썸하트 / 홀케이크 예약 - 케이크 선택

업데이트 전 / 모바일투썸 - 홀케이크 예약

⁕ 홀케이크 예약 페이지가 업데이트되면서 깔끔해지고, 효과적으로 정보전달을 하는 것 같다.

나는 이미지 나열의 경우 원형으로 이미지를 보여주는 것보다는 사각형으로 보여주는 것을 선호한다. 이유는 원형으로 이미지를 자르게 되면 배경이 많이 잘리게 되는데, 상품에 따라 촬영 콘셉트, 소품 기획에 많은 투자를 하는데 비해 이런 부분이 담기지 않을 수 있기 때문이다.

또한 업데이트 전, 레드의 비중이 매우 크게 느껴졌다. 리스트마다 생성되어있는 주문예약 버튼, 가격, 가까운 매장 거리 표시, 가까운 매장 위치 아이콘, Tab bar의 홀케이크 예약 버튼 활성화, 변경 버튼 전부 레드였다. 채도가 낮은 레드이기 때문에 과하게 사용한다면, 자칫 앱의 전체 분위기가 칙칙해지고, 시선이 분산될 수 있다. 반면 업데이트를 통해 포인트 컬러를 최대한 절제했고, 무채색을 주로 사용하여 깔끔한 이미지를 주었다.

10-2. 장바구니