Figma의 가입 여정 디자인 업데이트
신규 사용자가 가입부터 아트보드에 도달하기까지
피그마 가입 및 온보딩 여정이 업데이트되었다. 아무 생각 없이 가입 플로우 탔다가 이전보다 (많이) 매끄럽고 편안한 경험에 살짝 놀랐다. 따로 Release Note에 언급된 내용은 없는 것 같은데, 약 2~3주 전 가입 여정과 약 일주일 전 가입 여정이 달라졌다. 고객의 전체적인 여정을 고려한 개선이었고, 이를 위해 고민을 많이 한 것 같았다.
디지털 제품은 지속적으로 발전의 과정을 거친다. 그런 과정을 보는 것을 좋아하는데, 이번 Figma의 개선은 기록으로 남겨두고 싶다고 생각했다.
다양한 지표와 리서치, 의사결정으로 이루어졌을 Figma 제품 개선. 무엇이 바뀌었고, 왜 바뀌었을까를 분석해보고 나름의 생각을 정리해봤다.
요약
1. 가입부터 아트보드에 도달하기까지의 여정이 짧아졌다.
2. 가입 과정에서 사용자가 느낄만한 불확실성을 줄이고, 정보를 명확하게 알려준다.
3. 그래픽 요소들을 이용해 제품의 브랜드 아이덴티티를 잘 보여준다.
Sign up 후, Team name 만들기
Before
- Title: Name you Team
- Placeholder: Team name
- Microcopy: After creating a team, you can invite others to join.
- CTA: Create team
- 우상단에 X 버튼 제공
After
- Title: Welcome to Figma
- Microcopy: Give your team a name to get started:
- Placeholder: e.g.Acme Design
- CTA: Next
- Do this later 제공
가입 이메일을 입력 후 보는 화면으로 사용자에게 요구하는 행동은 동일하다. 팀 이름 입력하기. 하지만,
Before 화면에서는
- 팀 이름이 무엇인지, 이 정보를 왜 입력해야 하는지 알 수 없다.
- 내가 할 수 있는 행동은 Create team 또는 (다소 찾기 어려웠던) close and cancel 하는 것.
- 특히 이 값을 입력하면 다시 수정할 수 있는지 알기 어렵다. 이에 대한 정보 값이 없어서..
- Create team 다음에는 어떤 과정이 이어지는지 알기 어렵다.
After 화면에서는
- 시작하기 위해서 팀 이름을 만들어야 한다고 알려준다.
- Placeholder로 팀 이름에 대한 힌트를 얻을 수 있다.
- Next라는 CTA는 다음 여정이 있음을 알려준다.
- Do this later라는 옵션을 줘서 내가 할 수 있는 행동이 지금 여기서 팀 이름을 만들거나, 이후에 만들 수 있음을 (또는 수정할 수 있음을) 알려준다.
- 그리고 환영인사!
- 특히 이미 Figma의 아트보드에 모달이 띄워져 있다.! 이를 통해 사용자는 내가 이 여정이 끝나면 최종적으로 어떤 화면에 도달할지 (투명하게) 알 수 있을 것이다.
팀 동료 초대하기
Before
- 여정의 단계를 보여준다. (갑자기) 2 Add team memebers
- Title: Add your collaborators
- Sub: You can update user permissions on the team page after settings up.
- Email Field 3개 + 더 추가할 수 있는 버튼
- CTA: Continue (disabled)
- Skip for now 제공
After
- Title: Invite collaborators
- Sub: Figma works best with teammates. Invite collaborators and start working together.
- Email Field 3개와 Field 활성화
- CTA: Next
- Skip this step 제공
- 그래픽 요소로 해당 화면의 내용의 이해를 돕는다.
이 단계에서도 사용자에게 유도하는 행동은 같다. 동료 초대하기.
Before 화면에서는
- 갑자기 Stepper가 등장했다. 이전 화면에서는 볼 수 없었는데, 2번째 단계에서부터 Stepper를 보여준다. 사용자는 해당 여정이 총 3단계로 이루어져 있고, 지금 2번째 단계에 있다는 것을 알 수 있게 되었다.
- 팀 동료를 초대해야 하는 것을 알고 있지만, Permission에 대한 정보는 없다.
- 팀 동료가 없거나, 팀 동료가 3명 이상의 경우, 사용자는 또 혼란스러울 수 있다.
- 해당 단계를 지금은 넘어갈 수 있는 옵션이 있다.
After 화면에서는
- 이 단계에서 Figma가 왜 팀 동료를 초대하라고 하는지에 대한 이유를 알려준다.
- CTA는 Next로 다음 단계가 있음을 알 수 있고, 이 단계 역시 스킵할 수 있음을 알 수 있다.
- 그래픽이 해당 내용의 설명을 돕는다.
- Email Field를 추가하는 버튼은 없어졌다. (아마 이 단계에서는 초대가 잘 이루어지지 않았던 것 아닐까.)
- 이전 단계에서 만들었던 팀 이름을 하단에서 보여주고, undo 할 수 있음을 알려준다.
플랜 선택하기
다음 단계는 플랜을 선택하기.
Before
- Title: Choose your team plan
- Figma에서 제공하는 모든 플랜을 보여준다.
- 마지막 단계임을 알 수 있다.
After
- Title: Choose a plan for your Team
- 현재 피그마에서 제공하는 플랜 중 두 Starter와 Professional을 보여준다.
- 유료 플랜에 더 강조. (컬러와 pen 아이콘)
역시 플랜 선택이라는 같은 행동을 유도하는 화면이다.
Before 화면에서는
- 마지막 여정임을 알려주고
- Figma에서 제공하는 플랜을 모두 볼 수 있다.
- 다소 중복되는 정보가 있지만, 고객이 원하는 정보를 모두 볼 수 있다.
- (아마도) 홈페이지에서 제공하는 pricing 정보와 동일했었던 것 같다.
After 화면에서는
- Microcopy가 간결하게 하기 위해 중복으로 보여주던 정보를 많이 제거했음을 알 수 있다. 내용은 더 명확해졌다.
- 강조하고자 하는 플랜이 무엇인지 명확하게 알 수 있다.
- (아마도 데이터에 근거하여) 가장 많이 선택하는 plan 두 개를 제공하여 정보를 단순화하고, 선택을 쉽게 할 수 있도록 돕는다.
-그래픽 요소를 추가하여 내용의 이해를 돕는다.
- 이 자체가 CTA이기 때문에 다른 버튼은 제공하지 않는다.
이후 아트보드에 도달하기까지
Before
- 플랜을 선택한 후, 피그마에서 설정한 나의 팀 메인 화면에 도달한다.
- Create a project를 안내하는 모달을 볼 수 있다.
- Project의 이름을 생성하는 모달이 이어서 노출.
- 이어서 생성한 Project화면 (팀 개념의 하위에 위치한 Project 화면)에 사용자를 이동.
- 프로젝트에 아무 파일이 없음을 알려주고 어떻게 파일을 만들 수 있는지 알려준다. 파일을 만들기 위해서 드래그 앤 드롭하거나 + New file을 통해 만들 수 있음.
After
- 가입 여정이 끝났음을 알려준다. You're all set!
- 피그마가 어떤 차별점이 있는지 보여주고자 함을 알려준다.
- Show me around라는 CTA string으로 가이드가 실행될 것임을 알 수 있다. (No, thanks 옵션)
- 어떤 선택을 하던, 이미 계속 백그라운드에 있던 아트보드로 도달한다.
- 처음부터 First project에 Untitled라는 이름의 파일이 생성되어 있어서 사용자가 바로 아트보드를 경험할 수 있다. (empty state에서 겪는 혼란, 가이드를 추가할 경우 생길 수 있는 복잡함을 줄 일 수 있음)
- 이후 아트보드의 각 기능에 대한 가이드가 실행된다.
정리
1. 이번 업데이트로 가입부터 아트보드에 도달하기까지의 여정이 짧아졌다. (짧게 느끼도록 개선)
- 가입 직후 아트보드에 도달
- 팀이 만들어지면 자동으로 프로젝트와 파일이 생성
2. 뿐만 아니라 가입 과정에서 사용자가 느낄만한 불확실성을 줄이고, 정보를 명확하게 알려준다.
- 각 단계별 microcopy들은 사용자가 느낄만한 궁금증, 내가 선택할 수 있는 옵션 등을 명확하게 알려준다.
- 필요한 정보만을 남기고 중복된 정보는 덜어내고.
3. 그래픽 요소들을 이용해 온보딩 과정에서 제품의 브랜드 아이덴티티를 잘 보여준다.
2021년의 Figma도 기대된다!
