코드스테이츠 PMB 5기 W6L2

Wireframe with Figma

앱 서비스 1가지 정한 후 User Story

이번시간에는… 우리 코드스테이츠 크루들의 영원한 친구.

자비스앤빌런즈 라는 기업의 자비스 매니저 라는 어플리케이션에 대해서 조사해보겠다.

사실 이 어플리케이션에는 많은 기능이 있겠지만, 대부분의 고객, 즉 People 팀이 아닌 크루들은 다음과 같은 User Story를 가지고 있다.

• 점심 (혹은 저녁) 식사를 한다.
• 개인 카드로 결제를 한다.

(어플 사용 시작)

• 영수증 사진을 포함한 몇몇 정보를 기록한 뒤.

• 자비스 매니저 어플리케이션을 통해 서버에 업로드를 한다. (어플 사용 종료)

• 이후 다음 달 월급날에 해당 금액을 정산받는다.

User Story 를 해결하기 위한 핵심 기능 및 Flow 파악 후 화면 그리기 (종이에 간단히 = Lo-Fi)

• 기존 User story 일 경우 화면 그대로 따라 그리기
• 새로운 User story 일 경우 화면 기획해서 그려보기

이러한 과정을 거치는 동안의 Flow 를 paper prototype한 결과는 아래와 같다.

(단, 여기서 빨간 글씨는 추가 설명글로 실제 구현의 대상이 아님)

위의 과정에서는 2단계로 축약했지만 실제 어플리케이션을 사용 하는 동안은 총 8단계를 거치게 되며.

각각 아래 그림과 같다.

여기서 보라색으로 칠해진 부분을 개선하려고 한다.

구체적인 개선의 이유와 방향은 다음과 같다.

대부분의 경우 영수증 업로드 형태의 기능만 사용하는데, 해당 내용에서 “불필요한 선택지”들이 있어서, (대부분, 식비, 개인카드로 업로드)

이를 추가 설정기능을 제공하여 User의 Job을 이루기 위한 단계를 축소하자.

파란색 부분은 현재 있는 설정 화면이고, 이를 영수증 설정을 추가하여, A-3, A-4 그리고 위의 4와 5를 개선한다.

Figma 를 통해 Wireframe 디자인

위의 Paper Prototype 중 A-2, A-3, A-4 그리고 4-2와 5-2를 섞은 총 4개를 그렸다.

단 안드로이드에 대해서만 그렸다. 이유는 내가 안드로이드를 사용하기 때문에….

링크는 다음과 같다.

https://www.figma.com/file/pFuJIPCjC9Qog2ifvsU2Gk/Jobis?node-id=0%3A1

도저히… 인터랙션까지는 구현할 자신이 없어서 (너무 많이 만들어야함) prototype은 생략..

아무튼 자비스.. 좀 덜 귀찮아졌으면 좋겠따