AI Canvas는 코딩 없이, 인공지능을 만들어 볼 수 있는 협업툴로 AI 교육 컨텐츠 또한 함께 제공하는 SaaS 제품 입니다.
“10년 동안 진료를 해오면서 수천장의 동물들 의료 기록이 있어요. 날이 갈수록 바빠지는데.. X-ray 사진을 분석해서 간단하게라도 뼈에 금이 갔는지, 골절인지 다른 문제인지 분류되면 정말 도움이 될것 같아요!”
수의사 A씨가 자신의 개인 병원에 사용할 강아지 X-ray 사진 분석 제품을 만들려면 어디서 부터, 어떻게 시작해야 할까요🤔
📆 작업기간
03/01/2024 → 05/10/2024
✍️ 내 작업
기획, 전략, 리서치, 유저 인터뷰, 사용성 테스트, UXUI
🙋 내 역할
PM/PD로서 프로젝트 리딩 (팀 : CTO1, 개발자 4명, 인공지능 전문가 1명, UXUI디자이너 2명), UXUI 50%
Background
AI Canvas(Beta) 런칭 이후, 마케팅을 따로 집행하지 않고, 기업 교육&세미나 때 소개 등을 통해 랜딩페이지 방문자 3000명 & 유저 16명 (3월)의 유입 0.53% 을 얻을 수 있었습니다.
본격적인 마케팅 및 영업 전, 많은 신규 유저 유입을 위해 해결해야 하는 문제가 있었습니다.
프로젝트 제작 평균 0.5개
가입후 활성 유저로의 전환률 매우 낮음 (프로젝트 제작 평균 0.5개 라는 데이터에 주목)
⚠️ 사실상, 입문 교육 실습용 예제 캔버스 생성 이외 유의미한 프로젝트를 제작하지 않았다는 핵심 문제를 발견
개선 목표 설정
UX개선을 통해 초기 유입 유저의 이탈률을 줄이고, 활성유저로 전환
신규 유저 유입 증가
현재 지표
기업교육시 실습으로 유입된 유저를 제외, 유의미한 회원가입 전환율 0.53%
목표 지표
전환율 1% 이상
→
서비스 이탈률 개선
현재 지표
3월 신규 유저 16명 중 프로젝트를 하나도 제작하지 않은 유저 10명 62%
목표 지표
이탈률 50% 이하
→
활성 유저로 전환
현재 지표
프로젝트 제작 평균 0.5개
목표 지표
프로젝트 제작 평균 1개 이상
서비스 분석
1. 인터뷰&UT
분석 방법 1)
적극적 사용자 선정(대학생 체험단), 3명을 대상으로 40분씩 1:1 in-depth 인터뷰 진행
분석 방법 2)
신규 가입 유저 7명(대학생 체험단&기업교육 교육생) 사용성 테스트, 리뷰 진행
분석 목표
🎯 대학생, 직장인 (개발 경험 한달 이하) 타켓유저의 온보딩-프로젝트 제작까지의 서비스 경험 조사
개선 목표를 위한 분석 항목 :
유저별로 AI Canvas를 사용하는 동기는 무엇인가?
회원가입 → 교육까지 명확한 플로우를 따라가고 있는가?
초기 사용자를 위한 서비스 가이드는 충분한가?
교육 이후 자신의 프로젝트를 제작까지 무리 없이 진행되는가?
서비스 이탈 및 문제 요소는 무엇인가?
-
회원가입 후, 교육 강의를 따라 실습을 진행해보고 자신의 필요에 따라 자유롭게 캔버스 프로젝트를 1개 이상 제작해보세요.
2. 분석
“ 망망 대해에 떨어져 있는 기분🥲”
-
“아무리 노코딩 비개발자가 사용할 수 있는 툴이라고 해도 기본적인 분류, 회귀 같은 AI 모델 이름 자체를 모르면 사용할 수 없어서 구글에 찾아보면서 사용했어요.”
“Docs를 살펴보았으나, 전반적인 언어 설명이 불친절했고, 없는 항목들도 있었어요. 인풋과 아웃풋 설명 용어 자체가 모르는게 많아서 검색해서 봐야해서 불편했습니다.”
-
“AI와 데이터에 대한 기초지식이 전혀 없어서, 어떤 알고리즘에 어떤 데이터가 적합한지 알 수 없어서 더 이상 스스로 할 수 있는게 없다고 느꼈습니다. 결국 빈캔버스에 데이터 노드만 놓고, 아무것도 못해봤어요.. (적합한 데이터를 판단하는 기준 지식 없음)”
“만들고 싶은 주제의 데이터를 찾기위해 무작정 구글링했더니 사용할 수 없는 데이터들이 많아서 유의미한 프로젝트를 제작할 수 없었어요..”
-
“아직 AI Canvas에서 무엇을 만들고 싶은지 만들어야 할지에 대해 아이디어가 없어요..”
“그리고 AI Canvas로 무엇을 하고싶은지(프로젝트 주제), 어플리케이션을 만든다면 무엇을 만들지에 대한 아이디어나 동기가 없어요.”
“AI 모델을 내가 어떻게 활용할 수 있는지, 내가 관심있는 도메인이 주제로 있으면 좋을것 같아요.”
-
“교육 영상을 통해 알고리즘 노드 연결 방법을 학습해도, 내 데이터로 적용할 수 없다는 점. 연결이 안되면 뭐가 잘못된건지 알 수 없는 점.”
“UI, Application 노드는 어떻게 사용하는지 모르고 있는지 조차도 몰랐어요;”
“다른 데이터를 통해 [배웠던 알고리즘]을 적용하려고 하면, 데이터 노드 연결(극초반)부터 막혔습니다..”
-
약 1시간의 커리큘럼 (4챕터) 이루어진 교육은 도중에 이탈할것이라는 예상과는 다르게 대상자의 대부분이 성실히 실행하였고, 오히려 캔버스를 제작하기 위해 더 많은 교육 자료에 대한 니즈를 보였습니다.
1. 아예 인공지능에 대한 기초 지식이 부족한 유형
2. 인공지능을 제작할 데이터가 없는 유형
3. 데이터는 있지만 아이디어 정의가 힘든 유형
4. 아이디어, 데이터는 있지만 캔버스 사용이 어려운 유형
문제와 가설
1. 툴의 자유도와 심플한 UX가 오히려 유저의 이탈을 초래
2. 아직도 어려운 용어와 개념과 찾기 힘든 가이드
3. 데이터, 교육 자료 등 활용할 수 있는 리소스 부족
↓
1. 단계 별로 세분화 하여 니즈와 멘탈 모델에 맞게 UX를 개선한다면 이탈이 줄어들 것이다.
2. 초기 유저는 시스템이 보다 적극적으로 개입한다면, 서비스 숙련도가 더욱 높아질 것이다.
3. 필요 예제를 다양하게 제공하여 활용할 수 있다면, 서비스를 지속적으로 사용할 것이다.
Iteration
전략 수립
초기 사용자 케이스별 UX 플로우 구축하고 개선 전략과 작업 계획을 세웠습니다.
사용자의 서비스 숙련도와 멘탈 모델 맞는 흐름 설계
유저가 활용할 수 있는 컨텐츠를 카테고리별로 분류하고 UI 최적화
초기 사용자에게 필요한 가이드 리스트들 중 중요도를 정하고 효과적으로 전달
On Boarding
🎯 가입 후, 새 프로젝트 생성까지의 유저
전략 : 서비스 첫 랜딩 이후 랜딩 → 교육 → 캔버스 진입 흐름을 자연스럽게 따라올 수 있도록 유도
1. 회원가입 이후 첫 서비스 랜딩
바로 빈 워크스페이스로 랜딩, 한정적인 갯수의 갤러리 콘텐츠가 노출되었습니다.
🔍 인터뷰 참여대상 대부분이 첫 진입시 교육 갤러리로 이동, 새 프로젝트 생성 CTA → 캔버스 생성 후 가이드 혹은 교육을 보기 위해 제작 하지 못하고 이탈하는것을 발견했습니다.
랜딩 가이드
유저가 캔버스를 사용하는 목적이 되는 기능들을 선별하고, 이해하기 쉬운 문구와 이미지 소스로 구성하였습니다.
잘 인지하지 못하고 있었던 핵심 기능 가이드
마지막 단계에서 진입 옵션을 제공하여 해당 페이지로 랜딩하는 흐름
액션 플랜 : 가이드를 이탈과 이탈 후 액션을 분석하고 랜딩 및 가이드 시나리오를 개선할 것 입니다.
2. 첫 프로젝트 생성
아무 액션이 없는 비어있는 캔버스로 생성되었습니다.
인터렉티브 튜토리얼과 예제 데이터로 프로젝트 시작하는 UX를 추가했습니다.
인터렉티브 튜토리얼
다양한 기능성 중, 필수 작동 원리를 따라해 보면서 습득하는 인터렉티브한 튜토리얼을 제공하였습니다.
액션 플랜 : 튜토리얼 단계별 유저 이탈 퍼널을 분석하고 튜토리얼 시나리오를 개선할 것 입니다.
← 피그마로 프로토타입핑과 참고 자료로 디테일한 인터렉션에 대하여 개발팀과 커뮤니케이션을 진행하였습니다.
예제 데이터
데이터 업로드는 캔버스의 가장 첫 단계입니다.
초기 유저가 예제 데이터를 어떤 목적에서 어떻게 활용하고자 하는지 그리고 데이터는 어떤 항목들로 구성되어 있는지 사용자 니즈와 데이터 구성항목과의 관계를 고려하여 UI를 개선했습니다.
새 캔버스 생성시 : 예제 데이터 세트로 시작할 수 있습니다.
예제 데이터 속성 : 데이터 설명 추가, 필터 정리 등 RNB를 최적화하여, 유저가 필요한 데이터세트를 쉽게 탐색할수 있습니다.
캔버스 제작 가이드
🎯 캔버스 제작 중 가이드가 필요한 유저
전략 : Docs의 접근성을 높이고, 노드 제작 가이드를 제공하여 캔버스 제작시 검색과 학습 시간을 줄임
Docs, 용어 설명 접근성 개선
초기유저가 캔버스를 직접 제작할때 빈번하게 방문하는 영역이지만 매번 페이지를 이동하여 검색해야하는 불편함이 있었습니다.
캔버스 전반 가이드 툴팁 아이콘, 설명 호버 추가
Docs 아이콘 서비스 전반 Top Navigation에 Default로 고정
다음 연결노드 추천
노드 간의 연결 = 프로그래밍, 제작된 다이어그램을 분석하여 연결 가능한 노드 추천 UX로 유저의 검색, 학습 시간을 줄일 수 있습니다.
-
연결된 앞의 노드 선행 이후, 사용자가 자연스럽게 추천 노드 기능을 인지할 수 있는 최적의 인터렉션을 고민했습니다.
Contents
🎯 데이터,아이디어가 없거나 인공지능 기초 지식이 없는 유저
전략 : 제공하는 리소스를 다양화하여 유저가 활용하며 자연스럽게 캔버스 숙련도를 높히고, 캔버스 제작을 효과적으로 도움
1. 컨텐츠 다양화
갤러리 섹션에는 캔버스 교육 컨텐츠만 존재
인터뷰와 설문을 통해 얻은 결과를 바탕으로 캔버스를 지속적으로 사용할 수 있는 핵심 전략은 니즈에 맞는 교육과 예제 캔버스, 데이터의 활용으로 설정했습니다.
이를 위해 유관부서에 컨텐츠 업로드의 중요성 공유하고 담당자를 배치할 수 있게 설득하고 개선된 내용에 맞게 제작할 수 있게끔 가이드를 드렸습니다.
→
💫 초기 유저에게 가장 필요한 것은 활용할 수 있는 다양한 리소스
인공지능을 기본 부터 배우고자 하는 유저
AI 이론 교육
아이데이션이 필요한 유저
산업별 예제 캔버스
실제 활용할 수 있는 인공지능을 배우고자 하는 유저
주제별 캔버스 교육
아이디어 구현을 위한 적합한 데이터가 없는 유저
종류별 예제 데이터
2. 분류와 최적화
전체적인 레이아웃은 통일적으로 유지하면서, 각 컨텐츠 별로 사용자에게 필요한 기능과 내용을 선별하여 UX를 개선했습니다.
교육(교육 캔버스, AI 교육), 갤러리(캔버스 템플릿, 예제 데이터)로 위계로 메뉴를 나눠 유저가 명확하게 인지할 수 있도록 하였습니다.
각 컨텐츠 별 썸네일, 상세페이지를 맞춤화하였습니다.
상관관계가 있는 컨텐츠 리스트를 노출하여 이탈을 막고, 흐름이 끊기지 않는 탐색이 가능하도록 설계하였습니다.
-
컨텐츠의 성격에 따라 상세 스펙을 나누고, Admin의 컨텐츠 관리 구조와 유저의 흐름을 설계했습니다.
LNB, 메뉴 구조 변경
낮은 사용빈도를 보이는 LNB 필터를 아이콘으로 변경하고, 사이트 전체 네비게이션으로 통일하여 자신의 캔버스와 컨텐츠를 넘나들며 활용할 수 있도록 개선하였습니다.
커리큘럼 별 중메뉴는 유저가 이해하기 쉬운 문구를 적용하여 교육 컨텐츠를 분류하는 정책을 세웠습니다.
썸네일 뷰 베리에이션
컨텐츠 별 성격에 따라 유의미한 항목만 썸네일에 포함하도록 리스트를 정리하였습니다.
더욱 직관적으로 주제와 컨텐츠 종류를 인식할 수 있도록 썸네일 이미지 가이드를 정했습니다.
추천 컨텐츠
상세페이지의 끝단에서 연관된 컨텐츠 리스트를 노출하여 컨텐츠 활용성을 높이고, 이탈을 줄이는 UX를 설계하였습니다.
예제 데이터 : 해당 데이터를 사용한 캔버스템플릿 리스트
캔버스 템플릿 : 사용한 데이터 리스트
-
전체 UX 흐름과 대응하는 컨텐츠 생성 Admin 시스템 구조와 UI까지 작업했습니다.
Landing Page
🎯 캔버스 소개 랜딩페이지의 방문객
전략 : 랜딩페이지의 메시지와 내용을 개선
목표 : 공식적인 AI Canvas 홍보 이후 새로운 유입에 대비하고 방문객의 회원가입 전환율을 높이는 것
1. 정성적 분석
분석 방법)
🔍 대학생 체험단&기업교육 교육생 7명 설문, 내부 코치 3명 대상 리뷰
설문 항목 :
AI Canvas가 어떤 제품인지 잘 이해할 수 있나요?
자신이 AI Canvas의 장점이 잘 드러나나요?
제품이 자신에게 유용하다고 느껴지나요?
실제 서비스를 사용해본 경험과 랜딩페이지가 소개하고 있는 내용이 일치하나요?
가독성, 컬러 등 디자인면에서 불편한 요소가 있었나요?
분석 목표
랜딩페이지의 핵심 문제를 정의하고, 타겟이 원하는 정보를 명확하게 발견
🤔 캔버스를 사용해보니 유용했던 것들이 있는데 처음에는 알지 못했어요
🤓 그래서 실제로 어떻게 사용하고 있는지, 나한테 필요한걸 뭘 할 수 있는지 궁금해요
😒 우리 회사가 이걸 왜 써야되는지 잘 와닿지 않아요
🥲 개발 경험이 없는 사람이 사용하기에는 어려워 보여요
피드백과 인터뷰를 통해 나온 핵심 경쟁력인 기능들을 리스팅
대학생 후기와 회사 사례를 노출하여 각 타겟의 서비스 사용에 대한 이해도를 높힘
예제 캔버스를 보고자 하는 니즈를 이용하여 회원가입으로의 전환 유도 전략
대부분의 비개발 전공 고객을 메인 타겟으로 서비스의 교육 부분을 강조할 수 있도록 친절한 설명과 예제 추가
메시지가 추상적이고, 기술적인 용어와 광범위한 내용를 전달하고 있었습니다.
2. 랜딩페이지 리뉴얼
핵심 메시지 Learn → Build → Collaborate 으로 스토리라인을 다시 수정하고, 일관되고 쉬운 워딩과 단락으로 수정하여 방문객이 서비스를 쉽게 이해할 수 있도록 기획 하였습니다.
캔버스 예시와 실제 사례를 사용하고, 좀 더 쉽게 AI Canvas가 제공하는 핵심 서비스들을 리스트화 하였습니다.
랜딩페이지 리뉴얼 작업에서는 기획과 디자인 디렉팅의 역할을 수행하였습니다.
자신이 어떤 문제를 해결할 수 있는지, 무엇을 할 수 있는지를 명확히 알수있다면 서비스로 진입할 것이다
My Challenge
⚠️ 경영진과 실무진의 중간자로서 비즈니스 일정과 개발 공수를 산정하여 Task의 우선순위를 정하고 스프린트 단위로 기획 공유 → 디자인 전달 → 개발 진행 체크 → QA를 진행하였습니다.
⚠️ 컨텐츠 제작의 중요성을 설득하여 타부서 담당자를 배치할 수 있게 되었고, 주기적인 업데이트와 컨텐츠 제작에 필요한 전략과 가이드를 전달했습니다.
⚠️ 기술적인 한계와 리소스 부족으로 기획을 수정해야하는 지점들이 생겼을때, 효과는 비교적으로 낮더라도 최대한 UX와 UI로 문제를 해결하는 방향을 찾았습니다.
성과 측정
🔍 성과 측정 방법
기존UX : 4월17일~24일(세계 IT show 이후)
신규UX : 5월1일~8일(AI EXPO 이후)
유의미한 분석만큼의 데이터 수를 확보 하기 위해, 2개의 코엑스 Tech 컨퍼런스 참가 사이 개편된 제품 배포(4월26일), 각 홍보 이후 7일 유입 유저를 비교하였습니다.
🔍 성과 측정 지표
사이트 방문자 대상 회원가입 전환율
0개 제작 유저 비율
프로젝트 제작 평균
1. 결과 요약
회원가입 전환율 1.5% ↑
프로젝트 0개 만든 유저 비율 25% ↓
프로젝트 제작 평균 개수 0.28개 ↑
나의 평가
프로젝트를 0개 만든 유저 비율이 크게 줄어든 것으로 나타나 온보딩~프로젝트 제작까지의 개편이 성공적이었다고 판단됩니다.
그리고 프로젝트 제작 평균 개수는는 목표 수치에 도달하지 못한것을 분석해 보자면, 아직 충분한 신규 컨텐츠의 업로드가 되지 않은 상태인점을 근거로 보았습니다. UX/UI 개선만을 통한 근소한 증가 추이를 나타냈고, 곧 컨텐츠들이 업데이트 된다면, 더욱 높은 증가율이 나올것이라고 판단합니다.
목표
신규 유저 유입 증가
랜딩페이지 회원가입 전환율 비교
(기존) 26.5% - (신규) 28%
전환율 1.5% 증가
→
목표
서비스 이탈률 개선
프로젝트를 0개 만든 유저 비율
(기존) 63% - (신규)37.8%
서비스 이탈률 25% 감소
→
목표
활성 유저 전환
생성 프로젝트/가입사용자
(기존)0.5개 - (신규)0.78개
프로젝트 제작 평균 0.28개 증가
⚠️ Challenge
AB 테스팅 등 테이터를 분석할 수 있는 기술적 셋팅이 안되어 있는 상황이었습니다. 정량적 평가를 위한 데이터 모수 또한 적어 유의미한 수치 분석이 어려운 상태를 극복하기 위해 컨퍼런스 부스 참여를 기회로 포착하였고, 이를 위해 데이터 수집 채널 셋팅을 개발자분께 우선순위로 설득하였습니다. 그리고 한정적인 데이터 내에서 유의미한 수치를 뽑아내기 직접 공부하고, 데이터 분석을 진행하면서 노력했습니다.
