top of page
qr-code (1).png

Digital Exhibition for F STUDIO

​

To create a virtual interactive exhibition to featuring emerging Designers' work to the audiences. Researching and creating a digital exhibition that pivots the design languages of the physical store into digital with AR and VR interaction. To display Designers' work with almost no waste and a fresh way for Designers to interact with the audiences. 

​

CHALLENGE: 

To bring back in-person shopping and visiting exhibition experiences during the Covid pandemic. "According to Forbe's report on e-commerce landscape statistics, 62% of global consumers shop online more now than they did pre-COVID-19 (McKinsey). However, 91% of shoppers say they miss in-store shopping (incisive) and demand a better interactive online shopping experience (Forbes, 2020)." (Research from Uyen Truong)

 

SOLUTION:​

By using self-taught 3D digital skills, the team decided to create a digital exhibition that pivots the design language of the physical store into a virtual interactive showroom.

​

Role:

3D Modelers/Interaction designer/AR developer

​

TIMELINE 

10 weeks

​

F STUDIO DIGITAL SHOWROOM AD CONTENT

AR RESEARCH

cc89a0684c306572a6f77117e5b4901.jpg
微信图片_20210903155741.png
c4b64f036f66c0258279a2a97af7e21.jpg
AR VERSION

IoDF x Machine-A AR Showroom on Instagram

Institute of Digital Fashion created an AR store environment for Machine_A to promote the London Fashion Week collections of designers. 

​

  • Real-life walking experience inside the AR showroom with mobile device​

  • Interactive buttons such as designers' info button - when clicking a window of designers' info pop-out

  • Products/Designers' design images

CONCEPT

微信图片_20210901221758.png

PROCESS

Starting showroom modeling in Blender first

微信图片_20210903181131.png

INTERACTIVE BUTTON UI DESIGN

Play button UI.png

Play button UI - using basic triangle shape to emphasize that click to play the book open animation.

numberpad button.png
information button ui.png

Designer display screen UI - using number to emphasize that  click to switches designer's images

Designer information UI - using first letter of information to emphasize that click to see the designer's information

After modeling in Blender, I start bringing everything into Spark AR and preparing the models to publish as an Instagram filter. 

 PROPOSED WORKFLOW

微信图片_20210912225711.png

INTERACTION DISPLAY

  • Click to open the door 

  • Walk in the showroom and start the flow

  • Click to open designer info window

  • Each designer get 2 screens to display

  • Featuring a number pad button for audiences to switch between images, also to create maximum image capacity for designers

  • Featuring the Debut book in the middle of the showroom 

  • Click the book open button to open the book and see the contents inside 

DIGITAL EXHIBITION DATA(AR VERSION)

data2.png

  • The filter has good impressions, according to the data, there are 7.4k impressions

  • Compared to the impressions, the captures, saves, and shares are low

  • The target customers of F Studio are Asian women from age 18-26. According to the data the filter had attract the right customers. 

data3.png

The team also post a short video in Instagram Reel to show audiences how to walk around the showroom. 

IMG_8809.PNG

COMMENTS ON THE FILTER/INSTAGRAM POST

i love this ❤️❤️❤️

🖤🖤🖤👏🏻

👏👏👏

Congratulations!

This is really cool

🔥🔥🔥 futurism

These data were collected after 1 week of publishing the filter, reel video, and other content. We look through the data and we found that:

​

  • The filter had quite a lot of impressions, but not much share and captures

  • Most of the captures were by the team member when we testing out the filter

  • The filter does not bring a lot of traffic or followers to us

  • Even the Reel video brings more traffic than the filter

After having conversations with friends that we share the filter with, we found out why: 

  • The "walking experience" filter is new to them. They have no idea that you can walk into the showroom

  • We thought our reel video will help audiences to understand how the filter works. But people still had no idea that the interactive button is working 

  • People are lazy to get up and walk. They rather just watch the reel video and said "it's cool or congratulations! " 

  • ​Because of the Instagram filter policy, we couldn't link to the website inside the filter. That might also confused people on what we are trying to do

​

​

SOLUTIONS

  • Publishing VR version - which people can simply visit through their devices by click on their mouse/phone screen rather than physically walking

  • Having a simple shopping button on shopping page of each designer's display design

  • Creating help menu in the very beginning, using screen - record with captions to guide users on the interaction part

VR EXHIBITION 

微信图片_20210912214641.png
VR VERSION

In the VR exhibition, because there's not many limitations as the Instagram filter does, we get to bring up the quality and improve the user experience...

微信图片_20210912225816.png

RED represents updates and improvements from the AR version

  • Bring the start point indoor

  • Featuring start menu and help menu as every app/game does

  • Using instruction videos + captions on the button to guide users

  • Adding WHY SHOP DIGITAL FASHION to explain to audience what we are doing

微信图片_20211010225438.png

  • Simply left-click and drag to look around inside the showroom

  • Simply left-click on the floor to walk around the showroom

  • Click on the display screen to teleport the camera close to the screen in order to get a better view of the render images. 

  • Click on the number to switch between designer posted images 

  • Click on the book open button to open up the book

  • Click on the shopping cart button to visit to shopping page

  • Click on the designer info button to see the designer's information

微信图片_20210913143259.png
微信图片_20210913143221.png
微信图片_20210913143324.png

Baked textures on every object to get a realistic view and also a smooth performance on each device

.

.

.

CONCLUSION

This was my second time working on the virtual interactive showroom. Different from the first time, this new project has an AR version with more interaction and a business focus. Instead of the VR version, using self-taught new skills in Spark AR, we successfully bring the showroom onto one of the most famous social media platforms - Instagram. We also feature a “walking" experience in the AR version to let customers walk inside the showroom with a unique experience. Also, with my experience in my previous showroom, I understand how important that performance is. In this F Studio project, I have paid attention to the performance of the showroom without losing the quality. Both AR/VR versions run smoothly on all kinds of devices.

 

It was a great experience working with the F Studio team on this project. I improved and learned a lot along with the team through the project.

​

.

.

.

.

​

Graphic & Art Direction: Uyen Truong
AR/VR Developer: Liqian Zhang 

Interactive Button Design: Liqian Zhang

AD Content: Uyen Truong
UX UI Research: Liqian Zhang + Uyen Truong

Photos: Courtesy of F STUDIO Designers 
Software: SparkAR, Verge 3D, Blender, CLO3D 
Stock Images: Unsplash & Adobe Stock Images 

Special thanks: Team F Studio

©2021 by Liqian Zhang

bottom of page