OVERVIEW
Casa는 "데스크탑 원(Desktop One)" 및 "스마트 데스크탑(Smart Desktop)"등 기존 툴을 대체하기 위해 설계된 새로운 All-In-One 플랫폼입니다. 디자인 팀은 Telus의 고객 상담 서비스 담당자가 사용하는 CRM(Customer Relationship Management)에서 발생하고 있는 비효율성에 대한 문제를 파악하고, 사용자 경험에 중점을 두며 사용자 피드백을 최대한 반영한 솔루션을 제공하는 프로젝트였습니다.
저는 UX/UI 디자이너로서 Stakeholders의 요구를 충족하기 위해 Squad 내에 개발자들과 협업하여 최대한 빠르고 정확하게 문제점을 파악한 후, 다양한 리서치를 통해 적절한 솔루션을 제공하는 임무를 맡았습니다.
사용자의 업무 환경의 효율성을 향상시키고 빠른 고객응대 서비스를 제공함으로써 순고객추천지수(NPS)가 20% 이상 상승했으며, 요금제 및 재계약 전환율도 10% 이상 증가하는 성공적인 결과를 이뤄냈습니다.
✔️ Role
Figma
Mouseflow
PM
Scrum
Designer
Engineer
+10
✔️ Defined Problem
파악된 문제들은 사용자의 혼란과 지연으로 이어져 고객 서비스 경험에 부정적인 영향을 미친다는 사실을 파악하였습니다. 이러한 문제를 해결하기 위해 팀 내에서 여러 Stakeholder들과의 의견을 모으고 PM과의 소통을 통해 새로운 통합 CRM 플랫폼이 필요하다는 결론에 도달했습니다.
✔️ Solution
사용자(상담원)와의 원활한 커뮤니케이션 및 다양한 연구 방법을 통해 얻은 통찰을 기반으로, 비효율적인 요소들을 제거하고 플랫폼의 전반적인 구조를 개선하여 고객응대 시 사용자가 빠르고 정확한 서비스를 제공할 수 있는 환경을 조성하는 데 중점을 두었습니다.
파악된 핵심 문제를 해결하기 위해 각 Pain-point를 기회로 삼아 불편함을 최소화하고, 동시에 사용자가 익숙한 방식을 유지하면서 업무 효율성을 극대화할 수 있는 솔루션을 제공했습니다.
✔️ Design Outcome
기존보다 더 많은 정보를 제공해야 했던 상황에서 두 개의 플랫폼을 통합함으로써 사용자가 익숙한 UI 요소와 플로우를 유지했고, 한층 발전한 정보 계층 구조로 인한 가독성을 보완했습니다. 또한 Casa 디자인 시스템과 컴포넌트 라이브러리의 구축으로 디자인 일관성을 확립하여 사용자의 혼란을 방지했습니다.
RESEARCH
Process
디자인 프로세스는 2주 간격의 Agile Sprint 시스템을 따라 진행되었습니다. Foundation & Strategy에서부터 In-sprint Design, Build, 그리고 Publish까지 진행되었으며, 각 섹션은 2주 동안의 기간이 주어졌습니다.
디자인 업무 외에도 주기적으로 디자인팀과 개발팀이 협업하여 디자인 시스템을 구축하고, 디자인 시스템 행동 규칙과 패턴에 대한 문서화를 진행했습니다. 또한 아이콘 디자인 작업에도 참여했습니다.
01. Background
Casa 프로젝트는 10개 이상의 Squad로 구성되어 있었으며, 각 Squad에는 개발자들, UX/UI 디자이너, 프로젝트 매니저, 그리고 스크럼 마스터가 있어 대규모의 구조를 형성했습니다.
근본적인 문제의 원인을 도출하기 위하여 다양한 리서치, 워크샵, 인터뷰를 진행하였으며, 저는 개발자 팀원들과 원활한 소통과 협업 정신의 업무문화를 만들며 좋은 시너지를 느낄 수 있었습니다.
같은 Squad의 개발자 동료들
Casa는 "데스크탑 원(Desktop One)" 및 "스마트 데스크탑(Smart Desktop)"등 기존 툴을 대체하기 위해 설계된 새로운 All-In-One 플랫폼입니다. 디자인 팀은 Telus의 고객 상담 서비스 담당자가 사용하는 CRM(Customer Relationship Management)에서 발생하고 있는 비효율성에 대한 문제를 파악하고, 사용자 경험에 중점을 두며 사용자 피드백을 최대한 반영한 솔루션을 제공하는 프로젝트였습니다.
02. Understanding Structure
프로젝트를 시작하기 앞서, 고객서비스 상담원 부서의 구조와 업무시 어떤 과정과 절차를 통해 서비스가 이루어 지는지를 이해하기 위하여 전반적인 구조를 파악하기 위해서 간단한 구도표를 제작했습니다. 디자인 동료 및 사용자 그룹과의 효과적인 커뮤니케이션을 통해 프레임워크와 운영 시스템에 대한 정보를 시각화하여 모든 팀원이 보고 이해하기 쉽도록 했습니다.
03. User Interviews
저는 기존 접근 방식에 대한 경험과 사용 패턴에 관하여 10명의 사용자를 인터뷰했습니다. 인터뷰에서 얻은 인사이트를 토대로 확인한결과, 디자인 프로세스에서 세운 가설이 디자인 팀의 일반적인 의견이 아닌 사용자의 의견을 기반으로 하고 있음을 확인하는 데 도움이 되었습니다.
Further Insights
✓ 10명 중 8명의 사용자가 고객 서비스에 참여할 때 항상 웹 기반 환경을 사용했습니다. 10명 중 2명의 사용자는 PC 템플릿을 사용했지만 PC를 선호했습니다.
✓ 10명 중 8명의 사용자가 자주 사용하는 기능 이외의 새로운 기능을 탐색하고 학습하는 것을 꺼렸습니다.
✓ 10명 중 10명의 사용자에게 고객 서비스에서 가장 많이 사용하는 기능은 메뉴 탭이었습니다. 10명 중 9명의 사용자가 메뉴 탭 기능이 사용자에게 정확한 콘텐츠를 효과적으로 필터링하지 못한다고 믿었습니다.
04. Validation of defined problem
사용자 및 이해관계자(PO, PM, 콜센터 상담원, 콜센터 매니저)들과 진행한 워크샵을 통해 파악한 문제를 검증하는 절차를 밟았습니다. 워크샵은 4단계로 구성되었으며, 첫 단계에서는 플랫폼의 문제를 브레인덤프 방식으로 나열했습니다. 이후, 투표를 통해 문제들을 다시 배열하고, 4개의 큰 카테고리로 분류했습니다. 각 카테고리에 대표 문제 제목을 지정하고, 5 Whys 방식으로 근본적인 원인을 파악하는 세션을 진행했습니다.
05. Define Problems
오래된 사용자 경험, 사용자 인터페이스 및 디자인 시스템은 콜센터 상담원의 서비스 퀄리티를 저해하며 작업 효율성에 상당한 영향을 미치는 것을 확인 하였습니다. 따라서 새로운 개선된 사용자 경험 및 사용자 인터페이스가 필요합니다.
06. Hypothesis
Telus 콜센터 상담원들을 위한 고객응대를 위한 모든 필수 기능이 통합된 올인원 툴을 제공함으로써 고객응대 서비스의 효율성을 높이고, 이로써 고객 만족도를 향상시킬 것으로 기대합니다.
07. Information Architecture
전체 스쿼드의 디자이너들과 제품 소유자, 스크럼 마스터 등 총 수십 명의 이해관계자들과 협력하여 전체 플랫폼의 정보 구조와 흐름을 Information Architecture로 조직화하고 문서화했습니다. 대규모의 구조를 갖고 있는 Casa 특성상 모든 프로젝트 참여자들이 언제든 이해할 수 있는 문서를 제작하는 것은 매우 중요한 일이었습니다.
IDEATE
01. Design Opportunities
리서치 과정에서 발견한 문제들에 대한 해결책으로 3가지 솔루션을 개발했습니다. 사내 기밀 정보 보호 정책으로 인해 상세한 과정을 공개하기 어렵지만, Google Sprint Workshop과 같은 다양한 접근 방식을 활용하여 해결책을 도출했습니다.
02. Opportunities for Improvement
Casa 플랫폼의 사용자 흐름을 최적화하기 위해, 위에서 파악한 문제들을 더 자세히 살펴 개선할 부분을 상세히 기술했습니다. 제한된 권한으로 전체 플랫폼 디자인을 직접 수정할 수 없는 팀 규모를 상황을 고려하여, 특정 영역에서 세 가지 새로운 접근 방식을 시도했습니다.
PROTOTYPE & TEST
Casa의 내비게이션 바는 사용자가 필요로 하는 기능을 쉽게 찾을 수 있는 도구입니다. 사용자에게 다양한 데이터를 빠르고 쉽게 제공하기 위해서는 명확한 데이터 계층 구조를 제공합니다.
기존 방식
기존 플랫폼의 상단 내비게이션 바는 사용자가 필요한 기능을 찾는 데 매우 비효율적이고 조직화되지 않은 것으로 나타났습니다. 새로운 Casa 플랫폼에서는 모든 기능을 분류하여 사용자가 쉽게 접근할 수 있는 환경이 필요했습니다.
User Survey
다섯 명의 사용자와 설문조사를 진행하였고, 설문조사의 목표는 메뉴 네비게이션 바 기능에 대한 실용성을 파악하기 위하여 실시한 것으로, Qualitative 질문과 Quantitative 질문을 각각 준비하였습니다.
두 가지 설문조사를 통해 대부분의 사용자가 실제 고객 응대 중 필요한 기능을 찾는 과정에서 가장 많은 시간이 소요된다고 응답했습니다. 이를 통해 메뉴 네비게이션 바의 필요성에 대한 확신을 얻었고, 설문 조사에 참여한 사용자들과 PM, Head of Product, UX Design Lead와 함께 Casa에서 제공하는 기능을 필터링하여 Information Architecture을 설계했습니다.
Information Architecture
Initial Prototype
첫 번째 프로토타입에서는 플랫폼 상단에 메뉴 네비게이션 바를 위치시켜 사용자가 언제든지 어떤 상황에서도 쉽게 접근할 수 있도록 설계했습니다. 새롭게 제작한 정보 구조를 기반으로 한 네비게이션 바에는 상단에는 사용자가 작업 중인 고객의 계정을 표시하는 1차 구역이 있고, 하단에는 각 메인 기능이 나열된 2차 구역이 있습니다.
Usability Testing
초기 프로토타입 이후, 제안된 디자인 솔루션을 검증하기 위해 5명의 사용자와 사용성 테스트를 진행하여 사용자 피드백을 기반으로 디자인 솔루션을 조정하고, 이러한 솔루션이 사용자 여정에 미치는 전반적인 영향을 측정했습니다.
테스트 결과는 예상보다 더 성공적이었습니다. 대부분의 사용자들이 내비게이션 메뉴 바가 추가된 것만으로도 매우 만족스러워했으며, 전체 흐름, 위치 및 디자인 측면에서 이해하기 쉽다고 평가했습니다.
그러나 작업 4에서 확인할 수 있듯이, 프로세스 중에는 편리했지만, 내비게이션 바의 상대적으로 큰 크기 때문에 작은 화면 모드에서는 페이지 콘텐츠의 대부분이 가려져 정보를 찾는 데에 불편함을 겪었습니다. 사용자들은 스크롤 바를 많이 사용해야 했기 때문에 이러한 문제점을 언급했습니다.
✔️ Adjustment
Task 4 - After
테스트 중 발견된 문제를 해결하기 위해, 필요할 때 네비게이션 메뉴 바 자체를 숨길 수 있는 두 번째 업데이트를 구현하여 모든 불편함을 제거했습니다.
Main Page - Casa 360 Overview
Profile Page - Charted data
Main Page - Casa 360 Overview
왼쪽 이미지는 메뉴 네비게이션 바가 활성화된 상황을 나타내며, 오른쪽에는 햄버거 메뉴 아이콘을 통해 네비게이션 바가 숨겨진 상황을 보여줍니다.
이 접근 방식은 사용자가 복잡한 데이터 관리 과정에서 화면 크기로 인한 제약으로 방해되는 요소들을 완전히 시야에서 숨길 수 있으며, 필요할 때 다시 활성화할 수 있는 사용자 맞춤 편의 기능을 제공합니다.
Profile Page - Charted data
이러한 구조는 특히 차트 형식의 데이터를 다루는 상황에서 두드러집니다. Profile Page - Charted data 에서 제한된 화면 크기에서도 사용자가 필요한 데이터에만 집중할 수 있도록 화면을 필요에 따라 축소하는 환경을 지원합니다.
Solution 02
Auto Search
두 번째 솔루션은 사용자가 고객 서비스 중에 고객의 개인 정보를 입력하고 수정하는 페이지에서 주소를 검색할 때 반자동 검색 기능을 제공합니다.
이 기능은 캐나다 우체국 API를 활용하여 주소를 입력하면 사용자가 수동으로 주소를 반복해서 확인하고 유효성을 검증할 필요 없이 검색 및 확인 과정을 단순화하여 매우 효율적으로 시간을 절약할 수 있습니다.
Previous Approach
기존 고객 정보 수정 과정에서 플로우 자체가 매우 혼잡하고, 작은 공간에 과도한 정보가 밀려있는 것처럼 느껴졌습니다. 사용자는 모든 정보를 직접 입력해야 했으며, 입력한 정보의 정확성을 확인하기 위해 다른 플랫폼에서 검색하거나 고객에게 다시 문의해야 했습니다. 이러한 과정을 통해 정보 입력 및 수정 절차가 이루어졌습니다.
Initial Prototype
첫 번째 프로토타입에서는 고객정보를 입력하는 과정에서의 가독성을 극대화하기 위해 노력했습니다. 페이지 제목부터 Input Label까지 특정한 정보 계층의 구조를 정의하여 사용자가 정보를 쉽게 찾을 수 있도록 했습니다. 또한, 사용자가 주소를 입력할 때는 Inputbox에서 자동완성 기능을 제공하여 사용자의 번거로움을 최소화했습니다.
Usability Testing
제안한 디자인 솔루션을 확인하고 사용자 피드백을 기반으로 조정하였으며, 이 솔루션이 사용자 경험에 미치는 전반적인 영향을 측정하기 위해 5명의 사용자와 사용성 테스트를 실시했습니다.
테스트 중에 대부분의 사용자들이 Task 2의 수평 입력 패턴을 즉시 인식했지만, 한 명의 사용자는 처음에 복잡하게 느꼈습니다. 자동 검색 결과 추천 및 이후의 검증 프로세스(Task 4 및 Task 5)를 수행하는 동안 대부분의 사용자들이 불편함을 느꼈습니다. 사용자들은 기능에 대한 설명이 충분하지 않았다고 언급했으며, 이로 인해 기능이 어떻게 작동하는지 대부분 추측하게 되었습니다.
✔️ Adjustment
Task 4 - Before
조정하기 전에는 사용자가 주소를 검색 입력란에 입력하고 자동 검색 시스템이 즉시 나타나는 과정이었습니다. 그러나 그 과정에 이르기 전에, 사용자들은 어떤 주소를 입력해야 하고 더 자세한 주소를 어디에 입력해야 하는지 이해하지 못했습니다.
Task 4 - After
조정 후에, 사용자가 프로세스 중 알아야 할 모든 정보를 명확하게 전달하기 위해 안내 배너를 구현했습니다. 또한, "검색"을 의미하는 아이콘(돋보기)을 표시하여 입력란이 검색에 사용된다는 것을 명시했습니다. 추가로, 사용자가 자세한 주소 정보를 입력해야 할 경우를 대비하여 자동 검색 입력란 아래에 보조 주소 필드를 추가했습니다.
Task 5 - Before
조정 이전에는 사용자가 주소를 입력한 후에 하나씩 수동으로 유효성을 검사해야 했습니다. 테스트 중 사용자가 가장 혼란스러워하는 프로세스는 유효성 검사 과정 중이었습니다. 초기 프로토타입의 유효성 검사 프로세스는 직관적이지 않았으며, 사용자가 최적의 옵션을 수동으로 찾아야 했습니다.
Task 5 - After
조정 이후에는 팝업 모달에서 유효한 주소 옵션 두 가지만을 표시하여 사용자 혼란을 최소화했습니다. 이 덕분에 사용자는 업데이트 과정 중 정보를 검토할 마지막 기회를 제공함으로써 신속하고 정확한 유효성 검사 과정을 경험할 수 있는 환경을 제공합니다.
Solution 03
Information Hierarchy
가장 중요한 디자인 요소인 정보 계층에 대한 해결책으로, 우리는 새로운 플랫폼에서 디자인 시스템을 활용했습니다. 팀에 합류했을 때 디자인 시스템은 미완성 상태였습니다. 저는 이러한 문제를 해결하고 불규칙한 플랫폼 패턴과 매우 낮은 가독성을 개선하기 위해 디자인 시스템을 연구하고 완성하기 위해 노력했습니다.
가장 중요한 디자인 요소인 정보 계층에 대한 해결책으로, 우리는 새로운 플랫폼에서 디자인 시스템을 활용했습니다. 팀에 합류했을 때 디자인 시스템은 미완성 상태였습니다. 저는 이러한 문제를 해결하고 불규칙한 플랫폼 패턴과 매우 낮은 가독성을 개선하기 위해 디자인 시스템을 연구하고 완성하기 위해 노력했습니다.
FINAL DESIGN
회사의 비밀 유지 규정으로 인해 정보를 공유하는 데 제한이 있음을 이해해 주시기 바랍니다.
REFLECTION
What Would I Do Differently?
특정한 사용자 플로우에 집중하여 전반적인 직관성과 효율성을 강조했지만, 문제를 더 세밀하게 좁힐 여지가 있다는 것을 발견했습니다. 정보 수정 경험은 여전히 시작부터 끝까지 넓은 범위로 느껴졌으며, 이로 인해 일부 기능을 개선했지만 사례 연구에 포함시키지는 않았습니다. 다음에는 문제를 더 작은 부분으로 분해하고 각각을 개별적으로 해결할 계획입니다.
아이디어를 여러 방향으로 펼치는 것을 허용했지만, 그 중 주로 발전시킬 아이디어를 철저히 선택하지 않았습니다. 결과적으로, 중요성이나 우선순위를 평가하지 않고 모든 작은 요소를 재설계하려고 했습니다. 디자인 프로세스에서 아이디어를 생성하는 것만큼 선택하는 것도 중요하다는 것을 배웠습니다.
리서치 인터뷰 중에 사용자들은 일반적으로 Casa에 대해 만족을 표현했습니다. 그러나 구체적인 질문을 통해 그들의 보이지 않는 요구를 발견할 수 있었습니다. 이는 개선의 기회를 의미합니다! 사용자 경험을 재설계하거나 향상시키는 것은 단순히 귀찮은 순간을 해결하는 것뿐만 아니라 사용자가 직접 인식하지 못한 문제를 다루는 것을 의미합니다.
