스타벅스 앱 리디자인

문제 정의

앱 리뷰와 사용자 리서치 결과, 사용자들은 사이렌오더 과정에서 예측 불가능한 시간 지연과 실수 수정의 어려움에 가장 큰 불편함을 느끼는 것을 알 수 있었습니다.

예상 밖의 대기 매장 혼잡도를 모른 채 주문했다가 예상보다 오래 기다리는 부정적 경험

결제 화면에서 매장, 옵션 변경이 어려워 주문을 포기하거나 처음부터 다시 시작하는 비효율 발생

주문 완료 후 실수를 발견해도 즉시 취소가 불가능하여 발생하는 금전적, 시간적 손실

가설

정의한 문제를 해결하기 위해, 다음과 같은 가설을 세웠습니다.

• 매장별 예상 대기시간을 미리 알려주면, 사용자는 가장 효율적인 매장을 선택하여 불필요한 대기 시간을 획기적으로 줄일 수 있을 것이다.
• 결제 직전 단계에서 모든 옵션을 자유롭게 변경할 수 있게 하면, 주문 이탈률을 낮추고 서비스 만족도를 높일 수 있을 것이다.
• 주문 직후 '주문 승인 전 취소' 기능을 제공하면, 갑작스러운 변수에 유연하게 대처하게 하여 서비스에 대한 신뢰도를 높일 수 있을 것이다.

디자인 시스템

정보 아키텍처

기존 스타벅스 앱의 IA를 분석하고, 사용자 흐름을 최적화하기 위해 새로운 IA를 설계했습니다.

와이어프레임

Figma를 사용하여 제작되었으며, 주요 사용자 흐름을 구조화했습니다.

컬러 토큰 등록

스타벅스 브랜드 컬러를 기반으로 Global과 Semantic Color Token을 정의하여 일관된 컬러 시스템을 구축했습니다.

아이콘 제작

키라인 가이드에 맞춰 통일성 있는 아이콘 세트를 제작하여 시각적 일관성을 유지했습니다.

타이포그래피 및 레이아웃

주문 화면 와이어프레임에 직접 적용하며 타이포그래피 위계를 정의하고, 기본 레이아웃부터 GNB 및 CTA까지 체계적인 레이아웃 가이드를 수립했습니다.

컴포넌트 제작

디자인 토큰을 활용해 재사용 가능한 UI 컴포넌트를 제작하고, 제작 및 수정 규칙을 정립하여 Button부터 Inputbox, Dropdown, Tag, Progressbar, Tapmenu, Toggle, Switch 등 컴포넌트 라이브러리를 구축했습니다.

스크린디자인 제작

Figma를 사용하여 제작되었으며, 시각적 요소와 상호작용을 정의했습니다.

프로토타입

Figma를 사용하여 제작되었으며, 주요 사용자 흐름과 상호작용을 시뮬레이션할 수 있도록 설계했습니다.

사용성 테스트

Maze를 활용해 8명의 스타벅스 앱 사용자를 대상으로 사용성 테스트를 진행했습니다.

결과

사용성 테스트 결과, 결제 전환율 20% 증가, 사이렌오더 소요시간 38% 단축을 확인했습니다.

Learnings

프로젝트 완료 후 실제 스타벅스 앱에 주문취소 기능이 추가된 것을 확인하며, 제가 정의한 문제와 솔루션이 실제 비즈니스 환경에서도 유효했음을 검증했습니다. 다만 실제 구현에서는 주문취소 버튼이 레이블 크기로 제작되어 있었는데, 이를 통해 사용자 편의성과 비즈니스 목표(주문완료율) 사이의 균형점을 찾는 것이 프로덕트 디자이너의 핵심 역량임을 깨달았습니다. Maze 무료 요금제의 제약으로 인해 UT 설계가 제한적이었던 점은 아쉬움으로 남지만, 1인 프로젝트 리소스 내에서 최선을 다했으며 향후 더 정밀한 테스트 설계를 목표로 합니다.