–
1.스타벅스 앱, 대대적인 변화
스타벅스 앱이 정말 오랜만에 개편되었어요.
- 홈 화면
- 사이렌 오더 포함 주문 화면
- 카드 관리 화면
등 크게 세 가지에 초점이 맞춰진 모습입니다.스타벅스가 직접 소개한 내용은 아래와 같은데요.
- 스타벅스의 다양한 메뉴와 새소식을 바로 볼 수 있는 Home
- 스타벅스의 오프라인 결제수단을 한 곳에 모은 Pay
- 직관적이고 간편해진 Order (사이렌 오더)
점진적 배포가 이뤄지고 있는 최신 버전의 앱, 어떻게 변경되었는지 이전 버전과 비교하며 간략하게 살펴보겠습니다. 스타벅스의 의도가 잘 담겼는지도!
(1)홈화면
재택을 오래하고, 카페에 한동안 방문 할 수 없었던 탓에 스타벅스 레벨은 골드에서 떨어진 지 오래. 기존 홈 화면에서는 사용자 현재 레벨 확인과 최근 충전한 카드, 사이렌 오더와 쿠폰 확인 등 개개인이 스타벅스를 이용하며 자주 활용하는 기능들이 배치되어 있었어요. 바로 이동 할 수 있는 역할이 컸기 때문입니다.
업데이트 후에는 스타벅스의 ‘소식’이 더 많이 침투해있어요. 주문을 마음먹었을 때 볼 수 있었던 추천 메뉴, 신메뉴, 시간대 별 인기메뉴를 홈 화면에서 볼 수 있게 되었고 이벤트와 메뉴에 대한 매거진 형태의 콘텐츠도 볼 수 있습니다. 또 하단 탭이 적용되었어요. 홈, 결제, 주문, 선물, 기타 등 다섯가지 항목이 자리잡고 있네요.
기존 홈화면에서는 하단 탭이 아니라 원하는 기능을 홈화면 내 바로 이동할 수 있었다면, 이제는 하단 탭을 통해 이동할 수 있는 구조로 변경되었습니다. 홈화면을 서비스가 원하는 목적에 따라 더 적극적으로 활용하기 위한 방법이기도 해요. 스타벅스는 홈화면에 주요 기능 바로가기를 활용했던터라 나머지 기능을 모두 사이드 메뉴에 넣어 꽤 많은 기능이 어지럽게 배치되어 있었는데 이런 부분은 이번 개선을 통해 나름 깔끔하게 정리된 모습입니다.
–
(2)결제(카드)화면
기존에는 결제를 위한 바코드를 카드 화면에서 한 번 더 탭해야 하는 구조였어요. 변경 후에는 카드별 바코드가 리스트 내 포함되어 있고 유효시간 10분이 바로 적용되어 진입과 동시에 결제가 가능해졌습니다. 하나의 카드 컴포넌트에 바코드, 충전까지 포함되어 있어 카드를 중심으로 원하는 행동이 더 쉬워진 느낌이에요. 또 하나 중요한 포인트는 기존에는 카드라는 이름으로 구성된 메뉴였는데 페이(결제)로 변경되며 이 곳에 쿠폰과 기프트 아이템이 들어왔다는 점입니다. 쿠폰과 선물은 모두 결제에 종속될 수 있는 속성이라고 판단해 함께 포함시킨 것 같아요.
다만, 배경 컬러도 흰색 – 카드 UI도 그림자가 적용되었지만 기본 배경이 흰색이라 구분이 잘 되지 않는 점은 아쉬웠어요. 이는 개선된 디자인에서 공통적으로 발견할 수 있는 아쉬움이기도 하고 실제 업데이트 후 리뷰에서도 사용자들이 불편하다 느끼는 대표적 피드백이기도 합니다.
(덧붙임)
저는 아직 업데이트 된 스타벅스 앱을 매장에서 사용해보지 못했는데, 그룹 내 댓글을 통해 ‘현영민’님이 의견을 주셨어요. (자세히 보기) 주된 내용은 매장 결제 시, 바코드 스캐너 사용이 업데이트 전보다 더 불편해졌다는 것!
업데이트 된 스타벅스 바코드 사이즈와 KT, 카카오페이, 삼성페이를 같이 확인해봤는데 바코드 사이즈 확대가 가능한 KT, 카카오페이. 확대는 불가능하지만 사이즈가 스타벅스 대비 더 크게 적용된 삼성페이 등 확실히 실제 사용 시 불편할 수 있겠다는 생각이 들었습니다.
–
(3)사이렌오더
매장 내 직접 결제가 결제 화면과 깊게 연관되어 있다면, 사이렌오더는 스타벅스를 사용하는 또 하나 중요한 방법인데요. 때문에 하단 탭 정중앙에 사이렌 오더로 진입 가능한 아이콘이 배치되어 있습니다. 기존에는 전체메뉴와 나만의 메뉴로 바로 이동 또는 추천 메뉴와 신메뉴를 리스트를 통해 확인 할 수 있는 구조였다면, 변경후에는 전체메뉴 중 음료 리스트 확인이 기본으로 적용되었어요. 전체 메뉴는 다시 음료, 푸드, 상품 등으로 탭이 구분된 모습입니다.
한 가지 낯설었던 건, 음료 탭 기준 리스트가 음료를 대표하는 카테고리라는 점이었어요. 예를 들어 콜드 브루를 리스트에서 선택하면 콜드 브루 메뉴를 확인 하기 위한 화면으로 전환되는 구조인 것. 기존에는 추천 메뉴나 자주 주문 하는 메뉴 등으로 바로 진입할 수 있었는데 이제는 나만의 메뉴를 저장하지 않는 이상 오더 홈 – 메뉴 대표 카테고리 선택 – 특정 메뉴 선택 등 3단계를 거쳐야 하는 불편함으로 다가왔습니다.
선택된 매장과, 해당 매장으로 담긴 메뉴를 바로 확인 할 수 있도록 장바구니 기능이 기존 화면 상단에서 하단 고정으로 내려온 것도 달라진 모습입니다.
–
(4)주문상세
기존에는 한 화면에서 주문이 끝났습니다. 변경 후에는 2단계로 변경되었어요. 정확히는 화면 전환이 아닌 Bottom Drawer를 활용한 구조에요. Hot/ice 중 하나를 선택하고 주문하기를 선택하면 다시 사이즈, 컵 종류, 수량, 퍼스널 옵션 등을 선택할 수 있습니다.
사이즈 등을 시각적으로 확인할 수 있고, 기존 화면 대비 선택 가능한 옵션 등이 더 직관적으로 변경된 것은 좋지만, 음료 온도를 선택하는 것이 1단계를 대표할 만큼 중요한 것인지는 잘 모르겠네요. 메뉴를 저장할 수 있는 버튼도 기존과 달리 잘 보이지 않아 아쉬웠습니다.
–
1-1.함께 읽어보세요!
–
2.Flex가 비밀번호 입력에 대한 안내를 제공하는 방법
재직중인 스타트업에서 인사 관리 툴을 플렉스로 변경하며 얼마전 신규가입을 하게 되었어요. 회사에서 쓰지 않으면 개인적으로 확인할 수 없는 서비스 중 하나기에 회원가입부터 자세히 들여다 볼 수 있는 기회이기도 했는데요. (플렉스는 작년 11월 시리즈A 100억 규모 투자 유치에 성공)
회원가입 과정에서도 비밀번호 입력이 눈에 띄어 먼저 정리하고자 합니다. 서비스 입장에서 보통 사용자가 비밀번호 입력 시 입력 가능 글자수 범위(8글자 이상 등)와 사용가능한 문자 성격에 대한 내용(숫자,기호 입력 가능 등)이 대부분입니다.
중요한 건, 실제 사용자가 입력을 시작한 상황이에요. 사용자가 입력한 비밀번호 길이, 입력 내용이 서비스가 정한 정책에 맞는지 확인할 수 있어야 하기 때문인데요. 플렉스는 1-4번과 같이 입력한 내용을 바탕으로, 필요 내용을 바로 안내하고 있어 쉽게 인지하고 수정할 수 있습니다.
- (1) 글자수 조건 : 비밀번호는 8자 이상이어야 합니다.
- (2) 입력 조건 : 영문 대 소문자, 숫자, 기호 중 두 가지 이상 조합하세요.
- (3) 보안 : 영문 대 소문자, 숫자, 기호를 조합하여 보안을 강화하세요.
- (4) 완료 : 좋은 비밀번호 입니다!
입력하기 전, 플레이스 홀더 텍스트 등으로 적용된 가이드는 입력하는 순간에 잊기 쉬워요. 그래서 인풋박스가 아닌 별도 공간에 문구를 계속 볼 수 있게 할 수도 있고요. 모든 서비스 정책이 동일하면 사용자 입장에서 기존 기준을 생각하고 입력할 수 있지만 이건 불가능한 일이니! 사용자가 입력한 뒤 피드백을 제공하는 것이 아니라, 제공하는 과정에 조건에 맞는지 등에 대한 안내를 추가 제공하는 방법을 활용하게 됩니다.
등록불가, 보안약함, 보안강함 등 상황에 따라 각기 다른 컬러를 적용해 사용자가 쉽게 입력한 값에 대한 피드백을 확인 할 수 있다는 점도 좋았습니다. 아쉬운 점도 있어요. 비밀번호를 수정할 땐 입력한 내용을 볼 수 있지만, 최초 가입시에는 볼 수 없었습니다. 자주 사용하는 비밀번호를 입력할 때, 빠른 속도로 입력하기에 종종 오타가 발생할 수 있는데요. 이런 상황에서는 비밀번호 확인을 통해 잘못 입력 되었다는 것을 알 수 있지만, 어떤 부분이 잘못되었는지는 알기 어렵기에 동일한 조건으로 제공해줬으면 어떨까 하는 생각이 들었습니다.
비밀번호 입력 과정과 별개로, (5)웹 상에서 로그인을 시도할 때 안녕하세요! 라며 손을 흔드는 깨알 디테일도 눈에 띄네요!
–
2-1.함께 읽어보세요
–
3.에어비앤비는 왜 날짜 선택시 1,3,7일 단위로 추가가 가능할까?
여행의 핵심은 날짜 즉 기간이에요. 언제부터, 언제까지 여행을 할거야! 라는 기간이 가장 중요한 기준이 되기 때문입니다. 언제든, 마응대로 여행을 떠날 수 있다면 좋겠지만 공부를 해야하고, 일을 해야하는 등 각자의 사정과 현실이 있기 때문입니다.
이 기준은 숙소와 항공권을 예약할 때도 쓰이고, 기간 내 하루 단위로 일정을 계획할때도 쓰이는데요. 에어비앤비에서는 숙소 예약을 위해 지역 선택 후, 날짜를 지정할 때 재밌는 기능을 활용하고 있어요. 캘린더를 통해 날짜를 선택할 수 있는데 (여기까진 다른 서비스들과 동일) (1)바로 하단에정확한 날짜, 플러스 마이너스 1일, 3일, 7일을 추가로 선택할 수 있기 때문입니다.
처음에는 이게 무슨 의미고, 왜 들어갔지? 라는 생각이 들었는데요. 검색 결과를 보면서 기능에 대한 이해를 조금 더 쉽게 할 수 있었어요. (그럼에도 불구하고 이 기능에 대한 안내가 부족하다는 점은 아쉽지만)
- 날짜를 정해두고 보통 숙소와 항공권(또는 다른 교통편)을 예약하게 되는데요. 이 때 날짜에 맞는 숙소나 항공권이 만족스럽지 못한 경우가 한 번씩 존재합니다. 그럼 다시 날짜를 선택해 해당 기간에는 내가 원하는 조건이 있나? 확인하는 과정을 거치는데요. 이런 불편을 최초 검색 시 일부 해소할 수 있는 기능이란 생각이 들었습니다. 예를 들어 금,토,일 제주 여행을 계획했는데 마땅한 숙소가 없을 수 있으니, 앞 뒤 날짜를 함께 확인 할 수 있도록 하는 것.
- 다만, 우리가 여행을 할 땐 요일도 중요한 기준이 될 수 있다는 점이 반영되지 않은 점은 아쉬워요. 예를 들어 나는 토일월 2박 3일로 여행을 떠날거야! 라는 생각이라면 지금의 에어비앤비에서 제공되는 옵션은 이 요일을 기준으로 하는 것이 아니라 최초 선택한 날짜 범위를 기준으로 앞뒤로 날짜를 덧붙이는 구조기 때문입니다.
- 오히려 사용자가 어떤 요일 조합으로 여행을 떠날지 계산, 우리가 반복일정을 설정하는 것처럼 선택한 날짜 범위를 다음주, 그 다음주 등 동일한 조건이지만 주차별로 다르게 검색할 수 있는 기능으로 활용했다면 어땠을까 싶어요.
- 실제로 저도 항공권 검색할 때, 요일을 변경하기 보다는 같은 기간을 다른 주로 검색하는 경우가 더 많거든요. 항공권은 요일의 영향을 많이 받기 때문입니다.
아쉬운 점도 있지만, 에어비앤비의 이런 시도는 다른 서비스에서 볼 수 없었던 조건이기에 더 신선했어요. 에어비앤비를 최근 사용할 일이 상대적으로 적어 이제서야 발견했지만요!
–
3-1.함께 읽어보세요!
–
부록1.지마켓 앱 리뉴얼
완전히 확 바뀐 G마켓! 통합적인 경험을 선사하는 앱 리뉴얼
- 경험을 연결하다
- 브랜드 정체성이 담긴 글꼴
- 직관적인 이해를 돕는 아이콘
- 다양한 감정과 경험을 제공하는 모션 디자인
- 공급자가 아닌 사용자 중심의 직관적 개편
- 통합 디자인 시스템 구축
부록2.아만다의 탈퇴 프로세스 이야기
지금 써보러 갑니다, 00:00 뉴스레터 최근 발행 주제는 ‘탈퇴 기능’이었어요. 14개 이상의 국내외 서비스는 탈퇴 기능을 어떻게 다루고 있는지 자세히 들여다봤는데요! (탈퇴 기능 뉴스레터 자세히 보기) 이후 페이스북 그룹을 통해 공유된 탈퇴 기능 관련 내용을 소개합니다.
부록3.스타트업 기획자가 일하는 방법
전, 사수없이 자란(?) 전형적인 야매기획자 입니다. 그래서 기획의 체계적인 방법에 대해 이야기하면 어색한 것들이 꽤 많아요. 그게 제 장점이자 단점이기도 하고요. 정답은 아니지만, 스타트업에서 일하는 기획자들이 저와 같은 상황에서 자신만의 길을 찾는데 조금이나마 도움이 되고자 에세이 성격을 담아 글을 하나씩 발행하고 있어요. 지금까지 3개의 글이 발행 되었고, 20개를 채워 종이책으로 출간할 예정입니다. 날 것 그대로의 내용은 브런치를 통해 확인하실 수 있어요! (스타트업 기획자가 일하는 방법 보러 가기)
–
