우리의식탁 User Story
[코드스테이츠 PMB 9기] 남은 재료로 요리 만들기
우리의식탁
오늘은 유저스토리(User Story)와 스토리 속 문제를 해결하는 서비스의 핵심기능과 플로우(flow)를 보려고 합니다.
오늘의 서비스는 '우리의식탁'입니다. 먼저, 서비스를 간략히 소개해드리겠습니다.
'우리의식탁'은 400만 유저가 사용하는 푸드 플랫폼입니다. 누구나 쉽고 편하게 요리할 수 있도록 다양한 요리와 레시피를 감성적인 콘텐츠로 소개합니다. 따라서 '우리의식탁'의 유저들은 다양한 음식을 발견하고, 직접 레시피로 요리하기 위해 사용합니다.
유저를 위한 사용 설계
'우리의식탁'에는 검색 기능이 있습니다. 검색 창에는 다양한 내용을 입력할 수 있습니다. 이때 입력한 단어가 특정 페이지로 이동시켰다면 '우리의식탁'이 기획한 대로 우리가 행동한 것 입니다. 보여지는 모든 결과는 다양한 이용 시나리오 중 하나로 계획되어 만들어졌기 때문입니다.
검색 창에 식재료를 검색하면 요리 목록을 볼 수 있습니다. 요리를 선택하면 레시피를 확인할 수 있습니다. '우리의식탁'은 유저들의 어떤 문제를 해결하기 위해 이런 사용 경험을 설계했을까요?
위의 단계를 직접 서비스 화면으로 보면 아래와 같습니다.
➊ 검책창에 배추를 입력합니다.
➋ 검색결과로 요리목록을 둘러봅니다.
➌ 요리를 선택합니다.
➍ 레시피를 보고 재료를 확인합니다.
➎ 레시피에 따라 요리합니다.
'우리의식탁' [홈]부터 [레시피]화면까지 이동경로조금 더 생생하게 풀어보면 유저는 아래 흐름으로 [홈] 화면에서 [레시피] 화면까지 이동했을 겁니다. 이는 '우리의식탁' 서비스 운영팀에서 확인할 수 있는 아주 표면적인 내용입니다.
어플에 접속한 유저는 [홈] 화면을 둘러보고 배추 음식을 찾기 위해 검색창을 클릭(➊)합니다.
아래 목록을 보니 채소를 클릭해보지만 너무 많은 채소음식으로 다시 검색 창을 클릭합니다.
검색창에 배추를 입력(➋)합니다.
요리 목록이 보입니다. 원하는 음식으로 '채식 배추된장국'을 선택(➌)했습니다.
재료와 레시피를 둘러보며 요리할 수 있을지 판단(➍)합니다.
오늘은 채식 배추된장국을 요리하기로 결정(➎)했습니다.
숨어있는 유저 이야기
표면적인 내용 뒤에 숨어있는 구체적인 상황을 파악하면 유저가 왜 '우리의식탁'에 접속해 [레시피] 화면으로 이동했는지 이해할 수 있습니다. 유저가 '우리의식탁'을 다운받아 접속하게 된 상황을 구체적으로 보겠습니다.
오늘 집에 있는 재료를 이용해 직접 만들어 먹으려고 한다. 집에 있는 재료로 할 수 있는 가장 맛있는 음식을 할 것이다. 생각해보니 냉장고에 지난 번 요리에 사다 남은 재료가 있다. 배달을 그만 시켜먹기 위해 직접 장을 봐 해먹었는데 재료가 많이 남았다. 언제 샀는지 잘 기억이 안난다. 재료들의 유통기한이 지나기 전에 먹어야 겠다. 이 재료들로 할 수 있는 음식이 뭐가 있을지 궁금하다. 이왕이면 맛있는 음식이면 좋겠다. 있는 재료를 검색해 만들 수 있는 요리를 어떻게 찾을까?
정리해 보면 유저스토리는 이렇게 정리할 수 있을 것 같습니다.
맛있고 새로운 레시피로 요리하길 좋아하는 사람(유저)이
효율적인 식사를 위해(목적)
남은 재료로 만들 수 있고, 맛있기도 한 요리 레시피를 찾고 싶다(욕구)
Flow 따라 와이어프레임 만들기
이번엔 거꾸로 '우리의식탁'이 유저스토리를 기반으로 Flow를 설계한 작업을 따라가 보겠습니다.
아래 그림은 '우리의식탁'을 유저스토리 따라 Flow에 집중하여 그려본 와이어프레임입니다. [레시피] 페이지에는 유저들이 편리하게 요리할 수 있는 다양한 기능들(타이머, 요약, 계량)이 연결되어 있습니다.
우리의식탁 와이어프레임[레시피] 페이지에 포함된 기능들의 실제 화면은 이렇게 생겼습니다.
새로운 UX 추가하기
유저스토리를 기반으로 그린 와이어프레임에 새로운 UX를 추가해보려고 합니다.
요리 할 때 레시피 설명을 보며 요리를 합니다. 각 단계에 필요한 재료를 계속 확인하는 경우가 생깁니다. 이때 식재료를 확인하기 위해 맨 위로 올라가고, 재료 확인 후 다시 아래로 내려오게 됩니다. 요리가 진행될 수록 위아래를 이동하기 불편합니다. 실제로 앱스토어의 리뷰에서 발견한 유저 분들의 어려움이었습니다.
이 문제를 해결하기 위해 [레시피] 페이지에서 스크롤을 올렸다 내렸다 하지 않고 각 단계에서 바로 재료를 확인할 수 있게끔 하려고 합니다. 그래서 [레시피] 페이지에서 기본 재료를 확인하고 싶을 때 좌로 스와이프 하여 곧바로 확인할 수 있게 해보았습니다. 이제 어느 단계에서든 재료를 곧바로 확인할 수 있습니다. 익숙하지 않거나 처음 사용해본 유저들을 위해 간단한 Indicator로 좌로 스와이프 안내를 드릴 수 있을 것 같습니다. 스토리보드와 프로토타입을 보면 아래와 같습니다.
스토리보드
프로토타입으로 만든 [기본 재료] 페이지