Background

With the growing popularity of online shopping, it has become increasingly important to address the issue of online shopping: a key challenge that online shoppers face when it comes to evaluating the size of a product, especially for larger products such as bed frames. To help users feel confident in their purchases and ensure a seamless shopping experience, I focused on developing solutions that would effectively convey product dimensions and overall size.
‍

Challenge

Online shopping often presents a challenge for users when evaluating the size of a product, leading to decision-making struggles.

Solution

Proposed adding an Augmented Reality feature to Instagram's shopping page to address shoppers’ concerns and frustrations with product sizing.

Project details

Duration: 8 weeks

Role: UX Researcher, UI/UX Designer

Tools: Figma, Maze, Notion, Whimsical, and pen/paper

Team: Me (80%) and my design mentor (20%)

View prototype

1. Discover

Before conducting in-depth user research, I conducted a market analysis to gain insights on the potential impact of adding an Augmented Reality feature to Instagram's shopping page. This helped me understand the why and how of enhancing the customer shopping experience. (market research)

| Impact on AR in ecommerce (Jon Cheney, founder of SeekXR)

AR helps users to experience the product instead of just seeing it
When shopping with AR, users are 11 times more likely to purchase the product
AR improves the experience, visualization, personalization, and trustworthiness of the brand
Eliminates doubts, increases confidence, prevents bad experiences, and shortens the time spent on decision making
72% of AR shopper end up buying more than they planned
Allows users to shop from the comfort and safety of their homes

Research goals

Discover how people feel about shoppoing on Instagram
Learn more about user's online shopping habits
Determine Instagram shoppers and their decision making process
Understand shoppers' highlights and frustrations
Feature validation

Survey

To gather more insights on the shopping behavior of users on social media platforms, particularly Instagram, a questionnaire can be sent out to individuals who have previous experience shopping on social media platforms. However, since this concept is still relatively new, general online shoppers can also provide valuable information. This would aid in understanding the pain points users experience while shopping on social media platforms and inform the design of an effective augmented reality feature to address these concerns. (survey questions)

2. Define

Persona

After analyzing the survey data, I created a user persona that represents the needs and behaviors of a young professional who seeks inspiration on Instagram and values discovering high-quality products at reasonable prices. This persona serves as a guiding point for the development of the AR feature and ensures that it aligns with the needs and preferences of the target audience.

To gain a deeper understanding of the needs and pain points of potential users, I developed a user persona for a young professional who frequently seeks inspiration on Instagram and values convenience when making purchases. By targeting this specific demographic, I was able to empathize with their pain points and design an augmented reality feature that would address their specific needs. This approach ensured that the feature would not only be useful, but also align with the values and preferences of our target audience.

an image that describes the user persona for the project

User flow

To enhance the usability of Instagram's shopping feature, I aimed to make the new augmented reality (AR) feature easy for users to discover and use. To achieve this, I designed a specific part of the user flow that demonstrates how users would interact with the AR feature. The user flow design emphasizes simplicity, allowing users to quickly understand what the feature does and where to find it. (check out the full version here).

3. Design

To enhance the usability of the new AR feature on Instagram's shopping page, I utilized sketches to visualize potential placements of the AR icon. The objective of each placement was to ensure consistency with the brand's design patterns while maintaining ease of use for users. The sketches featured the AR icon placed in areas where existing buttons were already located on different pages. Specifically, one sketch showed the AR icon placed next to the bookmark and messaging buttons on the first screen. Another sketch depicted the AR icon placed where businesses would be tagged, and the third sketch showed the AR icon placed where banners would typically be located.

an image of sketches for different placement for the new feature

Wireframe

After careful review, I concluded that the second version was the most fitting for Instagram's branding, and thus decided to create a wireframe for that placement. The first version had the potential to look cluttered, while the third version had the risk of being hidden if a business banner was present, making it difficult for users to find.

UI Kit

Added a few icons to already existing buttons and icons. The essence of the UI kit was staying true to the brand. Thus, the new button icons were designed similarly to the existing icons.

An image of new buttons that were added to this project

4. Test

Once the wireframe was refined, a prototype was created using Figma. To evaluate the usability of the new feature, both moderated and unmoderated tests were conducted. The tests sought to answer two key questions:

Could users easily navigate to the new AR feature from different starting points, including the homepage, shopping page, and business page?
Was the design of the new feature consistent with the overall design of Instagram?

Through Zoom and Maze, 60% of the respondents thought it was easy to navigate to the new feature from different starting points, as well as navigating in the prototype. Majority of the respondents said the prototype stayed true to the existing brand while few did not disclosure anything about the prototype staying true to the brand.

Reflection

During the research phase, one of the most memorable parts was conducting the competitive analysis. In previous projects, competitive analysis often allowed me to position a brand as a “need in area of improvement” and in the past, I would benchmark different brands. However, for this project, since Instagram was already leading in shopping on social media platforms, the competitive analysis only further proved that they were the leader in this space.

Furthermore, for this particular project, I had the chance to conduct both moderated and unmoderated usability tests and the results for moderated tests came out much better than unmoderated tests as I was able to say the prototype will take some time to load. Thus, through conducting different types of tests, I learned the importance of phrasing unmoderated tests.