MVP 개발 프로세스를 마스터하는 4단계

게시 됨: 2022-07-22

신생 제품 팀은 종종 빡빡한 예산과 마감일에 직면합니다. 제한된 리소스로 사용자, 피드백 또는 기능 요청 없이 새로운 제품을 구축해야 합니다. 이러한 과제에 익숙한 제품 디자이너로서 이것이 얼마나 어려운 일인지 알고 있습니다.

운 좋게도 불확실성을 관리하고 사용자 중심을 유지하며 제 시간과 예산에 맞춰 제품을 제공할 수 있는 방법이 있습니다. 바로 MVP 프레임워크입니다. 최소 실행 가능한 제품은 핵심 사용자 문제를 해결하기에 충분한 기능을 갖춘 제품의 출시 가능한 버전입니다. MVP는 제품 팀이 설계/개발 프로세스에서 더 적은 노력을 기울이면서 목표 고객에 대해 더 많이 알 수 있도록 도와줍니다. 또한 설계자가 초기에 가정을 테스트할 수 있도록 하여 위험을 줄입니다.

이 게시물에서는 MVP 개발 프로세스를 마스터하기 위한 4가지 핵심 단계를 공유합니다. 이 접근 방식을 시각화하는 데 도움이 되도록 Grubhub 또는 Uber Eats와 같은 음식 배달 앱을 디자인합니다.

1단계: PRD로 MVP 정의

MVP 개발 프로세스의 첫 번째 단계는 제품 요구 사항 문서를 사용하여 제품의 목적, 특징, 기능 및 동작을 정의하는 것입니다. PRD는 사용자의 문제를 중심으로 제품 팀을 정렬하는 프로젝트의 단일 소스입니다. 여기에는 다음이 포함되어야 합니다.

  • 목표(문제 설명).
  • 아이디어 정보(사용자 페르소나, 사용자 스토리 및 에픽).
  • 분석(가정, 제약 조건 및 성공 메트릭).

음식 배달 앱 PRD는 다음과 같습니다.

목적

문제 설명

문제 설명은 제품이 해결하고자 하는 실제 사용자 문제를 정의합니다. 한 문장을 넘지 않아야 하며 제품 목표를 명확하게 이해해야 합니다.

예: "배고픈 고객을 최대한 빨리 주문을 배달할 수 있는 훌륭한 레스토랑으로 연결해야 합니다."

아이디어 정보

사용자 페르소나

사용자 페르소나는 사용자 유형을 나타내고 일련의 고유한 작업을 수행하는 가상의 캐릭터입니다. 각 페르소나는 문제 설명에 정의된 문제를 해결하는 데 기여합니다.

음식 배달 앱 페르소나는 다음과 같습니다.

  • 식당 주인 릭;
  • 배달원 단테;
  • 클로이 고객; 그리고
  • 지원 에이전트 사비타.

MVP 디자인에서 페르소나를 사용하면 팀이 최종 사용자를 이해하고 공감할 수 있으므로 필요에 따라 디자인을 타겟팅할 수 있습니다.

사용자 스토리 및 에픽

사용자 스토리는 페르소나가 제품과 상호 작용하고 제품의 최종 목표 중 하나를 달성하는 방법에 대한 간략한 설명입니다. 예를 들어 Rick Restaurateur는 다음과 같이 말합니다. 목표]."

MVP 개발 프로세스를 위한 사용자 페르소나 및 사용자 스토리 템플릿입니다. 템플릿에는 페르소나 아바타, 이름 및 직함, 사용자 스토리가 포함됩니다. 템플릿의 양쪽에는 희미한 아바타를 표시하는 추가 템플릿이 나타납니다.
사용자 페르소나 및 사용자 스토리를 생성하면 제품 팀이 대상 고객에 대해 더 많이 알 수 있습니다. 명확하고 집중적이며 실행 가능한 사용자 스토리는 사용자의 요구에 따라 디자인 결정을 내리는 데 도움이 됩니다.

에픽은 더 작은 스토리로 나눌 수 있는 대규모 사용자 스토리 그룹입니다. 음식 배달 앱 에픽은 다음과 같습니다.

  • 식사 주문;
  • 누락된 항목 보고
  • 배송 경험 평가 그리고
  • 항목을 반환합니다.

분석

가정

가정은 제품이 무엇을 할 것으로 기대하거나 사용자가 어떻게 행동할 것인지입니다. 예: 우리는 Dante Deliveryman이 레스토랑 시간 동안 일할 것이라고 가정합니다. 그러나 그의 일정과 식당 시간은 호환되지 않을 수 있습니다.

제약

제약 조건은 가능한 제품 제한 사항을 설명합니다. 예: 셀 수신이 불량하면 Chloe 고객이 주문 상태에 대한 업데이트를 받을 수 없습니다.

PRD의 가정과 제약을 해결함으로써 프로세스 초기에 이를 처리하고 사용자에게 더 나은 경험을 제공할 수 있습니다.

성공 지표

참여, 이탈률, 세션 기간과 같은 실행 가능한 성공 지표는 MVP 성과를 측정하는 데 필수적입니다. 이러한 메트릭을 개발하면 원래 제품 개념을 검증하고 개발 프로세스를 안내하는 데 도움이 됩니다.

음식 배달 앱에는 다음이 포함되었습니다.

  • 다운로드 수입니다.
  • 가입률입니다.
  • 앱의 시간.

2단계: MVP의 정보 아키텍처 구성

MVP 디자인 프로세스의 다음 단계는 섹션, 페이지 및 기능과 같은 앱의 디지털 콘텐츠에 레이블을 지정하고 구성하는 것입니다. 이 프로세스의 결과를 정보 아키텍처(IA)라고 하며 두 부분으로 나눌 수 있습니다.

  1. 제품의 내용을 정의합니다. 그리고
  2. 콘텐츠의 계층 구조를 결정합니다.

여러 아이콘이 그 위에 떠 있는 사각형 미로. 아이콘은 왼쪽에서 오른쪽으로 막대형 차트, 휴대폰, 산, 이메일 기호, 지구, 설정 기호, 볼륨 기호입니다. 아래를 가리키는 녹색 화살표가 각 아이콘 아래에 나타납니다. 미로의 오른쪽 너머에는 파란색 "마침" 아이콘이 있습니다. 미로는 최소한의 실행 가능한 제품 프레임워크에서 정보 아키텍처를 정의하는 것을 나타냅니다.
정보 아키텍처를 정의하는 것은 직관적인 탐색을 통해 콘텐츠가 풍부한 앱을 구축하는 데 중요합니다.

앱 콘텐츠 정의

제품의 콘텐츠(사진, 음악, 텍스트, 비디오 등)를 정의하기 위해 먼저 트렌드, 경쟁 및 대상 고객을 조사합니다. 그런 다음 콘텐츠 유형 간의 점을 연결하기 위해 분기, 주제 및 하위 주제가 있는 "빠르고 더러운" 마인드 맵을 만듭니다. 마인드 매핑은 모든 콘텐츠를 한 곳에서 시각화하고 관련 주제를 연결하는 데 도움이 됩니다.

앱 마인드 맵에는 다음이 포함됩니다.

  • 메뉴, 주문 로그 및 고객 데이터베이스 페이지에 대한 하위 주제가 있는 레스토랑 주제입니다.
  • 음식 및 음료 옵션과 특별 행사로 구성된 메뉴 하위 주제입니다.

콘텐츠 계층 구조 결정

다음으로, 콘텐츠 계층, 즉 콘텐츠를 표시하는 방법 을 결정해야 합니다. 콘텐츠를 정렬하는 가장 좋은 방법은 카드 정렬로 사용자가 주제를 논리적 그룹으로 구성하는 것입니다. 이렇게 하면 IA가 제품 팀의 가정이 아니라 사용자의 기대에 따라 구성될 수 있습니다.

카드 정렬을 수행하려면:

  1. 제품의 주요 내용을 나타내는 주제를 선택하십시오.
  2. 사용자와 함께 주제를 그룹으로 구성합니다.
  3. 사용자와 함께 각 그룹에 레이블을 지정하고 각 결정의 근거에 대해 논의합니다.
  4. 추가 사용자에 대해 처음 세 단계를 반복합니다.
  5. 결과를 분석하고 그룹 간의 공통 패턴을 찾습니다. 이것은 제품 디자이너가 제품의 사용자 흐름을 이해하는 데 도움이 됩니다.

3단계: 와이어프레임 및 프로토타입 생성

와이어프레임 생성

콘텐츠를 정의하고 구성하면 와이어프레임 도구를 사용하여 앱의 기본 UI 레이아웃을 구축할 수 있습니다. MVP 와이어프레임에는 많은 이점이 있습니다. 즉, 제품을 간결하게 유지하면서 제품을 시각화할 수 있다는 것입니다.

음식 배달 앱의 경우 두 단계로 와이어프레임을 만들 것입니다.

  1. 크기 조정 및 위치 지정을 포함하여 각 화면의 레이아웃을 스케치합니다.
  2. 머리글과 바닥글, 콘텐츠 블록, 메뉴를 포함한 기본 UI 구성 요소 라이브러리를 만듭니다. 이러한 UI 구성 요소는 와이어프레임을 고품질 프로토타입으로 변환할 때까지 자리 표시자 역할을 합니다.

이제 앱의 기본 레이아웃과 기능을 시각화하는 데 사용할 수 있는 와이어프레임이 생겼습니다.

MVP 디자인을 위한 모바일 UI 라이브러리 구성 요소 선택. 위에서 아래로 행으로: "Food App"이라는 텍스트와 햄버거 메뉴를 표시하는 파란색 모바일 헤더, 검색 창과 파란색 검색 아이콘, 파란색 "지금 주문" 버튼 및 필터 아이콘, 드롭다운 -텍스트 "선택"을 표시하는 다운 메뉴와 두 개의 토글 스위치.
저충실도 와이어프레임에는 일반적으로 제품의 기본 콘텐츠, 레이아웃 및 요구 사항이 포함됩니다. 생성하기 쉽고 각 설계를 반복할 때마다 빠르게 조정할 수 있습니다.

사용자와 함께 테스트

우리의 MVP 프로세스에는 잠재적인 마찰 지점을 조기에 식별하고 수정하기 위해 "측정, 학습, 반복" 사용자 테스트 접근 방식이 포함됩니다.

예를 들어 음식 배달 앱에서 사용자는 앱 필터를 적용하여 음식 유형, 가격 또는 거리를 세분화하지 않는 것 같습니다. 이유를 이해하기 위해 가장 많은 피드백을 수집하기 위해 두 가지 유형의 테스트(조정되지 않음 및 조정됨)를 수행합니다.

1. Maze 를 사용한 정량적 데이터에 대한 Unmoderated 테스트 : 주어진 작업에 대한 사용자의 성능을 측정함으로써, Unmoderated 테스팅은 정량적 데이터를 통한 간접적인 사용성 평가를 제공합니다. 이러한 유형의 테스트의 장점은 무엇입니까? 우리는 문제에 대한 우리의 대응에 영향을 미칠 수 있는 "무작위" 결과 없이 문제에 대한 건전한 통계적 피드백을 받습니다.

예를 들어, Maze의 클릭 깔때기는 필터 화면에서 급격한 하락과 이 작업의 낮은 완료율을 보여줍니다. 사용자가 필터에 문제가 있음을 알 수 있습니다. 그러나 조정되지 않은 테스트에서는 피드백의 범위가 될 것입니다.

2. Userfeel 을 사용한 정성적 데이터에 대한 중재 테스트 : 사용자가 작업을 완료하는 방법을 이해하기 위해 관찰하고 후속 질문을 함으로써 중재 테스트는 정성적 데이터를 통해 직접적인 사용성 평가를 제공합니다. 이러한 유형의 테스트의 장점은 무엇입니까? 우리는 작업의 어떤 측면이 문제인지 정확히 알고 있습니다.

예를 들어, Userfeel 녹음은 필터 작동 방식을 이해하고 특정 문제가 있는 위치를 식별하는 데 어려움을 겪고 있는 사용자를 보여줍니다(예: 필터 텍스트가 너무 작아 가독성이 제한됨).

이 집합적인 피드백을 사용하여 와이어프레임을 반복하여 보다 사용자 친화적인 필터 기능을 구축할 수 있습니다.

고충실도 프로토타입 개발

와이어프레임 MVP가 검증되면 대화형 프로토타이핑 경험으로 업그레이드할 때입니다. 기본 와이어프레임과 달리 하이파이(고충실도) 프로토타입은 완벽한 픽셀 UI 디자인과 애니메이션을 활용하며 최종 제품에 훨씬 더 가까운 모양과 기능을 제공합니다. 이를 사용하여 중요한 시각적 확인을 추론하고 MVP 디자인과 관련하여 실시간 피드백을 수집할 수 있습니다.

다음을 통해 와이어프레임을 대화형 프로토타입으로 변환합니다.

  • 색상 그라디언트 및 팔레트, 타이포그래피와 같은 UI 브랜딩을 미세 조정합니다.
  • 스크롤링, 탭 이동 및 마이크로 인터랙션과 같은 고급 애니메이션 적용.

다음은 음식 배달 앱을 위한 Figma 하이파이 프로토타입의 모습입니다.

4단계: 설계 QA 완료

마지막으로 프로토타입을 클릭하고 다음을 확인하여 모든 것이 예상대로 보이고 원활하게 실행되는지 확인합니다.

  • 우리의 MVP는 초기 제품 개념에 공감합니다.
  • 사용자 흐름이 자연스럽게 느껴집니다.
  • 모든 사용 사례가 고려되었습니다.
  • 모든 개발 버그가 수정되었습니다.

그런 다음 나머지 문제를 요약하여 품질 보증 티켓으로 개발 팀에 전달합니다. 이러한 티켓은 MVP를 시작하기 전 1-2주 휴지 기간 동안 해결할 수 있습니다.

MVP 개발 프레임워크로 설계 프로세스 향상

스타트업 제품 개발의 세계에서는 디자인 리소스가 부족합니다. MVP 프로세스는 디자이너가 예산을 낭비하지 않고 제 시간에 사용자 친화적인 제품을 만들고 출시할 수 있도록 도와줍니다.

이 4단계 MVP 프레임워크는 계속해서 사용자 중심의 제품 디자인을 유지하는 데 도움이 되었습니다. 직접 테스트해 보면 디자인 개발 프로세스에서 사용자를 우선시하게 될 것입니다.