Wireframe: Airbnb에서 숙소 찾기
Figma로 Wireframe 만들어보기 [코드 스테이츠PMB 7기]
Wireframe은 화면설계서 또는 화면청사진으로,
제품 관계자들이 '정보들이 화면 상 어디에 위치해야 하는지'를 이해, 합의하기 위해 사용한다.
(스토리보드, MMI라고 부르기도 한다. 사실 엄밀히 보면 개념의 범위에는 차이가 있다.)
Wireframe의 역할은 크게 3가지이다.
1. 화면청사진: 전체 서비스를 명확하게 예측
2. 리소스 절약: 서비스를 구현하기 전에 빠르게 문제를 발견하고 개선
(interaction을 추가하면 Prototyping 가능)
3. 협업: 팀 구성원들이 서비스의 동작, 상호작용 등을 정확히 소통, 이해, 조율, 합의
Wireframe은 이렇게 생겼다.이러한 Wireframe은 완성도, 구체화 정도에 따라 3단계로 분류한다.
(Fidelity는 정확도, 충실도라는 뜻이다.)
Lo-Fi = Low-Fidelity: 대략적인 위치만 표시하여 신속하게 프로덕트 아이디어를 확장, 논의하는 데 사용
Mid-Fi = Middle-Fidelity: 위치, 카피, 크기가 결정된 프로덕트의 뼈대
Hi-Fi = High-Fidelity: 모양, 색상, 이미지, 제품의 감성이 반영된, 실제 프로덕트의 모습
(왼쪽부터) Wireframe의 Lo-Fi, Mid-Fi, Hi-FiIT서비스를 만드는 Product Manager로서 팀이 같은 목표를 향해 효율적으로 의사소통하기 위해 Wireframe을 사용하는 것은 좋은 방법이다.
기획 단계에서는 손으로 만든 Lo-Fi로 수많은 변경으로 제품을 디벨롭하여,
MVP가 정해지면 보다 구체적이고 명확한 Mid-Fi까지 제작할 필요가 있다.
따라서 이번 과제에서는
1. 출시된 제품을 하나 선택하고, 그 제품을 통해 해결할 수 있는 Task와 User Story를 정의할 것이다.
2. Task를 수행하는 user의 flow의 Wireframe을 손으로 Lo-Fi, Figma로 Hi-Fi까지 모방해보자.
3. 더 나아가, 기존의 제품에서 UX를 개선할 상황을 찾아보자.
** 코드스테이츠 프로덕트 매니저 부트캠프 7기를 수강하며, 과제로 작성하였습니다.
혹시나 정보의 오류, 의견의 비약이 있다면, 미리 정중히 사과드리겠습니다.
게시물과 관련하여 의견이 있으시다면, 자유롭게 남겨주시거나 연락 주시길 환영합니다.
Airbnb로 숙소 찾기
30도를 넘는 더위, 찌는 듯한 열대야로 인해 다들 일상을 벗어난 휴가를 꿈꾸고 있고, 나도 마찬가지이다.
8월 말에 친구들과 여행을 가기로 약속을 했고, 숙소는 Airbnb에서 예약을 했다.
그래서, 이번엔 Airbnb에서 원하는 조건에 맞는 숙소를 탐색하는 Task에 관해 분석해보기로 했다.
User Story는 "고객/사용자는 목적/목표를 위해서 필요/욕구를 원한다."의 형식으로 작성할 수 있다,
이 Task에 해당하는 보다 구체적인 User Story를 아래와 같이 작성하였다.
강릉 여름휴가를 계획하는 2030은
내 집 같은 아늑한 여행을 하기 위해
조건이 만족스러운 숙소를 찾길 원한다.
이 User Story를 해결하기 위한 핵심 기능은 숙소 검색과 필터 기능이다.
이 기능들로 구성된 Flow는
첫 화면 ☞ 검색1(장소) ☞ 검색2(유형) ☞ 검색3(일정) ☞ 검색4(인원)☞ 결과1 ☞ 검색5(필터) ☞ 결과2
로 진행된다.
(이해를 돕기 위해, 실제 Airbnb로 숙소를 찾는 화면을 녹화하여 첨부한다.)
손으로 그린 Lo-Fi Wireframe: Airbnb로 숙소 찾기
Lo-Fi는 완성도는 떨어지지만, 시간과 리소스를 절약할 수 있고, 아이디어를 확장하는 데 용이하다.
따라서, 사업 초기에 빠르게 변화와 재시도를 통해 프로덕트의 MVP를 찾아나가기에 반드시 필요하다.
Airbnb의 실제 화면을 참고하여 8개 화면으로 구성된 Lo-Fi Wireframe를 손으로 그려보았다.
Lo-Fi Wireframe: Airbnb 검색하기 - made by 송해원Figma로 그린 Hi-Fi(?) Wireframe: Airbnb로 숙소 찾기
손으로 그린 Lo-Fi를 통해 개발할 MVP의 청사진을 얻었다면, 그 이후에는 협업을 통해
각 요소의 배치, 크기 등이 반영된 Mid-Fi Wireframe을 그리고,
색상, 이미지, 감성이 반영된 Hi-Fi Wireframe을 디자인해야 한다.
Airbnb는 이미 완성되어 이용 중인 서비스이기 때문에
나는 색상, 이미지, 감성이 반영된 Hi-Fi에 가까운 Wireframe으로 서비스를 모방하여 그려보았다.
(Hi-Fi 가깝다고 한 이유는, 밑으로 스크롤한 전체 화면을 구현하지 못하였기 때문이다.)
Mid-Fi Wireframe Using Figma: Airbnb 검색하기 - made by 송해원나는 Figma 툴을 이용하여, 각 Frame 간에 Interaction을 설정하여 Prototype를 녹화해보았다.
(동그란 모양이 터치 버튼이, 원래 위치보다 우측 하단으로 벗어나서 녹화되었습니다.)
UX 개선하기: Airbnb로 숙소 찾기
Airbnb로 숙소를 찾아보며,
UX, UI 측면의 개선이 필요한 요소 2가지
를 생각해보았다. (민채님, 지민님, 소현님과 함께 개선안을 논의했습니다. 감사합니다. ^^)
'유연한 검색'이 <Airbnb, Front page>에서 메인 큰 자리를 차지하고 있으며, <Airbnb, search1>에서 최상단에 위치한다.
이 CTA의 문제점은 직역된 어감의 와닿지 않는 카피이다. 클릭했을 때, 어떤 화면으로 전환되어 어떤 정보를 얻을 수 있는지 예상되지 않았다. 이 CTA를 클릭하면, 트리하우스, 해변 근처, 화물 컨테이너, 초소형 주택 등 다양한 종류의 숙소를 보여주는데 대부분이 낯선 해외 숙소이다.
이는 사용자가 대한민국이고, 현재 코로나19로 인해 해외여행이 불가능한 상황이라는 점에서 위치와 현 상황에 부적합한 콘텐츠라고 생각했다. 나는 사용자로서, 'Airbnb가 딱히 한국에서의 국내 여행을 적극적으로 지원할 생각이 없구나. 앱 서비스를 사회 상황에 최적화하기 위한 노력을 하지 않는구나.'라는 생각이 들어 부정적인 감정을 느꼈다. (만약 코로나가 아니었다면, Airbnb의 unique value point가 전 세계에 있는 다양한 형태의 숙소를 C2C로 제공한다는 것이므로 이 콘텐츠가 유용하다고 여겨졌을 것이다.)
또, '가까운 여행지 둘러보기', '근처의 인기 여행지'의 각 여행 장소별 일러스트에 대해 생각해보았다. 각각 <Airbnb, Front page>, <Airbnb, search1>에서 '유연한 검색'바로 밑에 위치한다.
이 일러스트는 서울의 롯데 타워를 제외하고는, 각 여행지와 무관하다는 문제점이 보였다. 그저 밤하늘, 구름, 해변 등의 유사한 무드의 일러스트였다. 내가 느끼기에는 신경 쓰지 않은 UI로 보였고, 여행에 대한 욕구, 기대감을 오히려 낮추는 역효과가 있었다.
개선안으로는
1. 유연한 검색
<Airbnb, Front page>에서
▶ 개선안 1: 국내 숙소, 해외 숙소의 2개 CTA로 분리하고, 구체적, 직관적, 목적 기반의 카피로 수정한다.
국내 숙소로는 우리나라 사람들이 보다 익숙한 형태의 글램핑, 카라반 등의 신기한 숙소 콘텐츠를 제공하며, 카피는 "국내 글램핑 숙소", "국내 카라반" 등으로 구체적, 직관적으로 바꾼다.
해외 숙소의 카피는 "전 세계의 특별한 숙소에서 버킷리스트를 실천하세요."의 목적 기반의 카피로 한다.
▶ 개선안 2: 차지하는 구역의 크기를 줄인다. 또는 하단의 가까운 여행지 CTA와 순서를 교체한다.
<Airbnb, search1>에서
▶ 개선안 1: 숙소를 검색하려는 depth로 진입한 고객에게 불필요한 CTA이므로, 삭제한다.
2. 각 여행 장소별 일러스트
▶ 개선안 1: 실제 여행지 사진, 여행지 특성이 반영된 일러스트를 사용한다.
Figma를 사용하며 느낀 장점 4가지는 아래와 같았다.
1. 디바이스의 정확한 화면 크기가 제공된다. 각 요소의 크기, 위치도 자동 계산된다.
2. 커뮤니티에서 제공되는 무료 아이콘 및 자료들을 자유롭게 사용.
3. css 코드가 자동 생성된다.
4. 다른 사람과 공유하여 동시 작업할 수 있다.
이 외에도 느낀 점은,
1. Fidelity가 높은 Wireframe을 바로 제작하는 것은 리소스의 소모가 상당하다는 점이다. Wireframe의 장점인 제품 구현 전에 리소스를 절약하며, 사전에 실수를 방지할 수 있다는 효과를 얻기 위해서는 Lo-Fi를 잘 사용하는 능력이 중요하다고 생각했다.
2. interation이 꽤나 제한적이라는 생각이 들었다. 그러나 이것은 내가 구현 능력이 부족한 쌩초보인 탓이다. 어설프게 모방하는 식으로 해보니, 아이콘, 스크롤 등을 구현하기 무리가 있었다.
3. 따라서 무작정 시작하기보다는, Figma의 구조에 대한 이해가 필요하다. 이해를 기반으로 어떻게 디자인할 것인지 계획을 짜서, 작은 실수가 거듭되어 손댈 수 없는 상태가 되는 것을 방지해야겠다.
