구독관리앱 UI/UX 케이스 스터디
Subskeep - 사용자 분석부터 디자인 시스템, 프로토타이핑까지
SubskeepSubskeep은 사용자들에게 구독의 전 과정을 연결해주며 다양한 서비스를 한 곳에서 관리할 수 있는 모바일 앱이다. UX 디자인을 공부하고 포트폴리오를 준비하면서 다양한 해외의 케이스 스터디를 보며, 논리적인 디자인을 위해 단계별로 짚어보는 케이스 스터디 방식의 프로젝트가 필요함을 깨달았다. 이에 뜻이 맞는 스터디원과 함께 이 프로젝트를 진행하여 UX의 과정을 공부하며 서로 함께 발전할 수 있는 기회였다. 케이스 스터디는 어찌보면 너무 전형적이거나 식상할 수도 있지만, 그래픽 디자인에 치중하지 않는 UX를 공부하는 입장에서는 거쳐야 할 정석적인 방식이라 생각한다. 이 프로젝트는 시장 리서치에서 시작하여, 사용자 분석을 토대로 디자인을 진행했고 디자인 시스템과 간략한 프로토타이핑까지 다뤄 보았다.
The reality is ownership is dead
; now it's really about access as the new imperative.
ㅡ Tien Tzuo, Zoura
Background.
구독 경제 시장은 매년 성장하고 있다.
'구독'은 소비자가 특정 서비스를 이용하기 위해 정기적으로 지불하는 방식의 비즈니스 모델이다. 기업의 관점에서는 구독을 통해 다소 안정적이고 지속적인 이익을 창출할 수 있고 데이터를 수집하여 새로운 서비스나 플랜을 개발하는 데에 의미가 있다. 소비자들은 한편, 구독을 통해 대체제를 찾으며 더욱 합리적인 서비스를 이용하면서 효율적인 소비를 할 수 있다. 두 관점을 고려했을 때, '구독'은 양측에 유익한 서비스 모델로 볼 수 있다. 이러한 성장으로 인해 소비자들에게 구독이 일상이 됨에 따라, 더욱 효율적으로 목록을 확인하고 소비를 관리할 수 있는 방법이 필요해 보인다.
The Subscription Economy has been grown every year.Research.
사용자 설문 조사
구독에 대한 전체적인 의견과 사용자들의 불편을 확인해보기 위해, 구독 서비스를 이용하는 50명을 대상으로 설문조사를 진행했다. 설문의 목적은 사용자들의 동기나 현재의 문제점을 확인하고 이를 해결하여 더 나은 사용자 경험으로 디자인하는 것이다.
현재 구독에 대한 경험은 어떠신가요?
설문조사를 통해 사용자들의 경험을 다음과 같이 분석해 볼 수 있었다.
1. 사용자들은 평균적으로 2-3개의 서비스를 구독한다. (85%)
2. 사용자들은 구독의 재결제일을 문자나 계좌 지출 내역을 통해 확인하는 경향이 있다. (78%)
3. 사용자들은 구독에 대한 지속 또는 해지 여부를 그들의 소비 정도에 의존하여 결정한다. (70%)
4. 사용자들은 재결제일을 잊어버리기 때문에 구독의 해지에 대한 시기를 종종 놓친다. (54%)
5. 사용자들은 구독의 해지 버튼을 찾기 어려워 하거나 해지 과정에 어려움을 느낀다. (86%)
Insight.
Problems
1. 구독 서비스의 목록이 흩어져 있어서 한 곳에서 관리하기가 어렵다.
2. 사용자들은 새로운 구독 서비스를 탐색하고 비교하는 것에 어려움이 있다.
3. 사용자들은 구독에 대한 결제일 알림을 받지 못하고 소비를 관리하는 것에 불편함이 있다.
Solutions
1. 구독 서비스를 한 곳에서 관리하고 비교하자. - 소비를 컨트롤 하고 새로운 서비스를 탐색이 용이하도록
2. 끝과 끝이 연결되는 경험을 제공하자. - 구독에서 해지까지
3. 사용자들에게 재결제일을 미리 리마인드하자.
Key Features
위와 같은 솔루션을 토대로, Subskeep은 구독 중인 서비스를 한 곳에서 관리하며 구독의 전 과정을 연결하는 인터페이스와 사용자 경험을 제공하자는 주요 기능을 정의했다.
Ideation.
사용자 퍼소나
수집된 사용자 설문조사에 기반하여, 두 명의 대표적인 타겟 유저를 설정했다. 이 퍼소나의 목적은 구독의 과정에서 대조되는 '구독과 해지'의 두 특성을 비교하기 위함이었다. Dan의 경우 구독자의 시각에서, Naria의 경우는 해지하려는 입장에서 풀어 보았다.
사용자 저니맵
퍼소나를 설정한 뒤, 그들이 각자의 목적을 달성하는 데에 있어서 Subskeep과 같은 서비스가 없을 때 어떤 행위과 감정을 거치는지 저니맵을 통해 시각화해보았다.
Dan의 경우 새로운 미디어를 검색하는 과정이며 Naria는 해지의 과정을 보이는데, 이 둘의 저니 속에서 각각의 불편함을 확인할 수 있었고 공통적으로는 구독 프로세스 내에서 연결된 경험이 부재하다는 결론을 얻어 이를 중점적으로 해결할 수 있는 기능을 풀어보고자 했다.
사용자 플로우
대조되는 두 타겟 퍼소나에게 최적의 경험을 제공하기 위해, 그들의 플로우에 맞춰 Subskeep에 녹일 수 있는 기능 플로우를 조직해 보았다. 가상의 플로우를 통해 필수적인 기능은 어떤 것이 필요할지 정의해볼 수 있었다.
Dan의 플로우에서는 사용자가 새로운 서비스를 탐색할 수 있고 소비 통계와 재결제일을 알려주는 기능이 고려되었고, Naria의 경우에서는 '해지 가이드'를 제공하는 더 나은 구독 경험을 고안했다.
Site Map & IA
지금까지 정의한 유저 퍼소나, 저니맵과 플로우를 기반으로 Subskeep의 전체적인 사이트맵을 5가지 주요 단계(온보딩, 홈, 구독, 통계, 탐색)로 구분하여 만들었다. 이 과정은 우리가 정의하는 주요 기능을 앱에서 어떠한 중요도와 위계를 두고 펼쳐낼 수 있을지 전체적으로 구성하는 것에 용이했다.
Lo-Fi Wireframe
구체적인 인터페이스 디자인을 위해 각자가 구상한 디자인을 핸드 스케치 또는 간략한 와이어프레임으로 공유했다. 이를 결합하여 주요 UI를 구체화시킬 수 있었다.
Hi-Fi Wireframe
대략적인 와이어 프레임을 토대로 좀더 정밀한 와이어프레임을 피그마를 이용해 제작했다. 이 와이어 프레임 단계를 통해 처음의 러프한 기획에서의 결점을 발견했고 사용자에게 좀더 친화적이도록 보완하는 작업을 거쳤다.
Design.
시작하기
온보딩 과정은 앱에서의 주요 기능과 사용 방법을 간단히 안내하고 계정을 생성하는 것이다. SNS계정을 통한 가입방법과 개인 계정을 만들어 접속하는 것으로 시작할 수 있다.
스캔하기
Subskeep을 처음 이용한다면, 첫 단계에서 자동으로 스마트폰 내 설치된 어플들을 스캔하고 구독이 가능한 서비스들을 리스트업한다. 만약 목록에 없다면 검색하여 간단히 추가할 수 있다.
구독 서비스를 한 곳에서
월별 또는 년도별로 지불하는 구독 서비스를 두 탭으로 구분하여, 한 곳에서 쉽게 목록으로 확인할 수 있다.
결제일 리마인드
사용자의 설정에 맞추어 재결제일 사전에 푸시알림으로 결제일을 리마인드 한다.
소비 통계 보기
월별 또는 년도별로 구독에 대해 지출하고 있는 소비 습관을 체크할 수 있다. 구독의 종류에 따라 카테고리별로 확인할 수 있고 결제 수단별로의 지출액도 확인할 수 있다.
다양한 구독 서비스 탐색하기
새롭게 구독할 서비스를 탐색하고 싶거나 현재 구독 서비스와 타 서비스를 비교하고 싶을 때 둘러볼 수 있다. 사용자가 더욱 효율적으로 소비할 수 있도록 연결해 준다.
해지 가이드
만약 현재 서비스를 해지하고 싶다면, Subskeep이 해지 가이드를 통해 안내되며 사용자는 해지 링크로 자연스럽게 연결될 수 있다.
검색과 커스터마이징
추가하고 싶은 서비스가 있다면 검색을 이용한다. 만약 내가 원하는 서비스가 없을 경우 자체적으로 추가하고 아이콘 설정을 통해 커스텀할 수 있다.
Design System.
Subskeep을 전체적으로 디자인하면서 효율적인 작업 프로세스와 일관적인 브랜딩을 위해 디자인 시스템을 바탕으로 했다. 구글 머터리얼 디자인과 우리가 정의하는 주요 기능들을 참고하여 UI 컴포넌트들을 기능별, 상태별로 분류하고 라벨링 했다. 이 컴포넌트들은 더 나은 사용자 경험을 위해 지속적으로 발전되고 또다른 유의미한 컴포넌트들을 파생시킬 수 있다.
Prototype.
사용자가 클릭이 가능한 프로토타입을 Marvel 을 통해 제작했다. 이 프로토타입을 통해 사용자들의 피드백을 빠르게 얻어볼 수 있었고, 실제 사용자의 플로우를 겪으면서 검색과 탐색 과정에 결점이 있는 것을 확인했다. 이러한 과정을 통해 다음 단계에서 수정돼야할 부분을 더욱 디테일하게 검토해볼 수 있었다.
What I've learnt.
이 프로젝트를 시작하며, 시장을 조사하는 과정에서 이미 많은 사람들이 구독관리앱의 필요성을 인지하여 다양한 프로젝트를 시도한 것을 발견했다. 가장 큰 비중은 수많은 서비스 중에서 우리 앱의 차별점은 어디에 둘 수 있을지 고민하는 것이었다. 고민 끝에 구독 경제에 맞춰 '구독'에 관해서라면 사용자가 서비스의 탐색-구독-해지의 전 과정이 연결되는 경험을 제공하자는 것을 목표로 하며 이 프로젝트를 진행하게 되었다.
그동안 다양한 그래픽 UI 위주의 작업은 많이 해왔으나, 사용자 조사부터 논리적인 단계를 거쳐 디자인하고 프로토타이핑까지 해보는 케이스 스터디 형식의 프로젝트는 처음이었다. 시장의 변화와 니즈에 맞춰 사용자의 퍼소나를 구체적으로 설정하고, 그들의 여정 속에서의 불편한 점을 찾아 이를 앱 내의 기능으로 녹여보는 과정이 매우 흥미로웠고, 이를 바탕으로 UI를 디자인하며 불필요한 것은 배제하고 '사용자 경험' 중심으로 디자인 하는 것이 무엇인지 배울 수 있었다. 또한 실무에서 사용했던 디자인 시스템을 이 프로젝트에서도 적용해 보면서 컴포넌트 기반 디자인을 좀더 공부할 수 있었다. 앱으로 구현해 본 것은 아니라서 아쉽지만, 클릭할 수 있는 프로토타입을 통해 사용자들의 피드백을 얻어보며 약간의 사용성 테스트를 할 수 있었다. 이를 통해 이 프로젝트가 꾸준히 디벨롭되고 추후에는 실제 앱으로 구현될 수 있도록 연구해 볼 것이다.
* 이 프로젝트는 미디엄에서 영문으로도 확인해 보실 수 있습니다.
** 개발 문의나 어떠한 피드백, 코멘트도 환영입니다. hello@vivishin.com 긴 글 읽어주셔서 감사합니다. :)
