우리는 항상 프로토타이핑과 기능 간 협업을 향상할 수 있는 새로운 방법을 찾고 있습니다. 협업 프로토타이핑은 하루 만에 프로토타입을 만드는 "초효율적인" 스프린트 방법론입니다.
디자이너와 개발자 간의 협업을 최고의 수준으로 끌어올립니다. 디자인을 위한 단일 소스를 도입하고 개발자가 1:1로 복제할 수 있는 충실도 높은 대화형 프로토타입을 몇 분 안에 만듭니다. 수백 개의 팀을 통합한 이 혁신적인 기술에 대한 자세한 내용은 병합 페이지 를 참조하십시오.
새로운 수준의 프로토타이핑에 도달
팀의 디자인 시스템에서 제공되는 대화형 구성 요소로 디자인합니다.
UXPin 병합 알아보기
UX핀 병합
협업 프로토타이핑이란 무엇입니까?
Collaborative prototyping(빠른 협업 프로토타이핑)은 오스틴에 기반을 둔 디자인 에이전시 인 Voltage Control 의 사장인 Douglas Ferguson이 만든 디자인 스프린트 방법론입니다.
일반적인 디자인 스프린트 는 5일이 걸리는 반면 협업 프로토타이핑 프로세스는 단 1일 만에 결과를 생성합니다. 팀원들은 하나의 디지털 화이트보드에서 병렬로 작업한 다음 디자인 도구 를 사용하여 협업하여 프로토타입을 제작합니다.
이것은 기본 프로토타입이지만 디자인 팀 이 디자인 프로세스 에서 유리한 출발점을 제공 하여 하루 안에 아이디어를 테스트하고 반복 할 수 있도록 합니다 .
협업 프로토타이핑의 이점은 무엇입니까?
Douglas Ferguson의 신속한 협업 프로토타이핑 방법의 주요 이점은 많은 아이디어를 효율적으로 탐구한다는 것 입니다. Douglas가 이 기사에서 설명했듯이 " 이 접근 방식은 전체 Design Sprint 팀을 자유롭게 하고 효율적이고 생산적인 방식으로 기여하는 모든 사람을 지원합니다 ."
디자인 스프린트에 사용할 수 있는 일주일이 없다면 신속한 협업 프로토타이핑을 통해 하루 만에 비슷한 결과를 얻을 수 있습니다. 하루가 끝날 무렵 팀은 프로토타이핑 및 테스트의 반복 프로세스를 시작할 기본 프로토타입을 갖게 됩니다.
프로세스 방향 1
협업 프로토타이핑은 훌륭한 팀워크 연습이기도 합니다. 조직은 디자이너 그룹이나 교차 기능 팀을 사용하여 많은 아이디어를 개발하고 최상의 솔루션을 반복할 수 있습니다.
마지막으로, 신속한 협업 프로토타이핑은 대면 연습만큼 원격 연습만큼 효과적입니다. Douglas의 팀은 협업 프로토타이핑을 위해 디지털 화이트보드와 디자인 도구를 사용하므로 모든 사람이 참여하여 아이디어를 신속하게 공유할 수 있습니다.
팀 구성원이 동일한 도구에 연결되어 있으므로 다양한 협업 프로토타이핑 작업 중에 모든 사람이 집중하고 참여합니다. 이 프로토타이핑 방법론은 매우 짧고 사람들이 어디에서나 연결할 수 있기 때문에 일반적으로 5일 디자인 스프린트에 참여할 시간이 없는 바쁜 이해 관계자가 프로세스에 더 쉽게 접근할 수 있습니다.
신속한 협업 프로토타이핑 프로세스
다음은 7단계의 신속한 협업 프로토타이핑 프로세스에 대한 개요입니다.
방향 프로세스 경로 방법
참고: 이 프로세스는 스프린트 용어 및 방법을 사용합니다. 디자인 스프린트에 대한 이 기사를 확인 하여 방법론에 대한 자세한 내용과 이해를 확인하십시오.
준비
협업 프로토타이핑 세션에 필요한 것:
시간: 하루 종일 8시간
참가자: 3 – 12명의 팀원(표준 디자인 스프린트의 경우 7명이 최적) – 결정자 포함
디자인 퍼실리테이터: 1( 디자인 스프린트 프레임워크 를 이해해야 함 )
도구(입력을 제공하고 공동 작업을 수행하려면 누구나 이러한 도구에 액세스할 수 있어야 함):
디지털 화이트보드: Mural, Miro, Google Jamboard( Douglas의 Collaborative Prototyping Mural Template 을 복사 하여 시간을 절약할 수 있음)
디자인 도구: UXPin with Merge – 대화형 구성 요소를 가져와 프로토타입을 제작할 수 있는 완벽하게 작동하는 프로토타입을 만들기 위한 협업 디자인 도구
직접 협업 프로토타이핑: 회의실 스타일 레이아웃을 사용하여 팀원들이 노트북을 사용하고 서로 대화할 수 있습니다.
원격 협업 프로토타이핑: 모두가 Zoom(기타 화상 회의 소프트웨어)을 통해 연결합니다.
팀에서 협업 프로토타이핑을 수행한 적이 없는 경우 예상되는 내용과 형식을 알려주는 것이 좋습니다. 이 기사를 참조로 공유할 수 있습니다.
1단계. 소개(5분)
아래의 단계와 오늘의 목표 (해결하려는 문제는 무엇입니까? )를 설명하는 신속한 프로토타이핑 프로세스를 소개합니다 .
2단계. 스토리보드(60~90분)
스토리보드는 온보딩 시퀀스 또는 전자상거래 체크아웃과 같은 프로토타입을 만들고자 하는 사용자 흐름을 매핑해야 합니다. 이 첫 번째 단계는 팀 구성원이 문제에 대한 공유된 이해를 바탕으로 그날의 목표를 맞추는 데 도움이 됩니다.
Douglas는 너무 세분화하기보다는 흐름에서 4~5개의 주요 순간에 집중할 것을 권장합니다. 이 프로토타입은 최종 솔루션이 아니라 추가 반복을 위한 기반이라는 점을 기억하십시오.
각 팀원은 사람들이 테스트 중에 마주하게 될 7단계를 작성합니다. 그들은 이것을 그룹으로 검토하고 가장 좋은 4~5개에 투표합니다. 퍼실리테이터는 포스트잇을 사용하여 화이트보드에 이 다섯 단계를 그리고 팀은 각 단계에 세부 정보를 추가하여 스토리를 강화하고 누락된 간격을 채웁니다.
3단계. 칸반 만들기(30분)
Kanban은 포스트잇에 작업을 세 개의 열로 나열합니다.
할 것
행위
완료
가장 높은 것이 맨 위에 오도록 우선 순위에 따라 이러한 작업을 정렬합니다. 팀 구성원은 포스트잇에 자신의 이니셜을 추가하여 작업을 스스로 선택할 수 있으며 항상 가장 높은 우선 순위를 먼저 가져옵니다.
대면 협업 프로토타이핑 세션을 실행하는 경우 물리적 화이트보드를 사용하여 항상 볼 수 있고 모든 사람이 진행 상황을 모니터링할 수 있도록 하는 것이 가장 좋습니다.
4단계. 스토리보드 내레이션(20분)
퍼실리테이터는 따라가는 모든 사람에게 스토리보드를 설명하면서 요약합니다. 설명하면서 메모를 추가할 수 있습니다. 팀 구성원은 개별 메모를 작성하고 진행자는 요약 후 Kanban에 추가합니다.
5단계. 협업 프로토타이핑(4시간)
프로토타입의 각 화면을 나타내는 섹션으로 나누어진 공유 화이트보드를 만듭니다. Kanban 작업에 따라 팀원은 자산과 콘텐츠를 각 섹션에 배치합니다.
스티처(또는 디자인 촉진자)는 화이트보드의 자산을 구성하고 프로토타이핑을 위해 모든 것이 정확한지 확인합니다.
로파이 연필
동시에 프로토타입 제작자는 디자인 도구를 사용하여 각 화면을 만듭니다. 화이트보드에서 콘텐츠와 자산을 가져와 각 화면에 대한 목업을 생성합니다.
팀 구성원은 댓글과 주석(화이트보드 및 프로토타입)을 통해 소통하여 효율성을 극대화합니다. 화이트보드와 프로토타입에 대한 피드백을 공유하면 퍼실리테이터가 작업을 추적하고 필요한 경우 후속 조치를 취할 수 있습니다.
이 협업 워크플로는 각 작업이 생산성과 효율성을 극대화하기 위해 다음 작업을 제공하는 프로토타이핑 생산 라인을 생성합니다.
6단계. 상호작용 추가
목업이 완료되면 팀은 상호 작용 및 페이지 흐름을 추가하여 사용자 흐름을 완료합니다. UXPin의 인터랙션 을 통해 디자이너는 인터랙션을 복사하고 복제할 수 있습니다. 한 팀원이 다른 팀원이 프로토타입 전반에 걸쳐 복제할 수 있도록 상호 작용을 생성하여 협업 프로토타이핑 효율성을 극대화할 수 있습니다.
7단계. 프로토타입 재생
마지막 단계에서는 프로토타입을 검토하고 수정 사항을 작업으로 나열하여 Kanban에 추가합니다. 디자인 퍼실리테이터는 프로토타입을 클릭하여 각 단계에 대해 논의합니다. 동시에 그룹은 프로토타입을 수정하기 위한 작업을 따르고 생성합니다. 예를 들어 재생 중에 진행자는 입력 필드에 오류 메시지가 없음을 확인합니다.
팀 구성원은 이러한 수정 사항을 Kanban에 추가하고 테스트 전에 수정할 수 있도록 할당합니다.
UXPin Merge를 사용한 협업 프로토타이핑
Douglass의 방법은 초기 프로젝트를 얻는 데 좋습니다. 그러나 개발 단계로 밀어넣을 수 있는 프로토타입을 완성할 수 있는 팀은 거의 없습니다. 프로토타입이 디자인 핸드오프 준비가 되려면 디자이너는 모든 상태, 마이크로 인터랙션 등에 대해 생각해야 합니다. 그래서 프로토타입을 더 오래 만들어야 합니다.
프로토타이핑 정확도와 효율성을 크게 향상시킬 수 있는 것은 UXPin Merge입니다. 하루 안에 테스트할 준비가 된 완벽하게 작동하는 프로토타입에 대한 아이디어를 얻으십시오! 구축하려는 앱 또는 웹사이트의 대화형 구성 요소를 모두 사용하는 것입니다.
내장된 MUI 라이브러리 를 사용하거나 제품의 디자인 시스템을 연결하여 완벽하게 작동하는 프로토타입을 몇 분 안에 구축하십시오. PayPal의 제품 디자이너는 회사의 사용자 지정 Fluent UI 디자인 시스템 을 사용하여 10분 이내에 최종 제품처럼 보이고 느껴지는 한 페이지 병합 프로토타입을 만듭니다 . 이는 빠른 협업 프로토타이핑에 적합 합니다.
“이 새로운 UXPin 접근 방식을 통해 우리는 보다 협력적이고 통합적인 디자인 프로세스를 보고 있습니다. 디자인, 프로토타이핑, 개발을 분리하는 대신 UXPin을 사용하면 프로세스 전반에 걸쳐 엔지니어링 및 제품 팀을 참여시키는 통합된 흐름을 만들 수 있습니다.” – Erica Rider, UX Lead EPX @ PayPal .
병합 작동 방식
병합을 사용하면 디자인 시스템을 UXPin의 디자인 편집기와 동기화할 수 있으므로 디자이너는 기본 상호 작용, 상태, 색상, 크기 및 디자인 시스템에서 정의한 기타 속성을 갖춘 대화형 구성 요소를 사용하여 프로토타입을 만들 수 있습니다.
병합 구성 요소는 기본적으로 대화형이므로 디자이너는 각 프로젝트의 사용자 인터페이스 요소에 상호 작용을 추가하는 데 많은 시간을 절약할 수 있습니다. 아래 예는 MUI 라이브러리의 여러 UI 구성 요소를 보여 주며 모두 기본 MUI 상호 작용이 있습니다. 이러한 구성 요소를 캔버스로 드래그하고 미리보기를 누르기만 하면 됩니다.
[추가 mui 구성 요소 예제]
이러한 기본 상호 작용은 Merge를 완벽한 협업 프로토타이핑으로 만들어 두 명 이상이 동일한 프로젝트에서 작업할 때 일관성을 극대화합니다. 대화형 구성 요소를 사용하면 디자이너가 더 적은 수의 상호 작용을 생성하여 시간을 절약하고 탐색 및 사용자 흐름에 더 집중할 수 있습니다.
예를 들어 이미지 기반 디자인 도구를 사용하여 동적으로 작동하는 날짜 선택기를 만드는 것은 불가능합니다. 끝없는 날짜 가능성으로 인해 디자이너는 사용하는 프레임 수에 관계없이 이 구성 요소를 복제할 수 없습니다!
UXPin Merge를 사용하면 디자이너는 구성 요소 라이브러리에서 완전히 작동하는 날짜 선택기를 캔버스로 드래그하여 바로 사용할 수 있습니다.
[날짜 선택기 데모 추가]
이러한 프로토타이핑 효율성을 통해 디자이너는 빠른 협업 프로토타이핑 중에 더 짧은 시간에 훨씬 더 나은 결과를 얻을 수 있습니다!
더 나은 협업
UXPin Comments 를 사용 하여 팀 구성원은 서로에게 의견을 할당 하고 작업이 완료되면 해결 된 것으로 표시할 수 있습니다 . 대면 및 원격 협업 프로토타이핑 세션에 적합합니다. 팀 구성원은 다음을 기준으로 주석 을 필터링할 수도 있습니다.
할당된 댓글
할당되지 않은 댓글
모든 페이지의 댓글
해결되지 않은 댓글
또한 팀은 UXPin 계정이 없더라도 이해 관계자를 초대하여 프로토타입을 미리 보고 공개 댓글 을 통해 피드백을 추가할 수 있습니다 .
의미 있는 테스트 결과
더 나은 품질의 프로토타입은 테스트 중에 더 나은 결과를 의미합니다. 최종 사용자는 최종 제품과 마찬가지로 테스트 중에 Merge 프로토타입과 상호 작용할 수 있으므로 설계자에게 의미 있고 실행 가능한 결과를 제공하여 훨씬 빠르게 반복하고 개선할 수 있습니다.
디자이너는 또한 텍스트 필드를 사용할 수 없거나 날짜 및 시간을 선택할 수 없는 이유를 묻는 대신 프로토타입에 참여하고 모든 기능을 사용할 수 있는 이해 관계자로부터 더 나은 피드백을 얻습니다.
“당사의 이해 관계자는 UXPin을 사용하여 매우 빠르게 피드백을 제공할 수 있습니다. 우리는 그들이 원하는 시간에 프로토타입을 가지고 놀 수 있는 링크를 보낼 수 있으며 UXPin을 통해 프로토타입에 직접 의견을 제공할 수 있습니다. UXPin의 댓글 기능은 우리가 댓글을 처리한 후 따라가면서 해결된 것으로 표시할 수 있기 때문에 훌륭합니다.” – Erica Rider, UX Lead EPX @ PayPal .
세계에서 가장 진보된 협업 프로토타이핑 도구로 더 나은 결과를 얻으십시오. 자세한 내용 과 액세스 요청 방법은 병합 페이지를 참조하십시오.