by
Nov 19. 2021
서비스, UX/UI 분석 및 개선_원더월(2)
지난 포스트에서 원더월 서비스 소개부터 시작해 경쟁사 분석과 비교를 하면서 자료수집을 했다면, 이번 포스트에서는 원더월에 대한 세부 분석부터 개선안 도출까지 진행해 보고자 한다.
** 지극히 주관적인 의견이 들어갔기 때문에 참고만 부탁... 드립니댜..
원더월 세부 분석
User Interview
웹크롤링을 통한 세부적인 데이터 분석이 이뤄지면 좋겠지만, 아직 실력이... ㅜ (데이터를 공부해야 할 필요성이 생겼다..!)
그래도 최대한 객관적으로 분석을 해보기 위해, 작은 모집단이지만, 기존 사용해 본 사용자 2명, 신규 사용자 2명을 대상으로 인터뷰를 진행하여, 원더월 서비스에 대한 경험을 분석해 보았다.
우선 긍정적 경험을 들여다봤을 때, 모두가 영상 퀄리티에 대해서는 극찬을 했다. 또한 평소 자신이 좋아하던 아티스트의 강의와 그들의 메시지를 밀착해서 들을 수 있는 것에 긍정적인 경험으로 뽑았다. 또한 비교적 저렴한 가격에 강의를 들을 수 있는 부분에 대해 긍정을 표했다. 마지막으로 생각지 못한 재미있는 클래스가 숨겨져 있어, 전반적으로 클래스에 대해서는 높은 만족도를 보였다.
하지만 제공되는 클래스 부분 외에 웹을 사용하는 입장에서는 불편한 점들을 꽤나 많이 이야기했다. 메인화면에서 클래스 외의 서비스에 대한 명확한 설명이 없기 때문에, 회사에서 어떤 서비스를 제공하고 있는지에 대해서는 세부 댑스로 이동해야 그나마 조금 파악이 가능한 부분에 대해서 아쉬움을 표했다. 또한 메인화면에서 클래스에 대한 얘기가 나오기도 전에 가격 정보를 크게 보여주는 것은 다소 거부감이 드는 요소라고 일괄 적으로 얘기가 나왔던 부분이었다. 또한 클릭했을 때, 바로 구매 페이지 이동하는 것이 아닌 sub페이지로 이동하는 것은 버튼의 의미가 없는 것과 다르지 않나 라는 이야기도 나왔다.
무엇보다, 필요한 부분에 대한 설명은 없지만, 불필요한 요소에 대한 설명으로 인한 스크롤이 많다는 것은 부정적인 경험에 많은 영향을 미친 것 같다. 메인에서 서비스에 대한 설명은 충분치 않지만, 클래스 페이지에서는 내비게이션 없이 스크롤만 내려야 원하는 곳에 도달할 수 있는 것은 시간 낭비도 있지만, 피로도가 높다는 반응이었다.
인터뷰와 트렌드 부석으로 도출한 원더월 개선 방향
User 인터뷰와 최근 UI/UX 트렌드를 고려하여, 개인적인 시각으로의 원더월 서비스 개선 방향을 도출해냈다.
우선 일괄적으로 나왔던 서비스의 '불친절'하다는 피드백을 반영해, 최근 UX/UI 트렌드에 맞춰 #유연함, #소통, #브랜드가치제안, #브랜드충성, #트렌디 다섯 가지 키워드를 도출해냈다.
#유연함, #소통, #브랜드가치제안
원더월 서비스를 이용하면서 제일 강하게 들었던 생각은, 아티스트로 인해서 단기적으로 유저를 끌어모을 수는 있겠지만, 원더월 브랜드 자체에 열광하는 충성 고객은 끌어모으기 힘들 것 같다 는 생각이었다.
최근 MZ세대 소비 트렌드를 보면, 이유 없이 소비하진 않는 것을 알 수 있었다. 그들은 기업이 전달하는 메시지를 자신의 가치와 연결하여 구매를 결정하고, 이는 브랜드에 대한 충성도로 연결 짓는 중요한 요소임을 알 수 있다.
그렇다고 해서 메시지를 전하지 않고 있는 것은 아닌 것을 원더월 노션 페이지를 통해 알 수 있다. 하지만 이를 알려고 보기 위해서는 사용자들이 '일부러' 찾아야 하는 불편함이 존재한다.
원더월 노션_Brand Story그렇기 때문에, 서비스 제공하고 있는 홈페이지에서 친절하고 정확하게 브랜드 메시지를 잘 녹여내고, 사용자가 브랜드와 소통하고 있다는 느낌을 심어줘야 한다고 생각한다.
무엇보다 최근 브랜드가 주는 메시지 힘은 대단하다고 생각한다. 메시지 하나로 소비자의 마음을 흔들 수도 있기 때문에, 기존에 많은 사용자를 확보했겠지만, 이후 정말 브랜드의 충성고객을 확보하기 위해서는 메시지를 견고히 하는 것이 중요할 것이라 생각한다.
++ 최근 '라이브 커머스'가 떠오르니 만큼 아티스트와 콜라보를 통해서 라이브 커머스를 열어, 사용자와 소통하면서 원더월의 메시지를 전달하고, 이와 함께 굿즈 판매도 진행해 보는 것도 재미있을 것 같다.
#경험개선
또한 개인화 시대에 도래하여 소비자들은 자신에게 맞춘 맞춤 콘텐츠 서비스를 애용하는 패턴을 확인할 수 있다.
제일 뚜렷하게 윤곽을 드러내는 것은 OTT 서비스임을 알 수 있다. 넷플릭스는 사용자의 시청 패턴 및 시청 이력을 활용하여 맞춤 콘텐츠 및 맞춤 썸네일을 보여주면서 사용자에게 좋은 경험을 제공한 성공 케이스라고 생각한다.
이를 원더월에 적용하여, 사용자의 활동 패턴의 분석으로 홈페이지를 통해 맞춤 클래스 추천, 상품 추천으로 사용 경험 개선을 하는 것을 어떤지 제안해본다.
사용자 맞춤 클래스 추천#트렌디
마지막으로 트렌디한 디자인으로 사용자의 눈을 호강(?) 시켜주는 것을 제안해본다. User Interview에서 나왔던 피드백 중 하나가, 예술을 배우러 오는데, 홈페이지가 예술적이지 않다는 것이었다. 반복되는 디자인 패턴으로 인한 피로도 및 지루함이 높다는 평가였다.
최근 몇 년간 반복되는 UI 트렌드 패턴을 파악해 위트 있는 요소들로 꾸며주면 사용자의 시선도 사로잡을 수 있지 않을까 싶다.
최근 UI 트렌드 속 Typography 아트의 활용 혹은 적극적인 인터렉션 활용 제안개선안 도출
상기 분석한 내용 및 도출해낸 방향성 바탕으로 하기와 같은 개선안을 도출해 냈으며, 이 또한 개인적인 의견이 많이 반영된 개선안이므로, 참고만 부탁드린다.
(또한 기획자로서 UI도 느낌만 그려냈으니, 디자인 별로라고 뭐라 하지 않긔..)
Point 1. 그리드 패턴이 비슷한 경우, 조금 다이내믹하게 레이아웃을 변경하여 최대한 지루하지 않도록 하였다. (art를 다루는 서비스이니 만큼, 사용자에게 지루하지 않게 만드는 것도 필요하다 생각)
Point 2. 사용자가 꼭 알아야 하는 정보들에 대해서는 최대한 조금이라도 더 표현하고자 내용을 추가하였다.
point 3. 더할 건 더하고, 뺄 건 빼버린 구성.
3-1'pass 구매'에 대한 부분은 덜어내고, 최대한 사용자가 pass를 구매해야 하는 당위성을 제공하면서, 구매까지 이어질 수 있도록 구성
3-2 분리될 수 있는, 분리해야 하는 서비스는 분리하여, 조금 더 명확하게 어떤 서비스를 제공하고 있는지 한눈에 확인할 수 있도록 구성
메인페이지
1. GNB 영역
기존 GNB를 크게 건드리지 않고, '로그인'옆에 글로벌 아이콘을 추가하여, 해외 사용자들이 푸터까지 스크롤을 내리지 않은 상황에서도 언어를 변경하여 서비스를 이용할 수 있도록 구성하였다.
2. Main_Class 영역
클래스 서비스를 부각하는 원더월의 특성을 살려, 기존과 동일하게 메인화면에서 Class를 중점적으로 소개하도록 UI를 구성하였으나, 사용자에게 거부감을 주었던 가격 부분은 제외시키고, 사용자들이 보고 혹할 수 있는 기존 sub페이지에 있던 배너를 메인으로 가지고 와 사용자가 호기심을 가지고 자연스럽게 댑스 이동을 유도할 수 있을 것으로 예상한다.
또한, '지금 가장 HOT한 클래스'와 같은 문구로 조금 유연하고 친근하게(?) 클래스를 소개하고 보여주도록 구성하였다.
3. Main_Wonderwall Edition & Art Lab 영역
원더월 초창기 때에는 에디션과 아트랩에 대한 소개가 있었던 것으로 기억하는데, 이제는 없어져서 조금 의아했었다. 제공하는 서비스에 대한 소개가 메인화면에 없으면, 사용자는 어떻게 서비스를 이해할 수 있는가?
전달하고자 하는 메시지, 서비스의 간략한 소개와 Typo 디자인 요소를 추가하여 조금은 트렌디? 하게 풀어냈다. 클래스뿐만 아닌 다른 서비스도 있다는 것을 홍보하므로, 호기심 있는 사용자들이 자연스럽게 유입될 수 있도록 댑스 이동 경로를 만들었다.
아트 클래스 서브 & 상세페이지
1. 서브페이지 내비게이션 바 생성
인터뷰 때 들어왔던 피드백 중에, 서브 페이지에서 스크롤을 너무 많이 내려야 한다는 불편함이 있었다. 그것을 개선하기 위해 최대한 빠르게 댑스를 이동할 수 있도록 내비게이션 바를 활용하도록 구성하였다. 스크롤 발생 시 해당 세부 카테고리 영역의 내비게이션만 남게 되고, 세부 카테고리 클릭 시, 해당 영역으로 자동 스크롤 이동이 될 수 있도록 설계했다.
2. 클래스 상세페이지
클래스 상세페이지에서 사용자 입장에서 원하는 정보들을 먼저 보여주므로써 왜 이 클래스를 들어야 하는지에 대한 설득을 하고 나서 구매할 수 있는 플로우를 탈 수 있도록 구성했다.
무엇보다 클릭 한 번으로 자신이 페이지에서 원하는 정보를 바로 볼 수 있도록 내비게이션 바를 추가해, 스크롤 발생 시 상단 고정 영역으로 구성했다. 또한 기존에 없던 클래스가 어떤 학습자에게 어떤 클래스를 얼마큼의 Run time으로 학습이 가능한지 간단한 정보를 제공하여, 클래스에 대한 대략적인 그림을 그릴 수 있도록 하였다.
Intro 부분이 노출되기 전에 아티스트가 학습자에게 전하는 메시지 영역을 추가하여 Class Goal를 간접적으로 언급하고 또 아티스트가 전하는 메시지로 학습자와의 유대감을 형성시킬 수 있도록 콘텐츠를 추가했다. 무엇보다 Intro 부분이 너무 길어서 Chapter list로 내려가기 위해 스크롤이 많이 발생했던 부분을 '더보기'버튼을 추가하므로, 스크롤 영역이 조금 줄어들 수 있도록 하였다.
ART LAB
PC 화면에서 발생되는 스크롤이 ART LAB에서는 적은데 비해, 모바일 화면에서는 비교적 많이 발생하여, 내비게이션 바를 생성하고, 스크롤 발생 시 상단 고정 영역으로 구성했다.
더불어 ART LAB서비스를 봤을 때, 크게 아티스트와 원더월의 콜라보 그리고 아이돌 프로젝트 두 개의 큰 카테고리로 나눌 수 있어, 따로 배치했다. 그 안에서도 세부 카테고리가 나누어질 수 있는 것을 파악하여, 해시태그 형식으로 세부 카테고리 배치해 클릭했을 때 해당되는 프로젝트만 보일 수 있도록 구성했다.
(기존 아티스트 영역은 그대로 두었다. )
전체적인 아트랩 페이지 그림이다.
