프로덕트

아직 프로덕트가 없습니다.

아티클

전체 보기
김소망

김소망

중요한건 꺾이지 않는 노티

할 일을 명확히 알려주면 불필요한 리소스를 줄일 수 있어요.

제출하신 사진이 반려되었습니다.

하라는 대로 했는데?

어디가 잘못되었다는 거지?

다운로드.png

베리챗, KYC 인증

이런 핑퐁은 바람직하지 못하다. 한 큐에 끝내지 못한 경험은 올여름 습기만큼이나 꿉꿉하다. 잘못 제출된 자료에 대한 후속조치를 하고 재접수를 받는 프로세스는 우리 쪽에도 불필요한 리소스를 가중시킨다.

유저에게 지시를 명확하게 내릴수록 불필요한 에너지 손실을 막을 수 있다. 뿐만 아니라, 플로우가 명확할수록 유저는 심리스한 경험을 할 수 있고, 우리는 정제된 정보를 얻을 수 있기 때문에 서로 윈윈이다.


원페이지 원스텝

화면을 구분해서 보여주세요.

기존의 접수화면은 한 화면에 제출해야 하는 정보가 모두 나열되어 있었다.

1) 개인정보
2) 본인확인용 사진
3) 신분증 사진

특히 2번의 본인확인용 사진이란 건 '신분증을 내 얼굴과 나란히 놓고 찍은 정면 사진'인데, 이걸 이해하지 못하고 증명사진을 올리거나 신분증이 앵글에 포함되지 않은 얼굴 사진만 올리는 유저들이 많았다. 사실 나도 개선안을 그리는 도중에 가이드를 명확히 이해했다...

기존에는 가이드가 소극적이었다. 사진을 업로드하는 영역에 예시 이미지와 텍스트를 표시하고 있었지만, 얼핏 보기에는 나의 정면 사진과 신분증 사진을 업로드하라는 것처럼 보인다.

자세히 들여다보면, 첫 번째 가이드는 나의 정면 얼굴과 신분증이 함께 보이도록 찍으라는 이야기다. 하지만 많은 유저들이 첫 번째 사진에서 신분증 없이 얼굴 사진만 찍어 올리는 등. 반려될만한 사진을 제출하는 경우가 빈번했다.

(상) 기존 / (하) 업데이트 후

그래서 화면을 추가하여 가이드를 보다 명확하게 제시했다. 단계를 구분하여 샘플 이미지와 가이드를 화면에 꽉 차게 표시했다. 카메라가 켜져 있는 상태에서도 가이드가 여전히 보이도록 만들었다.

위 이미지처럼 첫 번째 사진과 두 번째 사진을 업로드하는 단계를 구분했다. 가이드를 숙지하는 호흡을 늦춰 좀 더 명확하게 인지하도록 만들고 싶었기 때문이다. 한꺼번에 많은 정보를 입력해야하는 상황보다는 좀 더 차분하게 자료를 확인하고 제출할 수 있기를 바랐다.


중요한 건

두 번, 세 번 알려줘도 괜찮아요.

나는 부모님과 걸어서 10분 거리에 살고 있다. 때문에 부모님 집에서 식사를 하거나 커피를 마시는 일도 잦다. 그래서 배달어플의 주소를 자주 변경한다.

그런데, 습관적으로 주문을 넣다가 잘못된 주소로 배달하는 일이 종종 있다. 그렇다면 배민이 결제 단계에서 주소를 제대로 확인시켜주지 않는가? 그것도 아니다. 결제 화면 최상단에 배달주소가 떡하니 적혀있다. 그냥 내가 습관적으로 화면을 넘기다가 정보를 놓친 것뿐이다.

오늘도 부모님 집에서 주문을 넣고 있었는데, 결제 직전 단계에 못 보던 모달이 표시되었다. 사실 새롭게 추가된 모달인지 아닌지 기억이 가물가물하다. 하지만 전에는 보지 못했던 모달 앞에서 나는 주춤했고 우리집으로 잘못 보내는 실수를 저지르기 직전에 막을 수 있었다.

(좌) 기존의 결제화면 / (우) 결제 직전 모달

아마도 모달이 없었다면 나는 또 아무도 없는 우리집으로 커피를 배달시키고 말았을 것이다. 그러면 매장에 전화해서 자초지종을 설명하고 주소지를 다시 불러드리거나 결제를 취소하고 재주문하는 등 하지 않아도 될 일들을 또 다시 반복하게 되었을 것이다.


사용자가
직접 체크하게 하세요

그래서 우리도 두 번, 세 번 확인하게 만들었다.

web3에서 시드구문(private key)은 중요한 역할을 한다. 그런데 이 시드구문을 디지털 데이터로 저장할 경우 해킹의 위험에 노출된다. 하지만 많은 사람들이 시드구문 화면을 스크린샷 찍거나 모바일 메모장에 저장하여 발생하는 문제로 CS가 빈번하다. UI로 이와 같은 사고를 미연에 효과적으로 방지할 수 있을까?

기존화면은 위와 같이 '꼭 확인하세요'나 '디지털 기록으로 남기지 마세요'와 같이 안내 메세지를 타이틀로 표시하고 있었다. 하지만, 좌측 화면의 경우 여러 가지 안내문들이 혼재되어 있어, 어떤 정보가 가장 중요한 건지 알기 힘들었다. 마지막 화면에서도 상단에 안내되어 있는 메세지만으로는 위험성을 전달하기에 충분치 않아 보였다.

(상) 기존 / (하) 업데이트 후

그래서 우리는 사용자가 무심코 지나치지 않고 직접 체크하며 단계를 넘어갈 수 있도록 설계했다. 기존에 '주의 사항에 동의한다'는 한 가지만 체크했다면, 개선안에서는 모달로 내용을 한 번 더 강조했다. 추가로 마지막 화면을 닫기 전에 안내문에 동의해야 CTA가 활성화되도록 했다.

이렇게까지 반복적으로 주의를 줘야 하는지 싶긴 했다. 하지만 바쁜 현대사회. 일일이 안내문을 읽지 않고 습관적으로 다음 버튼을 누를 때가 너무도 많다. 좀 귀찮게 하더라도 더 큰 사고를 막을 수 있다면 이 정도 성가심은 용서할 수 있지 않을까.

끝.

원문 보기
https://brunch.co.kr/@00mm/226/write

1
0
김소망

김소망

레거시라는 핑계는 이제 안 통해요

골프 시장을 혁신하겠다는 스타트업이 있어요.

디자인적으로 가장 이상적인 형태였던 초기 프러덕트를 기반으로 작성된 내용이라, 실제 라이브되고 있는 내용과 다른 부분이 다소 있습니다.

기업골프 행사의 80%+가 비효율적으로 운영되고 있다. 일일이 담당자와 통화하여 골퍼를 섭외하고 골프장을 예약하는 등. 아날로그적인 프로세스가 각 단계에 불필요한 허들을 만들어내고 필요 이상의 인력을 투입하게 만들고 있다.

이처럼 레거시한 시장의 문제를 해결하기 위해 우리는 아래와 같이 집중했다.

1. 간편하게 확인하는 프로필
2. 바로 받아볼 수 있는 견적
3. 다른 서비스도 크로스셀링하기


1
지루한 프로섭외 과정
5분 만에 프로 섭외

프로 골퍼 탐색 UI

골퍼 탐색을 위한 패널, 상단이 좋을까 사이드가 좋을까?

좌)상단 패널 / (우)우측 패널

처음에는 깊게 고민하지 않고 필터를 상단에 배치하였다. 무의식적으로 상단에 필터가 위치하는 것이 자연스럽다고 생각했던 것 같다. 하지만, 패널이 상단에 위치하게 되면 그만큼 아래 영역을 잡아먹게 되고, 이게 무거워지면 무거워질수록 탐색 경험에 방해가 된다.

그래서 패널을 우측으로 옮겼다.
패널이 우측에 위치하게 되면서 탐색 영역에 간섭이 덜해졌고 필터 외에도 stepper나 skip버튼을 배치하는 등. 다양한 기능을 추가하거나 확장하기가 용이해졌다.

skip을 어떻게 할 것인가에 대한 고민도 있었다.

draft / hand-off

요구사항은 '해당 단계를 건너뛸 수 있는 skip 버튼'이었다.

좌측 이미지는 radio를 체크하면 건너뛰기가 가능하도록 되어있다. 우측 이미지는 유저가 건너뛰기를 할 수밖에 없는 맥락(=어떤 골퍼를 골라야 할지 모르겠어)을 이용해서 제공할 수 있는 가치(목적에 맞는 골퍼 제안)를 어필하고 있다. 좌측처럼 단순히 건너뛰기를 유도하는 것보다, 맥락을 설명하고 우리가 제공할 수 있는 가치를 한 번 더 어필할 수 있는 우측의 안이 더 좋아 보였다.

골퍼 상세 화면 UI

프로 골퍼의 데이터, 스크린에 뿌리는 게 좋을까 모달을 띄우는 게 좋을까?

스크린이냐, 모달이냐. 이것도 고민이었다. 골퍼의 사진을 보기 좋게 전시하고 많은 볼륨의 정보를 담기에는 스크린이 좋아 보였다. 반면에 가볍게 여러 골퍼의 정보를 탐색할 수 있으며, 사진의 중요도가 낮은 경우에는 모달이 적합해 보였다.

모든 골퍼가 고화질에 보기 좋은 프로필 사진을 보유하고 있으면 좋았겠지만, 실제 그러기는 어려웠다. 또한, 특정 골퍼의 데이터를 디테일하게 확인하려는 케이스보다 여러 골퍼를 둘러보려 하는 유저 특성상 모달을 열고 닫으며 빠르게 여러 골퍼를 탐색할 수 있도록 돕는 게 적합해 보였다.


2

물음표 투성이 불투명한 견적
질문 필요 없는 투명한 견적

홈 화면에서 바로 시작되는 경험

견적서를 보여주기 위한 마지막 하나의 단계까지 줄이고 싶었다. 홈화면의 질문에 응답하면 바로 프로 골퍼의 정보와 가격을 확인할 수 있다. 유사 제품에서 골퍼의 상세정보와 가격을 확인하기 위해 담당자와의 유선 연락을 거쳐야 하는 부분을 과감히 생략하고 투명하게 정보를 제공하고 있다.

앉은자리에서 바로 확인하는 견적

섭외를 희망하는 프로골퍼를 선택하고 나면, 앉은자리에서 바로 세부 견적서를 다운로드할 수 있다. 원래는 여러 관계자들과 통화를 거치고 하루이틀을 기다려야 받을 수 있는 견적이지만, 필드멘토에서는 바로 견적을 확인할 수 있다.

세부 견적서를 작업할 때 유의했던 점은 아래와 같다.

- 불필요한 내용은 날리고 필요한 내용만 보기 좋게 전시한다.
- 화면의 복잡도를 가중시키는 비고란의 메모는 hover시, tool-tip으로 표시한다.
- 무상으로 제공되는 항목도 표시하되 가격란에 약간의 생색을 낸다.
- 최종 견적내용을 미끼로 회원가입을 유도한다.


3
다양한 골프 관련 비즈니스를 턴키로
맡길 수 있다는 점 어필하기

floating button으로 질척이자

홈 화면에 필드멘토에서 제공하는 핵심 서비스 3가지를 설명하고 있긴 하지만, floating 버튼으로 한 번 더 질척이기로 했다. A서비스를 이용하는 고객이 B, C 서비스의 잠재적 고객이 될 수도 있기 때문이다. A, B, C 서비스를 턴키로 맡길 수 있는 곳 = 필드멘토라는 인식을 끈덕지게 심어주고 싶었다.

나가는 유저도 다시 보자

필드멘토에서는 프로섭외뿐만 아니라, 골프장 예약과 골프 행사 운영 대행도 가능하다. 프로 섭외가 필요해서 들어온 유저에게 골프장 예약은 했는지, 행사 운영 인력이 필요하지는 않은지를 추가로 묻는 크로스셀링 모달을 띄워 추가 계약을 유도했다.

저희 이런 것도 잘해요

https://fieldmentor.co.kr/

필드멘토 | 기업 골프 행사부터 프로섭외, 단체 골프장 예약까지

기업 골프 행사부터 프로섭외, 단체 골프장 예약까지! 필드 골프 All-in-one 솔루션 필드멘토

fieldmentor.co.kr

 

끝.

1
0
김소망

김소망

프레이머로 3일 만에 만드는 MVP


프레이머는 인터페이스가 피그마와 거의 유사하다. 그래서 이미 피그마를 다룰 줄 아는 디자이너라면 크게 힘들이지 않고 3일 만에 MVP를 제작하는 것이 가능했다. 또한 바로 배포가 가능하기 때문에 사용자의 반응을 빠르게 확인하고 리드를 수집하기에도 용이했다.


1일 차

프레이머로 웹페이지 디자인하기

디자이너는 첫날 프레이머에서 웹사이트를 디자인한다. 피그마의 오토레이아웃과 컴포넌트를 이미 잘 다루고 있는 디자이너라면 작업시간을 크게 단축할 수 있다.

또한, 심리스 한 UXUI를 위해 다양한 요소들을 직접 커스텀하며 작업할 수 있어서, 요구사항을 반영하며 이것저것  스스로 만들어내는 재미가 쏠쏠했다.

기능 구현 예시 : survey / search / filter

프레이머에서 제공하는 에셋들을 잘 활용하면 다양한 기능을 구현할 수 있다. 사이트 내에서 원하는 정보를 검색할 수 있게 하거나, 필터로 정보들을 소팅해서 볼 수 있게 하거나, 서베이 폼을 제작해 리드를 수집하는 둥 다양한 기능이 구현 가능했다. 가장 큰 장점은 인터페이스가 피그마와 비슷하기 때문에 디자이너 혼자 빠르게 웹사이트를 제작할 수 있다는 것이었다.

survey

서베이 또한 커스텀 자유도가 높아 다양한 형태의 UX를 고려할 수 있다. 기본적인 서베이 컴포넌트에서 조금만 수정하면 인풋필드, 드롭다운, 체크박스까지 커버 가능했다. 이렇게 만들어진 서베이를 구글 시트와 연동하여 리드를 수집하는데, 타 사업부와 실시간으로 공유하면 빠른 대응이 가능하다.


2일 차

CMS 세팅하기

둘째 날, CMS 테이블을 세팅한다. 에이전시에서 인플루언서들의 프로필을 전시하는 사이트를 만든다고 가정해 보자. 이때 CMS로 인플로언서의 사진, 인스타 바이오, 섭외비용, 활동 범위 등 다양한 데이터의 필드를 생성하여, 엔지니어가 크롤링한 데이터를 전시할 수 있다.

디자이너는 이렇게 생성된 필드와 대응하는 인플루언서 상세페이지를 만든다. 그러고 나서 생성된 필드와 대응되는 엑셀파일을 import 하면 다량의 데이터를 손쉽게 전시할 수 있다. 디자이너가 아닌 팀원들도 엑셀파일로 데이터를 업로드하기만 하면 잘 정돈된 상세페이지에 착착착 들어가 전시된다. 초기에 세팅만 잘해두면 유지보수할 때, 디자이너 없이도 잘 굴러가게 만들 수 있다.

build CMS > Set Content > Publish

CMS를 잘 활용하면, 디자이너 혼자서 이런 airbnb 스러운(?) 사이트도 하루 만에 만들 수 있다.


3일 차

develop & delivery

이제 BM에 적합한 모델이 나왔는지 팀원들과 확인하고 부족한 부분은 보완한다. 그리고 광고를 돌려 잠재적 고객의 반응을 빠르게 확인해 보자.

프레이머 자체에서도 코멘트 기능을 지원하긴 하는데 버그가 좀 많아서 실질적인 소통은 슬랙을 사용할 수밖에 없었다. 그래도 유지보수할 때 중요하게 파악해야 하는 정보는 프레이머 내에 코멘트로 남겨두면 커뮤니케이션 코스트를 줄이는데 도움이 되었다.

아, 이거 또 써먹을 데 없나. 이제 막 재미 붙였는데, 프레이머로 MVP제작 필요하신 분들 연락 주세요.


이건 MVP는 아니고, 시험삼아 만들었던 초기 모델

https://khaki-run-213502.framer.app/

필드멘토 | 기업 골프 행사부터 프로섭외, 단체 골프장 예약까지

기업 골프 행사부터 프로섭외, 단체 골프장 예약까지! 필드 골프 All-in-one 솔루션 필드멘토

fieldmentorgolf.framer.website

 

끝.

1
2

포스트

전체 보기