The Fred Segal + Refinery29 Immersive Experience

Overview

Our client, Next Retail Concepts developed an immersive e-commerce experience for the retail brand Fred Segal. A 360 shopping experience that brought the Los Angeles Fred Segal flagship store to the digital screen. Users could enter the store, breeze by the clothing racks, and click on products that appeal to them. Also partnering with Refinery29 to feature a curated gift guide section in the store. Next Retail and Fred Segal launched the experience at Refinery29's 29Rooms event. Sponsored by Mastercard.

ROLE

UI/UX Designer

CLIENT

Next Retail Concepts +

Fred Segal +

Refinery29

Our Roadmap

The Fred Segal Experience translated a physical retail space into an immersive e-commerce environment to be used on desktop, mobile and a shopping kiosk. To prepare for the experience to launch at the 29Rooms event, we developed a timeline. The project consisted of three different phases.

Phase One

Capturing the physical Los Angeles Fred Segal flagship store with 360 technologies and beginning e-commerce integrations.

Phase Two

The research and design phase consisted of building the information architecture, flushing out product features, building high fidelity screens, and building UI components.

Phase Three

Preparing for launch of the experience at the 29Rooms event as well as design a series of marketing materials for promotional purposes.

My Role

As with most startups, the roles tend to have blurred lines. I mainly worked on developing the onboarding process, user interface for the checkout experience, icons, animations, and more. I also assisted the product team with the UX process, including research, lo-fi wireframes, sitemap, solidifying customer journey maps, and identifying pain points of the experience that lead to higher engagement rates. During phase three, I was also tasked with designing a series of promotional materials for our clients to use on their social medias and website homepages. The experience was mainly designed using sketch, photoshop, after effects, and uploaded to zeplin for the development team.

Information Architecture

Producing different aspects of information architecture like low-fi wireframes, sitemap, and customer journey maps helped the team visualize how the experience and it's non-traditional structure could work together with more traditional e-commerce components. More importantly, it showed us what wouldn't work. After multiple iterations of wireframes, i moved onto making lo-fi prototypes, finalizing designs and developing a comprehensive style guide filled with colors, typography, and reusable UI components.

Retrieving Product Data

Our dev team created scalable microservices to pull down product information. The team worked directly with the client to create custom plugins for their system, to allow for integration and retrieval of product data.

Usability Testing

Low-fidelity prototypes of our screens were tested with the stakeholders to get feedback on the functionality, content, and interactivity of the product.

Onboarding

Like with all new products, a user is unfamiliar with how things work and can easily get confused and lost. So to us, the onboarding process was top priority. I developed instructional animations to show new users how to navigate the stores and a fred segal logo animation.

Store Navigation

Navigating around the store works differently between mobile and desktop. With the desktop version, users navigate through vantage points located around the store and easily identified by circles with smaller red circles inside. They could also navigate with the keyboard arrows which is much easier. On mobile, users navigate to these points in ways native to mobile, aka swiping and tapping their screens.

Hotspots and Products

Products around the store are marked with distinct hotspots. Along with regular hotspots, some are marked as 3D which allows users to view what they're buying in 360 angles. For brand immersion and story-telling purposes, video hotspots were also found around the store on certain products. These allowed users to learn more background info on designers and clothing.

Product Window
Added to Bag Confirmation
In Your Bag
Shipping Info
Shipping Method
Payment

The 29Rooms Event

Fred Segal debuted its collab 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 team collaborated with Refinery29 to build a brief with production parameters, materials, & floorplan.

Kiosk

Users navigated and shopped the Fred Segal + Refinery29 experience through a large kiosk

Custom Qr

We developed a QR Code to allow users to open up the store on their phones to access it on the go

Phone

Users aim their camera at QR code and a notification with a link to the store is sent to their phone

User Feedback

Problem

Our users found the experience to produce a considerable amount of lag. Content took a long time to load.

Solution

Our development team developed a Content delivery network (CDN) for assets to allow for 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.

Problem

Our original icons for hotspots, videos, and our vantage points were difficult to see due to bright lighting in the environment.

Solution

I developed a new series of solid gray icons to replace existing icons. Our analytics show an increase of user session length after our changes.

Promoting The Experience

In addition to developing the user interface of the experience i was tasked with creating a series of promotional materials such as banners and social media posts using adobe after effects!

Impact & Reflection

The live experience garnered over 11 million media impressions, new customer acquisition and 4x the industry average CTR for promoted material. While developing this store we kept in mind that our customer journey and overall store metrics would be used as a blueprint for all future products for Next Retail. Even the feature ideas that didn't make it in this initial store were implemented to newer stores that the company has developed. From a design aspect, I learned a lot about how functional designs derive from solid user research. If I were doing this store now with the knowledge that I’ve learned since, I would've done more in terms of web optimization and using updated web practices.This was an exciting project and I hope to get the chance to do more in the world of immersive technologies.

Browse Projects