3D Feature & AR-Try on

3D Feature & AR-Try on

3D Feature & AR-Try on

Closing the gap on the in-store experience

Closing the gap on the in-store experience

💁🏻‍♂️ Context

💁🏻‍♂️ Context

Difference between online and offline shopping

Difference between online and offline shopping

Difference between online and offline shopping

Physical stores offer the advantage of trying on clothes or closely examining products, a feature absent in online shopping.
3D previews and AR Try-on technologies fill this gap by enabling customers to visualise how a product appears or fits prior to purchase, boosting confidence and minimising the risk of returns.


Increased purchase confidence often translates to higher conversion rates and sales.

Physical stores offer the advantage of trying on clothes or closely examining products, a feature absent in online shopping.
3D previews and AR Try-on technologies fill this gap by enabling customers to visualise how a product appears or fits prior to purchase, boosting confidence and minimising the risk of returns.


Increased purchase confidence often translates to higher conversion rates and sales.

Physical stores offer the advantage of trying on clothes or closely examining products, a feature absent in online shopping.
3D previews and AR Try-on technologies fill this gap by enabling customers to visualise how a product appears or fits prior to purchase, boosting confidence and minimising the risk of returns.


Increased purchase confidence often translates to higher conversion rates and sales.

Imagine that you’re Bastian

Another story

🥊 Problems in online shopping

🥊 Problems in online shopping

Current Issues

Current Issues

Current Issues

Users currently rely on static images to view products.

Static images often fail to capture intricate details of products, such as fine textures, patterns, and material quality. This lack of detail can lead to uncertainty about the product’s true appearance and quality.


Users cannot feel or closely examine the texture and material of the products through images alone. This can result in a mismatch between user expectations and the actual product experience.

This limited view can make it difficult to assess details, textures, and fit.

Without interactive or dynamic views, users struggle to gauge the product's fit and scale, which is particularly critical for items like clothing and accessories where size and fit are crucial.

😰🏢 Impact on Users & Business

😰🏢 Impact on Users & Business

Decreased Confidence

Users may feel less confident in their purchase decisions, which can negatively impact their overall shopping experience and satisfaction.

Increased Return Rates

Increased Return Rates

Due to the inability to properly assess product details and fit, users may end up returning products more frequently, leading to higher return rates and increased costs for the business.

Reduced Conversion Rates

Reduced Conversion Rates

Potential buyers might abandon their purchases if they cannot get a satisfactory view of the product, leading to decreased conversion rates and lost sales opportunities.

🔑 Solution

🔑 Solution

3D preview

3D preview

Feature: Launched a new 3D preview feature for wearable products from major brands like Nike, Adidas, Puma, and Skechers.

Benefit: Allows buyers to see every detail of the product, enabling informed purchasing decisions and reducing uncertainty.

AR Try-on

AR Try-on

Feature: Introduced an "AR Try-On" feature allowing buyers to use augmented reality to virtually try on shoes and see how they look on their feet.

Benefit: Helps buyers determine if the shoes match their style and fit preferences without leaving their home, enhancing the shopping experience.

👷🏻‍♂️ Process

👷🏻‍♂️ Process

Competitor review

Competitor review

Competitor review

This feature will be piloting in Lazada Indonesia, so I tried to take a look on is this feature have it by our competitor in Indonesia.

Blibli

Blibli

Found out that Blibli is having this feature, even though it's only showing a static images of the product that can help the user to check is that suitable to their daily wears

Improvement for Blibli's feature

Improvement for Blibli's feature

Because it's only removing the product image background and put it into the AR camera. If the product images got some images like a shoes size, it will directly showing a shoes size chart that not really related to the feature

Make sure our outcome

Make sure our outcome

Make sure our outcome

Before jumping into the design solution, first thing first I wanna make sure with the developer that our outcome is really fulfil what we trying to solve. Also wanna make sure that the outcome won't be laggy.

What can dev develop

What can dev develop

Because this feature is something like a module that the developer adapted from out source, so I might need to know the limitation before I jump into design to make sure I won't make any design that can't be adjust by the developer

Kept consistency

Kept consistency

Need to make sure with our existing feature in Lazada. In Lazada, we already have a feature called "Beauty AR" that an AR function to let users to try the beauty product (ex: lipstick)

Onboarding

Onboarding

Onboarding

To let the user know what they need to do and what they can do in these 2 features. I request to have a onboarding page that introduce how to operate these features to users

3D Preview

3D Preview

Let users know that they can do a 360 views and zoom-in/out to see more details about the product

AR-Try on

AR-Try on

Educate the users on how to test the product in the AR

🖼 Outcome

🖼 Outcome

🖼 Outcome

Flow

Flow

Flow

Design outcome

Design outcome

Suggestion from Stakeholders

Suggestion from Stakeholders

Before finalizing this design outcome, my product manager suggested using a previous design solution that allowed users to select the preview method by using a bottom-sheet.

Design request by Product Manager

Design that I suggest

I challenged this approach by pointing out that it negatively impacts both user experience and development logic.

User Experience: Requiring users to take an extra step before accessing the feature complicates the process. At that moment, users won’t have a clear understanding of what the feature looks like, making it difficult for them to decide whether to use it.

Development Logic: The system needs to include an additional bottom sheet and extra configuration effort. If a product only has a 3D preview feature, the page should directly navigate to the 3D preview without displaying a popup.

⚙️ Next steps/opportunities

⚙️ Next steps/opportunities

To further bridge the gap between online and offline shopping

Expand AR Try-on availability

Expand AR Try-on availability

Expand AR Try-on availability

Expand it to more product categories

Interactive hotspots

Interactive hotspots

Interactive hotspots

Clicking on a hotspot to showing additional information about the product, like materials, size charts, or care instructions.

User Personalization

User Personalization

User Personalization

Integrate AI to personalize the AR Try-on experience. For example, the AR app could recommend shoe sizes or styles based on the user's past purchases or body measurements.

Closing the gap on the in-store experience

Frankim