OVERVIEW

Instagram Shopping Try On

2019 — 2020

Brands that sell their products on Instagram can now add an augmented reality try on feature to product pages, starting with makeup and eyewear product categories. Consumers can try products on Instagram anywhere and make more confident purchase decisions by seeing how it looks in context through the immersive experience. Consumers can even buy directly on Instagram in augmented reality.

 

nars_press

Goal: Help people build confidence in the products they're interested in. Design a seamlessly integrated and differentiated augmented reality experience in Instagram Shopping, Android and IOS.

Users: All Instagram users, beauty and fashion brands in Checkout.

Why: Users want to be able to try things on when online shopping because they’re unable to evaluate in person before they commit to a purchase. Brands want to add efficiency to the customer experience, aquire more customers and stimulate conversation about the brand.

My Role: Lead Designer, end to end UX/UI design process, prototyping, user research, marketing materials, product vision and strategy.

Collaborations: As an external designer, I collaborated with an Instagram Shopping Designer point-of-contact, an Instagram Camera Designer point-of-contact, received input and feedback from the Instagram Interests surface team ICs and Managers, Head of Instagram Design, Instagram Design Systems team, Instagram Shopping, Camera and Interests product managers and Head of Instagram Product. Within the Facebook Spark AR team, I collaborate with a PM, a technical artist, a researcher, multiple front end engineers (Android and iOS) and the partnerships team. 

Process: Extremely agile, the project was ambiguous and broad in scope. To get a new feature (Virtual Try On) in a new product (Instagram Shopping) as an external team (Facebook Spark AR), I led the effort with product managers and designers on multiple Instagram teams, as well as communicated design decisions with product, marketing and partnership teams across different time zones. I researched prototypes I developed in collaboration with a technical artist, identified high-level problems, defined solutions and organized reviews to ultimately get consensus up to Head of Instagram Product on an end-end solution. 

Outcome: Try On is live today on the product pages of MAC Cosmetics, NARS Cosmetics and Warby Parker and RayBan with more to come!

group_brands

USER-CENTERED APPROACH

The Customer

For the Spark AR platform (Facebook’s creation platform for mobile augmented reality), we had 3 main customers who we often referred to as a triple sided market: consumers, being users of Instagram, Spark Platform Integrators, being Instagram, and AR Content Creators, being Businesses or Brands.

customer

Top Customer Frustrations with current experience

Consumers are frustrated by inconvenient product returns when online purchases don't meet their expectations. In-store can also be just as inconvenient, like unsanitary real try on of beauty products.

Spark Platform Integrators (Instagram) are frustrated by the limited ways to differentiate themselves as a new product in a highly competitive market where other platforms have much more tried and true retail experiences. 

AR Content Creators (Businesses) are frustrated by the costs and losses associated with dissatisfaction and returns from consumers.

Customer Problem/Opportunity

Consumers want to be able to try things on when online shopping because they’re unable to evaluate in person before they commit to a purchase. At least 30% of all products ordered online are returned as compared to 8.89% in brick-and-mortar stores. One of the highest reasons being the product looks different.

Instagram wants to create a differentiated shopping experience and increase user confidence to engage with and buy products directly in Instagram.

Businesses want to add efficiency to the customer experience, ensure customer satisfaction with the final product, acquire more customers and stimulate conversation about the brand.

When I'm interested in a product, help me see it in context to build up my confidence to buy it.

AR Try On Job

Instagram Shopping Journey

The sufaces in Instagram map to the shopping funnel where users are in discovery when they have low intent on Explore and Feed, then their intent increases to consideration on Shopping Home and Shop Profile, to the highest intent of evaluation on PDP (Product Description Page). We knew we wanted to bring AR where customers already have high intent and are evaluating a product they're interested in.

shipping funnel

Iterations for Peer Review

There are 6 different venues to review designs in Instagram's process. I would attend the different venues and often shared feedback across teams to seamlessly understand and integrate into the design system. I was also educating stakeholders on AR, to increase understanding of my solutions and keep visibility high.

iterations

Developing Pitch Decks for Partnerships

While I was designing the experience, Spark AR's partnership team was meeting with businesses to get commitment from them to participate in the Pilot launch. I created marketing collateral with the collaboration of my PM to be used to entice businesses to invest in AR and a partnership with Facebook and Instagram. I also worked with a vendor to ideate on visuals that would represent the opportunity for them and their customers. This was of importance especially for Luxottica/Ray Ban, who wanted to participate as part of a larger push for them to be Facebook's AR Glasses partner.

partnerships

Usability Testing of Current Direction

I wanted conviction on the entry points and the expectations of users in a camera when in a shopping mindset versus a social sharing mindset. Instagram's design system and leadership wanted to maintain a consistent experience across camera interfaces which meant a prominent capture button, but I hypothesised that a purchase CTA should take prominence and that users would prefer to purchase directly in AR. I also tested the location of product information and worked with a technical artist to build an interactive prototype that brought the experience to life. It was also cricual to put AR in the hands of users in convincing Instagram of AR's unique value, to see that the realism/quality met user expectations.

usability

Getting Final Sign-Off on the End-End Solution

Instagram Design review is a venue where designers receive feedback from Instagram's design leadership including Head of Design. I presented the research findings and how user feedback was incorperated as well as how feedback from Instagram Camera and Shopping design team peer review was incorperated. All proposed designs were accompanied by a prototype (created in Origami Studio).

design review

TOP CHALLENGES

1. AR is almost never the only thing to ship a complete product
2. Instagram is not complex by design
3. Being ahead of industry means brands need education and convincing of value

PRESS

See what people are saying: Engaget, Mashable, Adweek

press4
Screen Shot 2019-10-16 at 7.42.34 PM

Selected Works

Amazon StyleSnap #Software #VisualSearchUpload photos or screenshots to find visually similar styles on Amazon #VisualSearch #Mobile

Amazon Camera Modality #Software #ARBiggest redesign of Visual Search technology across Amazon #Mobile #AR #Camera

Amazon Package X-Ray #Software #ARSee which of your packages holds which gift, without opening them #Mobile #AR #Camera

Amazon Publisher Services #Desktop #CloudNew suite of cloud services, built to monetize and grow your media business #Desktop #Advertising

Amazon Visual Fashion Finder #Software #AIFilter the most important aspects when shopping for garments #Mobile #Internship #Fashion #AI

Photography #ArtDirection #PrintCollection of photographed International Editorials #Print #Digital #Identity #Photography