DesignOps : 효율적인 업무 프로세스 자세히보기

Zeplin/Zeplin 정보 공유

Zeplin과 Adobe XD를 이용해 워크플로우를 개선한 WestJet의 이야기를 들려드립니다.

단군소프트 2020. 11. 20. 17:46

안녕하세요. 블로그 관리자입니다.

오늘은 Zeplin과 Adobe XD를 사용해 성공적으로 워크플로우를 개선한 WestJet*의 UI/UX 수석 웹 디자이너인 Kelsey Kimura의 인터뷰 내용을 번역하여 전달해 드립니다.

*WestJet은 캐나다의 위치한 저비용 항공사로 캐나다에서 두 번째로 큰 항공사 입니다.

디자인팀은 어떻게 구성되어 있으신가요?

저희는 중앙 집중식 디자인 팀으로 구성되어 있으며 외부 파트너와 협력해 작업을 진행합니다. 하지만 가끔 디자이너들은 다른 팀 제품의 디자인을 해주기도 하고 특히 다른 팀에 큰 행사나 우선해야 할 프로젝트가 있을 때 지원도 합니다.

저희팀은 현대적 도구와 새로운 시대적 사고를 결합하여 독특하고 고품질의 사용 접근이 가능한 전략인 ‘옴니 채널 전략’을 구축해 제품 생산팀과 협력하고 있습니다. 저희팀은 개인의 능력과 다년간 쌓은 전문성, 그리고 반짝이는 영감으로 사용자가 웹사이트에서 편리한 경험을 할 수 있도록 노력하고 있습니다.

 

전체적인 디자인 워크플로우는 어떻게 구성되어 있습니까?

우선 저희는 PO(product owners) 팀으로부터 비즈니스적 요구 사항과 문제점을 전달받습니다. 그리고 이를 통해 UX 연구팀은 와이어프레임과 프로토타입을 만드는 데 활용할 수 있는 베이스라인을 연구합니다. 이렇게 만든 와이어프레임과 프로토타입을 가지고 여러 차례 사용자 테스트를 실시합니다.

디자인이 준비되면 디자이너 관리자, 제품 관리자 및 PO 팀(product owners)과 같은 주요 이해관계자의 승인과 코멘트를 요청합니다. 그리고 마지막으로 개발팀들이 개발 스토리(development stories)에 포함할 수 있도록 설계 사양을 작성합니다. 

 

WestJet 워크플로우만의 독특한 점은 무엇인가요?

저희 워크플로우의 특징은 반복 디자인 작업(iterative design)과 사용자 테스트입니다. 이 방식으로 저희는 여러 방면으로 디자인을 하고 게스트와 함께 테스트하면서 저희가 추구하는 방향으로 검증하고 개선해 나가고 있습니다. 이 과정에서 Zeplin의 도움을 받아 손쉽게 디자인을 업데이트하고 히스토리를 쉽게 접근하고 있습니다. 특히 Zeplin에서 많은 도움을 받은 기능은 변경 사항을 추적하는 ‘Versions’ 기능이었습니다. ‘Versions’기능에 대한 설명은 아래 영상에서 확인해 주세요!

youtu.be/cSoR--SFLtU

Zeplin에서 많은 도움을 받은 또 다른 기능은 바로 ‘Notes’기능입니다. 저희는 디자인을 변경한 이유를 기록하기 위해 'Notes' 기능을 사용했습니다. 만약 두 가지 디자인 가운데 어느 것을 선택할지 회의할 때 저희는 항상 Notes에 기록한 정보를 바탕으로 결정을 내렸습니다.

 

개발팀과는 어떻게 협업을 하셨나요?

저희는 최종 디자인을 개발자에게 제공하고자 노력하고 있습니다. 하지만 요구 사항이 바뀔 수도 있고 반복 접근법으로 인한 피드백을 바탕으로 한 디자인 수정이 이루어지는 경우가 생기고는 합니다. 그래서 Zeplin의 ‘Version’과 ‘Notes’ 기능을 사용해 디자인이 수정되어도 개발자들이 변경 사항을 손쉽게 파악해 작업할 수 있게 했습니다.

개발자와 작업시에는 특히 Jira를 중요한 협업 도구로 사용했는데, Jira와 Zeplin이 연동되어 제품 생산팀과 PO(product owners) 팀이 매우 기뻐했습니다.

 

어떤 툴들을 주로 사용하세요?
  • Adobe XD: XD는 기본 디자인 도구로 사용합니다. 프로토타이핑과 같은 모든 디자인 단계에서 XD를 사용합니다.
  • Zeplin: 디자인 승인 및 핸드오프에는 Zeplin을 사용합니다. 특히 디자인에 대한 설명, 요구 사항, 코멘트와 같은 내용을 공유하고 기록하는 데 사용합니다.
  • UserTesting: 사용자 테스트 및 연구를 위해 사용합니다.
  • Jira: 비즈니스 요구 사항, 스토리(stories) 문서화 및 계획에 사용합니다.
  • Microsoft Teams: 메시징 및 커뮤니케이션에 사용합니다.

 

Zeplin과 Adobe XD를 사용하기로 결정한 시기와 이유는 무엇인가요?

Adobe XD는 베타 버전일 때부터(2017년 초) 사용하기 시작했습니다. 그리고 작년 초에(2019년 5월)에 Zeplin을 사용했습니다. Adobe XD는 링크를 관리하는 데 어려움이 있었고 또한 어떤 것이 최신 버전인지 알기 어려웠습니다. 그리고 여러 디자이너와 같은 프로젝트를 진행하는 것이 어렵습니다. 그때 저희 디자인 파트너 중 한 명이 Zeplin을 추천해 주었고 현재는 매우 만족하며 사용하고 있습니다.

 

Zeplin으로 여러분의 워크플로우를 어떻게 개선했나요?

저희는 Zeplin을 사용하면서 프로젝트의 실수를 줄이고 비효율적인 작업 부분을 개선했습니다. 특히 분할된 스크린은 다른 디자인을 더쉽게 찾고 추적하는 데 유용합니다. 최근에 저희는 개편된 홈페이지의 첫 반복 작업을 시작했습니다. 꽤 타이트한 일정으로 진행했지만 Zeplin을 사용해 작업 과정을 간소화할 수 있었습니다.

 

가장 선호하는 Zeplin 기능은 무엇인가요?

앞서 말했듯이, ‘Version’ 기능입니다. 저희는 많은 디자인을 반복하는 작업을 거쳐야 하기 때문에 디자인을 추적하는 ‘Version’기능을 많이 사용했습니다. 그리고 또한 디자인을 쉽게 찾을 수 있게 아트 보드를 카테고리로 분류하는 ‘Sections’기능도 선호합니다. 우리의 개발자와 PO(product owners) 팀 또한 웹과 데스크탑 앱이 빠르게 반응하는 것을 높게 평가하고 있습니다.

이 글은 Zeplin의 How WestJet improved their workflow with Zeplin and Adobe XD을 번역한 글입니다.

감사합니다.