TechCrunch 앱 리디자인(번역)

TechCrunch 앱 리디자인(번역)

Summary:

프로덕트 디자이너 Angela Medina의 Redesigning the TechCrunch app 아티클 번역본입니다.


테크크런치 앱 리디자인 프로젝트

pic1

지난 2년 간 우리는 테크크런치 서비스의 경험 향상을 위해 최선을 다했다. 우리 팀은 이달 초 새로운 테크크런치 모바일 앱을 출시했는데, 이는 아주 신나는 일이었다. 사용자가 어디에 있든 가장 관심있는 뉴스에 쉽게 접근할 수 있도록 앱을 완전히 재설계했다.

뉴스의 모바일 소비가 수년동안 증가했고 테크크런치도 시장에 앱을 출시한 지 꽤 됐지만 테크크런치 앱은 여전히 구식이었고 잘 유지보수되지 않았다. 우리의 모바일앱 사용자는 가장 헌신적인 독자 중 하나였기 때문에 이들에게 더 나은 경험을 주기 위해 앱을 재설계하는 것은 독특한 디자인 기회가 되었다.

우리는 모바일 앱의 사용성이 떨어진 몇 가지 이유를 깨달았다. 앱은 완전히 네이티브하지 않았고, 광고는 보기 싫게 눈에 띄었다. 특정 운영체제에 대한 지원이 부족했으며, 인터페이스는 구식이었다. 우리 팀은 테크크런치 브랜드를 향상시킬 수 있는 독특하고 혁신적인 무언가를 생각해낼 수 있단 것에 기뻤다. 대략적인 스케치와 와이어프레임을 내부에서 공유한 뒤 우리는 이 질문에 초점을 맞춰 간단하게 시작해야 한다는 것을 꺠달았다. “우리만이 유일하게 제공할 수 있는 것은 무엇인가?”

pic2

이전의 앱 디자인


현황을 더욱 잘 파악하기 위해 현재 사용자를 대상으로 설문조사를 실시하고 앱스토어 리뷰를 자세히 살펴봤다. 이러한 발견은 우리가 다음과 같은 높은 수준의 목표를 염두해두고 첫번째 컨셉을 정의하는 데 도움을 주었다.

이러한 목표들은 3가지 최상위 화면을 갖춘 MVP에 대한 명확한 방향을 제공한다.

각 기능에 대한 요구 사항을 정의한 뒤, 우리는 사용자 테스트를 거쳐 흥미로운 인사이트를 발견하고 두 가지 프로토타입을 만들었다. 우리는 이를 기반으로 개선을 반복했다.


테크크런치를 사용자의 것으로 만들기

pic3

‘Your News’는 사용자가 관심있는 모든 기사에 접근할 수 있는 공간이다. 놓친 기사 알림을 받거나 토픽을 구독 또는 구독취소할 수 있다.

상단 바에는 For You, 알림, 토픽 등 3가지 탭이 있다.

‘For You’ 영역에는 사용자가 구독한 토픽별 모든 기사들이 담겨있다. 홈 피드 기사의 카드 구성요소들이 들어있는데 기존보다 더욱 시각적이며, 기사들은 카테고리 별로 잘 정리되어 있다.

‘알림’ 영역에는 모든 알림들이 표시된다. 여기에 있는 기사는 알림이 수신된 순서대로 정렬된다. 알림을 탭하면 기사로 바로 연결된다.

마지막으로 ‘토픽’ 영역에서는 언제든지 테크크런치의 주제를 쉽게 구독하거나 구독취소할 수 있다. 다른 주제를 구독하면 알림받는 기사가 변경되고 For You 피드의 기사들 역시 변경된다.

뉴스 화면에서 눈에 띄는 부분 중 하나는 이모티콘의 사용이다. 우리는 사용자 테스트 세션에서 인터페이스에 이모티콘이 포함된 프로토타입의 선호도가 더 높음을 알게 됐다. 사용자들은 이모티콘이 친숙한 느낌을 줬다고 얘기했다. 이를 염두하여 우리는 앱에 좀 더 친숙한 경험을 제공하기로 결정했으며, 잠금 화면에서 푸시 알림을 받는 것부터 For You 피드를 빠르게 훑어보는 것까지의 흐름 전반에 걸쳐 기사들을 좀 더 알아보기 쉽도록 설계했다.


적응하기 쉬운 프로세스 만들기

우리의 초기 가정은 ‘토픽 구독 방식을 재미있고 인터렉티브하게 만들면 사용자가 매끄럽게 프로세스를 완료할 수 있다’는 것이었다. 우리는 몇몇 사용자들에겐 신기해보이지만 궁극적으로 강제성이 느껴지는 카드 스와이핑 인터렉션을 시도했다. 그 결과 스와이프 또는 스크롤 없이 한 화면에 모든 토픽을 표시할 때 사용자가 프로세스를 끝내려는 의지를 더 보인다는 것을 알게 됐다. 이 방법이 기존보다 더욱 간단하고 효율적이었다.

pic4


Crunchbase 정보 얻기

기사를 북마크하고 공유할 수있는 기능 외에도, 사용자는 기사가 다루는 회사 또는 인물에 대한 Crunchbase 정보를 얻을 수 있다. 이 기능의 이점은 기사에서 언급된 내용보다 더 많은 맥락을 파악할 수 있게 한다는 데 있다.


단조로운 뉴스피드에 텍스처 추가하기

사람들이 휴대폰으로 뉴스를 읽는 방법을 관찰하면서 우리는 사용자가 어떻게 콘텐츠를 훑어보는지, 쉽게 훑어볼 수 있도록 카드 레이아웃을 어떻게 최적화할 수 있을지에 대해 신중하게 생각했다. 초기 디자인은 모든 기사에 대해 큰 카드를 사용했는데 각 기사의 유형에 따라 카드 구성 요소에 약간의 차이는 있었다.

궁극적으로 이 디자인은 테스트 결과 성공적이지 못했다. 너무 단조로웠기 때문에 텍스쳐를 더해야 했다. 우리는 다양한 구성 요소로 카드를 변형시켜 정보 계층구조에 대한 이해도를 높이고 단조로운 느낌을 줄여나갔다. 이 디자인을 적용하면 뉴스피드는 더 적은 스크롤로 더 많은 뉴스를 보여줄 수 있고, 결과적으로 더 효율적이고 더 나은 경험을 선사한다.

pic5


푸시 알림을 통한 유입 처리

앱에서 푸시 알림 기능을 사용하면 테크크런치 에디터가 매일 큐레이팅하는 뉴스를 받아볼 수 있다는 장점이 있다. 사용자가 구독하는 각 주제에 대해 에디터는 알림을 보낼 가장 중요한 1~2가지 기사를 선택한다. 하루에 너무 많은 푸시를 전송하여 사용자가 푸시 알림을 허용하지 않게 되는 문제를 해결하기 위해 우리는 12개 토픽 모두를 구독하더라도 하루에 최대 5회 푸시 알림이 가도록 설정했다. 더불어 사용자가 일정 시간 동안 푸시 알림을 받지 않을 수 있도록 설정할 수 있는 옵션을 설계했다.

우리의 접근 방식은 맞춤 뉴스피드, 토픽 구독 및 푸시 알림과 같은 새로운 기능을 추가하면서 뉴스를 간편하게 읽을 수 있도록 유지하는 것이었다. 우리는 다음 기능들도 준비하고 있다. 부디 이 글을 읽는 사용자는 새로운 경험을 즐기고 난 뒤 우리에게 의견을 들려주길 바란다. 테크크런치 앱은 사용자의 것이기 때문이다.


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora