Perspective_Screens_halfshadow.jpg

Instagram

Overview

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.


ROLE

Usability Tester

UX Designer

UI Designer

Interaction Designer

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.

Artboard Copy 2@2x.png

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.

Oliverdagolden on Instagram

 

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 to '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

    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

    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. 

    Possible 'Archive' journey

     

    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.

    UI sketches and icon exploration

    UI sketches and 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:

    1. Change 'Archive' to 'Hide from Profile'

    2. Incorporate existing notifications

    3. Incorporate existing micro interactions

    4. Group 'Hide' and 'Saved/Bookmarked' icons on Account screen

    5. IF 4. is validated, consider combining 'Archive' and 'Saved/Bookmarked' icons

    6. Redesign 'Archive' icon and validate

    2x2 evaluating design solutions

     

    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

    Before

    1. Changed 'Archive' to 'Hide from Profile'

    This is consistent with the inverse action which is 'Show on Profile'.

      After

    After

     
      Before

    Before

    2. Incorporated existing notifications which will help users to locate 'Archive' icon

      After

    After

     
      Before

    Before

    3. Incorporated 'Save' interaction to the 'Hide from Profile' action

      After

    After

     
      Before

    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

    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

    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
    — Matthew Frederick

    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.


    Additional work to check out: