UI
UX Design for Music Streaming Platform
2014~2019
지니뮤직은 음악 스트리밍 서비스로, 출시 이후 서비스 인지도를 상승시키자는 목표를 갖고 다양한 방식으로 제품 개선을 시도하였습니다.
지니뮤직
UXUI 디자이너
지니뮤직 모바일앱/웹, PC웹, 태블릿, 웨어러블 등 UI/UX 개선
컬러 테마, 컴포넌트 라이브러리 제작 리드
이미지 전면 벡터화, Micro Interaction, Lottie Animation 도입 및 제작 리드
Sketch, Framer, Protopie 등 도입 제안 및 교육
업무 효율화 리드
저는 2014년 지니뮤직에 합류하였습니다. 음악 스트리밍 서비스로서의 인지도 상승이라는 목표가 있었습니다. 출시 3년 차였던 지니뮤직의 UI에서 일관성과 심미성을 높이는 과정이 필요하다고 판단하였고 지속적으로 UX를 개선했습니다. 2017년 버전 4.4부터는 공통 컴포넌트 가이드라인 및 디자인시스템 구축을 리드하였으며, 새로운 기술을 주도적으로 도입하여 앱 최적화에 앞장섰습니다.
UXUI개선
정기적으로 조사하는 사용자 응답을 반영하여 지니뮤직의 공통 컴포넌트, 홈화면 UI, 플레이어, 장르, 뮤직허그 등 어플리케이션 전반의 UI 를 지속적으로 개편 또는 개선하였습니다. 홈화면은 연간 1~2회의 메이저 업데이트와 정기, 비정기적으로 업데이트하였으며 기획자 + 디자이너 구성으로 UI설계를 협업으로 진행하였습니다.
UX개선 - 지니 웨어러블
정기적으로 조사하는 사용자 응답을 반영하여 지니뮤직의 공통 컴포넌트, 홈화면 UI, 플레이어, 장르, 뮤직허그 등 어플리케이션 전반의 UI 를 지속적으로 개편 또는 개선하였습니다. 홈화면은 연간 1~2회의 메이저 업데이트와 정기, 비정기적으로 업데이트하였으며 기획자 + 디자이너 구성으로 UI설계를 협업으로 진행하였습니다.
UX개선 - 지니어스
지니뮤직을 사용하는 고객에게 직접 질문한 결과 대부분 부정적인 피드백이었습니다. 기능적인 면과 UI의 문제가 있었습니다. 검색이 잘 되지 않는다거나, 심볼이 주는 의미 전달력이 부족하거나, 버튼이 잘못 눌리는 등 불편한 점이 많다는 응답을 얻었습니다.
관부서와의 협의 결과, 지니어스를 이미 사용하고 있는 기존 유저들이 있기 때문에 버튼의 위치 변경 등의 개편을 진행하지 않고, GUI와 인터랙션 등을 정돈하는 방식부터 시작하여 UX를 개선하였습니다.
앱 최적화를 통한
사용자 경험 개선 과정
UI 컴포넌트 라이브러리 구축
서비스와 플랫폼이 확장하면서 일관성을 높여줄 컴포넌트 단위 제작이 필요하다고 판단하였습니다.컴포넌트로 모듈을 제작하고 개발과 컴포넌트 구조를 맞추는 과정까지 시도하였으며디자이너간 협업, 디자이너 + 개발팀의 협업에 효율성을 높일 수 있었습니다. My Role : Sketch Tool 전환 리딩, 컴포넌트 제작 및 개발자 커뮤니케이션 리딩
아이콘 리디자인과 벡터 리소스 도입
지니의 전체 아이콘 디자인을 리뉴얼하였습니다.지니 브랜드 아이덴티티 (친한 친구 + 중성적 이미지 + 소년의 이미지)를 표현하되아이콘의 곡선, 복잡도에 따른 규칙을 정의하고 일반적으로 사용하는 메타포를 최대한 활용하여 인지의 혼란이 적도록 개선하였습니다. 낭비되는 이미지 리소스의 레거시를 제거하였고 앱이 느리다는 사용자들의 피드백을 줄였습니다.
iOS, Android의 컬러테마 도입(2018)
Vector Image Resources 도입 후 iOS 시스템에서도 다크테마를 제공하게 되었습니다. 지니뮤직 어플리케이션에서도 다크 테마를 실험적으로 시도하게 되었으며 개발팀 + 디자인팀 협업으로 테마의 컬러 팔레트 정의 후 다크모드 구현에 성공하였습니다.
- My Role : Vector Image Resources 도입 제안 및 리소스 제작 리딩. Android, iOS 테마별 컬러 팔레트 정의
마이크로인터랙션 도입
지니에서 음악을 듣는 사용자에게 동적인 피드백을 줌으로써 사용자와의 상호작용을 강조하였습니다. 로띠 애니메이션을 도입하여 좋아요, 잠금해제, 즐겨찾기, 음악검색 등에서 사용자의 참여를 유도하였습니다.
- My Role : Lottie Animation 리소스 도입, 개발자 협업을 통해 마이크로인터랙션 구현
성과
지니는 정기적으로 사용자 조사를 진행하여 피드백을 바탕으로 제품 개선을 해왔습니다. 크로스 플랫폼의 지속적인 업데이트로 앱스토어 피드백, 사용자 조사 응답 결과 사용자 경험이 개선되었음을 확인하였습니다. 프로덕트 개선 뿐 아니라 뮤직 페스티벌 등 다양한 음악 행사등을 개최하여 사용자와 지속적인 교류를 한 결과, 브랜드 인지도가 상승하였고 경쟁 서비스 대비 사용률에도 순위가 상승하였습니다.
UI
UX Design for Music Streaming Platform
2014~2019
지니뮤직은 음악 스트리밍 서비스로, 출시 이후 서비스 인지도를 상승시키자는 목표를 갖고 다양한 방식으로 제품 개선을 시도하였습니다.
지니뮤직
UXUI 디자이너
지니뮤직 모바일앱/웹, PC웹, 태블릿, 웨어러블 등 UI/UX 개선
컬러 테마, 컴포넌트 라이브러리 제작 리드
이미지 전면 벡터화, Micro Interaction, Lottie Animation 도입 및 제작 리드
Sketch, Framer, Protopie 등 도입 제안 및 교육
업무 효율화 리드
저는 2014년 지니뮤직에 합류하였습니다. 음악 스트리밍 서비스로서의 인지도 상승이라는 목표가 있었습니다. 출시 3년 차였던 지니뮤직의 UI에서 일관성과 심미성을 높이는 과정이 필요하다고 판단하였고 지속적으로 UX를 개선했습니다. 2017년 버전 4.4부터는 공통 컴포넌트 가이드라인 및 디자인시스템 구축을 리드하였으며, 새로운 기술을 주도적으로 도입하여 앱 최적화에 앞장섰습니다.
UXUI개선
정기적으로 조사하는 사용자 응답을 반영하여 지니뮤직의 공통 컴포넌트, 홈화면 UI, 플레이어, 장르, 뮤직허그 등 어플리케이션 전반의 UI 를 지속적으로 개편 또는 개선하였습니다. 홈화면은 연간 1~2회의 메이저 업데이트와 정기, 비정기적으로 업데이트하였으며 기획자 + 디자이너 구성으로 UI설계를 협업으로 진행하였습니다.
UX개선 - 지니 웨어러블
정기적으로 조사하는 사용자 응답을 반영하여 지니뮤직의 공통 컴포넌트, 홈화면 UI, 플레이어, 장르, 뮤직허그 등 어플리케이션 전반의 UI 를 지속적으로 개편 또는 개선하였습니다. 홈화면은 연간 1~2회의 메이저 업데이트와 정기, 비정기적으로 업데이트하였으며 기획자 + 디자이너 구성으로 UI설계를 협업으로 진행하였습니다.
UX개선 - 지니어스
지니뮤직을 사용하는 고객에게 직접 질문한 결과 대부분 부정적인 피드백이었습니다. 기능적인 면과 UI의 문제가 있었습니다. 검색이 잘 되지 않는다거나, 심볼이 주는 의미 전달력이 부족하거나, 버튼이 잘못 눌리는 등 불편한 점이 많다는 응답을 얻었습니다.
관부서와의 협의 결과, 지니어스를 이미 사용하고 있는 기존 유저들이 있기 때문에 버튼의 위치 변경 등의 개편을 진행하지 않고, GUI와 인터랙션 등을 정돈하는 방식부터 시작하여 UX를 개선하였습니다.
앱 최적화를 통한
사용자 경험 개선 과정
UI 컴포넌트 라이브러리 구축
서비스와 플랫폼이 확장하면서 일관성을 높여줄 컴포넌트 단위 제작이 필요하다고 판단하였습니다.컴포넌트로 모듈을 제작하고 개발과 컴포넌트 구조를 맞추는 과정까지 시도하였으며디자이너간 협업, 디자이너 + 개발팀의 협업에 효율성을 높일 수 있었습니다. My Role : Sketch Tool 전환 리딩, 컴포넌트 제작 및 개발자 커뮤니케이션 리딩
아이콘 리디자인과 벡터 리소스 도입
지니의 전체 아이콘 디자인을 리뉴얼하였습니다.지니 브랜드 아이덴티티 (친한 친구 + 중성적 이미지 + 소년의 이미지)를 표현하되아이콘의 곡선, 복잡도에 따른 규칙을 정의하고 일반적으로 사용하는 메타포를 최대한 활용하여 인지의 혼란이 적도록 개선하였습니다. 낭비되는 이미지 리소스의 레거시를 제거하였고 앱이 느리다는 사용자들의 피드백을 줄였습니다.
iOS, Android의 컬러테마 도입(2018)
Vector Image Resources 도입 후 iOS 시스템에서도 다크테마를 제공하게 되었습니다. 지니뮤직 어플리케이션에서도 다크 테마를 실험적으로 시도하게 되었으며 개발팀 + 디자인팀 협업으로 테마의 컬러 팔레트 정의 후 다크모드 구현에 성공하였습니다.
- My Role : Vector Image Resources 도입 제안 및 리소스 제작 리딩. Android, iOS 테마별 컬러 팔레트 정의
마이크로인터랙션 도입
지니에서 음악을 듣는 사용자에게 동적인 피드백을 줌으로써 사용자와의 상호작용을 강조하였습니다. 로띠 애니메이션을 도입하여 좋아요, 잠금해제, 즐겨찾기, 음악검색 등에서 사용자의 참여를 유도하였습니다.
- My Role : Lottie Animation 리소스 도입, 개발자 협업을 통해 마이크로인터랙션 구현
성과
지니는 정기적으로 사용자 조사를 진행하여 피드백을 바탕으로 제품 개선을 해왔습니다. 크로스 플랫폼의 지속적인 업데이트로 앱스토어 피드백, 사용자 조사 응답 결과 사용자 경험이 개선되었음을 확인하였습니다. 프로덕트 개선 뿐 아니라 뮤직 페스티벌 등 다양한 음악 행사등을 개최하여 사용자와 지속적인 교류를 한 결과, 브랜드 인지도가 상승하였고 경쟁 서비스 대비 사용률에도 순위가 상승하였습니다.
UI
UX Design for Music Streaming Platform
2014~2019
지니뮤직은 음악 스트리밍 서비스로, 출시 이후 서비스 인지도를 상승시키자는 목표를 갖고 다양한 방식으로 제품 개선을 시도하였습니다.
지니뮤직
UXUI 디자이너
지니뮤직 모바일앱/웹, PC웹, 태블릿, 웨어러블 등 UI/UX 개선
컬러 테마, 컴포넌트 라이브러리 제작 리드
이미지 전면 벡터화, Micro Interaction, Lottie Animation 도입 및 제작 리드
Sketch, Framer, Protopie 등 도입 제안 및 교육
업무 효율화 리드
저는 2014년 지니뮤직에 합류하였습니다. 음악 스트리밍 서비스로서의 인지도 상승이라는 목표가 있었습니다. 출시 3년 차였던 지니뮤직의 UI에서 일관성과 심미성을 높이는 과정이 필요하다고 판단하였고 지속적으로 UX를 개선했습니다. 2017년 버전 4.4부터는 공통 컴포넌트 가이드라인 및 디자인시스템 구축을 리드하였으며, 새로운 기술을 주도적으로 도입하여 앱 최적화에 앞장섰습니다.
UXUI개선
정기적으로 조사하는 사용자 응답을 반영하여 지니뮤직의 공통 컴포넌트, 홈화면 UI, 플레이어, 장르, 뮤직허그 등 어플리케이션 전반의 UI 를 지속적으로 개편 또는 개선하였습니다. 홈화면은 연간 1~2회의 메이저 업데이트와 정기, 비정기적으로 업데이트하였으며 기획자 + 디자이너 구성으로 UI설계를 협업으로 진행하였습니다.
UX개선 - 지니 웨어러블
정기적으로 조사하는 사용자 응답을 반영하여 지니뮤직의 공통 컴포넌트, 홈화면 UI, 플레이어, 장르, 뮤직허그 등 어플리케이션 전반의 UI 를 지속적으로 개편 또는 개선하였습니다. 홈화면은 연간 1~2회의 메이저 업데이트와 정기, 비정기적으로 업데이트하였으며 기획자 + 디자이너 구성으로 UI설계를 협업으로 진행하였습니다.
UX개선 - 지니어스
지니뮤직을 사용하는 고객에게 직접 질문한 결과 대부분 부정적인 피드백이었습니다. 기능적인 면과 UI의 문제가 있었습니다. 검색이 잘 되지 않는다거나, 심볼이 주는 의미 전달력이 부족하거나, 버튼이 잘못 눌리는 등 불편한 점이 많다는 응답을 얻었습니다.
관부서와의 협의 결과, 지니어스를 이미 사용하고 있는 기존 유저들이 있기 때문에 버튼의 위치 변경 등의 개편을 진행하지 않고, GUI와 인터랙션 등을 정돈하는 방식부터 시작하여 UX를 개선하였습니다.
앱 최적화를 통한
사용자 경험 개선 과정
UI 컴포넌트 라이브러리 구축
서비스와 플랫폼이 확장하면서 일관성을 높여줄 컴포넌트 단위 제작이 필요하다고 판단하였습니다.컴포넌트로 모듈을 제작하고 개발과 컴포넌트 구조를 맞추는 과정까지 시도하였으며디자이너간 협업, 디자이너 + 개발팀의 협업에 효율성을 높일 수 있었습니다. My Role : Sketch Tool 전환 리딩, 컴포넌트 제작 및 개발자 커뮤니케이션 리딩
아이콘 리디자인과 벡터 리소스 도입
지니의 전체 아이콘 디자인을 리뉴얼하였습니다.지니 브랜드 아이덴티티 (친한 친구 + 중성적 이미지 + 소년의 이미지)를 표현하되아이콘의 곡선, 복잡도에 따른 규칙을 정의하고 일반적으로 사용하는 메타포를 최대한 활용하여 인지의 혼란이 적도록 개선하였습니다. 낭비되는 이미지 리소스의 레거시를 제거하였고 앱이 느리다는 사용자들의 피드백을 줄였습니다.
iOS, Android의 컬러테마 도입(2018)
Vector Image Resources 도입 후 iOS 시스템에서도 다크테마를 제공하게 되었습니다. 지니뮤직 어플리케이션에서도 다크 테마를 실험적으로 시도하게 되었으며 개발팀 + 디자인팀 협업으로 테마의 컬러 팔레트 정의 후 다크모드 구현에 성공하였습니다.
- My Role : Vector Image Resources 도입 제안 및 리소스 제작 리딩. Android, iOS 테마별 컬러 팔레트 정의
마이크로인터랙션 도입
지니에서 음악을 듣는 사용자에게 동적인 피드백을 줌으로써 사용자와의 상호작용을 강조하였습니다. 로띠 애니메이션을 도입하여 좋아요, 잠금해제, 즐겨찾기, 음악검색 등에서 사용자의 참여를 유도하였습니다.
- My Role : Lottie Animation 리소스 도입, 개발자 협업을 통해 마이크로인터랙션 구현
성과
지니는 정기적으로 사용자 조사를 진행하여 피드백을 바탕으로 제품 개선을 해왔습니다. 크로스 플랫폼의 지속적인 업데이트로 앱스토어 피드백, 사용자 조사 응답 결과 사용자 경험이 개선되었음을 확인하였습니다. 프로덕트 개선 뿐 아니라 뮤직 페스티벌 등 다양한 음악 행사등을 개최하여 사용자와 지속적인 교류를 한 결과, 브랜드 인지도가 상승하였고 경쟁 서비스 대비 사용률에도 순위가 상승하였습니다.