Instagram Shopping (2018)

Role
UX/UI Designer

Responsibilities
UX Design
UI Design
User Research

Overview

In 2018, I conducted exploratory research to understand Instagram’s user motivations and behaviors with the new shopping feature. The main objective of this project was to identify user challenges and improve or provide a solution to a notable pain point, expressed via user interviews and surveys. Results from this case study are presented as an unsolicited redesign.

What is Instagram Shop?

See. Tap. Shop.

In 2016, Instagram released Instagram Shopping (IG Shop) as an in-app shopping destination where people can discover products from brands they love across Instagram. As it stands (2018), the main way to experience IG Shop is via (1) scroll to an image, (2) tap image for price, (3) view price, and tap (4) view product details. Once the user is interested in viewing the product or making a possible purchase, they are prompted to do the following (5) view product on brand’s mobile interface, (6) add product to cart. (7) check out, (8) register to pay, outside of the app.

User Research

Interviews

Through in-person interviews and surveys, I collected feedback to understand user motivations and identify any pain points in their experience using the IG Shop feature.

User Interviews revealed the following insights:

• Users prefer mobile shopping only when the experience is convenient and secure.

• Users do not feel that Instagram shopping is a “true” mobile shopping experience.

• Users are inspired by the current shopping feature’s functionality but are not motivated to use the new feature for their mobile shopping needs.

Problem & Analysis

The problem is that Instagram’s shopping feature is not a convenient mobile shopping experience for users.

After further investigation, users collectively described that they were inspired to buy a product via IG Shop but lost motivation to purchase any items because the app prompted them to exit the platform to make a purchase.  The act of leaving the app to purchase something on another mobile website felt inconvenient and decreased their motivation to use IG shop. 

Ultimately users were more motivated to use competitor mobile shopping apps over Instagram Shop because those apps provided a familiar and convenient experience while shopping on a mobile device. 

Based on the interviews, I suspect that users need a way to make in-app purchases on Instagram Shop because it is convenient and saves time.

Before coming up with a solution to this problem, I produced an Affinity Map to highlight insights about users’ challenges and goals with the mobile shopping tool. 

Solution

I believe that by giving users a way to make in-app purchases on IG shop, they will have a convenient mobile shopping experience. I know this will be true when a user can make one in-app purchase and receive a confirmation email.

How might we create a convenient mobile shopping experience for users? I sketched a few ideas to solve the UX challenge and improve the convenience of an in-app shopping experience. I ultimately decided to re-design the existing mobile checkout interaction.

I needed to understand users’ current behaviors with the existing mobile checkout systems to implement a re-designed mobile checkout interaction. Based on findings from interviews and surveys, users often mentioned that, unlike Instagram Shop, they generally experienced a positive mobile checkout experience with the following apps: Amazon, Sephora, Etsy, and Fresh Direct.

How might we provide users with a familiar mobile checkout experience? I prepared a Feature Comparison Matrix to identify mobile checkout features across the competitors' mobile apps. This analysis aimed to understand similarities across existing features and determine which features IG-shop users would value the most for IG shop's mobile checkout process.

How might we identify which features users value the most during a mobile checkout experience? I wanted to understand and identify the most valued checkout features for users on mobile devices. These valued features would provide me with a stronger sense of what users expect to see during the interaction. 

I initially conducted a closed card sort to gather some insights during this phase. I prompted users to select words related to mobile checkout features and pages into undetermined categories. I initiated the exercise by asking users, "Which features do you expect to see during a mobile shopping checkout experience, and where?" 

The card sort exercise revealed that users value and expect to see a product description page, shopping cart, payment method, and checkout features during their mobile checkout experience.

Based on the card sort results, I created a Feature Prioritization Matrix to analyze the most impactful mobile checkout features to implement first. 

Ideation: In-App Mobile Checkout

Information Architecture & Wire Frames
When the user selects a product that they are interested in purchasing, the checkout process will begin at this point. The following IA outlines the new screens (blue/red screens and buttons) in the user journey. The journey begins at add-to-cart and ends at order confirmation.

Although mobile checkout is not a new interaction for users, the shopping cart icon and add to cart call to action were newly introduced and implemented into the checkout experience for IG Shop. These actionable icons were a vital feature to introduce into the interaction. 

The interaction focused on the user journey from the mobile shopping cart to mobile payment. Throughout the interaction, users add one item to their shopping cart, update or remove items in the shopping cart, review delivery, tax, and order summary. 

I created paper prototypes to test the initial user journey and all adjustments were translated into low-fidelity wireframes (selection of wireframes below).

Prototype Validation

I stitched together the screens that I designed to form a functional and interactive prototype that could be tested in person by users through the InVision app for iOS. During the first round of tests, I tested the interaction from add to cart stage through select payment (see below).

User Testing Feedback

Users provided the following feedback about their experience with in-app mobile checkout: 

Add to Cart Icon:

• “On the tap for price photos, there should be an option to put the backpack in my cart from the image as well as have the option to further explore the product.”

Add to Cart Notification:

• “Once I clicked on the shopping bag on the bottom right (though I was unsure of the next step, then I noticed the dots at the top right with the number) Maybe the dots should be a shopping cart icon.”

• “It’s a feature that makes online shopping super easy for someone like myself, but if the red dot popped up more prominently, that would also help me.”

View my Cart Interaction:

• I felt like the “view my cart” and “shopping cart icon area” did not both need a red circle. If feels distracting and confusing to have it in both places.”

Shopping Cart Feature:

“The quantity selector is too small for my fingers on a mobile phone”

Prototype Revisions

Based on feedback from the initial round of usability testing, I addressed and updated users’ challenges by modifying the screens. During the second round of prototype testing, I added the remaining screens in the checkout journey. New screens included add payment method/registration, shopping cart, confirm order, processing order, and confirmation number. 

Additional User Testing 

You can see the final prototype here (2018)

Results from Validation Testing

Users concluded that they were more motivated to use the redesigned feature because it felt like a convenient mobile shopping experience.

They especially enjoyed that I introduced an [+] icon inside the add-to-cart shopping bag. Users felt that the updated prototype was more intuitive, and they valued that there were not too many steps to make a purchase.

Current Instagram users highly valued this mobile shopping experience. They could participate in a mobile shopping experience without leaving the app and felt confident about moving between screens.

Conclusions & Next Steps

With the implementation of an in-app mobile shopping checkout, users felt that their experience with IG shop was more convenient; however, they were still not motivated to use the Instagram shop as a mobile shopping app. 

Why? The introduction of an in-app mobile checkout increased their motivation to use the shopping feature and now needed more critical components to motivate them to use the app more than a competitor’s mobile shopping app. 

I want to continue testing the mobile shopping interactions and refine solutions for the users’ mobile shopping experience on Instagram. I look forward to testing and prototyping this idea with the revised prototype. There needs to be a deeper dive into what critical components will increase user motivations for using IG Shop.