LYCLE

OVERVIEW

'라이클' 은 자전거 레저를 시작 하는데 "어려움"을 느끼는 사람들에게 "쉽게" 구매하고 "즐길" 수 있는 레저 문화를 만들고 있습니다.

라이클은 레저를 쉽게 즐길 수 있는 환경을 만드는 것을 목표로 하는 서비스입니다.

특히, 자전거를 구매하는 과정에서 느끼는 어려움을 줄이고, 누구나 부담 없이 자전거를 경험할 수 있도록 돕는 것에 집중하고 있습니다. 자전거를 사고 싶어도 복잡한 선택 과정과 높은 가격의 이유로 망설이는 사용자가 많습니다. 라이클은 이러한 문제를 해결하기 위해 일반 구매와 인수형 렌탈 구매를 결합한 새로운 솔루션을 제공하는 프로젝트입니다.

라이클 구경하기

✔️ Role

팀의 핵심 가치인 ‘공헌의 이익’을 중심으로, 사용자가 실제로 자전거를 경험하고 구매할 수 있도록 전환율 향상에 집중하여 단순한 방문자가 실제 구매 고객으로 전환될 수 있도록 설계했습니다.

Product Designer

UX Research

User Interviews

User-test

Wireframe

User-test

QA Test

Wireframe

Design System

Contents Design

UX Research

User Interviews

User-test

Wireframe

QA Test

Design System

Tools

Figma

Mouseflow

Slack

Jira

Miro

Notion

Slack

Jira

Microsoft office

Slack

Growthbook

illustrator

Product Team

CTO

Designer

Engineer

Responsibility

Product Designer로서, 팀의 목표 달성을 위해 사용자 경험을 깊이 연구하고, 시각적 설계를 전략적으로 활용하며, 다양한 실험을 통해 전환율을 극대화하는 데 집중했어요.

Impact

첫 3개월 동안 구매 전환율을 20% 이상 향상시키고, 결제 시도자 수를 기존 대비 15% 증가시켜 공헌이익에 의미 있는 성과를 만들어냈습니다. 서비스의 일관성을 위해 디자인시스템을 구축했어요.

✔️ Why?

라이클은 다양한 구매 조건이 요구되는 자전거를 구매하기 위해 쓸모없이 발품 파는 시간은 줄이고, 온라인에서 자전거를 가장 간편하게 찾고 구매할 수 있는 모바일 플랫폼을 제공하는 동시에 , 객단가가 높은 전문 자전거 산업을 고려하여 다양한 금융 서비스 제공을 통해 고객의 초기 지출 부담을 줄이고 합리적인 소비를 만듭니다.

자전거 시장은 다양한 고려 요소가 존재하는 특성상 구매 과정이 복잡하고 결정을 내리는 데 많은 시간이 소요됩니다. 오프라인에서 직접 시승 후 구매하는 것이 일반적이지만, 온라인에서 자전거를 쉽고 편리하게 탐색하고 비교할 수 있는 경험은 부족한 상황이었습니다.

라이클은 이러한 문제를 해결하기 위해 자전거 탐색부터 구매까지의 전 과정에서 고객이 느끼는 불편함을 최소화하는 것을 목표로 합니다. 특히, 초기 진입 장벽을 낮추고 고객이 신뢰할 수 있는 정보와 결제 옵션을 제공하여 온라인에서도 자전거를 쉽게 구매할 수 있도록 돕는 것이 핵심이었습니다.

✔️ What?

객단가가 높고 가격 비교가 필수적인 자전거 시장에서, 고객이 원하는 제품을 빠르고 간편하게 구매할 수 있는 방법을 끊임없이 고민했습니다. 단순히 상품을 나열하는 것이 아니라, 고객의 구매 패턴과 유입 경로를 분석해 가장 효율적인 탐색 경험을 제공하는 것이 핵심이었어요. 이를 통해 타 플랫폼과 차별화된 경쟁력을 확보하는 것이 목표였습니다.

프로덕트 디자이너로서, 구매 조건이 복잡하고 가격이 높은 제품도 부담 없이 선택할 수 있도록 설계된 이커머스 경험이 어떻게 전환율에 영향을 미치는지 직접 실험하고, 개선하는 과정에 몰입했습니다. 단순한 UI 개선을 넘어, 실제 비즈니스 성과로 연결되는 디자인의 역할을 고민하며, 사용자와 비즈니스 모두에게 의미 있는 임팩트를 만들고자 했어요.

✔️ Defining Problem

과도한 가격비교는 오히려 독이다

과도한 가격비교는 오히려 독이다. 외부 유입 사용자들은 낮선환경을 싫어한다

자전거 구매를 희망하는 사용자들은 매우 다양한 루트로 라이클로 유입이 됩니다. 그중에서도 가장 많은 비중인 네이버가격비교의 경우, 직접 가격비교부터 스팩 비교..

의사결정과 전환율은 매우 밀접한 관계를 갖고는..

이미지: Qualitative % Quntitative Research

문제1

문제2

문제3

리서치 자세히 보기

✔️ Solution

사용자(상담원)와의 원활한 커뮤니케이션 및 다양한 연구 방법을 통해 얻은 통찰을 기반으로, 비효율적인 요소들을 제거하고 플랫폼의 전반적인 구조를 개선하여 고객응대 시 사용자가 빠르고 정확한 서비스를 제공할 수 있는 환경을 조성하는 데 중점을 두었습니다.

파악된 핵심 문제를 해결하기 위해 각 Pain-point를 기회로 삼아 불편함을 최소화하고, 동시에 사용자가 익숙한 방식을 유지하면서 업무 효율성을 극대화할 수 있는 솔루션을 제공했습니다.

솔루션 자세히 보기

✔️ Design Outcome

기존보다 더 많은 정보를 제공해야 했던 상황에서 두 개의 플랫폼을 통합함으로써 사용자가 익숙한 UI 요소와 플로우를 유지했고, 한층 발전한 정보 계층 구조로 인한 가독성을 보완했습니다. 또한 Casa 디자인 시스템과 컴포넌트 라이브러리의 구축으로 디자인 일관성을 확립하여 사용자의 혼란을 방지했습니다.

As Is

To Be

디자인 자세히 보기

✔️ Why?

캐나다 통신사 Telus Communications의 고객 서비스 상담원 NPS(순고객 추천 지수) 집계에서 확인된 고객들의 불만족 수치 상승으로 인해 해당 결과를 이해하고 개선하기 위해 시작된 프로젝트입니다. NPS 결과에 따르면 많은 고객들이 응답 시간이 너무 오래 걸려 불편하다는 피드백을 제공했습니다.

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 특성상 모든 프로젝트 참여자들이 언제든 이해할 수 있는 문서를 제작하는 것은 매우 중요한 일이었습니다.

Worshop에서 제작한 Information Architecture

-(NDA)로 인하여 자세한 내용을 공유하기 어렵습니다-

Worshop에서 제작한 Information Architecture

-(NDA)로 인하여 자세한 내용을 공유하기 어렵습니다-

Worshop에서 제작한 Information Architecture

-(NDA)로 인하여 자세한 내용을 공유하기 어렵습니다-

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

Opened

Closed

Profile Page - Charted data

Opened

Closed

Opened

Closed

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?

01. 하나를 선택하고 수행하자

특정한 사용자 플로우에 집중하여 전반적인 직관성과 효율성을 강조했지만, 문제를 더 세밀하게 좁힐 여지가 있다는 것을 발견했습니다. 정보 수정 경험은 여전히 시작부터 끝까지 넓은 범위로 느껴졌으며, 이로 인해 일부 기능을 개선했지만 사례 연구에 포함시키지는 않았습니다. 다음에는 문제를 더 작은 부분으로 분해하고 각각을 개별적으로 해결할 계획입니다.

02. "수렴" 단계를 간과하지 말자

아이디어를 여러 방향으로 펼치는 것을 허용했지만, 그 중 주로 발전시킬 아이디어를 철저히 선택하지 않았습니다. 결과적으로, 중요성이나 우선순위를 평가하지 않고 모든 작은 요소를 재설계하려고 했습니다. 디자인 프로세스에서 아이디어를 생성하는 것만큼 선택하는 것도 중요하다는 것을 배웠습니다.

03. 보이지 않는 요구의 발견

리서치 인터뷰 중에 사용자들은 일반적으로 Casa에 대해 만족을 표현했습니다. 그러나 구체적인 질문을 통해 그들의 보이지 않는 요구를 발견할 수 있었습니다. 이는 개선의 기회를 의미합니다! 사용자 경험을 재설계하거나 향상시키는 것은 단순히 귀찮은 순간을 해결하는 것뿐만 아니라 사용자가 직접 인식하지 못한 문제를 다루는 것을 의미합니다.

More Projects

한인 커뮤니티 모바일 서비스

Team Mohae

Mobile

Design System

Startup

한인 커뮤니티 모바일 서비스

Team Mohae

Mobile

Design System

Startup

Mobile Community Service App

Team Mohae