고지 사항: 이 프로젝트는 교육 및 포트폴리오 목적으로만 사용되며 Teapioca Lounge에서 직접 제작, 소유 또는 제휴하지 않습니다.

장면 설정 — 개요

뒷이야기

제가 가는 보바샵에 앱이 있어서 매장에 줄을 서지 않으려고 앱으로 주문하기로 했어요. 내 초기 반응은: boba는 어디에 있습니까? 음식/음료 앱인데 이미지가 없는 이유는 무엇입니까? 내가 정의한 문제는 앱이 탐색하기 어렵고 이미지/설명이 필요하며 혼란스러운 레이아웃이 있다는 것입니다.

사업 가치

이로 인해 앱이 덜 매력적이어서 주문하는 고객이 줄어들기 때문에 상점이 이익을 잃게 됩니다 . 그래서 저는 고객이 주문하는 데 도움이 되도록 앱의 레이아웃을 다시 디자인할 수 있는 방법을 직접 확인했습니다.

재설계해야 하는 이유

나는 당신에 대해 모르지만 내가 무언가를 주문하는 경우 그것이 무엇인지에 관계없이 그것이 어떻게 생겼는지 알고 싶고 제품에 대해 더 알기 위해 설명을 찾습니다. 특히 보바라면!

내 목표

• 원활한 주문 경험과 탐색하기 쉬운 사용자 인터페이스 제공
• 보다 설명적이고 시각적으로 매력적인 메뉴 레이아웃을 제안하여 사용자가 제품이 무엇이며 어떻게 생겼는지 알 수 있도록 합니다.

앱을 사용했는데 긍정적인 경험이 없었습니다. 그러나 앱을 사용하는 다른 사람들은 어떻습니까? 그들의 경험은 어땠습니까? 나는 알아 내기 위해 약간의 조사를하기로 결정했습니다.

리뷰 살펴보기

App Store에서 리뷰를 찾아 사용자 조사를 시작했습니다. 이를 통해 앱을 자주 사용하는 사용자의 의견을 확인할 수 있었습니다 . 대부분의 리뷰는 앱의 기술적 측면에 중점을 두었지만 사용자 경험과 관련된 두 가지를 찾을 수 있었습니다.

리뷰에서 우리는 앱에 대한 전반적인 피드백이 탐색하기 어렵고 사용자가 앱을 사용하지 않도록 하는 광범위한 메뉴가 있다는 것을 알 수 있습니다.

사용자 인터뷰

이어 과거 티피오카 라운지를 이미 이용했거나 앞으로 이용하고 싶은 이용자 5명을 대상으로 이용자 인터뷰를 진행했다 . 이를 통해 사용자가 처음에 앱을 사용하는 이유와 사용자에게 가장 중요한 것이 무엇인지 이해하는 데 도움이 되었습니다.

인터뷰에서 얻은 몇 가지 주요 통찰력-

• 거의 모든 참가자는 원하는 만큼 메뉴의 일부/모든 항목을 탐색할 수 있기 때문에 앱을 통해 메뉴를 탐색하는 것을 좋아합니다.
• 대부분의 참가자는 줄을 서지 않고 앱을 통해 주문하기를 원하며 더 편리합니다.
• 참가자들은 또한 탐색하기 쉽고 사용자 지정이 가능한 앱을 선호한다고 말했습니다.

사용자 인터뷰 후 동일한 참가자(5명)에게 Teapioca Lounge 앱을 테스트하여 앱의 기능과 어떻게 상호 작용하는지 확인하도록 요청했습니다.

각 참가자에게 내가 준 작업은 다음과 같습니다.

boba로 스무디를 주문하는 방법을 안내해 주시겠어요?

더 깊이 파고들기 — 분석

문제 정의

사용자 리서치를 통해 Pain Point를 파악하고 분석한 결과, 대부분의 사용자가 겪는 Pain Point를 아래와 같이 정의했습니다.

문제점 1 - 탐색하기 어려운 앱

• 메뉴의 레이아웃이 매우 광범위하여 탐색하기가 어렵습니다. 광범위한 레이아웃으로 인해 고객은 특정 방식으로 항목을 주문하려는 경우 어디를 봐야 할지 추측해야 합니다.

• 거의 모든 사용자가 앱에 이미지가 없는 것에 대해 불만을 표시했습니다. 시각적으로 볼 수 없으면 사용자가 주문하는 항목과 상점에서 판매하는 항목을 이해하기가 더 어려워집니다.

• 사용자는 설명이 부족하여 주문하는 항목에 정확히 무엇이 포함되어 있는지 추측해야 한다고 표현했습니다.

다음으로 위에 나열된 모든 피드백, 통찰력 및 문제점을 수집했습니다. 사용자에게 중요한 것이 무엇인지 더 명확하게 파악하고 잠재적인 아이디어를 개발하기 위해 연구를 분류했습니다.

사용자 흐름

이제 사용자가 현재 앱에서 겪고 있는 문제를 이해했으므로 사용자가 완료할 일반적인 작업에 대한 사용자 흐름을 계획하기 시작했습니다.

와이어프레임

사용자 흐름 계획을 마친 후에는 와이어프레임 디자인으로 이동하여 현재 앱 레이아웃에서 고객이 겪고 있는 문제를 해결하는 방법에 대한 아이디어를 얻었습니다.

항해

주문을하다

장바구니 및 주문 편집

보상 받기 및 보기

만들기 — 프로토타입

이제 와이어프레임을 만들었으므로 사용자 흐름에 맞는 디자인의 프로토타입을 시작했습니다.

항해

많은 사용자가 위치를 선택한 후 메뉴로 이동하는 방법에 대해 혼란스러워했습니다. 이제 사용자는 로그인 후 주문할 위치를 자동으로 묻습니다. 위치를 선택하면 메뉴로 리디렉션됩니다.

이제 화면 하단에 탐색 메뉴가 추가되어 메뉴, 지갑, 보상 및 프로필에 쉽게 액세스할 수 있습니다.

주문을하다

설명 및 이미지 부족 문제를 해결하기 위해 메뉴의 모든 항목에 이미지와 설명이 추가되었습니다.

장바구니 및 주문 편집

사용자는 돌아가지 않고 주문을 편집하는 방법도 확신하지 못했습니다. 이제 사용자는 장바구니에서 주문을 편집하는 방법에 대해 명확하게 정의된 방법을 갖게 되었습니다.

보상 받기 및 보기

사용자는 보상 페이지를 사용하는 방법도 확신하지 못했습니다. 이제 그들은 보상을 얻고 사용하는 방법을 볼 수 있습니다.

검증 테스트

재설계를 검증하기 위해 5명과 함께 프로토타입을 테스트했습니다 . 각 참가자에게는 동일한 작업이 주어졌습니다.

• 주문
• 장바구니에서 항목 편집
• 리워드 사용
• 결제 옵션 저장

전반적으로 모든 참가자가 작업을 완료할 수 있었지만 특정 작업에 대한 몇 가지 일반적인 피드백을 받았습니다.

항목 편집

보상 사용

결제 옵션

최종 프로토타입

완성된 프로토타입을 볼 수 있습니다: 여기 !

결론

이 프로젝트에 대한 전반적인 작업은 사용자 테스트 중에 다른 사람들도 나와 같은 문제에 부딪히는 것을 볼 수 있었기 때문에 통찰력이 있었습니다.

내가 무엇을 배웠습니까?

• 이미지는 음식 관련 앱의 사용성 측면에서 큰 영향을 미칠 수 있습니다.
• 색상은 사용자가 애플리케이션과 상호작용하는 방식에 영향을 미칠 수 있습니다. — (장바구니에서 "탭하여 편집" 디자인 변경 참조)

• 색상 및 글꼴 선택을 설명하는 스타일 가이드 만들기
• 솔루션 개선을 위한 심층 분석 및 추가 테스트

여기까지 했다면,

당신이 즐겼기를 바랍니다! :)

연결하자

‍ UX/디자인 관련 또는 풀타임 기회에 대해 이야기하고 싶다면 여러분의 의견을 듣고 싶습니다! LinkedIn 에서 저를 찾을 수 있습니다 .