IGTracker — UX Case Study

Instagram tracking application


IGTracker Icon

Inspiration

Teenagers spend a lot of time on social platforms like Twitter, Facebook, and Instagram, and they care deeply about how their accounts are perceived by others. Most teens on SNS believe in the ripple effect of their account's reach and put real effort into growing their followers.

Design Process

I followed IDEO's Human-Centered Design process so the design was grounded in feedback, research, and user testing.

IDEO Design Process Human-Centered Design process by IDEO

#1. Observation

Goal & Audience

IGTracker's goal is straightforward: to analyze and track an Instagram account's statistics—followers, following, likes, comments, and so on. Our main audience is teens, mostly in the U.S., aged 13–25—the same demographic that drives Instagram, Snapchat, and Facebook. Among these, Instagram is the most popular and active platform, so we focus on giving this audience a deep view into their Instagram account's stats.

"Try to understand people through observing them. For example, if you're designing a vacuum cleaner, watch people vacuum."

Survey results from LendEDU

Question 1: Do you make an intentional effort to like the Instagram posts of people who like yours?

Results of surveys by LendEDU

Question 2: Do you know someone who deletes Facebook or Instagram posts that don't get enough likes?

Results of surveys by LendEDU

The LendEDU survey shows that young people care a lot about their Instagram popularity and routinely check the engagement on their posts. But what if they could review the whole picture of their account on a single screen, instead of checking posts one by one?

Persona

I created a potential user of IGTracker based on the audience above.

Persona

Job stories

I used the Jobs to Be Done framework to better understand our mission from the user's perspective.

  1. When I'm managing my Instagram account, I want to take care of my feed and followers, so I can keep my followers engaged.
  2. When I post on Instagram, I want to get plenty of likes, so I can grow my account's reach.
  3. When someone unfollows me without warning, I want to see who unfollowed me, so I can respond accordingly.

Logo

#2. Ideation

Main purpose

IGTracker's main purpose is to provide insights into a user's Instagram account—followers, blocked users, comments, likes—and present them through graphs and charts in a clean, intuitive interface.

Brainstorming

Building on observation and prior experience, we focused on the needs and desires of our target audience (teens in the U.S., 13–25):

  1. They live inside social mobile apps like Snapchat, Instagram, Musical.ly, and Houseparty.
  2. They love interactions and gestures—swiping, pinching, expanding, animating—and these feel completely natural to them.
  3. They are experts with these apps and operating systems, but still resent complex or hard-to-use UX.

Flow chart Basic user flow based on brainstorming and observation

Quick UI concepts

IGTracker is iOS-only, so we built our UI guidelines on top of the iOS Human Interface Guidelines:

  1. White / negative space, clean design with bold typography and emoji (inspired by Snapchat).
  2. Organized, well-spaced, easy to read—using contrast and a minimalist approach so data and graphs are legible at a glance.
  3. Youthful design, not just functional, because our audience benchmarks against Instagram, Snapchat, and Facebook.

#3. Rapid Prototyping

Lo-fi prototypes

For rapid usability testing, we built rough prototypes and made them clickable in InVision. We tested with people who actively use Instagram and care about their reach. To stay focused on the core hypothesis, we deliberately avoided polishing details. (Click image to enlarge.)

Lo-Fi Prototype a. Dashboard → b. Audience / Posts → c. Inner Analytics

_a. Dashboard

After login, this is the first screen the user sees. We summarize the most important information with graphs:

  • Followers Growth
  • Unfollowed Me
  • Not Following Me Back
  • Blocked Me
  • Deleted Comments / Likes

The screen does not scroll. We chose a fixed set of essential metrics so the user always feels in high-level control of their account.

We initially considered showing more graphs on the main screen, but after thinking carefully about what users actually need we settled on five: Followers Growth, Unfollowed Me, Not Following Me Back, Blocked Me, and Deleted Comments / Likes.

1. Followers Growth

Follower count is prominently displayed at the top of the Instagram profile and is the key indicator of popularity for our users. They are highly sensitive to changes in this number. The "Followers Growth" graph shows the overall change at a glance.


2. Unfollowed Me

Users are very curious about people who no longer follow their account. They feel their account is popular when more people follow them than they follow back, and they often want to unfollow those who unfollowed them. The "Unfollowed Me" graph surfaces these statistics.


3. Not Following Me Back

Similar to "Unfollowed Me": when users follow someone, they expect that person to follow them back. If someone doesn't, they want to know who.


4. Blocked Me

The worst case. Instagram doesn't tell users who blocked them. Everyone wants to know how many people have blocked them and who.


5. Deleted Comments / Likes

As shown above, post engagement matters a lot. Users want to delete posts that don't reach a satisfactory number of likes or comments. The "Deleted Comments / Likes" graph shows how many such posts and reactions have been deleted.

_b. Audience / Posts screen

This screen lists insights and analytics for the tab the user just selected (Posts or Audience). It's a scroll view of the available data options. Users switch via the tab bar; tapping a row navigates to the next screen (c.).

_c. Inner Analytics screen

This screen displays the information selected on the previous screen. It is a scrolling list, with each user-profile entry containing:

  • The user's name
  • Whether they follow me back
  • The number of likes & comments they've given me

#4. User Feedback

Usability testing

Using the prototypes from #3, we ran usability tests with people who use Instagram heavily. This step was critical for surfacing ideas, feedback, and a deeper understanding of our audience.

"If you want to improve a piece of software, all you have to do is watch people using it and see when they grimace, and then you can fix that." — David Kelley

User Testing Usability testing with lo-fi prototypes

Feedback

Key feedback we collected:

  1. Need a "Switch Account" button on the Dashboard for users with multiple accounts.
  2. The screens feel "businesslike" and a bit boring, given that the audience is teenagers.
  3. "Follow" / "Unfollow" buttons are needed on the Inner Analytics screen so users can act immediately.

Improvements

Based on feedback, we redesigned key features in Hi-fi prototypes. (Click image to enlarge.)

Hi-Fi Prototype Hi-fi prototypes based on feedback

_a. Dashboard

We added a "Switch Account" button at the top so users can swap between multiple accounts. The interaction mirrors Instagram's own account switcher—tap and choose. To add a new account, users tap the last menu item, "Add Account."

Add Switch accounts button

_b. Audience / Posts screen

No major changes. We refined the tabs and added small details like arrows and font variation.

_c. Inner Analytics screen

We added "Follow" and "Unfollow" buttons to each row so users can act on other accounts without leaving IGTracker. We also added details like the other user's follow / follower counts.

Add Follow / Unfollow button

By providing these buttons, users no longer need to switch from IGTracker to Instagram. They can also see at a glance whether the other person follows them back.

Improvements of Inner analytics screen

Thumb zone

On the main screen with the graphs, it's important that users can browse every chart comfortably with one hand. I referenced an article by Samantha on the "thumb zone" when laying out this screen.

Thumb-zone on the main screen

Zeplin

#5. Iteration

Based on feedback

With the Hi-fi prototypes, we built another clickable prototype for the next round of testing. Continuing to test and incorporate feedback is essential before the application is ready to ship.

Detailed Mock-up

#6. Implementation

Work in progress

Validated changes from each round are implemented immediately after testing. We continue to observe testers to validate the application's usability. The clickable mock-up below is the latest prototype, made with ProtoPie.

Prototyping with ProtoPie

Play with the prototype

Clickable prototype on MarvelApp

What I learned

IGTracker's audience is teens and college students. We interviewed and observed them, reviewed surveys on Instagram usage, and spent significant time understanding what they really needed from an account-management tool. By empathizing with actual users, we recognized the value of insight they could gain—and how this insight drives a product that is genuinely useful.

Takeaways

IGTracker is an application for U.S. teens who live on social platforms. It helps them gain insight into their account's statistics and engagement through a clean, detailed interface.

Thanks for reading. To get in touch, visit my LinkedIn or email ghsspower@gmail.com. For more UX/UI work, see my Behance.

See the full design on Behance (2018 ADAA Semifinalist)

Title : IGTracker — UX Case Study
Date : August 20, 2017 (2 Weeks)
Tools : Adobe XD, Adobe Photoshop, Adobe Illustrator, Kakao Oven, Studio XID ProtoPie, MarvelApp