MVP는 버리고 최소 실행 가능한 프로토타입(MVPr) 채택

완벽함의 추구는 종종 디자이너를 반복과 검토의 끝없는 루프로 이끄는 미묘한 함정입니다. 이것은 모든 상호 작용과 그래픽 요소가 디자인 집착의 대상이 될 수 있는 디지털 제품의 세계에서 특히 그렇습니다.

그러나 한발 물러서서 디지털 제품 디자인의 학제간 특성을 관찰하면 디자이너가 어떻게 완벽함의 함정에 빠지는지 쉽게 알 수 있습니다.

단일 디지털 제품 설계에 관련된 모든 사람과 역할을 생각해 보십시오.

• 디자인 연구원
• UI 디자이너
• 정보 설계자
• UX 디자이너
• 제품 디자이너
• 제품 관리자
• 콘텐츠 전략가
• 브랜드 전문가
• UX 카피 라이터
• 등.

어떤 식으로든 이들 각각은 교차합니다. 예를 들어 제품의 사용자 인터페이스는 사용자 경험을 고려하지 않으면 성공할 수 없습니다. 상호 연결성을 통해 설계 결정이 서로에게 어떤 영향을 미치는지 이해해야 한다는 압력이 옵니다. "X를 수행하면 Y와 Z에 어떤 영향을 미칠까요?"

이러한 유형의 전략적 예측은 가치가 있을 수 있지만 설계 프로세스가 정체되고 두려운 완벽 루프에 갇힐 수도 있습니다. "Y와 Z를 실행하기 전에 X를 바로 잡아야 합니다."

그래서, 대안은 무엇입니까? 실제 사람들로부터 얻은 실제 지표와 통찰력을 기반으로 디지털 제품을 빠르게 생성, 출시, 테스트 및 개선할 수 있는 방법이 있습니까?

이 가이드에서 우리는 최소 실행 가능한 프로토타입 의 렌즈를 통해 이러한 질문을 해결하고 설계자에게 디지털 제품을 구축, 테스트 및 개선하기 위한 놀랍도록 간단한 프로세스를 제공할 것입니다.

실행 가능한 최소 프로토타입으로 출시 시뮬레이션

아무도 모릅니다…… 전체 영화 분야에서 어떤 일이 일어날지 확실히 아는 사람은 아무도 없습니다. 매번 추측이고 운이 좋다면 교육받은 것입니다. – 윌리엄 골드만, 아카데미상 수상 각본가

디지털 제품 설계 프로세스의 초기 결정은 기껏해야 추측에 기반합니다. 제품이 실제 사용자의 손에 들어오기 전까지는 모든 것이 이론적입니다. 반면에 제품이 준비되기 전에 출시하면 평판이 손상될 수 있습니다(값비싼 실수).

주요 설계 작업이 시작되기 훨씬 전에 출시를 시뮬레이션하고 제품의 생존 가능성을 결정할 수 있는 방법이 있다면 어떨까요?

이것은 보다 친숙한 "최소 실행 가능한 제품"보다 훨씬 적은 시간과 비용이 필요한 제품 설계 접근 방식인 최소 실행 가능한 프로토타입(MVPr)의 가치입니다.

다음은 MVPr(최소 실행 가능 프로토타입) 설계 프로세스의 개요입니다.

1. 발견
2. 연구
3. 정보 아키텍처
4. 시각 디자인
5. 시작하다
6. 테스트

기다리다! 모두가 사용하는 과정이 아닌가요?

예, 위 단계의 기본적인 사항에 의존하여 성공적으로…

• 실제 제품의 기능을 시뮬레이션합니다.
• 실제 제품 출시를 모방합니다. 그리고
• 실제 제품이 구축할 가치가 있는지 알아보십시오.

단계별: MVPr 구축 방법

1. 발견: 결정을 내리기 시작

발견 프로세스를 시작하는 좋은 방법은 귀하의 아이디어와 유사한 웹사이트, 블로그 및 앱을 검색하는 것입니다. 그들의 역사, 목표 시장, 운영 방식 등에 대해 알아보십시오. 관련 경쟁자가 귀하의 프로토타입이 하는 일을 하지 않는다는 것을 알게 되면 계속 전진하십시오.

이 단계에는 전문 지식이 필요하지 않습니다. 그 비결은 실천하는 것입니다. 의도에서 행동으로 나아가는 것입니다.

경쟁자의 강점과 약점에 특별한 주의를 기울이십시오. 프로토타입을 더 강력하게 만들기 위해 이미 달성한(또는 달성하지 못한) 것을 어떻게 사용할 수 있습니까?

1-2시간의 조사 후에 가장 중요한 경쟁자를 찾아내고 각각의 주요 측면을 배울 수 있어야 합니다.

2. 조사: 사용자 정의

타겟 사용자는 누구이며 왜 그들이 당신의 제품에 관심을 가져야 합니까? 이것을 이해하는 것이 중요하지만 계산된 가정부터 시작해야 합니다. 확고한 의견을 가진 비전에서 시작하는 것이 가장 좋습니다. "모든 사람을 위한 것"을 추측하거나 시도하지 마십시오. 우리는 수수한 디자인을 원하지 않습니다.

대신, 발견 단계에서 발견된 경쟁자 사이트를 자세히 살펴보고 상식이 잠재 사용자의 초상화를 그릴 수 있도록 하십시오.

다음은 웹에서 쉽게 액세스할 수 있는 몇 가지 실용적인 조사 영역입니다.

• 리뷰 사이트를 방문하여 사람들이 경쟁업체에 대한 경험에 대해 어떻게 말하는지 확인하십시오.
• 소셜 미디어에서 제품 업계의 영향력 있는 사람을 팔로우하고 그들이 청중을 참여시키는 방법을 관찰하십시오.
• 경쟁업체의 운영 방식에 대한 자세한 정보를 제공하는 평판 좋은 뉴스 기사를 검색합니다.
• 소셜 미디어에서 경쟁자와 사용자 간의 상호 작용을 확인하십시오.
• 경쟁사의 문제나 문제가 논의되고 있는 포럼을 찾을 수 있는지 확인하십시오.

상당한 재정적 투자 없이 이러한 각 방법에서 귀중한 통찰력을 얻을 수 있습니다. 이것은 적은 예산으로 작업하는 소규모 디자인 팀에게 특히 중요합니다. 큰 브랜드는 연구에 상당한 현금을 지출하지만 소규모 팀과 개인 프리랜서는 더 많은 자원을 활용할 수 있는 방법을 찾아야 합니다.

3. 정보 아키텍처: 프로토타입 구조화

프로토타입은 어떻게 작동하며, 가장 중점을 두는 정보는 무엇입니까?

이에 대한 답변을 시작하는 가장 쉬운 방법은 구축 중인 프로토타입과 유사한 최고 수준의 사이트를 분석하는 것입니다. 참조하기로 선택한 사이트의 전반적인 모양과 경험은 탁월해야 합니다.

사이트를 조각으로 나누는 것부터 시작하십시오. 모든 관련 페이지는 무엇이며 시각적으로 어떻게 구성되어 있습니까? 사이트 와이어프레임을 뒤집는 것을 두려워하지 말고 자신의 정보, 색상, 이미지 등으로 사이트를 다시 만드십시오.

왜 이런 식으로 진행합니까? 귀하의 사이트는 경쟁 사이트와 유사한 방식으로 작동할 것입니다. 단지 다른 목표를 염두에 두고 있을 뿐입니다. 사용자가 기존 경험에 잘 반응한다면 복잡한 시스템을 만들 필요가 없습니다.

*프로 팁: 사이트의 정보 아키텍처를 연구할 때 유용한 기술은 스크린샷을 찍어 회색조로 만들어 색상의 영향(매우 설득력이 있음)에 주의가 산만해지지 않도록 하는 것입니다.

그런 다음 디자이너가 0에서 대화형 프로토타입으로 빠르게 이동할 수 있는 온라인 리소스를 활용하십시오. 수많은 사용자 인터페이스 키트, HTML 템플릿, WordPress 테마 등이 있습니다. 프로토타입에 맞게 수정하는 것을 두려워하지 말고 픽셀 완성도나 아름다운 코드에 대해 걱정하지 마십시오. 이 단계에서는 아무도 신경 쓰지 않습니다. 그들은 귀하의 제품이 유용한지 여부를 중요하게 생각합니다.

다음은 무료 UI 키트를 사용하여 작동하는 방법입니다.

위의 이미지에서 우리는 무엇을 달성했습니까?

• 모든 색상과 이미지를 제거했습니다.
• 탐색 표시줄은 그대로 유지되었습니다.
• 필터링 시스템의 기능은 그대로 유지했지만 문구가 변경되었습니다.
• 사용하려는 이미지를 더 잘 보여주기 위해 2개의 열에서 1개의 열로 이동했습니다.

한 시간도 채 되지 않아 프로토타입을 더욱 발전시킬 수 있는 시각적 기반을 갖게 됩니다.

4. 비주얼 디자인: 무료 UI 리소스 재활용

프로토타입의 시각적 모양과 느낌은 작동 방식과 분리될 수 없습니다. 그래픽에 관한 것만은 아닙니다. 임팩트 있는 시각 디자인은 스토리를 전달하고 실제 가치가 있는 경험을 제공합니다.

여기서 시각적 일관성은 사용자가 제품에 익숙해지고 보다 효율적으로 탐색하는 데 도움이 되므로 핵심입니다. 프로토타입 개발 초기에 이러한 종류의 일관성을 달성하려면 무료 UI 리소스의 용도를 변경하는 것이 현명합니다.

이런 식으로 작업하면 응집력 있는 디자인 시스템을 개발하는 데 시간을 할애할 필요가 없습니다. 타이포그래피, 버튼 스타일, 아이콘 및 기타 모든 중요한 UI 구성 요소가 처리됩니다.

5. 시작: 코딩할 것인가, 코딩하지 않을 것인가?

이제 프로토타입을 전 세계와 공유할 때입니다. 다행히도 모형을 동적 프로토타입으로 변환하는 것이 그 어느 때보다 쉬워졌습니다. 직관적인 도구 덕분에 코딩 방법을 알 필요도 없지만 배워야 할까요?

코드 없는 MVPr

시각적 디자인이 끝나면 방문자가 상호 작용하고 아이디어에 대한 일반적인 피드백을 제공할 수 있도록 프로토타입을 방문 페이지에 포함합니다. MVPr 디자인 프로세스의 이 시점에서 코드 없는 프로토타입을 만드는 방법에는 여러 가지가 있습니다. 옵션은 다음과 같습니다.

기본 프로토타입

• InVision은 기본 프로토타입을 만들고 테스트하는 데 필요한 모든 기능을 갖추고 있으며 복잡하지 않은 고통 없는 경험을 제공합니다.

리치 미디어 프로토타입

• 정교한 상호 작용, 전환 및 애니메이션의 경우 원리가 매우 유용합니다.

100% 현실적인 프로토타입

• Framer를 통해 디자이너는 상상할 수 있는 모든 디지털 제품 경험을 시뮬레이션할 수 있습니다. 프로토타입이 기본 애니메이션 및 논리 기반 코딩 측면에서 실제처럼 보이고 느껴져야 할 때 완벽한 옵션입니다(예: 그렇다면 그렇게 하십시오).
• Webflow는 100% 보는 것이 무엇인지 알 수 있는 캔버스에서 반응형 웹 사이트를 디자인하고, 코드로 빌드하고, 실행할 수 있는 기능을 제공합니다.

클릭하면 전체 크기의 이미지를 볼 수 있습니다.

코딩된 MVPr

코드는 놀라운 동맹국이 될 수 있습니다. 의심의 여지 없이 이것이 제품을 구축하는 가장 좋은 방법입니다. 주요 단점은 고급 사용자 지정의 이점을 경험하려면 코드를 작성하는 방법을 알아야 한다는 것입니다. 적절한 지식 기반이 없으면 코드 실험을 선택하면 속도가 느려집니다.

공을 굴리는 데 도움이 되는 많은 코드 스타터 키트가 있습니다. 예를 들어 위에서 소개한 UI 키트에는 다운로드할 수 있는 자체 HTML 버전이 있습니다.

6. 테스트: 광고 인사이트 활용

프로토타입을 테스트하기 위한 비밀 소스는 최소한의 노력으로 최대한의 통찰력을 얻으면서도 가치를 제공할 수 있는 도구에 있습니다. 몇 달러와 인내심 있는 문제 해결만 있으면 됩니다.

제품에 대한 관심을 측정하기 위한 실용적인 첫 번째 단계는 광고를 만들고 연구 단계에서 찾은 사람들을 타겟팅하는 것입니다. 청중과 디자인하는 제품 유형에 따라 Google, LinkedIn, Instagram 또는 Twitter에 광고를 게재할 수 있습니다. B2C 제품의 경우 Facebook을 권장합니다.

*프로 팁: AdEspresso는 유용한 비교 분석을 수집하면서 동시에 수백 가지 버전의 소셜 광고를 실행할 수 있는 편리한 장소입니다.

광고를 실행하면 다음 두 가지를 배우게 됩니다.

1. 귀하의 광고를 본 사람의 수
2. 귀하의 광고를 클릭한 사람들의 수

타겟 고객이 광고 참여에 관심이 있음을 확인한 후에는 초기 사용자를 위한 가치를 창출해야 합니다. 방법은 다음과 같습니다.

• "구독" 양식을 추가하고 사용자에게 이메일 주소를 제공하도록 요청합니다.
• 출시할 때 알려주십시오.
• 소셜 미디어 채널을 운영하고 있어야 사용자가 제품에 대한 소문을 퍼뜨릴 수 있도록 소셜 버튼을 구축할 수 있습니다.

이 전략을 사용하면 다음을 얻을 수 있습니다.

• 초기 마케팅 활동에 사용할 수 있는 이메일 주소 목록
• 개인 및 전문 네트워크에 귀하의 제품을 추천하는 사람들
• 귀하의 제품에 대해 흥분하는 사람이 있는지 여부에 대한 보다 명확한 이해

실제 피드백을 처음 받으면 제품이 활성화됩니다. 가치를 전달하고, 행동을 분석하고, 솔루션을 반복하는 이 주기를 통해 무엇이 효과가 있고 무엇이 그렇지 않은지 배우고 사람들이 실제로 사용하고 싶어하는 제품에 더 가까워질 것입니다.

대담하게 시작하고 배우십시오

최소한의 실행 가능한 프로토타입의 궁극적인 목표는 다음과 같습니다. 교육받은 디자인 추측에서 속도와 확신을 가지고 실제적이고 실행 가능한 피드백으로 이동합니다.

이것은 불확실성과 실수를 개선의 기회로 받아들이는 과정입니다. 무엇보다 행동에 대한 보상입니다. 좋은 디자인은 과감한 의사 결정과 불완전함에 직면하여 앞으로 나아가려는 의지를 필요로 합니다.

따라서 완벽을 추구하는 데 얽매이지 말고 자신을 거대 브랜드 및 막대한 자원과 비교하지 마십시오. 계속해서 한 걸음 더 나아가면 곧 사람들이 사용하고 싶어하는 상당히 세련된 제품을 발견하게 될 것입니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

1. 쉬운 프로토타입 – InVision Studio 튜토리얼
2. 효과적인 디자인 스프린트를 수행하는 방법
3. Adobe CC가 와이어프레임을 만들 수 있다는 것을 누가 알았습니까?
4. 대중을 위한 UX 테스트: 간단하고 비용 효율적으로 유지
5. 고객 여정 지도 – 정의 및 구축 방법