Background
Over the course of three years, our client Next Retail Concepts partnered with a dozen brands, including Oscar de la Renta, Fred Segal, and Restoration Hardware to revolutionize online shopping and create a series of immersive 360-degree e-commerce experiences for desktop, mobile and VR. These experiences invited users to explore virtual storefronts, interact with 3D products, engage with exclusive runway content, and serve as exciting launchpads for new collections in an entirely new format. Powered by Mastercard ®
My Role
In the fast-paced environment of a startup, roles often overlapped but I mainly worked on shaping the end to end digital experience, designing the product architecture, crafting high-fidelity screens and creating core design components that could be reused and personalized based on the retailer. My focus was on designing the on-boarding, streamlining the checkout process, and creating other visual elements such as icons and animations. I also led the creation of most of the promotional material that was used on social media and brand websites. Tools like Sketch, Photoshop, After Effects, Zeplin and rapid HTML/CSS prototyping were instrumental in bringing the experience to life.
Why Immersive?
Insights
After conducting user interviews and gathering contextual data, we identified key insights to help understand user expectations and behaviors
Key Features
✅ 3D Models & Scalability
Our 3D model viewers provide customers with an immersive 360-degree view of the product, allowing them to fully explore and interact with the item before making a purchase. This feature eliminates any guesswork and provides shoppers with a more accurate representation of the product, ultimately relieving purchasing uncertainty . For furniture retailers, this feature proved especially valuable, allowing customers to compare product scale directly within their own environments.
✅ Voice & Video Integration
With the addition of voice, video, and other environmental effects- We allow users the opportunity to be immersed in the brand and learn about the products directly from fashion designers and other creators.
✅ SDK Integration
Our dev team created scalable micro-services to pull product information. The team worked directly with the client to create custom plugins for their system, to allow for integration and retrieval of the product data and accurate inventory information.
Building The Foundation
Capturing Storefronts and Products
Our specialized team captured storefronts and products with 360° product photography, a technique for capturing photos of a product from multiple angles, in order to create an interactive, three-dimensional window view. When combined, it allows customers to spin and enlarge the product as if they were looking at the product in a store. This interactive overview allows users to gain a better picture of the shape, texture, and characteristics of the product.
The User Interface
Putting pen to paper and using the research and insights we gathered, I initially began exploring concepts visually through low-fidelity wire frames, keeping in mind common translation design patterns. At this stage, we placed extra emphasis on ensuring component flexibility as our goal was to build a base template that could be easily customized for each retailer at later stages. So icons, pop-up modules, hotspots, navigation, and vantage points were the first to be sketched.
Onboarding and Hotspots
The store's navigation varies between mobile and desktop versions. Desktop users can navigate through vantage points located around the store and can also use keyboard arrows for more precise control. On the other hand, mobile users navigate to these points using more mobile-native gestures like swiping and tapping their screens.
Initial Icons:
Finalized Versions:
*The Oscar de la Renta immersive shopping onboarding experience pictured above.
*The Fred Segal loading screen pictured above.
Fred Segal
Oscar de la Renta
Data & Analytics
We regularly gathered product analytics, utilizing Google Analytics and Amplitude to prepare dashboards. Tracking session times, event actions, user devices, returning visitors, and more to help influence future product iterations and improvements. We also identified user pain points for post-launch optimizations.
User Feedback
We continuously gathered feedback throughout every stage of the design process. Low-fidelity prototypes were tested with stakeholders to get feedback on functionality, content, and interactivity. After each store launch, we regularly surveyed users and one issue consistently surfaced:
✦ Problem Our users found the experience to produce a considerable amount of lag and long load times.
✦ Solution Our development team developed a Content delivery network (CDN) for assets to allow for the best distribution. Over the course of multiple iterations, our team managed to get the load time of the store from over 30 seconds down to 3.
Live Events
The 29Rooms Event: We debuted the Fred Segal immersive experience in collaboration with Refinery29 at the 29Rooms event, a once a year event hosted by Refinery29. It's filled with rooms of stimulating art installations and immersive visual and auditory experiences. Our teams built a brief with production parameters, materials, & floor plan. Shoppers navigated and shopped the Fred Segal + Refinery29 experience through a large kiosk and we even developed a QR code to allow users to open the experience right from their phones.
#️⃣ Social Ads
Press 📰
