ASOS가 Figma로 디자인 업무 흐름을 간소화하는 방법

패션 및 코스메틱 리테일러 ASOS는 전 세계 20대 소비자들에게 대표적인 쇼핑 플랫폼으로 자리 잡았습니다. 이는 놀라운 일이 아닙니다. 소비자들은 ASOS Design, Topshop, Topman, Collusion을 포함한 ASOS 자체 브랜드는 물론, 총 900개에 달하는 다양한 브랜드 중에서 선택할 수 있기 때문입니다.

ASOS는 간편한 반품 절차와 함께 데스크톱 및 모바일 웹사이트, Android 및 iOS 앱 전반에 걸쳐 일관된 엔드투엔드 경험을 제공하는, 유쾌하고 마찰 없는 고객 경험으로도 잘 알려져 있습니다.

또한 10개 언어와 200개 이상의 시장에서 운영되는 ASOS는 글로벌 결제 수단을 지원하며, 사용자에게 현지화된 경험을 제공하고 있습니다.

상상할 수 있듯이 디자인은 ASOS가 하는 모든 일에서 매우 중요한 역할을 하며, 이것이 ASOS가 Figma를 도입하게 된 배경입니다. 이를 통해 ASOS는 디자인 시스템을 간소화하고 비용을 절감했으며, 보다 정교한 도구와 프로세스를 확보하고 비즈니스 전반에 걸친 협업을 한층 강화할 수 있었습니다.

온라인 패션의 독특한 시장 기회

패션 이커머스 산업은 팬데믹 기간 동안 빠르게 성장했으며, 이후에도 기술과 물류의 글로벌한 발전과 함께 지속적으로 성숙해 가고 있습니다.

소비자들은 경쟁력 있는 가격, 온라인 할인 혜택, 그리고 개인화된 멀티채널 구매 경험이 제공하는 이커머스의 편리함과 속도를 선호합니다. 또한 소셜 미디어를 통해 브랜드를 모방하고 서로에게 영향을 미치며, 이로 인해 특정 제품이 바이럴로 확산되기도 합니다.

ASOS의 제품 디자인 책임자인 Kate Brook-Hart는 이러한 맥락에서 구매 경험의 전, 중, 후 전반에 걸친 디지털 제품 라이프사이클을 살펴보는 것이 필수적이라고 말합니다. 이에 따라 그녀의 팀은 발견 및 디자인 프로세스 전반에서 이러한 모든 터치포인트가 반영되도록 하고 있으며, 이를 위해서는 강력한 디자인 시스템이 필수적이라고 강조합니다.

높은 연결성을 자랑하는 디자인 팀

ASOS의 제품 디자인 팀은 어소시에이트, 중간, 시니어 및 리드 등 모든 레벨의 디자이너 12명 이상으로 구성되어 있습니다.

• 제품 디자이너들은 디지털 제품 팀에 소속되어 있으며, 이 팀은 두 명의 제품 운영 관리자 지원을 받는 25명 이상의 제품 관리자와 긴밀히 협업합니다.
• 각 디자이너는 인수 및 참여, 쇼핑, 결제, 결제 완료, 구매 후와 같은 특정 제품 영역을 담당하며, 페이스 + 바디, 스포츠웨어, 스튜던트와 같은 특정 미션 팀에도 소속되어 업무를 수행합니다..
• 그들은 다양한 플랫폼 팀의 엔지니어, 아키텍트 및 품질 보증 엔지니어와 긴밀히 협력하여 아이디어를 구상하고, 구축하며, 테스트하고, 실험하며, 새로운 기능을 출시합니다.

또한 팀에는 체크아웃 제품 영역의 리드 제품 디자이너인 Jack Marsden와, 동일하게 체크아웃 영역에서 활동하는 제품 디자이너 Sean Conlon이 함께하고 있습니다.

2022년 4월 ASOS에 합류한 이후, Sean은 리서치부터 하이 피델리티 디자인 제작에 이르기까지 엔드투엔드 디자인을 전문으로 해 왔습니다. 그는 다음과 같이 말합니다. "저를 움직이게 하는 것은 디자이너로서 ASOS에서 만들어낼 수 있는 영향력입니다. 제가 만든 디자인은 전 세계 수백만 명의 사람들이 사용하게 되며, 비즈니스 성과에도 큰 영향을 미칠 수 있습니다. 그 점이 정말 큰 보람으로 다가옵니다."

Kate의 팀에는 접근성 전문가인 Tzveta Dinova도 함께하고 있으며, 그녀는 내부와 외부 모두에서 다양성과 포용성을 지원하는 데 자부심을 갖고 있습니다. Tzveta는 "우리는 모든 신규 기능이 모든 고객에게 포용적으로 제공되도록 하고자 합니다. 이를 위해 사용자들의 목소리에 많은 시간을 들여 귀 기울이며, 모든 프로젝트마다 철저한 접근성 디자인 문서를 제작하고 있습니다."라고 말합니다.

ASOS의 독특한 점 중 하나는 제품 디자이너, 제품 관리자, 그리고 비즈니스 전반의 다양한 이해관계자들 간의 긴밀한 협업입니다. 이는 세 가지 핵심 팀인 기술 & 데이터, 상업 & 고객, 또는 인적 자원 & 운영이라는 세 개의 핵심 팀을 중심으로 협력하고 있습니다.

3가지 도구를 Figma로 통합하기

ASOS가 Figma 여정을 시작하기 전에는 디자인용 도구 하나, 파일 관리 및 협업용 도구 하나, 프로토타이핑용 도구 하나, 이렇게 세 가지 주요 도구를 사용하고 있었습니다. 이러한 구성은 개발자와 협업하는 구성원 모두에게 여러 가지 불편함과 문제점을 야기했습니다.

이는 디자인, 프로토타이핑, 그리고 개발자 핸드오프를 위해 세 가지 도구를 모두 사용해야 했다는 의미였습니다. 더 나아가 컴포넌트 변형을 전환하는 과정도 저장과 종료를 반복해야 했기 때문에, 아이데이션과 디자인 작업이 느리고 비효율적일 수밖에 없었습니다. Jack은 다음과 같이 설명합니다. "디자인 시스템 컴포넌트를 불러오거나, 즉석에서 변경을 가하거나, 혹은 단순히 파일을 여는 것조차도 진흙탕을 헤치고 달리는 것처럼 느껴졌습니다."

또한 이해관계자로부터 피드백을 받기 위해 별도의 링크와 파일 모음을 따로 설정해야 했고, 엔지니어가 디자인에 접근할 수 있도록 하는 과정도 번거로웠습니다. 마지막으로 파일에 접근하고 업데이트하는 프로세스 자체가 느렸는데, 디자이너가 브랜치를 생성하고 커밋해야 했기 때문입니다. 디자인은 실시간으로 업데이트되지 않았으며, 원격 접근도 불가능했습니다.

Figma와 함께하는 온보딩 및 도약

Figma로 전환하는 것은 모든 숙련도 수준의 제품 디자이너들이 요청하고 적극적으로 지지한 필수적인 단계였습니다.

Kate는 다음과 같이 회상합니다. "제가 Figma를 처음 사용한 것은 코로나19 기간이었습니다. 그전까지는 이 도구를 사용해 본 적이 없었지만, 모두가 재택근무를 하게 되면서 대면 협업이 불가능해진 상황에서 '지금 아니면 안 된다'는 순간이 찾아왔죠. 저는 '실시간 협업 기능이 있다니까, 그냥 한번 써보자'고 생각했습니다. 그리고 불과 이틀 만에 Figma에 완전히 적응하게 되었습니다."

Figma는 ASOS 디자이너들에게 고유한 문제를 해결해 주었습니다. 커머셜, 스튜디오, 머천다이징 등 디지털 제품 개발에 협업하고 관여하는 팀이 매우 많았기 때문에 파일 공유가 큰 과제였기 때문입니다. Figma를 통해 파일이 이동되더라도 동일한 링크를 그대로 공유할 수 있게 되었고, 이는 업무 방식에 있어 획기적인 변화를 가져왔습니다.

현재 Figma에서는 제품 디자이너들이 핵심 편집자 역할을 맡고 있지만, 보안이 적용된 싱글 사인온을 통해 비즈니스 전반의 다른 구성원들도 파일을 손쉽게 열람하고 협업할 수 있습니다.

이러한 사용자에는 엔지니어링, 제품, 마케팅, 브랜드, 무역, 상업 팀뿐만 아니라 HR, 재무, 감사, 물류 및 배송 팀의 구성원들도 포함됩니다. 이들은 Figma에서 제품 팀과 동시에 협업할 수 있으며, 이를 통해 시간과 비용, 그리고 노력을 절약하고 있습니다.

이제 Figma는 전체 고객 경험 전반에 걸친 모든 유형의 디지털 프로젝트는 물론, Studios 팀이 현장에서 에셋을 제작하는 데 사용하는 사내 소프트웨어와 같은 내부 경험에서도 핵심적인 역할을 수행하고 있습니다.

Figma가 ASOS에 가져다준 5가지 변화

1. 디자인 속도

• Figma를 도입하기 전에는 여러 도구를 사용해야 했기 때문에 디자인 프로세스가 매끄럽지 않았습니다. 모든 작업물은 로컬에 저장된 후 파일 공유 플랫폼으로 전달되는 방식이었습니다.
• Figma는 클라우드 기반으로 빠르게 작동하며, 오토레이아웃과 같은 기능을 통해 디자인 요소를 손쉽게 추가하거나 제거할 수 있어 디자인 속도를 높여 줍니다.

2. 프로토타입 제작

• Figma 프로토타입 이전에는 실제처럼 보이는 프로토타입을 만들고 사용자 테스트 링크를 공유하기 위한 별도의 도구가 필요했습니다.
• Figma는 높은 정확도의 프로토타입을 만들 수 있고 실시간 업데이트가 가능해져 사용자 테스트 단계에서 시간과 비용을 절약해 줍니다.

3. 협업

• 이전에는 디자인 파일이 이메일을 통해 공유되었고, 피드백에는 여러 단계를 필요로 했습니다.
• Figma는 쉬운 협업과 직접적인 피드백을 위한 단일 링크 공유를 가능하게 하여 Design 비평과 일관성을 변혁하고 비즈니스 이해관계자들이 직접 피드백을 쉽게 남길 수 있게 했습니다.

4. 디자인 시스템

• Figma 이전에, ASOS의 디자인 시스템은 분산되어 있었습니다.
• Figma를 사용하여 디자인 시스템 작업을 하는 디자이너들은 이를 쉽게 사용하고 유지하며, 라이브러리 컴포넌트를 그들의 디자인 속에 구현할 수 있습니다.

5. 프레젠테이션

• Figma 이전에는 프로토타입 프레젠테이션이 항상 간단한 것은 아니었습니다.
• Figma의 프로토타입 기능은 디자이너들이 맥락 안에서 프로토타입을 제시할 수 있게 하여, 그들의 프레젠테이션 덱에 생명력을 불어넣습니다.

Figma는 ASOS에 실질적인 결과를 제공합니다

Figma를 통해 ASOS는 기존에 사용하던 세 가지 도구를 하나로 통합할 수 있었습니다. 그 결과 디자인 업무 흐름이 간소화되었고, 팀은 수많은 작업 시간을 절약했으며, 비즈니스 차원에서도 비용 절감 효과를 거둘 수 있었습니다.

Figma는 디자이너, 제품 관리자, 엔지니어 간의 협업을 강화했을 뿐만 아니라, ASOS가 디자인 시스템을 업데이트하고 개선할 수 있는 기회를 제공했으며, 최신 디자인 도구 흐름에 발맞출 수 있도록 해 주었습니다. 이는 새로운 인재를 유치하는 데에도 긍정적인 영향을 미치고 있습니다.

Kate는 전반적으로 Figma가 디자이너 간은 물론, 비즈니스 전반의 이해관계자들 사이에서도 협업, 생산성, 그리고 결과물 공유를 훨씬 더 수월하게 만들어 주었다고 말합니다. "그 결과 최종 디자인의 품질이 높아졌고, 개발자에게 전달하는 핸드오프 과정 역시 훨씬 매끄러워졌으며, 이를 통해 비즈니스 전반에서 개발자와 디자이너 간의 협업이 한층 더 긴밀해졌습니다."