2022년 7월, Shopify는 Shopify 직원(일명 Shopifolk)이 급여를 받는 방법의 최전선에 제품 사고를 두는 보상에 대한 새로운 접근 방식인 Shopify Flex Comp를 출시했습니다. 우리 업계의 보상 이야기를 다시 쓸 수 있는 잠재력을 가진 대담하고 야심 찬 프로젝트입니다.

Flex Comp는 직원에게 급여에 대한 선택권을 부여합니다. 오늘날까지 성장 기업이 직원에게 급여를 지급하는 표준 방식은 유연하지 않고 예측할 수 없는 현금과 주식의 혼합으로 직원의 권한을 빼앗아 시장의 변덕에 따라 보상했습니다. 우리의 새로운 시스템을 통해 직원들은 급여, RSU(Restricted Stock Units) 및 스톡 옵션 중에서 총 보상을 할당하는 방법을 정확하게 선택하고 삶의 변화에 ​​따라 기본 설정을 조정할 수 있습니다.

작지만 강력한 팀이 설계하고 4개월 만에 배송된 이 도구는 서로 다른 통화와 법적 프레임워크를 사용하는 여러 국가의 수천 명의 직원을 위해 작동해야 했습니다.

이 일정으로 복잡한 도구를 설계하려면 설계 팀이 성공하기 위해 다른 접근 방식과 사고 방식을 채택해야 했습니다. 적응형 사고 방식을 유지하고, 변화하는 변수를 처리하고, 다양한 분야의 팀과 협력하고, 복잡한 법적/재정적 요구 사항을 사용하기 쉬운 디자인으로 추출하는 것은 프로세스 중에 직면한 고유한 문제 중 일부였습니다.

저는 Shopify의 스태프 제품 디자이너로서 이 프로젝트의 디자인 노력을 이끌었습니다. 다음은 Shopify의 Flex Comp 도구 뒤에 있는 UX에 접근한 방법과 디자인 과정에서 직면한 주요 문제에 대한 이야기입니다.

비행하면서 비행기 만들기

4개월 동안 우리는 비행하면서 비행기를 만들었습니다.

디자인 측면에서 우리는:

• 사용자 스토리 생성
• 매핑된 사용자 시나리오 및 작업
• 다양한 개념을 탐구했습니다.
• 솔루션 와이어프레임화(데스크탑 및 모바일)
• 콘텐츠 아키텍처를 단순화했습니다.
• 도구에 특정한 새로운 시각적 브랜딩 및 UI 언어를 만들었습니다.
• 다양한 역할과 직위를 가진 내부 직원과 솔루션을 테스트했습니다.
• 장애가 있는 사용자를 대상으로 솔루션을 테스트했습니다.
• 다양한 에지 사례 및 여러 통화로 솔루션을 테스트했습니다.
• 교육 자료 및 직원 문서용 비주얼 제작

동시에 Shopify의 다른 팀(법률, 재무, 엔지니어링 , 지원, HR, 접근성)은 각자의 도메인에서 세부 정보를 파악하고 있었습니다. 법적, 재정적, 기술적 변수가 매일 바뀌어 프로젝트가 때때로 어렵고 좌절스럽습니다.

디자인 팀은 이 험난한 모험을 어떻게 버틸 수 있었습니까?

적응형 사고방식이 핵심

이 프로젝트가 성공하기 위해서는 견고한 적응력 사고 방식을 채택해야 한다는 것을 일찍 깨달았습니다. 우리는 최종 요구 사항 없이 설계를 시작해야 했고 변수가 변경될 수 있음을 알고 있었습니다. 우리는 완전히 구체화되지 않은 디자인을 경영진에게 제시해야 했고 괜찮았습니다. 많은 디자인 탐색이 버려질 것이고 그것도 괜찮았습니다.

''변화는 불가피합니다.'' 이보다 더 사실일 수는 없습니다. 변화가 불가피할 때 적응하는 능력은 직장에서 중요한 기술입니다. 적응형 사고방식을 가지면 시나리오를 명확하게 보고 계속 진행하는 데 필요한 조정을 할 수 있습니다.
베스 헨드릭스

신뢰도가 높은 시나리오

80% 사용 사례 시나리오는 어떻게 생겼습니까? 그리고 우리가 설계해야 하는 많은 엣지 케이스는 무엇입니까?

새로운 보상 시스템은 서로 다른 금융 규정 및 법률이 적용되는 전 세계 수십 곳에서 작동해야 했습니다. 우리는 모든 직원이 동일한 할당 프로필을 가지지 않기 때문에 경험이 모듈화되어야 한다는 것을 알고 있었습니다.

재무 팀과의 긴밀한 협력을 통해 우리는 새로운 할당 시스템에 대한 가장 일반적인 시나리오를 나타내는 사용자 프로필을 개발했습니다. 이 연습을 통해 우리는 대부분의 사용자에게 필요하기 때문에 작업을 시작할 수 있는 몇 가지 사용자 작업을 정의할 수 있었습니다.

1. 현재 할당 기본 설정을 새 할당 프로필과 비교
2. 급여와 형평성 사이의 할당 분할을 선택합니다.
3. RSU와 옵션 간의 지분 분할을 선택하십시오.
4. 요약 검토
5. 기본 설정 제출
6. 추가 질문에 대한 지원 및 기타 문서에 쉽게 액세스하십시오.

그 연습을 통해 우리는 높은 신뢰도의 흐름을 식별할 수 있었고 아이디어 스케치를 시작하고 각 분야의 전문가와 공유할 수 있었습니다.

적극적인 협업 > 비동기식 피드백

신뢰도가 높은 UI 블록 맵을 확보한 후 여러 분야의 협업 의식을 시행했습니다. 일주일에 두 번 각 분야(법률, 재무, 인재, 엔지니어링)의 리더 그룹에게 가장 강력한 UX 옵션을 제시하는 세션을 가졌습니다. 우리는 질문을 하고 각 분야의 의사 결정자에게 UX 접근 방식의 근거를 설명했습니다. 또한 특정 항목이 작동하지 않는 이유를 이해하고 솔루션을 통해 공동으로 작동하는 훌륭한 방법이었습니다.

이러한 협업 세션은 여러 가지 이유로 매우 강력했습니다.

• 여러 분야가 통합된 사용자 경험 비전에 따라 조정되었습니다.
• 변화하는 요구 사항에 따라 UI를 신속하게 조정했습니다.
• 작동하지 않는 솔루션에 대한 과도한 설계의 위험을 최소화했습니다.
• 엔지니어는 제안된 솔루션의 기술적 타당성을 평가하고 직관적으로 쉽지 않은 일에 대한 위험과 기회를 식별할 수 있습니다.
• 프런트 엔드 엔지니어는 신속하게 프로토타이핑을 시작할 수 있으므로 디자인한 경험을 테스트하고 느낄 수 있습니다.
• 우리는 긴 Slack 스레드와 이메일을 통해 피드백, 근거 및 아이디어를 전달하는 것을 피하여 에너지와 시간을 절약했습니다.

명확한 시스템 설계

새로운 보상 시스템에 온보딩하는 직원이 슬라이더를 오른쪽이나 왼쪽으로 드래그하여 총 보상 할당을 조정하는 것은 매우 간단합니다. 하지만 UX 팀이 이 독특한 도구를 설계하여 그 결과를 달성하는 것은 결코 쉬운 일이 아닙니다. 따라서 사용하기 쉬운 UI 뒤에 숨겨진 복잡성을 다루겠습니다.

사람들은 금융 개념에 대해 서로 다른 수준의 지식을 가지고 있습니다. 직원들에게 새 시스템을 설명하는 재무 문서를 받았을 때 "급여 대 자기자본", "RSU 대 옵션", "X의 %가 Y의 %에 영향을 미쳤다"와 같은 개념을 보았습니다. 우리는 이것을 간단하게 만들어야 한다고 생각했습니다 .

우리는 직원의 할당 결정과 관련된 스트레스를 최소화하고 직원이 자신의 선택을 통제할 수 있도록 돕고 싶었습니다. Shopify Flex Comp 시스템은 직원들에게 선택 의지를 제공하는 긍정적인 도구입니다. 금융 및 법률 전문가와 긴밀히 협력하여 시스템을 설계할 때 사용자가 경제 개념을 이해한다고 가정하기 쉽습니다.

복잡성 풀기

새 가구를 사서 조립하려고 하면 항상 부품과 기능이 설명된 사용 설명서가 함께 제공됩니다. 작업을 성공적으로 수행하는 데 도움이 되는 단계별 가이드가 있습니다.

지침은 조립할 조각에 직접 인쇄되지 않습니다. 왜요? 이는 인지 부하가 ​​높고 사용자 오류 및 좌절감의 위험이 높아집니다. ( 항상 매뉴얼 읽기를 싫어하는 사람 .)

가구 조립 비유를 사용하여 이 새로운 시스템의 두 가지 주요 측면에 대한 보다 정확한 목표와 결과를 정의했습니다.

1. Flex comp UI : 사용자가 선택하고 기본 설정을 제출합니다. 즉, 작업 지향적인 부분입니다.
2. 내부 문서 및 지원 자료: 사용자는 이 새로운 도구 및 기본 논리와 관련된 각 금융 개념에 대해 자세히 알아볼 수 있습니다.

그러나 두 측면 모두 똑같이 중요했습니다. 가구의 경우 이해 관계가 낮습니다. 가구를 충분히 조립했다면 설명서 없이도 성공할 수 있습니다. 그리고 망가지면 그냥 분해하고 다시 시도하면 됩니다. comp에 대한 재실행이 없습니다. 일단 선택하면 직원의 선택은 다음 선거 기간까지 고정됩니다. 직원이 도구를 사용하여 내리는 선택은 생계에 직접적인 영향을 미치므로 처음부터 이해하는 것이 중요합니다. 실습 부분의 이론에 빠르게 연결되는 도구 설명이 있으면 사용자가 정보에 입각한 결정을 내릴 수 있습니다.

이러한 의도적인 세분화를 통해 보다 집중된 UI를 설계하고 이 새로운 직원 경험에 수반될 수 있는 불필요한 인지 부하를 최소화할 수 있었습니다.

사람들은 단기 기억에 많은 정보를 저장할 수 없습니다. 특히 여러 개의 추상적이거나 비정상적인 데이터 조각이 빠르게 연속적으로 쏟아지는 경우에 특히 그렇습니다. 닐슨 노먼 그룹

슬라이더 레시피

숫자 매개변수 선택을 위한 여러 대화식 제어 옵션이 있습니다. 예를 들면 스테퍼, 행렬, 가상 노브, 슬라이더, 텍스트 필드 및 토글이 있습니다. 상황에 따라 각각 적절할 수 있습니다. Flex Comp 메인 컨트롤의 경우 UI가 백엔드에서 수정되고 처리되는 사용자 데이터를 자연스럽게 매핑하기를 원했습니다.

오류 상태를 최소화하는 방법

우리는 고유한 변수로 쌓인 여러 슬라이더로 옵션을 탐색했으며 UI가 너무 많은 오류 시나리오를 처리하고 전달해야 한다는 것을 금방 깨달았습니다. (그리고 누가 UI에 의해 고함치는 것을 좋아합니까?!)

여러 슬라이더 컨트롤을 하나의 합계 값에 묶을 때 사용 가능한 합계에서 각 슬라이더를 너무 많이 또는 너무 적게 할당하는 경우가 많았습니다. 그 결과 직원의 총 할당 값이 지속적인 오류 상태가 되고 모든 것을 파악할 때까지 페이지의 기본 제출 작업이 차단됩니다.

좋은 오류 메시지도 중요하지만 최상의 설계는 애초에 문제가 발생하지 않도록 주의 깊게 방지하므로 오류가 발생하기 쉬운 조건을 제거하는 개념에 집중해 보겠습니다.

우리의 최종 접근 방식은 사용자가 항상 유효한 상태에 있어 보다 긍정적이고 즐거운 경험을 제공한다는 것을 의미합니다.

탐색과 정확성 사이의 올바른 균형

복잡한 매개변수를 사용하면 다음 두 개념 간에 균형을 설정해야 합니다.

• 탐색: 사용자가 매개변수의 전체 범위에 대한 제어 효과를 쉽게 탐색할 수 있도록 합니다(이 경우 컨트롤러를 밀어서) .
• 정밀도 : 사용자가 특정 값을 정확하게 선택할 수 있도록 합니다(이 경우 텍스트 필드 사용).

각 끝에서 사용자가 입력하거나 키보드 탐색을 통해 정확한 숫자에 쉽게 도달할 수 있는 텍스트 필드를 볼 수 있습니다. 이러한 컨트롤의 조합으로 구성 요소는 이 시스템의 모든 디자인 요소에 대한 필수 요구 사항인 W3C/WAI 표준을 준수합니다. 가드레일은 또한 사용자가 할당된 제한을 벗어나는 값을 선택하지 못하도록 합니다. 각 개별 사용자의 시나리오는 고유하며 자체 제한이 있습니다.

프로세스의 각 단계에서 우리는 출시 날짜라는 매우 중요한 요소를 염두에 두었습니다. 그 날짜는 우리가 V1의 핵심 부분에 집중하는 데 도움이 되었으며 올바른 결정을 신속하게 내리는 데도 도움이 되었습니다.

이 설계 모험의 끝에서 우리는 지쳤지만 솔루션에 대한 확신이 생겼습니다. 우리는 프로세스를 신뢰했고 설계 시작 요구 사항 목록의 모든 상자를 확인할 수 있었습니다.

• 사용하기 쉬운가요? ✔️
• 접근 가능합니까? ✔️
• 지역별 규제 차이를 준수합니까?✔️
• 좋아 보이나요? ✔️

Shopify Flex 광고는 첫 번째 옵트인 창에서 92%의 옵트인 비율을 보였습니다. 수천 명의 Shopify 직원이 사용하며 수십 개 국가에서 다양한 통화로 사용할 수 있습니다. 세계 최대 기업 중 일부는 현재 인재 및 보상 시스템을 재설계하면서 조언을 구하고 있습니다.

이 모험을 돌이켜보면 몇 가지 핵심 요소가 제 생각을 완전히 바꿔 놓았습니다.

이 프로젝트가 길고 잔잔한 강 여행처럼 느껴지지 않을 것이라는 점을 처음부터 받아들이는 것이 매우 중요했습니다. 이러한 태도와 마음가짐으로 우리는 여러 변화와 공격적인 일정에도 불구하고 생산적인 팀 정신을 유지하면서 주요 목표에 집중했습니다.

UX 디자이너는 의사 결정 테이블에 사용자 공감을 가져오는 사람입니다. X 또는 Y 결정이 사용자 경험에 해를 끼치고 궁극적으로 제품에 대한 사용자 만족도에 영향을 미칠 수 있는 이유를 설명합니다. UX 디자이너가 소수인 팀을 추진하려면 많은 에너지와 동기가 필요하지만 매우 중요합니다. 작성 및 개발 프로세스 전반에 걸쳐 사용자의 관심, 요구 및 경험을 강력하게 옹호하는 것이 Flex Comp 성공의 핵심이었습니다.

이 아름다운 여정을 당신과 함께 할 수 있게 해주셔서 감사합니다. 즐겁게 읽으셨기를 바랍니다. 대화하고 연결하고 싶다면 언제든지 여기 로 연락하세요 .