Pennstagram
Instagram feature integration
my role
UI/UX Designer
tools
Sketch, Principle, Photoshop
timeline
June 2019 - July 2019
Summary and Goals
Instagram is one
of today's largest photo- and video-sharing social networking applications. As a master's candidate at the University of Pennsylvania
(Penn), I created Pennstagram, which adds features to the popular app, guided by user research.
- Team size: 1
- Target audience: Instagram users, 18-35 year-olds
- Number of research participants: 83 over two phases
- Research methods: Interviews, questionnaires
User Needs and Research
To understand what features would make the best photo-sharing application,
I surveyed 58 people. Below is a clickable sample of the data collected.
Why do you use Instagram?
On a scale of 1-7, how much do you like Instagram?
average response
"I wish Instagram had ______."
36%
used the words "theme"
or "aesthetic" when describing their posts or profile
52%
said they have considered deleting the app in the past 12 months
×
Why do you use Instagram?
- "I embroider clothes and sell artwork. Instagram helps my business a lot."
- "Mostly for travel ideas"
- "I haven't made any posts, but I like seeing posts from friends."
- "It's the least political social network."
- "For makeup tutorials that aren't as long as on YouTube."
- "Initially as a supplement to my fitness blog, but now it's the main thing."
- "I meet really interesting people through challenges like #100daysofcode."
×
On a scale of 1-7, how much do you like Instagram?
No participants chose 7, the most favorable rating.
×
I wish Instagram had ______.
- better filters for images, so users can rely less on external apps like VSCO or Afterlight
- easy-to-install profile themes (like Tumblr or MySpace)
- friends instead of followers
- the ability to repost from certain users
- only the option to post using the app's camera to reduce "FaceTuning" and make Instagram truly "instant"
- an option to hide sponsored posts
- clickable links
- more straightforward navigation menus
- wider aspect ratios to support panoramas
responses paraphrased
×
Themes and Aesthetics
These can include color schemes and puzzle-like patterns to give the grid a consistent look and feel.
×
Common reasons for wanting to delete Instagram include:
- It wastes time or is a distraction.
- It leads to unhealthy social comparisons.
- It's simply less fun/interesting than before.
Research Insights and Follow-up Phase
More Profile Customizability
One takeaway was that users want more variety in their profiles,
as indicated by the high number of people who wished to add some version of easily-installable profile themes.
Thus, I drafted the following design solutions:
multiple layout options for grid
header image
background color
option to show/hide likes
I conducted a second research phase
with 32 participants, who were asked to provide feedback and
rank the following grid styles:
2-columns, 3-columns, 4-columns, featured squares, and scrapbook style
Hover each artboard to view insights into the grid style.
n-column squares
Derived from Instagram's classic 3-column grid, this layout style also has options for two and four columns.
Users who ranked the 4-column grid as their favorite were asked if they would use five or more columns. All respondents said "no."
Quotes from Users:
"I like the dual columns because the posts are extra big."
"I would never change from the 3-column layout since it would mess up my 'theme'"
"I always wondered why everything was in 3's but now i see that nothing else looks quite right."
"The 4-column option shows more pics at once"
Overall user rankings: #2 of 5 (3-column), #4 of 5 (4-column), #5 of 5 (2-column)
featured squares
On Instagram, users often crop a single image into several smaller
ones to create the look of a featured image. The "featured squares"
layout option aims to provide a more elegant solution.
Quotes from Users:
"I would use this to post progress pictures of my embroidery in the
small squares, then the finished version I'm selling in the big ones."
"This is a nice balance between the normal squares layout (too boring)
and the scrapbook layout (too messy)."
Overall user ranking: #3 of 5
(nearly a tie for #2)
scrapbook
This layout option strays from the use of 1:1 thumbnails and
keeps all images on the grid in their original aspect ratios.
Quotes from Users:
"I've always disliked the squares because sometimes, my favorite
part of the picture isn't in the center, so you can't see it in the thumbnail."
"Instagram without squares feels a little strange to me, but i could probably get used to it."
"It looks more organic. i love it!"
"I think it's too messy/disorganized for my OCD but i can see how others would like it.
I just prefer things that are more uniform."
Overall user ranking: #1 of 5
I concluded that users tended to value at least one of three charateristics within their grid:
- familiarity
- uniformity
- dissimilarity
While it was great to hear from such a wide array, I believe giving the option of five grid
styles could be overwhelming.
For this reason, I eliminated "featured squares" as a standalone option and
opted to give users the choice to feature a post when creating it or viewing it later on.
However, when users edit their profiles, they are only given
the options of classic squares or scrapbook. From there, they can choose between 1 and 4 columns, inclusive.
Clearer Navigation, Icons, and Interactions
Further, during my first iteration of research,
several participants noted difficulties navigating Instagram.
During the second phase, I asked for specific interactions with the app
that users found frustrating or confusing:
There's a camera in the corner, and I always tap
it to make a new post, but it leads to the screen to create a new story.
When I want to see posts I've liked, I have to Google how.
For context, it's under profile > settings > account > posts you've liked.
While I did not want to focus too much on
restructuring Instagram's existing settings, I kept this user feedback
in mind when adding more features and menu items.
I aimed to use clear, unambiguous icons and micro-interactions to give users feedback. Additionally, when users edit their profiles,
they see the impact of each modification in real-time rather than making edits and switching back to their profile to see the result.
Additional Wireframes
Features Added
story previews
profile color + header
grid styles
repost photos
featured posts
- Story Previews: 24-hour stories display the time remaining and a preview to help users decide if they want to view them.
- Profile Color + Header: Many users stick to color schemes, "themes" or
"aesthetics" to give their profile a cohesive look, with some saying they will sacrifice the look of an inidividual post when editing if it will better fit the overall look of their grid.
- Grid Styles: Another customizability option allows users to select a classic squares or scrapbook style grid with 1 to 4 columns.
- Repost Photos: A common thread among my research participants was that they prefer to use apps without needing external apps to complete simple tasks.
Thus, an option to repost from others, keeping or modifying the original caption.
It also gives users another way to interact and feel more like "friends" than "followers."
- Featured Posts: These allow users to highlight posts that are more special than the rest, while
breaking up the monotony of same-sized thumbnails within their grid if they value dissimilarity.
Final Prototype
This video demo shows the features mentioned above in action.
What I Learned
Instagram attracts creatives, and as such, users want
to feel involved with the look and feel of their profiles. Rather than
using apps like Instagram as a one-size-fits-all platform, many are
beginning to use them as personal or business sites or mini-blogs, which are typically highly customizable in their appearance.
However, giving users too many options to customize could
make them feel overwhelmed. Restructuring how choices are presented can be done without reducing the number of options.
This project reminded me of the value of an in-person interview rather than solely gathering information through online questionnaires.
Participants gave more natural, candid responses that went in-depth and allowed me to ask follow-up questions or seek clarification.
If I were to do this project again, I would conduct one more research phase with 5-7 participants and a focus on usability testing to confirm the efficacy of my solutions. Due to many users expressing frustration with Instagram's navigation menus, card sorting would have been an eye-opening exercise. Perhaps, it would have resulted in menus that were nearly identical to that of Instagram, giving a better understanding of its decisions that may not immediately make sense to the casual user. Alternatively, the outcome may have been menus that are completely different but more intuitive to some.
Finally, from a technical standpoint, I learned the importance of naming layers and file organization! Pennstagram was my first large project using Principle and focusing on micro-interactions. As I reflect on this project, I see a few areas where more intentional file organization would have resulted in smoother animations, made the file more editable in the future and reinforced better practices for designing on teams.
Just for Fun: Branding
Although I am not a graphic designer, I enjoyed creating a logo and color
scheme for pennstagram, both of which have meaning.
The letters "nst" in the
middle of the logo form a camera, and the animated version depicts the shutter being pressed.
The gold-to-violet
gradient used throughout Instagram was replaced with a red-to-blue gradient.
Red and blue are Penn's colors. Go, Quakers!