함께하는 가치: 소매유통업체가 Figma를 사용하여 전자상거래를 혁신하는 방법

순환 경제를 촉진하는 것이든 다양한 디지털 접점에서 일관성을 유지하는 것이든, 전자상거래의 세계는 더욱 정교해졌습니다. 신뢰를 쌓고, 원활한 고객 여정을 촉진하며, 일관된 브랜드 스토리를 전달하기 위해서는 일관성 있고 매력적인 디지털 경험이 반드시 필요합니다.

우리는 선도적인 브랜드의 팀들과 대화를 나누며 그들이 어떻게 이러한 목표를 달성하고 Figma를 통해 프로세스를 발전시키고 있는지 알아보았습니다. 여기서는 Nuuly가 의류 대여 물류를 처리하는 방법, Ruggable이 전자상거래와 마케팅 접점을 연결하는 방법, Design Business Company가 GitHub와 협력하여 확실히 개발자를 위한 스토어프론트를 구축한 방법에 대해 공유합니다.

Nuuly가 의류 대여 사용자 경험을 간소화하는 방법

일부 기업들이 특별한 날을 위한 의류 대여를 보편화했다면, 2019년에 출시한 Nuuly와 같은 신규 주자들은 일상복 대여를 주류로 자리 잡게 하기 위해 노력하고 있습니다. "Nuuly는 변화라는 개념을 지향합니다"라고 Nuuly의 UX 디렉터 Laura Petrini는 말합니다. "우리는 고객이 자신의 스타일을 바꿀 수 있는 기회를 제공하여 스스로를 표현하고 옷장을 창의적으로 활용할 수 있게 돕습니다."

이 약속을 이행하기 위해 Nuuly는 구독자들이 알고 사랑하게 된 매끄러운 대여 경험을 만들어냈습니다. 의류 구독 서비스는 아직 초기 단계이기 때문에, Nuuly는 대여의 이면을 지탱하는 순환 재고 관리, 세탁, 수선 등의 기술 대부분을 자체적으로 구축했습니다. 이에 따라 고객용과 대여 물류용이라는 두 가지 디자인 시스템을 처음부터 구축해야 하게 되었으며, 두 시스템 모두 고유한 목표와 비즈니스 확장을 염두에 두고 설계되었습니다. "우리는 색상과 타이포그래피 토큰을 쉽게 교체할 수 있도록 디자인 시스템을 설정하여, 계절이 바뀜에 따라 브랜드가 성장할 수 있는 여지를 마련했습니다. 마치 고객에게 스타일을 뽐낼 여유를 주는 것과 같죠"라고 Laura는 설명합니다.

대여 물류의 기반 기술은 복잡하지만, Nuuly의 목표는 고객이 새로운 쇼핑 방식에 최대한 간단하게 적응하도록 만드는 것입니다. "우리는 경험을 가장 단순하고 직관적인 형태로 줄였습니다"라고 Laura는 말합니다. 예를 들어, 사이트의 'My Nuuly' 기능은 고객의 Nuuly 가방을 나타내며, 현재 상황부터 다음에 예상되는 일까지 26가지 이상의 가능한 대여 상태를 안내합니다.

이 모든 복잡성 뒤에 있는 디자인 시스템을 관리하고 확장하기 위해 팀은 2023년에 Figma를 도입했습니다. "기존 디자인 시스템은 파일 크기 제한 때문에 분할되어 있었고, 서버와 동기화해야 했기 때문에 성능이 느렸습니다"라고 Nuuly의 수석 UX 디자이너 Erica Benamy는 말합니다. "결국 우리는 총 16개의 파일을 관리하게 되었죠. 우리는 Figma로의 마이그레이션을 두 개의 간단한 Figma 라이브러리로 통합하고 재구축하는 기회로 삼았습니다."

Figma를 활용함으로써 업무 흐름이 크게 빨라졌습니다. "우리는 훨씬 더 빠른 속도로 디자인하고 있습니다"라고 Erica는 말합니다. 또한 Figma의 기본 프로토타이핑 도구를 사용함으로써 디자인 핸드오프 시 디자이너가 예상되는 인터랙션 패턴을 개발자에게 더 잘 전달할 수 있게 되었다고 그녀는 말합니다: "덕분에 우리는 조직으로서 훨씬 더 민첩해지고 서로 조화를 이루고 있다는 느낌을 받게 되었습니다."

Nuuly의 UX 팀이 Figma로 전환한 것은 다른 부서에도 영향을 미쳤습니다. 이제 콘텐츠 디자인 팀과 스튜디오 사진 팀도 UX 팀과 함께 Figma에서 디자인합니다. 또한 FigJam이나 Figma Slides 같은 협업 도구를 통해 Nuuly 비즈니스 전반의 구성원들이 참여하여 협업하고, 브레인스토밍하며, 고객 여정 개선 사항을 검토하고 있습니다. 예를 들어, 구독자가 대여하지 않고도 파이널 세일 스타일을 구매할 수 있는 The Thrift Shop 같은 기능이 있습니다.

Nuuly 고객에게 이는 더 빠른 경험 개선과 혁신을 의미합니다. Nuuly 팀에게는 협업, 창의적 탐구, 그리고 Nuuly와 구독자 간의 관계를 증진하는 고객 중심적 디자인 사고에 더 많은 시간을 할애할 수 있음을 의미합니다.

Ruggable이 일관적인 디지털 접점을 보장하는 방법

UX 제품 디자인 디렉터 Alicia Clapper가 6년 전 Ruggable에 합류했을 때, 그녀는 여러 개의 병렬적이고 고립된 업무 흐름에 직면했습니다. 이는 소셜 미디어 광고부터 홈페이지, 제품 상세 페이지에 이르기까지 디지털 플랫폼 전반에 걸쳐 조화롭지 못한 경험을 초래했고, 결과적으로 단절된 고객 여정으로 이어졌습니다. Ruggable 쇼핑객들이 제품을 둘러본 후 카펫을 구매하기까지 종종 10일 이상이 걸리기 때문에, 특히 경쟁이 치열해지는 상황에서 이 모든 접점 간의 일관성을 구축하는 것이 핵심이었습니다.

"과거에는 UX 및 전자상거래 팀이 브랜드 및 크리에이티브 팀과 꽤 분리되어 있었습니다"라고 Alicia는 말합니다. 소셜 캠페인에는 한 가지 이미지 세트가 사용되는 반면, 웹사이트는 또 다른 이미지를 활용하곤 했습니다. "우리는 실제로 라이브가 되기 전까지는 서로 무엇을 하고 있는지 잘 알지 못했습니다."

이는 부분적으로 작업이 여러 도구에 분산되어 있었고, Google Drive를 통해 수동으로 공유되었기 때문이었습니다. 중앙화된 컴포넌트 라이브러리가 없었기 때문에 색상, 폰트 스타일, 버튼, 푸터 같은 요소들을 다루기가 어려웠습니다. "단순히 한 페이지에서 다른 페이지로 복사해서 붙여넣고, 프로젝트와 콘텐츠에 따라 편집하고 있었습니다"라고 Alicia는 말합니다. "수작업이 너무 많았고, 프로젝트마다 오류가 발생할 여지가 많았죠. 버전 관리가 전혀 되지 않았기 때문에 최신 파일을 복사하고 있는지 정말 꼼꼼히 확인해야 했습니다. 이것을 디자인 시스템 '관리'라고 부를 수 있을지조차 모르겠습니다."

5년 전, UX 팀은 정렬을 맞추기 위해 Figma로의 마이그레이션을 시작했습니다. 덕분에 새로운 디자인을 한 곳에서 디자인하고, 프로토타입을 만들고, 테스트할 수 있습니다. 또한, Dev Mode 덕분에 디자인에서 개발로의 전환이 이전보다 10배 빠릅니다. 디자이너가 수동으로 주석을 달 필요 없이 체크박스 하나로 파일을 준비할 수 있습니다. "이런 느낌이었습니다. '정말 완벽해. 더 이상 아무것도 필요하지 않을 것 같아.'" Alicia가 말했습니다. 이제 디자이너와 개발자 간의 불필요한 소통이 줄어들었고, 어떤 버전의 디자인이 최신인지 명확해졌습니다.

협업자로 Figma에 초대받은 후, Ruggable의 브랜드, 크리에이티브, 리텐션, 사용자 확보 팀들도 이 플랫폼에 합류했습니다. "링크를 쉽게 공유하고 브랜드와 더 잘 어울린다고 생각하는 부분에 대해 코멘트를 남길 수 있게 함으로써 크리에이티브 팀을 참여시킬 수 있었습니다"라고 Alicia는 말합니다. "2024년 리브랜딩 이후 Figma에서 디자인 시스템을 업데이트하고 구현하는 것이 매우 쉬워지면서 다른 팀들도 사용하고 싶어 하게 되었습니다. 이것이 더 폭넓은 도입을 위한 큰 촉매제가 되었죠." 이제 Alicia는 다기능 회의와 브레인스토밍 세션을 위해서도 여러 팀을 FigJam으로 불러 모읍니다. "한 제품 관리자는 회의가 얼마나 재미있고, 몰입감 넘치며, 생산적인지 언급하기도 했습니다"라고 그녀는 덧붙입니다.

이러한 새로운 참여 및 협업 표준은 브랜드 구축의 핵심인 일관된 고객 경험을 만드는 데 필수적이었습니다. "사람들에게 공감을 불러일으키는 친숙함이 있습니다"라고 Alicia는 말합니다. "또한 브랜드에 대한 신뢰를 강화하고, 고객이 원하는 것을 찾아 구매하는 데도 도움이 됩니다."

GitHub와 Design Business Company가 개발자에게 즐거움을 선사하는 방법

사랑받는 개발자 플랫폼인 GitHub는 온라인 숍을 활용하여 브랜드를 확장하고 커뮤니티를 구축할 기회를 포착했습니다. 이를 실현하기 위해 GitHub는 크리에이티브 스튜디오인 Design Business Company와 협력하여 코딩 관련 수집품, 의류, 라이프스타일 상품을 제공하는 돋보이는 쇼핑 경험을 Shopify에 구축했습니다. 이 프로젝트는 새로운 디자인 시스템, 브랜드 상품, 제품 사진, 패키징을 필요로 했으며, 이 모든 것이 Figma에서 완성되었습니다. 이번 리디자인은 GitHub 팀이 스토어를 번거롭게 수동으로 업데이트해야 하는 수고를 덜어주었을 뿐만 아니라, GitHub의 브랜드 정체성을 확실히 보여주는 개발자 중심의 "이스터 에그" 같은 재미 요소를 위한 여지도 마련해주었습니다.

Stewart Scott-Curran, Judson Collier, Jordan Egstad가 설립한 DBCo는 각 프로젝트마다 클라이언트 팀에 녹아들어, 한때 디자인 업계를 지배했던 '에이전시가 제일 잘 안다'는 프레임워크에서 벗어납니다. 몇 주나 몇 달마다 아이디어를 발표하는 대신, DBCo는 무엇을 어떻게 디자인하고 있는지에 대한 가시성을 제공하여 클라이언트와 지속적인 대화를 만들어갑니다. 이들의 클라이언트는 주로 빠른 반응과 민첩한 워크플업무 흐름을 기대하는 초기 및 중기 단계의 스타트업입니다. "클라이언트는 우리가 훨씬 더 빨리 방향을 수정하도록 도와줄 수 있습니다"라고 Jordan은 말합니다. "시간이 엄청나게 절약되죠."

프로젝트가 시작되자마자 DBCo는 클라이언트를 공유 Figma 무드보드에 초대하여 누구나 아이디어를 내고 코멘트를 남길 수 있게 합니다. "그것이 우리에게 제공하는 맥락과 세밀함 덕분에 피드백을 수집할 때 우리의 첫 번째 방어선이 됩니다"라고 Judson은 말합니다. 스토어 리디자인에는 GitHub의 Shop, 브랜드, 디자인, 웹 팀의 이해관계자뿐만 아니라 접근성 컨설턴트를 포함하여 20명이 넘는 인원이 참여했습니다. 파일에 모든 것을 매핑해 둠으로써 이러한 협업자들이 언제든지 쉽게 참여하고 프로젝트를 파악할 수 있었습니다.

브레인스토밍 단계가 끝난 후, 이제 디자인 시스템을 구축할 차례였습니다. 과정을 신속하게 하기 위해, DBCo는 Figma 변수와 함께 설정된 Construct 디자인 시스템이라는 보편적인 기반을 시작점으로 사용합니다. 시작 프레임워크로서 Construct는 "도움이 될 만큼 충분한 시스템을 갖추는 것과 제약이 너무 많은 것 사이의 완벽한 지점"을 찾아준다고 Jordan은 말하며, 하루 반나절 분량의 작업을 단 30분으로 단축해 준다고 공유합니다.

프로토타입 제작 또한 과정의 핵심 부분이었으며, 특히 제품 페이지에 생동감을 불어넣는 데 중요했습니다. 이러한 디자인은 크기, 색상, 커스터마이징 등 8가지 변형을 포함하는 경우가 많았으며, Jordan이 설명하듯 조건부 UI와 "너디하고 독특한 개발자만의 순간들"을 필요로 했습니다. 예를 들어 누군가 Konami 커맨드를 입력하면 사이트 이미지가 아스키 아트(ASCII art)로 변합니다. "개발자들은 단어와 글자를 도구로 사용합니다. 그래서 우리는 '이 단어들을 애니메이션화하고 생명을 불어넣을 방법을 찾아야겠다'고 생각했죠"라고 그는 말합니다. "우리는 다양한 모션 스터디를 고안해서 프로토타입에 적용해 보았습니다. 그래야 다양한 전환 효과, 버튼 호버 상태 등에 인터페이스가 어떻게 반응할지 실제로 감을 잡을 수 있었으니까요. GitHub가 디자인을 시각화하고 실체를 느낄 수 있게 도운 것이 의사결정에 도달하는 데 정말 큰 도움이 되었습니다."

결국, 같은 파일 내에서 여러 팀과 아주 긴밀하게 협업할 수 있었던 덕분에, 눈높이가 매우 높은 GitHub의 타겟층을 위해 탐색부터 결제, 배송에 이르기까지 일관된 리테일 경험을 구축할 수 있었습니다. "개발자들은 허세를 기가 막히게 알아챕니다"라고 Judson은 말합니다. "우리는 무엇을 하든 매우 높은 기준을 유지하고 싶었기 때문에, 형식에 충실하고 개발자의 작업에 진정성을 담고 있는지 확인하는 도전을 계속했습니다."

오늘날의 전자상거래는 고객이 "장바구니 담기"를 클릭하게 만드는 것에만 그치지 않습니다. 시장이 성장함에 따라 브랜드 인지부터 실제 구매까지 고객 여정의 모든 단계에서 뛰어난 디지털 경험을 제공하는 것이 더욱 중요해질 것입니다. 팀이 야심 찬 아이디어를 브레인스토밍하고, 빠르게 프로토타입을 만들고, 이를 고객에게 선보일 수 있는 공간을 만드는 것이 필수적입니다. 팀들이 Figma를 활용하는 방법을 자세히 알아보고, 데모를 신청해 보세요.