서비스의 얼굴을 변경하기
테스트글라이더 Main Homepage + GNB 개편 회고
안녕하세요,
테스트글라이더 프로덕트 디자이너 구윤지입니다.
2024년 6-7월 진행한 Main Homepage + GNB 개편 과정을 공유하고자 합니다.
기간: 2024년 6월 13일 - 7월 17일 (배포)
성과: Main Homepage-Gateway Button 클릭수 2.1배 상승 + 서브 Feature 진입 4.32배 상승
Main Home, 서비스의 얼굴
Main Homepage: 웹사이트의 첫 번째 화면으로, 사용자가 처음 접속할 때 가장 먼저 보게 되는 페이지
사용자를 가장 먼저 만나고, 가장 많이 만나는 페이지이기 때문에 직관적이고 쉽게 서비스에 대해 전달해야 합니다.
스티븐 크룩의 웹 디자인의 빅뱅이론에 따르면, 메인 홈페이지는 5가지 질문에 쉽게 답할 수 있도록 제작되어야 합니다.
1. 이게 무슨 사이트지?
2. 이 사이트에서 무엇을 할 수 있지?
3. 이 사이트에는 무슨 내용이 담겨 있는 거지?
4. 어디서부터 봐야 하지?
5. 비슷한 다른 사이트가 있음에도 내가 이 사이트를 이용해야 할 이유가 뭐지?
이 질문에 빠르게 응답할 수 있다면, 서비스에 대한 전체적인 그림을 잘 보여주는 좋은 홈페이지가 될 수 있어요.
하지만 우리는...
테스트글라이더는 금년 초까지만 해도 토플, 아이엘츠 2개의 기능만 있었지만, 사업을 모의시험에서 유학 전 과정으로 넓히며, 기존 2개였던 기능이 7개가 되었어요.
7개
메인 기능 (모의시험): 토플/ 아이엘츠/ PTE
서브 기능: 과외/ 유학/ 인터뷰/ 단어학습
[기존 Main Homepage의 문제점]
‘이게 무슨 사이트지?’ ‘이 사이트에서 무엇을 할 수 있지?’… 이 질문들에 우리 서비스는 명확한 답변을 하기 어려웠어요.
인터뷰를 진행해 보니, 사용자들은 큰 이미지를 가장 먼저 인식하지만 이미지의 의도는 파악하지 못했고, 우측에 있는 버튼은 토플/ 아이엘츠 두 개뿐이라 다른 5개의 기능은 인지하지 못하고 있었습니다.
서비스를 의도를 전달해야하는 중요한 영역을, 추상적인 이미지가 차지하고 있는 것이 가장 큰 문제였어요.
Main Homepage가 제 기능을 못하니, GNB에 모든 기능을 몰아넣은 결과 터질 것 같은 GNB가 완성되었답니다.
앞으로도 계속 기능이 추가될 예정인데, 해당 GNB는 테스트글라이더의 미래를 책임질 수 없었죠.
현상과 문제를 정의하고
개편을 결정하다
Statements(현상) - Promblems(문제)
1. Main Homepage에서 모든 기능에 대한 정보를 제공하지 않는다. - 사용자가 서브 기능을 인지하지 못한다.
2. GNB에 7개의 기능이 복잡히 나열되어 있다. - 사용자가 서비스 이용에 혼란을 겪는다.
Hypothesis (가설)
테스트글라이더 사용자에게 (who)
Main Homepage에서 직관적으로 모든 기능을 제공한다면 (how)
사용자들이 원하는 정보를 빠르게 찾고 서브 기능에 대한 인지가 상승할 것이다. (what)
[프로젝트 성공 여부 판단 기준]
1. 원하는 정보를 빠르게 찾음: Gateway-Button 클릭 수 1.5배 상승
2. 서브 기능에 대한 인지 상승: 서브 Feature 페이지뷰 수 1.5배 상승
개편 과정
Main Homepage
Solutions
1) 추상적인 이미지에서 직관적인 문구로
금년부터 유학으로 서비스를 확장한 만큼, 사용자들에게 테스트글라이더에서 유학을 준비할 수 있다는 인상을 주는 게 중요했어요. 하지만 기존의 여성이 앉아있는 이미지는 유학에 대한 이미지라고는 와닿지 않았죠. 추상적인 이미지를 삭제하고, 직관적인 문구를 사용했습니다.
2) 모든 기능을 Gateway-Button으로
사용자들에게 모든 기능으로의 1. 최단 경로를 제공하고 2. 한눈에 전반적인 서비스를 이해할 수 있도록 했어요.
GNB
Problem
상단에서 사용자가 혼란을 겪는다고 서술한 근거를 말씀드리겠습니다. 당시 토플, 아이엘츠의 화면 구성은 유사했고, 본인이 어떤 기능의 화면을 보고 있는지 구분이 어려웠어요. GNB에서도 어떠한 정보를 얻을 수도 없었죠. 이로 인해 사용자가 페이지를 혼동해 토플 대신 실수로 아이엘츠를 결제하는 상황이 발생했습니다. 5월에만 동일 VOC가 7건 들어왔으니 개편이 시급했죠.
동시에 점점 늘어나는 기능으로 인해 GNB에 여유공간이 부족해졌어요. GNB 개편은 비즈니스 관점에서도 중요했습니다.
Solutions: 드롭다운으로 해결책을 찾다.
Solutions
1. 선택 경험을 통한 인지 강화
사용자가 ‘어떤 시험을 준비하세요?’라는 질문에 드롭다운을 열고, 원하는 모의시험을 선택하는 경험을 통해 자신이 현재 선택한 시험 유형을 명확히 인지할 수 있도록 설계했어요.
2. 필요한 정보만 제공
그리고 GNB에 위에서 선택한 시험 유형만 노출되도록 해, 사용자가 현재 어떤 기능의 페이지를 보고 있는지 한 번 더 인지하도록 했습니다.
+ Plus
무조건적인 모방이 UXUI에서 통하지 않는 이유: 도메인 지식을 이해하고 디자인해야 한다.
-----------
누군가는 UX/UI 디자인이 단순한 모방에 불과하다고 말합니다. 물론, UX/UI는 다른 디자인 분야보다 규칙과 레퍼런스를 따르는 경우가 많습니다. 하지만 아무런 고민 없이 모방만으로는 결코 좋은 디자인을 만들어낼 수 없어요.
테스트글라이더의 경우, 사용자들의 97% 이상은 토플/ 아이엘츠/ PTE 셋 중 하나의 기능만 이용해요. 셋은 일반적으로 셋 중 하나만 선택해서 공부하는, 상호 배타적인 시험이기 때문에 셋을 동시에 공부하는 사용자는 없었죠.
그렇기에 메인 기능(=모의고사 기능)만큼은 선택한 기능만 노출하는 과감한 방법을 사용해도 괜찮겠다는 결론을 내릴 수 있었답니다.
만약 다른 기능으로 꾸준한 유입을 유도해야 하는 서비스라면 dropdown 방식은 올바르지 않아요.
3. 여유 공간 확보
7개의 기능이 과도하게 채워져 있던 GNB의 여유 공간을 확보해, 정보 과부하를 줄였답니다.
최종 시안
1. Main Homepage
서비스의 시작점으로, 사용자가 처음 접속했을 때 가장 먼저 도달하는 페이지입니다.
서비스의 전반적인 내용을 대표하며, 모든 기능에 대한 접근성을 제공합니다.
2. Sub Homepage
각 기능의 가장 첫 페이지입니다.
각 기능에 대한 내용을 대표하며, GNB를 통해 다른 모든 기능으로 이동할 수 있습니다.
결과
Main Homepage + GNB 개편: 2024년 7월 17일
1. Main Homepage의 Gateway Button 클릭 수가 약 2.1배 상승
6월 15일-7월 15일 (30일)
Main Homepage 클릭 비율 3위
—(개편 이후)—
7월 18일-8월 18일(30일)
Main Homepage 클릭 비율 1위 (클릭 수 111.18% 상승)
2. Sub Feature(인터뷰)로의 진입이 약 4.32배 상승
7월 16일 토요일 인터뷰 page 전환율 2.19%
—(개편 이후)—
7월 23일 토요일 인터뷰 page 전환율 9.98%
이를 통해 사용자들이 전보다 더 빠르게 원하는 기능을 이용하고, 이전에 인지하지 못했던 서브 기능들을 인지하기 시작했다는 것을 확인했어요.
+)
여담: 실패한 첫 시도
사실 이 프로젝트는 GNB에 공간이 부족하다는, 단순한 비즈니스 관점에서 시작했어요. 프로덕트 메이커 입장에서만 생각했을 때는, GNB에 공간이 없으니 기능을 크게 묶으면 되는 거 아니야? 라고 생각했습니다.
하지만 사용자를 고려하지 않은 해당 디자인은, 기존의 문제를 해결하기는커녕 혼란만 가중시켰어요.
해당 디자인이 실패한 이유
1. 직관성 X: 기능을 묶은 용어가 모호해 사용자들이 혼란을 느낀다.
2. 접근성 X: 경로가 깊어져 사용자의 서비스 탐색률이 낮아진다.
인터뷰와 사용자테스트를 진행하며, 사용자의 진짜 문제를 발견하고 팀원분들도 이에 공감해 주신 덕분에 입사 2개월 차인 제가 서비스의 GNB를 넘어 Main Homepage를 개편하는, 큰 프로젝트를 진행할 수 있었어요.
돌이켜 생각해 보니 정말 감사한 경험이었고, 그 과정에서 여러 경험을 하며 성장할 수 있었던 것 같습니다.
회고
[잘한 점]
- 와이어프레임과 프로토타이핑까지의 과정을 속도감 있게 진행하여, 빠르게 UT를 진행했다.
-벤치마크를 적극적으로 진행했다.
[개선할 점]
- 디바이스별 디자인 일관성이 부족하다.
- Edge Case를 모두 챙기지 못하고, 수정 사항이 많아 개발을 딜레이 시켰다.
- 인터랙션 디자인이 부족하다. (화면이 활성화되었다는 느낌이 부족함)
[배운 점]
- 프로덕트 메이커 입장에서 디자인을 하고 있는 건 아닌지 계속 고민해야 한다.
- 비즈니스 관점에서 시작된 프로젝트도, 적어도 디자이너라면 끝없이 사용자 입장에서 사고하고 디자인해야 한다.
- 개발 전 디자인 리뷰 과정을 충분히 거친 후 디자인을 확정해야 한다.
마지막으로
사용자 입장에서 생각할 수 있도록 도와주시고 꼼꼼히 챙겨주신 PM 님, 많은 변수에도 빠르고 완벽히 작업해 주신 프론트 개발자님, 과감한 개편을 든든히 지원해 주시고 아낌없는 조언을 주신 PM 리드님과 디자인 리드님 + 후속 디자인 수정 작업을 열심히 진행해 주신 또 다른 프론트 개발자님
데이터뱅크 구성원 모든 분들께 감사의 말씀을 전하며 글을 마무리하겠습니다.
