2023. 1. 4. 23:56ㆍPM・PO/코드스테이츠 PMB
코드스테이츠 PMB 16기 W4D3
인아웃
다이어트 식단 기록 앱이다. 내가 먹은 음식의 칼로리와 탄단지 구성을 기록할 수 있으며, 물, 운동, 체중까지 기록할 수 있다. 기타 기능들도 빠르게 추가되고 있는 중이며 현재는 커뮤니티를 비롯해 다이어트 배틀 기능도 있어서 '다이어트 올인원 플랫폼'이 되고자 하는 것 같다.
해당 서비스의 메인 기능 혹은 주요 기능 중 1개를 선택해 기능의 시작부터 끝까지의 User Flow를 그려봅시다.
User Flow : 식단 기록
인아웃의 가장 핵심 기능인 식단 기록에 대한 유저 플로우를 그려보았다. 이 한 기능에도 이것저것 페이지와 옵션이 많은데, 그 중에서도 꼭 필요한 부분만 포함시켰다. 그래도 다이어그램이 좀 길어져 화면UI 안의 글씨들이 잘 안 보인다면 클릭하여 확대해서 보시기를 바란다.
큰 동그라미는 시작과 끝을 의미하는 포인트이며, 각 화면은 실제 화면의 스크린샷으로 대체했고 '먹었어요'는 같은 화면이 시간대별로 나뉘어 있어 둥근 사각형으로 표현했다. 타원들은 기능 버튼이며 화살표 안의 텍스트들은 사용자의 행동을 설명한 것이다.
해당 서비스의 User Flow에서 UX 개선이 필요한 부분(문제가 되는 부분)을 서비스 이용자의 관점에서 정의 및 분석합니다.
사용자의 관점에서 사용해보면서 크게 느꼈던 불편은 두 가지가 있었다.
1. 앱을 열 때마다 항상 아침이다.
앱을 실행하면 항상 홈스크린이 나타나고, 내가 먹은 식단을 등록하려면 아래로 스크롤한다. (참조: User Flow '먹었어요 - 아침' 화면) 이때 내가 언제 들어가든지, 식단을 이미 등록했는지 무관하게 항상 아침부터 표시된다. 아침 식단으로 아무것도 등록하지 않았을 시에는 저녁에 들어오더라도 아침 식사까지 한 번에 기록하러 들어왔을 가능성이 있다. 하지만 아침 식단이 등록되어 있거나, 아예 '단식했어요'를 체크해놓았다면 아침 식단을 추가로 기록할 일은 드물 것이다. 예를 들어 아침 식단은 '단식했어요'가 눌러져 있고 사용자가 저녁 9시에 들어왔다면 최소 점심~저녁 식사를 기록하러 들어왔을 확률이 95% 이상 아닐까?
이런 것에 대한 조건 없이 무조건 아침부터 보여지기 때문에 저녁을 등록하려면 횡스크롤을 두 번이나 해야 하고, 간식은 오른쪽 끝에 있기 때문에 스크롤을 세 번이나 해야 한다. 아침을 안 먹는 사람이고, 간식을 자주 먹는 사람이라면 들어올 때마다 필요도 없는 스크롤을 매번 해야 하는 것이다.
2. 음식 여러 개를 한 번에 등록할 수 없고 항상 추가한 뒤 다시 검색하러 들어가야 한다.
음식을 검색한 뒤에 결과를 선택하면 그 음식에 대한 영양 정보와 1인분/그램(g) 당 칼로리가 나온다. 여기서 내가 얼마나 먹었는지를 화면 중간의 - / + 버튼으로 조절을 하고 '식단 추가' 버튼을 누르면 식단에 등록이 되는 것이다. 그 다음에 다른 음식을 등록하려면 왼쪽 하단의 음식 추가를 눌러 다시 검색을 하는 프로세스를 반복해야 한다.
'이게 그렇게 불편한가?'라고 생각할 수도 있지만 한국인은 보통 밥에 메인 메뉴는 기본이고 여기서 국과 김치 등의 반찬이 더 해진 식사를 한다. 다이어트를 하는 사람이라도 밸런스 잡힌 식사를 위해 여러 가지 음식을 먹는다. 하나의 메뉴를 추가하는데 10초 정도 걸리는 과정을 여러 번, 하루 세 번씩 하다 보면 이 단순한 과정도 귀찮게 느껴진다.
따라서 식단의 음식 추가 과정은 최대한 간단해야 한다고 생각한다. 굳이 '식단' 화면을 매번 확인하지 않고 내가 끝내고 싶을 때까지 음식을 추가한다면 훨씬 편해질 것이다.
위에서 나온 개선점 중 시급한 문제를 1개 선택하여 어떻게 화면(UI)을 개선할 수 있는지에 대해 와이어프레임을 제작해 봅니다.
두 문제 모두 불편한 정도와 빈도가 비슷하지만, 문제를 해결하기 위해 와이어프레임이 필요한 것은 2번이기 때문에 2번의 솔루션을 고민하며 와이어프레임을 만들어보았다. 머릿속에서는 '이렇게 하면 되겠지'였던 아이디어들을 직접 그려보니 고려해야 할 다른 요소들 때문에 골치가 아팠다. 그래도 '간단한 음식 추가'에 중점을 두며 몇 가지 솔루션을 도출해냈는데 결과물을 보며 설명하겠다.
먼저 '자주 먹어요' 기능을 바꿔보았다. 자주 먹는 것은 무엇일까? 대부분의 경우 '정기적'으로 먹는 것일 확률이 높다. 또한 '정량적'으로 먹는 것일 확률도 높다. 이는 실제 데이터를 보고 판단한다면 좋겠지만, 위의 예시와 같이 '밥 한 공기'는 당연히 자주 먹는 음식이며 매번 자신의 정량만큼 먹을 확률이 높을 것이다.
그렇다면 매일 같은 양을 먹는 음식의 칼로리 정보를 매번 확인할 필요가 있을까? 굳이 필요 없을 것이며 알고 싶다면 터치하여 들어가거나 음식을 추가한 뒤 식단 화면에서도 확인할 수 있다. 따라서 왼쪽(as-is) '자주 먹어요'에 등록된 음식들의 칼로리 대신 우측(to-be)의 같은 공간에 '바로 추가' 버튼을 넣었다. 이로써 매번 음식 정보에 들어가 내가 먹은 양을 설정하지 않고 바로 내가 설정한 양 그대로 추가할 수 있다. '잡곡밥'은 이미 선택되어 '추가 완료' 버튼으로 바뀐 것으로 표현했다.
하지만 '자주 먹어요'에 대한 개선은 '간단한 음식 추가'에는 도움이 되지만 2번 문제에 대한 직접적인 해결 방법은 아니다.
따라서 이 왼쪽 화면의 '식단 추가' 버튼을 고치는 것이 2번 문제에 대한 직접적 솔루션일 것이다. 하지만 as-is가 다소 귀찮을 뿐 논리적 문제는 없으며 가장 직관적인 방법이라 더 개선시키는 것이 어려웠다. 어떻게 할까 고민하며 UI를 보다가 식단 추가 왼쪽에 '음식 평가' 버튼이 눈에 띄었다. '이건 뭐지? 이런 버튼이 있었나?'라는 생각이 들었다. (아마 이 제품의 PM이라면 이렇게 생각하지 못 했을 것이다.) 한 번도 음식을 평가해보려고 하지 않았기 때문에 버튼을 인식조차 못 한 것이다. '그러면 이 버튼은 얼마나 쓰이지?'라고 생각이 들어 살펴보니 김치찌개 같은 경우 1만 회 이상 기록됐지만 100여 개의 평가만 있었고 다른 음식들의 비율도 크게 다르지 않았다. 중요한 위치에 있는 큰 버튼인 것에 비해 사용빈도가 낮으니 이 버튼을 옮기고 빈 공간을 활용해야겠다고 생각했다.
그래서 해당 기능에 대한 영역인 '인아웃 지수' 안의 우측 상단에 버튼을 배치했다. 사실 저 '인아웃 지수' 영역을 터치해도 '평가하기' 버튼과 같은 페이지로 넘어간다. 하지만 평가를 좀 더 유도하기 위해 버튼이 있는 것이 낫겠다고 판단했다.
그리고 하단 버튼에 대한 변경 작업을 시작했는데, 일단 처음의 접근 방식은 '음식을 추가하는 버튼'와 '식단으로 이동하는 버튼'을 분리하는 것이었다. 그래서 변경한 것이 중간 사진이다. 왼쪽 버튼은 '식단에 추가'로 누를 시 음식이 식단에 추가될 뿐 식단 화면으로 이동하지 않는다. 추가한 뒤 뒤로 다시 갈 수 있도록 말이다. 그리고 모두 추가했을 시에 '식단 보기'를 눌러 이동할 수 있다.
하지만 이 UI에도 단점이 보였다. 어떤 행동을 하더라도 두 번의 터치가 필요하다는 것이었다. 만약 내가 하나의 음식만 등록할 것이라면 as-is보다 한 번의 터치가 늘어난다. 반면 추가로 등록하고 싶어도 '식단에 추가' 버튼을 누른 뒤 '뒤로 가기' 버튼을 누르거나 스와이프를 해서 뒤로 가야한다. 그렇다면 어떻게 해야 할까 고민하다가 결국 '등록을 했다면 이 페이지의 역할은 끝났으므로 어디론가 가야한다'라는 결론을 얻었다. 그리고 "어디론가"는 이전 검색화면이거나 식단 화면, 둘 중 하나였다.
따라서 '어떤 버튼을 누르든 일단 메뉴 등록은 된다'고 설정하고 '더 있어요'는 이전으로, '다 했어요'는 식단 화면으로 가는 것으로 바꾸었다. 기존 사용자에게는 낯선 변화라 어느 정도 반발이 있을 수도 있다. 하지만 몇 번 써보면 이 방법이 더 편하다는 것을 알아주실 것이라고 생각한다.
나의 솔루션대로 변경한다면 식단 화면에 있던 왼쪽 하단 '음식 추가'가 원래만큼 많이 쓰이지 않게 될 것이다. 반대로 이번 UI 조사를 하며 처음 알게 된 '식사 저장' 기능을 더 살리면 좋겠다고 생각했다. '식사 저장'은 식단 하나를 통째로 저장하여 다음에도 똑같은 메뉴 구성과 양대로 추가할 수 있는 편리한 기능이다. 그런데 이런 기능이 오른쪽 위 작은 글씨로 보이지 않게 숨어(?)있었다.
그래도 나중에 다시 진입하더라도 음식 추가를 할 수 있어야 하기 때문에 이미 추가된 메뉴 밑에 + 버튼을 두어 추가할 수 있게 했다. 메뉴가 많이 쌓인다면 스크롤을 내려야겠지만, 메뉴를 3개 이상 먹었다면 다시 방문해서 추가할 확률이 낮을 것이라고 생각한다.
개선점을 개발한다고 가정하고 PRD(WHY 기반의 기획서 형태), 1페이지의 기획 산출물을 작성해 봅시다.
표의 형식으로 작성을 해보았는데, 가독성이 좋은 것 같지는 않다. 노션 등 다른 방법을 시도해보면 좋을 것 같다.
'PM・PO > 코드스테이츠 PMB' 카테고리의 다른 글
| 데일리샷 리뷰 시스템의 MVP 기획 문서 작성 (0) | 2023.01.08 |
|---|---|
| 메모 앱 메몽의 와이어프레임 역기획 (1) | 2023.01.06 |
| 뽀모도로 앱 Focus To-Do의 VoC 분석하기 (0) | 2023.01.03 |
| 문서 작성 앱 Craft의 UX/UI를 분석해보자 (0) | 2023.01.02 |
| 데일리샷의 MVP를 만들어보자 (1) | 2023.01.01 |