Context



Context



My role



My role



UX



UX



Design



Design



Back

Back

Role: Product designer, design manager, technical implementor

iOS & Android, Web, VR, Publisher, Cloud based

Virtual stores campaign
for lead brands!
30-50% sales increase.

iOS & Desktop

iOS & Android, Web, VR, Publisher, Cloud based

Virtual stores campaign
for lead brands!
30-50% sales increase.

30-50%

Sales increase

50-150%

Conversion increase

70-300%

Registration increase

4+ min.

In the experience

20+

Interactions per User

88%

Games Ratio

Context

In the dynamic world of retail, where e-commerce and digital experiences are on the rise, the integration of 3D technology has transformed the shopping experience. This project explores the opportunities of the 3D virtual market for La Roche Posay as a part of a brand campaign, reimagining how customers interact with the brand.

My role

As a UX/UI designer, I'm leading the design efforts for the 3D Virtual Store Retail Project in partnership with our client, La Roche-Posay. My key role is crafting an immersive shopping experience that blurs physical and digital boundaries, ensuring a captivating user interface within the 3D store. By collaborating with cross-functional teams, I'm redefining how customers engage with products in their shopping experience.

My role

As a UX/UI designer, I'm leading the design efforts for the 3D Virtual Store Retail Project in partnership with our client, La Roche-Posay. My key role is crafting an immersive shopping experience that blurs physical and digital boundaries, ensuring a captivating user interface within the 3D store. By collaborating with cross-functional teams, I'm redefining how customers engage with products in their shopping experience.

Challenges

• Crafting an immersive 3D environment while maintaining ease of navigation.
• Ensuring a seamless, user-friendly interface for diverse customer profiles.

• Balancing aesthetics with performance to deliver a visually appealing experience.
• Keeping the unique identity.

Approach

My approach was focused on user-centered design and collaborative efforts across design, development, and branding teams. We combined innovative cloud based 3D technology with responsive UI to create an environment where users could explore, interact, and shop as if they were in a physical store. Design thinking, usability testing, and constant feedback loops were instrumental in refining the UX/UI aspects.

Approach

My approach was focused on user-centered design and collaborative efforts across design, development, and branding teams. We combined innovative cloud based 3D technology with responsive UI to create an environment where users could explore, interact, and shop as if they were in a physical store. Design thinking, usability testing, and constant feedback loops were instrumental in refining the UX/UI aspects.

3D store plan(top view)

3D store plan(top view)

Clickable locations placement

Clickable locations placement

Personas

Jessica

22 years old

Jessica is a mall shopper who values the traditional in-person shopping experience. She often visits malls with friends and family, appreciating the sensory aspect of shopping. Jessica has a particular affinity for La Roche-Posay cosmetics, and when visiting malls, she seeks out the brand's products.

David

35 years old

David is a health constant who prioritizes skincare and trusts dermatologist-recommended brands. David considers of online shopping time-saving and quickly reorder his favorite products. He values the science and effectiveness behind skincare products and is willing to invest in quality.

Personas

Jessica

22 years old

Jessica is a mall shopper who values the traditional in-person shopping experience. She often visits malls with friends and family, appreciating the sensory aspect of shopping. Jessica has a particular affinity for La Roche-Posay cosmetics, and when visiting malls, she seeks out the brand's products.

David

35 years old

David is a health constant who prioritizes skincare and trusts dermatologist-recommended brands. David considers of online shopping time-saving and quickly reorder his favorite products. He values the science and effectiveness behind skincare products and is willing to invest in quality.

Key-Finds

• Immersive Experience: Users can explore the 3D store as if they were physically present, enhancing their connection with brands and products.

• Effortless Navigation: We developed an intuitive navigation system that caters to users of all tech levels, ensuring a seamless shopping experience by using the hotspots.

• Visually Stunning UI: The design team balanced aesthetics with performance, delivering a visually appealing and responsive interface.
Brand Identity: La Roche Posay within the virtual store maintained its unique identity.

Key-Finds

• Immersive Experience: Users can explore the 3D store as if they were physically present, enhancing their connection with brands and products.

• Effortless Navigation: We developed an intuitive navigation system that caters to users of all tech levels, ensuring a seamless shopping experience by using the hotspots.

• Visually Stunning UI: The design team balanced aesthetics with performance, delivering a visually appealing and responsive interface.
Brand Identity: La Roche Posay within the virtual store maintained its unique identity.

• Clickable Zones: I define clickable zones for user interaction within the virtual store.

• User Stations: I strategically design user stations for engagement and mini games.

• Virtual Shopping: I craft a visually appealing, user-friendly

• User Testing: I gather feedback to refine the store's design, enhancing the user experience, including gamified features.

• Project Management: I planned the project and aligned the design with project goals and integration process.

• Stakeholder Engagement: I work with stakeholders to ensure the design aligns with their vision.

• Brand-Compliant Assets: I design assets adhering to brand guidelines.

• Store Building: I oversee design implementation, including gamification, ensuring a seamless store creation.

• Technical Implementation: I collaborate with developers to implement assets and minigames.

• Gamification: I design and integrate gamification, including mini games, enhancing user engagement.

• Website flow: Designing the flow to smooth user experience linking virtual store CTA to the customer’s website.


• Store Building: I oversee design implementation, including gamification, ensuring a seamless store creation.


• Technical Implementation: I collaborate with developers to implement assets and minigames.


• Gamification: I design and integrate gamification, including mini games, enhancing user engagement.


• Website flow: Designing the flow to smooth user experience linking virtual store CTA to the customer’s website.


• In implementing the virtual store, I played a crucial role. This involved close collaboration with the development team for seamless asset integration and responsive design. Simultaneously, I worked with stakeholders to align the project with their vision.

• Store Building: I oversee design implementation, including gamification, ensuring a seamless store creation.


• Technical Implementation: I collaborate with developers to implement assets and minigames.


• Gamification: I design and integrate gamification, including mini games, enhancing user engagement.


• Website flow: Designing the flow to smooth user experience linking virtual store CTA to the customer’s website.


• In implementing the virtual store, I played a crucial role. This involved close collaboration with the development team for seamless asset integration and responsive design. Simultaneously, I worked with stakeholders to align the project with their vision.

Conclusion

The project showed remarkable impact on La Roche-Posay's online retail presence, with increased sales and an engaged customer base. This success reflects our dedication to delivering innovative and immersive shopping experiences for our clients.

AR books and games

Remote controller

Home services app

Copyright© 2023.