IGTracker — UX 케이스 스터디

인스타그램 트래킹 애플리케이션

영감

10대들은 Twitter, Facebook, Instagram 같은 SNS에서 많은 시간을 보내고, 자기 계정이 어떻게 보이는지에 민감하게 반응합니다. 대부분의 SNS 사용 10대는 자기 계정의 영향력을 중요하게 생각하고, 팔로워를 늘리려고 적지 않은 노력을 들입니다.

디자인 프로세스

피드백, 리서치, 사용자 테스트에 기반해 디자인하기 위해 IDEO의 Human-Centered Design 프로세스를 따랐습니다.

IDEO의 Human-Centered Design 프로세스

#1. 관찰

목표와 사용자

IGTracker의 목표는 단순합니다. 인스타그램 계정의 팔로워, 팔로잉, 좋아요, 댓글 등 통계를 분석하고 추적하는 것. 주 타깃은 미국에 거주하는 13~25세 10대로, 인스타그램·스냅챗·페이스북의 핵심 사용자층이기도 합니다. 이 중에서 가장 활발한 플랫폼인 인스타그램에 집중해, 사용자가 자기 계정 통계를 깊이 들여다볼 수 있는 도구를 만들고자 했습니다.

"사람을 이해하려면 관찰하라. 청소기를 디자인한다면, 사람들이 청소기를 쓰는 모습을 지켜보라."

LendEDU 설문 결과

질문 1: 자기 게시물에 좋아요를 눌러준 사람의 게시물에 의도적으로 좋아요를 누르는 편인가요?

질문 2: 좋아요가 충분치 않다는 이유로 게시물을 지우는 사람을 알고 있나요?

LendEDU 설문에서 보듯, 젊은 세대는 자기 인스타그램 인기도에 큰 관심을 두고 게시물 반응을 자주 확인합니다. 그렇다면 게시물을 하나하나 보는 대신 계정의 전체 흐름을 한 화면에서 볼 수 있다면 어떨까요?

페르소나

위 사용자상에 기반해 IGTracker의 잠재 사용자 페르소나를 만들었습니다.

Job Stories

Jobs to Be Done 프레임워크로 사용자 입장에서 우리의 미션을 정리했습니다.

1. 인스타그램 계정을 관리할 때, 피드와 팔로워를 신경 쓰고 싶다. 그래야 팔로워가 계속 활동하게 만들 수 있다.
2. 인스타그램에 게시물을 올릴 때, 충분한 좋아요를 받고 싶다. 그래야 계정 영향력을 키울 수 있다.
3. 누군가 말없이 언팔로우했을 때, 누가 언팔로우했는지 알고 싶다. 그래야 적절히 대응할 수 있다.

#2. 아이데이션

핵심 목적

IGTracker의 목적은 사용자의 인스타그램 계정에 대한 인사이트를 제공하는 것입니다. 팔로워, 차단된 사용자, 댓글, 좋아요 등을 분석해 그래프와 차트로 깔끔하게 보여줍니다.

브레인스토밍

관찰과 경험을 토대로 타깃 사용자(미국 13~25세)의 니즈와 욕구에 집중했습니다.

1. 스냅챗, 인스타그램, 뮤지컬리, 하우스파티 같은 소셜 모바일 앱에 익숙하다.
2. 스와이프, 핀치, 확장, 애니메이션 같은 제스처와 인터랙션을 즐기고, 매우 자연스럽게 받아들인다.
3. OS와 앱에 능숙한 전문가이지만, 복잡하고 어려운 UX는 여전히 싫어한다.

브레인스토밍과 관찰을 토대로 한 기본 유저 플로우

빠른 UI 컨셉

IGTracker는 iOS 전용이라, iOS Human Interface Guidelines를 토대로 가이드라인을 정의했습니다.

1. 여백이 충분한 깔끔한 디자인, 볼드 타이포그래피와 이모지(스냅챗에서 영감).
2. 잘 정렬되고 여유 있는, 한눈에 읽히는 데이터·그래프 — 대비를 살린 미니멀한 접근.
3. 기능만이 아니라 젊은 감각의 디자인. 사용자가 인스타·스냅챗·페이스북을 기준으로 우리 앱을 평가하기 때문이다.

#3. 빠른 프로토타이핑

Lo-fi 프로토타입

빠른 사용성 테스트를 위해 거친 프로토타입을 만들고 InVision으로 클릭 가능하게 했습니다. 인스타그램을 활발히 쓰고 자기 영향력에 신경 쓰는 사람들과 테스트했고, 핵심 가설에 집중하기 위해 디테일은 일부러 다듬지 않았습니다. (이미지를 클릭하면 확대됩니다.)

a. 대시보드 → b. 오디언스/포스트 → c. 상세 분석

_a. 대시보드

로그인 후 사용자가 가장 먼저 보는 화면입니다. 가장 중요한 정보를 그래프로 요약합니다.

• 팔로워 증가 (Followers Growth)
• 나를 언팔로우한 사람 (Unfollowed Me)
• 나를 맞팔하지 않는 사람 (Not Following Me Back)
• 나를 차단한 사람 (Blocked Me)
• 삭제된 댓글/좋아요 (Deleted Comments/Likes)

이 화면은 스크롤되지 않습니다. 사용자가 계정 상태를 항상 한눈에 통제할 수 있도록 고정된 핵심 지표만 보여줍니다.

처음에는 메인에 더 많은 그래프를 두려 했지만, 사용자가 진짜로 필요로 하는 게 무엇인지 다시 짚어본 끝에 다섯 개로 좁혔습니다.

_b. 오디언스/포스트 화면

사용자가 선택한 탭(Posts 또는 Audience)에 대한 인사이트와 분석 항목 리스트입니다. 탭으로 화면을 전환하고, 항목을 탭하면 다음 화면(c.)으로 이동합니다.

_c. 상세 분석 화면

이전 화면에서 선택한 항목의 정보를 보여줍니다. 스크롤 가능한 리스트로, 각 사용자 항목에는 다음이 들어갑니다.

• 사용자 이름
• 맞팔 여부
• 지금까지 받은 좋아요와 댓글 수

#4. 사용자 피드백

사용성 테스트

**#3**의 프로토타입으로 인스타그램을 자주 쓰는 사람들과 사용성 테스트를 진행했습니다. 이 단계는 아이디어, 피드백, 사용자에 대한 깊은 이해를 얻는 데 결정적이었습니다.

"소프트웨어를 개선하고 싶다면, 사람들이 그것을 사용하는 모습을 보고 인상을 찌푸리는 순간을 찾아 고치면 된다." — David Kelley

Lo-fi 프로토타입을 활용한 사용성 테스트

피드백

주요 피드백은 다음과 같습니다.

1. 여러 계정을 쓰는 사용자를 위해 대시보드에 "계정 전환" 버튼이 필요하다.
2. 10대가 타깃인데도 화면이 다소 "업무용 같고" 단조롭게 느껴진다.
3. 상세 분석 화면에서 즉시 행동할 수 있도록 "팔로우"/"언팔로우" 버튼이 필요하다.

개선

피드백을 토대로 핵심 기능을 Hi-fi 프로토타입에서 재설계했습니다. (이미지를 클릭하면 확대됩니다.)

피드백 기반 Hi-fi 프로토타입

_a. 대시보드

여러 계정을 쓰는 사용자를 위해 상단에 "계정 전환" 버튼을 넣었습니다. 인터랙션은 인스타그램의 계정 전환과 동일하게, 탭하고 선택하는 방식입니다. 새 계정을 추가하려면 메뉴 마지막의 "계정 추가"를 탭하면 됩니다.

_b. 오디언스/포스트 화면

큰 변경은 없습니다. 탭을 정리하고 화살표나 폰트 변형 같은 디테일만 다듬었습니다.

_c. 상세 분석 화면

각 행 우측에 "팔로우"와 "언팔로우" 버튼을 넣어 IGTracker를 벗어나지 않고 다른 사용자에게 행동할 수 있게 했습니다. 상대방의 팔로워·팔로잉 수 같은 디테일도 함께 추가했습니다.

이 버튼 덕분에 사용자는 IGTracker에서 인스타그램으로 옮겨갈 필요가 없어졌고, 상대방이 자기를 팔로우하는지도 한눈에 볼 수 있습니다.

Thumb Zone

그래프가 있는 메인 화면에서는 사용자가 한 손으로 모든 차트를 편안하게 살펴볼 수 있어야 합니다. 이 화면 레이아웃에는 Samantha의 'thumb zone' 아티클을 참고했습니다.

#5. 반복

피드백 기반

Hi-fi 프로토타입을 토대로 다음 라운드 테스트를 위한 클릭 가능한 프로토타입을 만들었습니다. 출시 전까지 테스트와 피드백 반영을 끊지 않는 게 핵심입니다.

#6. 구현

진행 중

각 라운드에서 검증된 변경 사항을 즉시 구현하고, 사용성을 확인하기 위해 테스터 관찰을 이어갑니다. 아래의 클릭 가능한 목업이 가장 최신 프로토타입이며, ProtoPie로 만들었습니다.

프로토타입 사용해보기

MarvelApp에서 클릭 가능한 프로토타입

배운 점

IGTracker의 타깃은 10대와 대학생입니다. 이들과 인터뷰하고, 관찰하고, 인스타그램 사용에 관한 설문을 검토하면서, 이들이 계정 관리 도구에서 무엇을 진짜로 원하는지 이해하는 데 충분한 시간을 들였습니다. 실제 사용자에게 공감하면서 이들이 얻을 수 있는 인사이트의 가치를 발견했고, 이 인사이트가 곧 진짜 유용한 제품을 만든다는 점을 다시 확인했습니다.

마치며

IGTracker는 SNS에 살다시피 하는 미국 10대를 위한 앱입니다. 깔끔하고 디테일한 인터페이스로 자기 계정 통계와 반응에 대한 인사이트를 얻을 수 있도록 돕습니다.

읽어주셔서 감사합니다. 연락은 LinkedIn이나 ghsspower@gmail.com으로 부탁드립니다. 더 많은 작업물은 Behance에 있습니다.

Behance에서 전체 디자인 보기 (2018 ADAA 세미파이널리스트)