클라이언트
Team Anonymous
참여
Product lead, full-time 100%
- 초기 팀 멤버로 팀 빌딩, 프로덕트 설계와 기획, 빌드에 참여했습니다.
- 팀이 나아가야 할 목표와 골, 타겟 설정, 비즈니스 플랜 설정과 계획 수립에 참여했습니다.
- 타겟층을 분석하고 얻은 인사이트를 팀원들과 공유하고 기획에 반영하였습니다.
- PMF (Product Market Fit) 테스트를 위한 디벨롭먼트 플랜을 계획했습니다.
- 타겟 유저 모집과 광고집행을 주도하고 설문지, 유저피드백 설문 등에 참여했습니다.
- PMF 테스트를 위한 유저플로우 설계와 디자인을 집행했습니다.
- CMS를 연결한 반응형 웹페이지를 제작, 배포했습니다.
- 그 외에도 초기 팀 멤버라면 마땅히 진행했을 업무에 모두 참여하였습니다.
비즈니스 모델, 타겟 유저설정, 왜 패션인지, 업계의 전망, 프로젝트에 관련한 데이터 등은 언급하지 않습니다.
Client:
UI designer
Duration:
Role:
4-5 months, 2020
The Guardian
Location:
London, UK
아래와 같은 2가지 경험을 기반으로 중장년 여성 대상 패션 이커머스 플랫폼 스타트업 멤버로 참여했습니다.
1. 의류 전문 구매대행 운영 경험
영국에서 의류를 전문으로 다루는 연매출 억대의 구매대행 사업을 운영했습니다. 이 때의 경험으로 이커머스와 의류 관련 사업에 대한 이해도가 높아졌습니다.
2. 시니어를 위한 디자인을 해 온 디자이너
가디언에서 UI 디자이너로 일하면서 늘 최우선으로 신경썼던 부분은 바로 유저들의 접근성 Accessibility 이었습니다. 가디언 유저들의 평균 연령은 45세이고, 그들을 위한 디자인을 하는 것이 매우 중요했습니다. 폰트 사이즈, 간격, 색상 대비, 낮은 디지털 이해도 Low digital literacy 를 보완하기 위한 여러 시나리오를 고려하는 과정을 반복했습니다.
타겟 유저들을 관찰하며 그들의 pain point 와 insight를 알아보았습니다.
Insight: 온라인에서의 소통
- 오픈 채팅방, 그룹 채팅방 등에서 사소한 이야기를 나누며 안부를 전함
- 중장년 커뮤니티에서 자연 사진, 음악이나 감성 글귀를 공유하며 하루를 시작하고 마무리함
- 기본 이모지의 활용도가 굉장히 높음
Pain point: 불편한 스마트폰 사용
- 화면이 작고, 글씨는 더 작음. 화면을 캡쳐해서 확대해서 읽거나 돋보기 등을 사용함
- 폰트 사이즈는 가장 큰 사이즈로 설정해 놓음. 폰트사이즈 변경이 안되는 앱은 사용하기 쉽지 않음
- 조금만 직관적이지 않아도 화면 조작이 어려워짐. 실수가 많고 뒤로 가기 버튼을 자주 사용함
Pain point: 중장년의 온라인 쇼핑
- 온라인 쇼핑을 어려워함. 원하는 물건을 찾기까지의 과정이 길고, 최저가를 찾다가 잘못된 광고 상품을 선택하기도 함
- 의류 쇼핑의 경우 원하는 제품을 어떻게 검색해야 할 지도 분명히 알지 못하고, 영어가 친숙하지 않아 이해하기 어렵기도 함
- 반품 과정을 어려워하고 불편해 함. 전화통화를 선호함
타겟 유저들이 겪는 pain points 를 바탕으로 아래와 같이 ‘쉽고 간단한’ 의류 쇼핑을 정의했습니다.
간단해야 쉬워진다
- 한 화면에 보여주고 싶은 구성요소가 늘어날 수록 간격은 타이트해지고 글씨는 작아집니다. 반드시 보여주어야만 하는 요소를 추려내고, 필요한 기능만을 남기고자 했습니다
- 기존의 의류 상세페이지를 보면 늘 끝나지 않는 사진의 반복과 스크롤의 연속이었습니다. 화면 최상단에는 할인, 프로모션과 동시에 A인지 B인지 C언어인지 구분하기 어려운 제품명과 설명이 혼재했습니다
- 여러 화면을 보며 유저에게 정말 필요한 게 뭘까? 를 고민하고 가감하고자 했습니다
이렇게 비워진 공간은 타겟 유저들을 위한 폰트 사이즈를 키우거나, 혹은 쇼핑에서 반드시 필요한 요소가 아니지만 흥미를 유발할 수 있는 요소(nice-to-have’s) 를 넣어 기존의 이커머스와는 다른 쇼핑 경험을 제공하고자 했습니다.
제한된 화면 안의 구성요소가 간단해지면 한번에 받아들이는 정보의 양이 적어집니다. 유저들은 화면에 대한 부담이 덜해지고, 필요한 것을 명확하게 전달받기 때문에 쉽다고 느끼게 됩니다. 쉬워지면 앱(서비스) 접근에 부담이 없고, 더 중요한 것에 초점을 맞출 수 있게 됩니다. 제품정보 자체입니다.
온라인 의류 쇼핑이 가진 맹점 해결하기
온라인 의류 쇼핑은 익숙하지만, 사실은 쉽지 않습니다.
- 사진과 실물의 차이에서 오는 불편함
- 확인하기 어려운 사이즈에서 오는 불편함
- 교환, 환불을 요청할 때의 번거로움
- 3~7일 이상 소요되는 환불
이것은 온라인 의류 쇼핑이 친숙한 사용자에게도 불편한 요소들이며, 디지털 가독 능력이 높지 않은 타겟 유저들에게는 더욱 큰 불편함으로 다가옵니다. 이러한 불편함은 차별화된 온라인 쇼핑 경험을 제공하기 위해 반드시 풀어야 할 숙제라고 정의했습니다.
PMF 테스트에서도 그 불편함을 풀어 주거나, 풀어줄 수 없다면 풀어준다는 경험을 제공해주자 했습니다. 해외 사례들을 찾아가며 적용가능한 요소들을 찾아 적용했습니다.
무료배송, 무료반품
- 무료배송, 반품은 구매를 고민하는 구매자의 장벽을 낮춰 줌
- Nike, ASOS, COS 등의 브랜드는 프리페이드 반품라벨을 동봉해서 배송
온라인 의류 쇼핑이 가지고 있는 장벽을 낮추기 위해 무료배송, 무료반품을 도입했습니다. 이는 아래의 BNPL과 연결되어 더욱 부담없는 온라인 쇼핑 경험을 제공하기 위함이었습니다.
BNPL (Buy Now Pay Later) 의 도입
- 구매까지 이어지는 총체적인 경험을 프리토타입 단계에서 제공하기 위한 방안으로 도입
- 신규 서비스에 대한 낮은 신뢰도를 선배송 후결제로 해결
- 무료 반품 과정에서 발생할 수 있는 금액적인 불필요한 과정 최소화
- 주소지 입력과 결제를 나누어 진행, 구매 과정 간소화
BNPL은 의류 쇼핑이 가지고 있는 결제과정을 줄여줌과 동시에, 시장의 반응을 보는 단계에서 사용자에게 총체적인 경험을 제공하기 위해 도입되었습니다. 신규 서비스를 사용함에 있어 결제정보와 같은 사항을 입력했을 때 오는 보안적 요소에 대한 불안감을 없애주고, 실제 제품을 배송받고 난 후 결제 요청을 함으로서 무료반품 과정에서 생길 수 있는 번거로운 환불 과정 또한 최소화할 수 있었습니다.
A. 쉽고 간단한 메인페이지
메인페이지가 수행해야 할 역할은 무엇일까요? 유저가 원하는 제품의 탐색과 발견을 도와주는 것입니다. 팀에서는 제품 도달 과정을 최대한 줄여주는 것이 성공적인 메인페이지라고 정의했고 개인화 작업을 통한 맞춤형 제품을 소개하는 방법으로 여정을 최소화시켰습니다.
동시에 기존 일반 이커머스 화면을 분석, 비교하는 과정을 거쳤습니다. 불필요하거나 필수적이지 않은 요소들을 배제하고 타겟 유저들이 이해하기 쉬운 메인페이지를 제작했습니다.
쉽고 간단한 제품 카드
매장에 방문했을 때의 경험을 바탕으로, 제품을 파악하기 위한 최소 요소를 정의했습니다.
- 제품의 사진(디스플레이)
- 설명(점원)
- 가격(상품태그)
제품을 파악한 후 구매로 이어지기 위해서는 그 제품에 흥미를 가져야 합니다. 어떤 제품과 설명에 흥미를 가질까요?
- 유저가 필요하거나, 관심이 있거나, 좋아하는 색상의, 원하는 디자인과 비슷한 제품이며, 그 제품을 유저가 원하는 감성으로 담아낸 사진
- 이해하기 쉽고 한눈에 들어오는 설명
- 유저의 눈높이에 맞는 가격
위와 같은 분석을 바탕으로 아래와 같은 해결 방안을 제시, 쉽고 간단하면서도 구매유도가 가능한 카드를 디자인했습니다.
- 개인화 작업을 통한 맞춤형 상품 사진 제시
- 타겟 유저들에게 친근하고 익숙한 언어로 쉽게 상품을 설명
- 타겟 유저들이 주로 방문하는 쇼핑몰의 가격대를 비교, 중하위 가격대의 제품군으로 구성
쉽고 유용한 카드 디자인
- 사진 → 설명 → 가격 순으로 정보를 받아들이는 구성에 맞춤
- 세로형 카드로 좁고 긴 모바일 화면의 가로면적 사용 최대화
- 한번에 쉽게 소화할 수 있는 양의 정보를 여러 장 전달 가능
- 추후 구성 변화에도 빠른 대응 가능
.jpeg)
쉽고 이해가 쉬운 사진
- 제품 뿐만 아니라 스타일링까지 함께 제시하는 사진
- 스튜디오에서 모델이 찍은 사진이 아닌, 친근한 사진
- 거리감이 없는 사진은 내가 입어도 실패할 가능성이 낮겠다는 기대감을 심어 줌
.jpeg)
쉽고 이해가 쉬운 글
- 글을 작성하는 사람도, 읽는 사람도 모르는 영어이지만 한글인 설명들이 대부분
- 느낌적인 느낌을 전달하기 위함일 수 있지만 타겟 유저들에게는 느낌으로 이해하기도 힘들 수 있음
- 친근한 말투(~예요/~랍니다)와 타겟층이 주로 쓰는 것으로 관찰된 어휘(e.g. 멋쟁이) 등을 사용하여 다가가기 쉬운 설명으로 수정하는 작업을 거침
차별화된 쇼핑 경험: 유저의 이름을 불러주는 서비스
- 타겟 유저들은 마음에 와닿는 감성 문구 등을 교환하며 서로를 챙겨주는 경향이 있는 것을 확인
- 그릭모모(가칭)는 이커머스 쇼핑 웹사이트로 다가가는 것이 아닌, 유저의 또래 / 친구처럼 감성적으로 다가가는 서비스를 표방
- 테스트 기간 동안 상시로 업데이트되는 상단의 문구로 편지를 전달받는 듯한 감성을 전달하고, 그들의 이름(닉네임)을 넣어 더욱 개인화된 경험을 제공
유저들은 제품들을 재미있게 보고 있을까?
첫 PMF 테스트 당시 유저들은 한 번에 보여지는 제품의 개수가 적으니, 더 많은 제품을 보여주었으면 좋겠다는 의견을 제시했습니다. 제품의 개수를 늘리면서 더보기 버튼을 추가해 다음과 같은 목적을 달성하고자 했습니다.
- 유저들이 페이지 끝(부근)까지 도달하는지를 확인
- 제품들을 나눠서 로딩함으로서 로딩속도가 빠르다(고 인지하도록 유도)
B. 제품 상세 페이지
상세페이지에 반드시 들어가야 할 필수 요소 정리
- 사진, 4-5장 (앞, 뒤, 상세, 라이프스타일 (옷을 잘 나타내는 사진))
- 가격
- 옷의 특징
- 사이즈
.jpeg)
90% 이상 줄어든 쉬운 상세 페이지
- 끝나지 않는 스크롤에 엄청나게 많지만 또 비슷한 사진들, 그리고 문자까지 이미지로 한번에 작업이 되어서 사이즈를 키우거나 할 경우 깨지는 설명과 작은 글씨 사이즈
- 해외 브랜드 (Nike, ASOS, COS 등) 에서는 아주 짧은 설명으로 상세페이지가 없으며, 구매에 지장이 없다는 것을 확인
- 따라서 업계의 관행일 수 있고, 불필요하고 긴 설명이 꼭 필요하지 않다 판단
- 짧고 가벼운 상세페이지는 로딩속도를 줄여줌 → 딜레이 없는 더 빠른 정보전달 가능
흥미유발을 위한 이모지 사용
- 타겟 유저들은 다른 연령층보다 유달리 이모지의 활용도가 굉장히 높다는 것을 확인
- 편안하고 친구처럼 다가가는 서비스가 되고자 했기에 유저층의 특징을 받아들여 이모지를 적극적으로 사용
쉬운 정보전달을 위한 언어번역
- 상세페이지에서 제품의 특장점 설명을 짧고 굵게 줄이는 작업 진행
- 너무 어려운 영어단어는 순화하는 작업을 거치고, 미사여구를 빼고 제품을 구입하는 데에 필요한 요소만을 정리
쉬운 구매유도 설명
- 제품이 마음에 든다면 아래의 ‘버튼’을 눌러 진행할 것을 고지
- 그릭모모(가칭) 서비스가 제공하는 이점을 설명하며 믿고 구매할 것을 권유
무료배송, 무료반품
- 무료배송, 반품은 구매를 고민하는 구매자의 장벽을 낮춰 줌
입어보고 구매결정하기: BNPL 의 순화된 표현
- 구매까지 이어지는 총체적인 경험을 프리토타입 단계에서 제공하기 위한 방안으로 도입
- 신규 서비스에 대한 낮은 신뢰도를 선배송 후결제로 해결
- 무료 반품 과정에서 발생할 수 있는 금액적인 불필요한 과정 최소화
- 주소지 입력과 결제를 나누어 진행, 구매 과정 간소화
.gif)
C. 결제 페이지
- 개발 상의 어려움으로 사이즈와 배송지 입력이 같은 페이지 상에서 진행
- 결제 관련 정보도 같은 장소에서 받아와야 했고, 페이지가 너무 길어지는 것과 동시에 결제시스템을 시장 테스트 단계에서 도입을 해야 한다는 한계가 있었음: BNPL 도입의 이유
신뢰와 안심을 주기 위한 메시지
- 최상단: 구매결정이 옳은 선택이었다는 것을 알려 주는 메시지로 흥미를 유도
- 동시에 이 페이지에서 무엇을 해야할 지 알려주는 역할을 함
- 입어보고 구매결정하기 BNPL 을 한번 더 설명해 신뢰를 더해줌
- 가장 많이 물어보는 질문인 ‘배송’ 관련 질문에 미리 답함으로서 신뢰도를 더함
- 그릭모모(가칭) 서비스 연락 방법을 알려 줌으로서 도움요청이 가능하다는 것을 알려줌
이해하기 쉬운 입력창
- 정보입력 페이지에서도 마찬가지로 목소리 톤 유지
- 과하지 않으면서도 마치 상담사가 옆에서 물어보듯이 질문해 마지막까지 일관된 쉬운 그릭모모(가칭) 경험을 제공
- 결제 페이지의 디테일과 마찬가지로 개발 상의 어려움으로 인해 기본 폼 형태 사용
- 이 페이지의 고도화는 이후에 고민하기로 결정
.jpeg)
구매완료 페이지
- BNPL 을 반복해서 언급함으로서 BNPL 서비스가 어색한 타겟 유저들에게 신뢰 제공
- 타겟 유저들에게는 다소 생소한 서비스를 제공하기 때문에 왜 이 서비스를 제공하기 시작했는지를 언급, 신뢰 제공
- 유저들에게 익숙하고, 그래서 더 신뢰가 가는 카카오톡 링크를 배치해 진짜 서비스(같은) 경험 제공
.jpeg)
.png)
%20(1).png)
.jpeg)
노코드 툴 Webflow
- 개발자가 팀에 없기도 했지만, 가설 검증은 그야말로 가설 검증을 위한 단계이기 때문에 자체적으로 해결하기로 결정
- 반드시 구현해야 하는 기능들을 추려내고, 구현이 가능한 것과 가능하지 않은 것이 무엇인지를 확인해 가며 비교
- 툴 자체의 완성도가 높고, 커뮤니티가 충분히 활성화되어 있으며, 다양한 튜토리얼이 존재해 원하는 대로의 제작이 가능해 보이는… 무엇보다도 디자이너(저입니다😅 ) 가 본인의 포트폴리오 홈페이지를 제작하면서 어느 정도 툴을 사용할 줄 알기 때문에 얼추 구현이 가능하겠다 가늠할 수 있었던, 웹플로우로 선정
개인화된 페이지 제작
- 유저들의 이름(닉네임)을 언급해 개인화된 경험을 제공해주는 것이 목표 중 하나
- 웹플로우의 CMS 를 이용해 모든 유저들에게 고유의 URL을 부여하고 스프레드시트로 내용을 업데이트하는 것으로 목표 달성
DB 작업
- 테스트에 필요한 방대한 양의 데이터를 스프레드시트에서 작업 후 csv로 변환
- 가지고 올 데이터를 선정하고, 필요한 가이드라인을 제작 후 배포
- 데이터베이스를 가지고 오는 작업, 그리고 그 데이터베이스에서 기준에 맞는 이미지와 문구로 1차 처리가 완료된 스프레드시트를 받아 검수 / 수정 / 보완하는 작업을 진행
문제 해결 사례:
CMS 랜덤 이슈
- 방대한 양의 CMS csv를 웹플로우에 업로드할 때 ‘랜덤’ 에러 발생
- 업로드가 이루어져야 할 이미지 필드가 랜덤으로 비어서 5장이 있어야 할 이미지들이 4장만 보이는 이슈. 규칙을 찾아서 해결해보려 했지만 상당히 랜덤, 하나하나 찾아서 빈 이미지를 채우기에는 CMS 양이 너무 많았음
- 다른 텍스트들은 다 잘 올라가는데 왜 유독 이미지 필드만 잘 되지 않을까? 웹플로우의 문제일까? 생각하고 웹플로우를 탓하다가 뭐라도 해보자는 심정으로 웹플로우 고객센터에 이메일을 보냄
- 문제를 정확하게 전달하기 위해 몇 통의 이메일이 오가고, 웹플로우 쪽에서도 엔지니어가 붙어서 파일들과 csv 셋업을 확인
- 그 결과: 웹플로우의 문제가 아닌 우리가 이미지를 업로드하고 불러오는 구글 드라이브의 URL 이 일으키는 문제였음을 확인
- 구글의 이미지 리퀘스트가 100개를 넘어가면 그때부터 불러오는 이미지들은 랜덤으로 불러와지거나 / 불러와지지 않는 규칙을 알게 되었고 이 문제는 드랍박스나 박스닷컴을 이용하면 해결이 되는 것임을 확인
- 그렇게 이 문제는 드랍박스에 이미지를 옮겨서 링크를 가지고 오는 방식으로 해결. 이미지를 찾아서 수동으로 하나하나 다시 올려서 URL을 받는 작업을 진행할 수도 있었겠지만 그건 현재에도, 그리고 미래에 같은 문제가 발생했을 때를 고려했을 때 효율적이지 않다고 판단. 그리고 팀은 구글 포토 링크를 사용하지 않게 되었음 😅
커스텀 폰트 로딩 이슈
- 손글씨체로 멋스럽게 쓰여진 유저들의 이름과 멋진 문구로 개인화된 경험을 전달해주고자 함
- 깔끔하면서도 손으로 쓴 듯한 느낌이 나는 글씨체를 찾아서 적용했는데 문제는 이 폰트파일이 무거워 특정 모바일 스크린에서는 로딩이 되지 않거나, fallback 폰트로 표시가 되는 이슈 발생
- 다른 폰트로의 대안을 고민했으나 이 폰트가 가장 취지에 잘 맞아떨어졌기 때문에 폰트를 화면에 표시할 수 있는 방법을 동원함
- 폰트 파일 형식 중 가장 가벼운 woff2 로 변환시켜 적용
- 페이지를 로딩할 때 폰트를 가장 먼저 로드할 수 있는 코드를 head에 입력
- 폰트 파일 디스플레이 형식을 기본인 swap 에서 auto 로 수정 (중간에 시스템폰트로 보여주었다가 넘어가는 것 없이 바로 '흰화면' 후 보여줌으로서, 노출될 수 있는 어색한 변환과정을 없애는 것을 선택)
- 위의 방법을 모두 적용한 결과, 커스텀 폰트가 무사히 예쁘게 모든 화면에 표시됨 🎉
스타트업을 짧게 경험하면서
- 매일 문제를 직면하고 그것을 해결해 나가면서, 동시에 고도화를 진행하는 건 어려운 일이라는 것을 경험
- 어렵지만 문제를 해결해 나가면서 얻을 수 있는 것은 단순히 회사와 프로덕트의 고도화뿐만 아니라 함께 일하는 사람들의 소중함, 스스로의 실력에 대한 믿음, 나아가서는 삶을 대하는 긍정적인 태도까지 가져다 주었음
- 즐거운 시간이었습니다!
