클라이언트
The Guardian (London, United Kingdom)
팀
Product manager, Engineers, UX designer, UX researcher
참여도
UI 디자인 100%
- 와이어프레임과 플로우 제작에 관여하여 유저의 사용성과 직관에 맞는 디자인을 제시, 반영하였습니다.
- 가디언 디자인시스템을 사용하여 프로덕트를 설계하였고 목적에 맞는 아이콘과 컴포넌트를 제작, 디자인시스템에 반영하였습니다. (예시: 페지네이션, 드랍다운, 아이콘, 알림 메시지, 라디오버튼과 텍스트박스 등)
- 프로토타입을 제작하여 사용성 테스트에 참여하였습니다.
- 디벨로퍼와 함께 일하며 피그마로, 미팅으로 협업; CODE 환경에서 디자인을 테스트하고 피드백을 제공하여 설계의 정확도를 높였습니다.
- 릴리즈 후 들어갈 nice-to-have 아이디어를 미리 디자인으로 제작, 공유하여 백로그에서 픽업할 수 있게 준비했습니다.
- 다른 프로덕트 팀의 디자이너들과 진행상황을 공유하며 일관된 브랜딩을 유지하고 팀 간의 필요한 리소스를 공유, 연결하였습니다.
Client:
UI designer
Duration:
Role:
4-5 months, 2020
The Guardian
Location:
London, UK
팀에서 발견한 문제점: 36.8%의 문의는 바로
CSR 케이스의 36.8%는 배송 관련 문의
- 가디언지의 신문이나 위클리 매거진 등을 구독하는 구독자 수는 영국 내에서만 약 12만명에 달합니다.
- 한편, 신문이나 매거진과 같은 우편물은 추적이 불가능한 2nd class delivery 로 배송이 이루어집니다.
- 기후적인 요인, 혹은 배송과정에서의 누락과 같은 실수로 인해 배송이 지연된다던지, 혹은 우편물이 도착했지만 다 젖어서 도착했다던지, 훼손되었다던지 하는 이슈가 발생합니다. 그리고, 이와 같은 이슈를 리포트하기 위해서는 반드시 CSR을 통해야만 했습니다.
- 가디언 콜센터에는 한달 평균 3만 건의 케이스가 접수되고 있었고, 팀에서 케이스를 분류, 분석한 결과, 36.8% (약 10,314케이스) 가 배송에 관련된 케이스라는 것을 발견했습니다.
- 상당히 높은 퍼센티지의 배송 관련 케이스가 접수되고 있는 것이 주 문제였습니다. 모든 케이스를 하나하나 접수, 대응하는 수동 방식의 핸들링은 모두 비용이고, 비용은 곧 손실입니다.
Supporter Experience 프로덕트 팀은 가디언닷컴 유저들의 계정을 유지, 관리하는 팀이고, 이러한 콜센터로 몰리는 트래픽에 효율적으로 대응하기 위해 아래와 같은 방안을 제시했습니다.
1. 딜리버리 탭의 신설
네비게이션 업데이트: 프로덕트 중심에서 니즈 중심으로
팀의 결정사항:
- 프로덕트로 분류되는 카테고리, 즉 비즈니스의 관점으로 구분지었던 카테고리를 유저의 관점에서 가장 필요한 카테고리로 구성을 변경했습니다.
- 멤버십 Membership, 섭스크립션 Subscriptions, 컨트리뷰션 Contributions 탭을 없애고 CSR의 문의비중이 높았던 딜리버리 Delivery 와 빌링 Billing 을 추가했습니다.
- 카테고리는 방문 빈도수+중요도를 고려하여 배치되었습니다.
UI 디자이너의 기여:
- 카테고리의 성격을 빠르게 파악할 수 있는 아이콘을 추가, 제작하였습니다.
- 네비게이션 탭을 피그마 컴포넌트로 제작해 가디언 디자인 시스템에 반영하였습니다.
딜리버리 탭의 디자인: 중요도 순 구성
팀의 결정사항:
- 한 프로덕트 안에서 유저가 취할 수 있는 3가지 액션을 중요도 순서에 따라 배치했습니다.
- 프로덕트를 구분하기 위해 섭스크립션 ID와 구독 시작일이 표시됩니다.
- 배송을 받는 주소는 프로덕트를 구분하기 위한 중요한 요소이므로 최상단에 배치됩니다.
- 주소를 업데이트할 수 있는 CTA가 바로 아래에 배치됩니다.
UI 디자이너의 기여:
- 팀의 결정 사항을 바로 디자인으로 적용, 팀에 공유해 아이디어에 대한 빠른 시각화를 도왔습니다.
- 디자인시스템을 적용하여 효율적인 개발을 돕고 헷갈리지 않는 커뮤니케이션을 진행했습니다.
Q: 딜리버리 히스토리 vs 홀리데이 서스펜션 (구독 일시중지)
유저가 딜리버리 페이지에 도달했다면 확인하거나 수정하고 싶은 사항이 있을 수 있습니다. 배송이 그동안 어떻게 이루어졌는지 확인하고, 혹은 휴가일정이 있어 구독을 일시 중지하거나, 중지요청을 취소할 수 있습니다. 어떤 항목이 더 중요할까요?
- 딜리버리 히스토리에서는 배송에 문제가 있을 경우 해당 건을 바로 리포트를 할 수 있습니다. 즉 딜리버리 히스토리 페이지는 ‘유저가 원치 않거나 예상치 못했던’ 상황이 발생했을 때 그것을 빠르게 해결해 줄 수 있는 장소입니다.
- 홀리데이 서스펜션 페이지는 ‘유저가 가디언에게 요청하는’ 장소입니다. 전자는 유저가 만족스럽지 않은 상황일 수 있고, 문제를 해결함으로서 ‘행복한 유저’를 만드는 것이 중요합니다. 필요할 때 빠르게 보이는 것이 중요합니다.
이러한 이유로 딜리버리 히스토리가 홀리데이 서스펜션보다 위쪽에 자리잡았습니다.
Q: 중요도가 다른데 버튼의 색은 왜 모두 동일할까요?
이 페이지에서는 가디언이 유저에게 어떤 액션을 취하라고 ‘상대적으로 더’ 푸쉬할 이유가 없기 때문입니다. 주소를 업데이트하라고, 딜리버리 히스토리를 반드시 체크하라고 알려야만 할까요? 유저는 필요할 때 섹션들을 빠르게 스캔할 수 있고, 액션을 취하고자 한다면 버튼은 원하는 자리에, 충분히 눈에 띄는 수준 (세컨더리 레벨의 버튼) 에 위치해 있습니다.
딜리버리 히스토리: 더 많은 정보를 유저에게
표시되는 정보:
- 구독 배송에 관련한 정보가 표시됩니다.
- 어떤 구독 제품이, 언제, 어디로 배송이 이루어졌는지, 배송 관련해서 유저가 선택하거나 기입한 요청 사항은 무엇이었는지 확인이 가능합니다.
페이지가 가져오는 이점:
- 이러한 정보에 대한 접근이 가능해짐으로서, 유저는 CSR을 통하지 않고도 필요한 정보를 얻을 수 있고, 결과적으로 CSR 트래픽의 감소를 기대할 수 있습니다.
- 예를 들어 신문배송이 이루어지지 않았는데, 내가 주소를 잘못 기입해놓았을 수 있습니다. 휴가 기간에 신문을 받지 않겠다고 신청을 해 놓았는데 휴가가 취소되고 나서 신문이 오지 않는 것에 대해 의아하게 생각했다면, 혹은 날짜 설정을 실수로 잘못 해 놓았었다면? 그러한 의문을 이 페이지에서 해결할 수 있습니다.
- 여전히 무언가 잘못되었다고 느낀다면 유저는 이 페이지에서 케이스를 리포트할 수 있습니다.
접근 가능한 정보들을 한눈에 훑어볼 수 있게 디자인하는 것은 디자인 자체가 쉽냐 어렵냐를 떠나서, 반드시 이루어야 할 목표입니다. 유저들은 이곳에서 필요한 정보를 빠르게 찾고 습득하는 경험을 통해 브랜드를 신뢰하고, 상황을 스스로 컨트롤할 수 있다고 믿게 됩니다. 이후, 더 복잡한 문제에 봉착했을 때 유저들은 가디언을 신뢰하고 스스로 온라인에서 해결하고자 할 것이며, 결과적으로 가디언은 더 많은 프로세스를 자동화시키고 리소스를 효율적으로 분배할 수 있습니다.
UI 디자이너의 기여:
- 구독하는 제품, 리포트 항목과 딜리버리 히스토리의 우선순위와 배치 등을 UX디자이너와 논의하여 디자인에 반영하였습니다.
- 히스토리로 실제로 불러올 수 있는 정보를 개발자에게 요청하고 확인 후 디자인에 반영하였습니다.
- 상태에 대한 시나리오를 수집하고 그에 맞는 아이콘을 제작하였습니다.
- 모바일과 같은 반응형을 고려한 디자인을 진행했습니다.
2. 셀프서비스 딜리버리 리포팅
팀의 결정:
SX팀에서는 정기 구독을 하는 고객들이 휴가를 떠나거나, 구독 일시중지를 원할 때 직접 온라인으로 서스펜션을 신청할 수 있는 홀리데이 서스펜션(Holiday suspension)을 선보였습니다. 이 서비스는 약 96%의 접수율을 기록하며 성공적인 서비스 중 하나로 자리잡았습니다. 그러므로
- 가디언의 구독자들은 이슈가 생겼을 경우, CSR을 통하지 않고도 온라인에서 케이스를 접수할 수 있다는 사실을 인지하고 있다,
- 같은 방식으로 배송 관련 문제를 해결할 수 있는 시스템을 제공한다면 시스템을 충분히 잘 활용할 수 있다.
는 가설을 세웠습니다.
UI 디자이너의 기여:
- UX 디자이너가 설계한 유저플로우를 보고 체크하며 시나리오에 모두 대응이 가능한지를 논의, 확인했습니다.
‘확인한다’ 는 것은 대응할 수 있는 기능을 모두 만들어낸다는 것이 아니라, 대응할 수 있는가? 그렇지 않다면, 어떻게 대응할 것인가? 대응하지 않는다면, 왜 하지 않는가를 확인하는 것입니다. 시스템 상 유저에게 보여줄 수 있는 정보에 한계가 있을 수 있고, 알고 정보를 보여주지 않는 것과 확인하지 않아서 보여주지 못한 것에는 차이가 있습니다. (e.g. 알지만 보여주지 않는다면, 그 다음 릴리즈에서 보여줄 수 있도록 준비하거나, 그에 상응하는 다른 정보를 보여줌으로서 유저를 만족시킬 수 있습니다)
- 간단한 와이어프레임을 디자인으로 옮기기 위한 디테일한 부분들을 함께 논의했습니다.
- 예를 들어 ‘히스토리’ 에 어떤 내용이 들어가는지, 시스템에서 실제로 불러올 수 있는 부분인지와 같은 기능적인 확인을 요청하고, 왜 CTA가 히스토리 위에 위치해야 하는지, Step 1 의 질문의 개수는 최종이며 개수가 늘어날 가능성은 없는지와 같은 부분을 상의합니다.
- 이런 과정을 거치면서 와이어프레임이 수정이 되어 다시 돌아오기도 하고, 혹은 속도에 따라 디자인에 바로 반영되기도 했습니다.
늘 왜? 라는 질문을 던집니다. 버튼은 왜 여기에 놓였지? 왜 여기에서 이러한 정보는 보여주지 않지? 다른 더 편한 방법으로 보여줄 수는 없었을까? 이러한 질문을 해결할 가장 좋은 방법은 이 자료를 준비해 준 동료들의 이야기를 듣는 것입니다. 그들이 내가 고려한 점을 미처 생각하지 못했을 수도 있고, 혹은 이미 고려했지만 이렇게 해야만 했던 이유가 있을 수 있습니다. 전자라면 나의 의견을 반영시킬 수 있고, 후자라면 동료에게서 배우고 함께 성장할 수 있습니다. 😊
가디언 디자인시스템 Source 와의 협업
가디언은 피그마로 디자인 시스템을 구축하기 시작했고, 디자인 시스템은 늘 ‘진화’ 합니다. 디자인 시스템이 절대적이니 무조건 따라야 하는 게 아닌, 디자인을 시작하기 위한 가이드라인을 제공해 주고, 일관된 경험을 제공하기 위한 원칙을 짚어 주는 존재였습니다. 디자인하면서 새로운 색이 필요할 수도, 새로운 컴포넌트가 필요할 수도, 기존의 컴포넌트를 수정해야 할 수도 있습니다. 최대한 간결한 디자인을 적용시켜 복잡한 과정을 단순화시켜야 했던 MMA 프로젝트의 경우 디자인시스템 팀과 긴밀하게 작업하고, 조언을 구하고, 또 디자인시스템을 업데이트하는 과정을 거쳤습니다. 모든 작업이 디자인시스템을 거쳐야만 하는 것은 아닙니다. 다만 일시적인 캠페인 페이지를 디자인하는 것이 아닌, 다음 업데이트가 없는 한 오래도록 사용될 어카운트 내부를 디자인하는 것이었기에 미래 다른 작업과의 통일성을 유지하기 위해서도 반드시 필요한 과정이었습니다.
최종 디자인: Step by step
Step 1 - 문제 선택 단계
프로그레스 바
- 최상단에는 몇 가지의 스텝을 거쳐야 하는지를 보여주는 프로그레스 바가 생성됩니다. 평균 연령이 약 45세인 가디언의 주 유저층을 고려했을 때 리포트를 진행하는 과정이 다소 복잡하게 느껴질 수 있습니다. 간결하게 만들고, 간결하게 느껴지게끔 해야 하고, 그리고 리포트가 제대로 이루어지고 있다는 신뢰를 주어야 합니다.
리포트 이유 구분
- 그 동안 CSR로 접수된 케이스의 주 원인을 분석하여, 유저가 케이스를 접수할 때 선택할 수 있는 카테고리로 분류했습니다. 이는 유저가 직접 입력하지 않게 도와줌으로서 ① 오류발생을 줄이고, ② 케이스 리포트 과정을 더 빠르고 손쉽게 만들어 주며, ③ 케이스 처리를 자동화하는 데에 큰 도움을 줍니다. 위에 해당하지 않을 경우 기타 항목을 선택, 프리텍스트 필드에서 입력할 수 있습니다. 버튼은 다음 Next 이 아닌, Continue to step 2 라고 명확하게 무엇을 진행해야 할 지를 알려줍니다.
회색 영역
- 아래에는 딜리버리 히스토리 항목이 보이지만 현재로써는 선택할 수 없습니다. 이는 스텝 1을 마치면 스텝 2에서는 케이스를 선택할 수 있다는 것을 알려 주며, 진행 과정이 한층 더 예측 가능해짐으로서 유저가 무엇을 하고 있는지를 명확하게 알려줍니다.
Step 2- 문제가 되는 이슈(날짜) 선택 단계
Step 1 필드
- 두번째 스텝으로 넘어오더라도 첫번째의 문제 선택 필드는 자유롭게 수정이 가능합니다.
해당 이슈(날짜) 선택
- 문제에 해당하는 날짜를 선택합니다. 이 항목은 딜리버리 히스토리의 항목과 동일하게 언제, 어디로 배송이 되었는지, 가디언 측에서 배송은 무사히 진행되었는지를 보여줍니다.
- Contact us 메시지는 모든 단계에서 찾아볼 수 있습니다. 이는 유저가 그 어느 단계에서 헷갈리거나 이탈하고자 할 경우, CSR이 도와줄 수 있다는 것을 의미합니다.
회색 영역
- 1단계의 영역과 마찬가지로, 그 다음 단계가 무엇인지를 예측 가능케 합니다.
명확하게 무엇을 해야 하는지 알려주는 에러 메시지
- 어떤 부분이 다음 스텝으로 진행을 할 수 없게 만드는지를 명확하게 알려줍니다.
- 명확하게 표시해 유저가 필요한 행동을 헷갈리지 않고 빠르게 액션을 취할 수 있도록 도와 줍니다.
Step 3 - 등록된 주소 확인 단계
- 확인 도중, 유저는 주소지가 잘못 입력되었다는 것을 알 수도 있습니다. 주소지가 옮겨졌거나, 입력 당시 오탈자가 있어 배송이 제대로 이루어지지 않았을 수 있습니다.
- 문제를 리포트하는 단계에서 이를 확인함으로서 정보의 오류의 문제가 아니었는지를 확인하고, 가디언에서도 리포트하는 유저의 주소지를 최신으로 유지할 수 있습니다.
- 시스템 자동화의 한계로 모든 것을 자유롭게 수정할 수는 없습니다. 안내 메시지를 띄우고 더 복잡한 수정을 원한다면 CSR이 도와줄 수 있다는 메시지를 표시합니다.
- 이는 유저플로우 단계에서 이 상황을 미리 예측하였고 해결할 수 없다는 것을 인지하였기에 가능한 대처입니다.
Step 4 - 리뷰 단계
- 리포트를 제출하기 전에 확인하는 단계를 거칩니다.
- 과정을 거치면서 놓쳤던 부분이 있었다면 이곳에서 체크할 수 있습니다.
Confirmation - 제출 완료
- 선택한 이슈들은 리포트가 이루어졌다는 상태로 바뀌고, 유저는 레퍼런스 넘버를 받습니다.
- 어떤 문제로 인한 리포트였는지에 따라 가디언은 다음 이슈에 사용 가능한 크레딧으로 환불을 처리해주기도 하고, CSR이 상황을 넘겨받기도 합니다.
- 안내 메시지로 유저들에게 미안하고, 서비스를 한층 더 향상시킬 수 있게 노력하겠다는 메시지를 덧붙여 유저들이 케어를 받고 있다는 신뢰를 줍니다.
시스템적인 디자인
- 이 프로젝트에서 주어진 정보와 우선순위를 기반으로 딜리버리 뿐 아니라 Manage my account 가 지향하고 있는 스타일을 디자인했습니다.
- 글씨와 선과 아이콘으로 이루어져 디자인이 아주 간결하고, 내용에 집중할 수 있도록 도와주는 데에 초점을 두었습니다.
- MMA의 다른 항목 (결제나 계정 정보 등)에서도 통용이 가능한 스타일으로, 표시해야만 하는 여러가지 정보를 한번에 스캔할 수 있도록 했으며, 직관적으로 확인 가능한 상태메시지와 아이콘, 색상 등을 사용했습니다.
디벨로퍼와의 협업, 구현, 그리고 피드백
- 디자인이 마무리가 되면 함께 일하는 디벨로퍼(들)에게 전달됩니다. 물론 최종 파일이 되기 이전에도 디벨로퍼들은 이미 피그마 파일에 접근이 가능하고, 디자인 과정에 참여해 디자인이 기능적으로 구현이 가능한지를 확인하는 과정을 미리 거칩니다.
- 디자인이 도착했는데 구현이 불가능하다던지, 보여주는 것에 비해서 소요되는 리소스가 너무 커지는 것을 미리 방지하는 역할을 합니다.
- 기능이 어느정도 연결되고 디자인이 구현이 되면 CODE(Comparison of integrated development environments) 에 올라가게 되고 내부 테스트를 진행합니다.
- 피드백은 한 문서에 정리되어 전달, 수정이 마무리되면 2차 CODE 를 확인하는 과정을 거쳐 최종 릴리즈를 합니다.
디자인이 피그마에 디자인된 디자인과 100% 일치할 수 있다면 참 좋겠지만 일반적으로 디자인의 80% 정도가 제대로 구현이 되면 ‘만족스럽게 구현되었다’ 고 판단합니다. 프로젝트에서 얼마나 비주얼이 중요한가에 따라 다르기는 하지만 ‘눈에 심하게 거슬릴 정도로 어색하거나(고객이 내용에 집중하는 것을 방해할 수 있습니다) ’, ‘불편하거나(고객이 하고자하는 행동을 막을 수 있습니다)’ ‘필요한 기능이 구현이 되지 않았거나’ 를 최우선으로 고려하고, 그 안에서도 우선순위를 나누어 피드백을 전달합니다. 이런 과정을 거치면서 일관된 디자인과 디자인시스템의 활용도가 높아지게 되고(필연적으로…), 서로의 작업을 이해할 수 있게 되며, 피드백을 주고받는 시간이 짧아지고 효율적으로 변합니다.
3. Was it successful?
.png)
Valuable feedback says it all
딜리버리 탭이 공개되었습니다!
- 구글 애널리틱스에 따르면 딜리버리 히스토리 페이지에 방문한 유저들 중 30%는 케이스를 접수하기 위해 방문했습니다.
- 총 가디언 위클리 케이스의 85% 가 온라인으로 접수되었습니다.
- 딜리버리 페이지 오픈 첫 달에 이미 총 케이스의 59%가 온라인으로 접수되기 시작했습니다.
- 온라인으로 접수가 가능하게 되고서부터 지금까지 총 1억 5천만원 정도를 세이빙했습니다.
- 유저들은 쉽고 효율적으로 리포트를 진행할 수 있었다는 피드백을 남겼습니다. 😊
프로젝트는 끝나지 않습니다
- 첫 번째, 두 번째 릴리즈에서는 기술적, 시간적인 이유로 포함하지 않았던 기능들이 있었습니다. 예를 들어, 폭우나 폭설, 태풍과 같은 자연재해, 혹은 그에 준하는 상황이 발생해 배송이 지연되는 경우, 딜리버리 페이지에서 미리 지연에 대한 공지를 확인할 수 있게끔 한다던지, 혹은 리포트를 마치고 난 후에 리포트를 손쉽게 수정하거나 취소할 수 있다던지, 받은 크레딧을 가디언에 기부한다던지 하는 기능이 그것이었습니다.
- 지금 유저에게 가장 필요한 기능을 먼저 제공하고, 그 기능이 잘 작동하고 유저들을 만족시키는지를 확인하고 다음 단계로 넘어가는 방식으로 스프린트를 진행했습니다.
가장 멋지고 사랑받는 디자인이란 어떤 걸까요? 역설적이게도 유저가 가장 디자인에 신경쓰지 않을 때라고 생각합니다. 유저들이 원하는 것을 빠르게 가질 수 있도록 만들고, 콘텐츠에 가장 집중할 수 있도록 도와주는 디자인. 박스, 선, 텍스트 위주로 이루어진 구성이 필요한 충분한 이유가 있다면 그렇게 디자인합니다. 이 프로젝트를 진행하면서 알게 되었죠. I like designing boxes! 😂
