MMA 2020 온라인 디자인 개편
디자이너의 고민과 개선 과정을 담은 비하인드 스토리
멜론 디자인팀에서 서비스 디자인 비하인드 스토리를 브런치로 생생하게 들려드립니다. 오늘은 그 첫 번째 시간, 최근 서비스 개편 후 성공적으로 행사를 마친 MMA 2020 온라인 디자인 이야기를 공유합니다.
온라인 뮤직 페스티벌, MMA 2020
MMA(Melon Music Awards, 멜론 뮤직 어워드, 엠엠에이)는 멜론에서 매년 연말에 진행하는 음악 시상식입니다. 한 해동안 많은 사랑을 받은 아티스트와 음악을 여러분의 투표와 함께 시상합니다. 이번엔 아티스트 뒤에 숨은 공로자들을 찾아 세션, 안무가, 작사/작곡가에게도 트로피를 전달해 더욱 의미 깊었죠. 그동안 오프라인 시상식으로 이어오다 코로나-19로 인해 온라인 행사로 변경, 4일간의 온라인 뮤직 페스티벌 MMA WEEK를 진행했습니다. 온라인으로만 진행되는 만큼 온라인 서비스가 더욱 중요해져 모바일 & PC웹 개편을 진행했습니다.
아이데이션 시작
아직 각 분야의 담당자가 TF로 모이기 전, 디자인에서도 올해 개선하고 싶은 포인트를 리스트업하고 아이데이션을 시작했습니다. 리서치하며 인사이트를 얻고, 메뉴 구조를 재배치해보며, 아이디어 스케치로 개선 방향을 잡아나갔죠. 그렇게 TF에서 함께 의견을 나누고, 간결한 메뉴 구조와 구성, 투표 프로세스 개선에 중점을 두고 기획자 분과 함께 고민하고 논의하며 개편을 해나갔습니다.
메뉴 구조 간결화
한눈에 파악할 수 있는 간결한 메뉴 구조를 목표했습니다. 기존 메뉴를 속성별로 나눠 재분류해보고, 올해 강조할 신규 콘텐츠들을 묶어 '투표, MMA 2020, 히스토리'로 심플하게 개선했습니다. 가로로 스크롤하지 않아도 한눈에 인지할 수 있는 메뉴 개수가 되어 훨씬 인지하기 쉬워졌지요. 메인 페이지에 각 메뉴로 이동할 수 있는 주요 모듈을 우선순위대로 배치해 스크롤하면서도 원하는 메뉴로 쉽게 진입이 가능합니다.
꼭 필요한 정보로만 구성
처음 진입 시 사용자에게 MMA 브랜드 이미지를 명확하게 제공할 수 있도록 상단 영역에 키비주얼을 시원하게 노출했습니다. 포스터처럼요. 짧은 모션과 인터랙션을 사용해 생동감을 더했습니다. 페이지를 구성하면서 전체적으로 꼭 필요한 요소가 아니면 다 제거하고, 간결하면서 정보 전달을 명확하게 제공하는 방향으로 디자인했습니다. PC 웹은 모바일과 비슷한 사용성을 가져가며 화면을 풀로 채워 몰입감을 높였습니다.
다양한 아티스트 조명
상위권 후보 위주가 아닌, 다양한 아티스트를 조명하는 방향을 목표로 했습니다. 후보 모두를 메인에 보여줄 수 있는 방법을 고민했어요. 한 방향으로 흐르는 인터랙션을 사용해서 모두를 보여줄 수 있었습니다. 정보를 보여줄 때도 더욱 공정함을 추구하는 방식으로 개선한거죠. 멜론에서 순위 차트를 없애고 최근 24시간 동안의 이용량을 반영한 24Hits 차트로 개선한 것과 비슷한 맥락입니다.
편리한 투표 개선
꼭 필요한 정보만으로 재구성했습니다. 투표 마감까지 남은 시간과 참여 회원 정보는 메인으로 보내고, 투표에만 집중할 수 있게 개선했습니다. 사용자가 관심 있는 아티스트와 앨범/곡에 빠르게 투표할 수 있도록 팬맺기순(아티스트), 좋아요순(앨범/곡) 정렬을 추가했습니다. 일종의 즐겨찾기 개념으로, 이제 하위권 후보도 스크롤을 하지 않고 편리하게 투표할 수 있게 되었죠.
멜론 유료회원은 각 부문마다 하루 3표씩 투표 기회가 있습니다. 기존은 한 번에 1표씩만 투표가 가능해, 여러번 투표를 진행해야하는 번거로움이 있었습니다. 다양한 테스트 끝에 한 번에 3표까지 투표수를 선택해 투표하는 방식으로 프로세스를 개선했습니다. 훨씬 간편하게 투표를 하게 되었고, 실수로 스크롤하다 눌려 투표가 되는 경우도 함께 막게 됐습니다. 이로 인해 의도치 않게 다른 아티스트에게 투표하는 일이 사라져 고객 불편 의견 접수도 거의 없어졌다고 합니다.
투표 허브페이지를 제거하고 투표 페이지에서 각 상을 선택할 수 있게 개선해 플로우를 크게 단축 시켰습니다. 투표 완료 시 투표 완료 뱃지로 한눈에 확인할 수 있죠. 모든 상에 손쉽게 투표할 수 있었습니다.
앨범상은 '함께 만든 분들' 정보를 함께 볼 수 있도록 추가했습니다. 아티스트 뒤에서 함께한 제작자, 세션 분들까지 함께 시상하는 개념으로 더욱 의미 있는 투표가 됐지요. 앞으로도 투표에서 줄 수 있는 가치를 더 모색해볼 예정입니다.
즐거움이 가득한 메뉴, MMA 2020
MMA 2020 메뉴 안에 즐길 수 있는 다양한 콘텐츠들을 모았습니다. MMA WEEK 편성표도 확인할 수 있고, 4일간의 생중계를 다시 볼 수 있습니다. 연말결산에선 올해를 돌아보는 플레이리스트와 올해 음악사를 모아놓은 알찬 매거진을 즐길 수 있죠. 나만의 어워드에서는 나의 한 해 뮤직 라이프를 분석해 보는 재미를 느낄 수 있습니다. 전체적인 디자인 컨셉을 맞춰 하나의 서비스로 잘 어우러지도록 개선했습니다. 멜론 회원이시라면 이 놓칠 수 없는 재미들을 꼭 즐겨보세요.
역대 MMA를 한눈에, 히스토리
별도 분리된 메뉴를 히스토리 한 곳에 모았습니다. 이제 한 곳에서 역대 MMA 콘텐츠를 즐길 수 있습니다. 2020 시상결과는 현재 투표 메뉴에서 제공 중이고, 데이터 템플릿화 개발 작업이 끝나면 히스토리로 옮길 예정입니다.
개편 후 전반적인 이용률 상승
2019년은 49일간 서비스, 2020년은 30일간 서비스로 짧아진 기간인데도 불구하고 전년 대비 전반적으로 지표가 상승했습니다. 페이지뷰 53.6% 증가, 일평균 투표수 61.6% 증가, 일평균 투표자 수 48% 증가, 일평균 순 방문자수 47.8% 증가, 나만의 어워드의 페이지뷰는 793%나 증가했지요.
글을 마치며
올해 연말, 더욱 좋은 경험을 제공해드릴 수 있는 방법을 고민하고 업데이트한 MMA 2021로 여러분을 찾아갈 예정입니다. 많은 관심과 참여 부탁드립니다. 멜론 디자인팀은 지금도 여러분에게 더 편리하고 매력적인 서비스로 다가가기 위해 다양한 연구를 지속하고 있습니다. 새로운 디자인 이야기로 다시 만나요! :)
Design | Dina, Ellie, Gina, Leina, Marina, Ujin
