Role
Usability Tester
UX Designer
UI Designer
Interaction Designer
Summary
End-to-end design case study identifying Instagram user challenges and designing possible solutions.
Note: I am in no way affiliated with Instagram. This is a self-assigned project. And yes, this was a real Instagram account.
Challenge
Instagram is a well-designed app with a very engaged design team. They test constantly and iterate quickly.
However, experience showed that the 'Archive' and 'Collections' features were unclear and likely under utilized.
Goals
Design and test solutions based on guerrilla usability testing
Increase user understanding and engagement of existing 'Archive' and 'Collections'features
Deliverables
Guerrilla User Test Results
UI Sketches
High Fidelity Mockups
Clickable Prototype
Tools
Pencil & Paper
iPhone for recording tests
Sketch
Marvel (Prototype)
Principle (Interaction Design)
Process
This case study project involved end-to-end design. I adapted IDEO's Human Centered Design process to suit my needs.
I use Instagram daily (mostly for my dog) and consider myself to be a pro user so this case study was an excellent chance to dig deeper into the design thinking behind the app.
Empathize
Usability Testing
Conducted guerrilla usability testing to engage with users and help clarify known issues and identify pain points I may have missed.
Selected five users at random based on a perceived age between 20 and 35.
Assigned a series of tasks and asked users, 'think out loud' as they manipulated the app.
Testing tasks included:
Take a photo in app, geotag it, post it
Search for a item (watch, shoes, sweater, etc...) and save a photo to view later
Create a folder or group with a saved photo
Share a saved photo
Make a photo on your account no longer visible without deleting it
Guerrilla testing in Yerba Buena Gardens
Results
For the most part, users were successful with initial tasks but struggled when faced with more complex tasks or when working with an unfamiliar feature.
5 of 5
Successfully Posted a Photo
3 of 5
Created a Collection
5 of 5
Searched for an Item and Saved It
4 of 5
Located Saved Photos
3 of 5
Hid a Photo From Public View
1 of 5
Located Hidden Photos
Synthesize
Pain Points
Reviewed usability testing video and analyzed to reveal some obvious pain points. Anything less than 4 out of 5 demanded some attention.
Pain points included:
'Archive' meaning was unclear'
'Archive' icon was unfamiliar
Users unable to locate Archive (Users would have seen a small popup the first time they archived a photo)
'Collections' copy was inconsistent
Notifications for 'Collections' and Saved images are located in different parts of the screen within same page
I conducted additional testing to validate my theory that the term 'Archive' was unclear. Of ten people surveyed, six responded, and all but one said that 'Hide' was a clearer term based on functionality.
Affinity mapping user pain points
Task Flows
Using these pain points, I experimented with personas in an effort to understand the types of users who would use 'Archive' and 'Collections'.
Ultimately, I shifted away from personas in favor of task flows.
Developed task flows as a quick way to understand why users would utilize the 'Archive' and 'Collections' features.
Ideate
UI Design
I love to sketch. I put pencil to paper as a quick way to explore design solutions and iterate rapidly. Or to just doodle.
UI sketching helped inform a key design decision to incorporate Instagram's existing notification interactions into the 'Archive' user flow.
Possible Solutions
Based on testing and analysis, I developed six possible solutions and evaluated them using a 2x2 based on how significantly they impacted users and how difficult the solutions may be to implement.
Solutions included:
Change 'Archive' to 'Hide from Profile'
Incorporate existing notifications
Incorporate existing micro interactions
Group 'Hide' and 'Saved/Bookmarked' icons on Account screen
IF 4. is validated, consider combining 'Archive' and 'Saved/Bookmarked' icons
Redesign 'Archive' icon and validate
Validate
High Fidelity Design
I created high fidelity mockups of potential design solutions in Sketch and developed a clickable prototype using Marvel.
I developed the interaction design for Solutions 1, 2 and 3.
Gif created with Principle.
Solutions
The following are side-by-side comparisons of Instagram before and after implementing design solutions.
Before
1. Changed 'Archive' to 'Hide from Profile'
This is consistent with the inverse action which is 'Show on Profile'.
After
Before
2. Incorporated existing notifications which will help users to locate 'Archive' icon
After
Before
3. Incorporated 'Save' interaction to the 'Hide from Profile' action
After
Before
4. Grouped 'Archive' and 'Saved/Collections' icons in header navigation of Account screen
This design change would separate the public and private portions of an account.
Potentially provides users with clearer understanding of possible uses for hiding, saving, and creating collections.
After
5. If Solution 4 is validated, consider combining 'Archive' and 'Saved/Collections' icons in header navigation of Account screen to further emphasize public and private sections of an account.
Consolidated 'Archive' and 'Saved/Collections' sections
6. Redesign 'Archive' icon. This may not even be necessary if solutions 1, 2 and 3 are implemented and validated. I have not attempted this potential solution though testing revealed that the current 'Archive' icon may be unclear.
Final Thoughts
This case study was an eye opening experience for me! I learned more about myself as a designer than I expected to and gained some invaluable experience conducting guerrilla user testing. This work also afforded me the opportunity to dive deep into an app that I use daily (OK, hourly, if I'm being honest) and begin the understand the design thinking and reasoning behind some of the design decisions the team at Instagram made.
One of my favorite lessons from Matthew Frederick's book 101 Things I learned in Architecture School is Number 18, which states:
“Any design decision should be justified in at least two ways”
I find that this often rings true for design of a digital space, and Instagram, by providing multiple ways to accomplish tasks or engage the functionality, embodies this lesson very well.