Goal :
Immersive E-commerce Conceptualization
Role :
Duration :
3 Months
Tools :
XD, Maya, Redshift, Unity 3D, Zbrush,PS, Substance, C#, AE
The goal here is not to simply transmigrate the notion of the dressing room to be embodied in its virtual counterpart but to create a new experience that would not be possible elsewhere.
The digital medium offers an increased range of feedback substitution affordances to investigate this UX opportunity gap for product discovery marketing and participatory user interactions in a diverse range of immersive multimedia and visualization formats.
The digital medium offers an increased range of feedback substitution affordances to investigate this UX opportunity gap for product discovery marketing and participatory user interactions in a diverse range of immersive multimedia and visualization formats.
The age-old concept of trying on articles of clothing is now being reexamined in light of the established market of e-commerce where no such physical opportunities with tangible product interaction exist.
Problem
How can we seamlessly blend and leverage the power of emerging technology visualization platforms with current fashion ecommerce ecosystems to create novel strategy driven, useful and enjoyable experiences that could not exist anywhere outside this medium?
(Source)
Why?
Beyond basic assumptions, answering this question in a pointed manner from the approach of primary research inclusive of user studies may point to specific data points of insight that can be utilized in the ecommerce UX development cycle.
80%
of fashion consumers prefer the physicality of the brick and mortar shopping experiences as opposed to ecommerce channels
Presently, western society, particularly in the US is facing an unprecedented number of brick and mortar store closures inclusive of fashion oriented venues in favor of e-commerce consumer migration for causative factors including, competitive pricing, variety and convenience due to the ongoing worldwide shutdown among other reasons.
Traditionally, it has been the case that consumers overwhelmingly prefer to shop for clothing and footwear merchandise in-store as opposed to online. As statistics reveal from a 2017 market survey that roughly an average of 80% of consumers for both mono as well as multi-brand fashion retailers prefer this type of experience.
Traditionally, it has been the case that consumers overwhelmingly prefer to shop for clothing and footwear merchandise in-store as opposed to online. As statistics reveal from a 2017 market survey that roughly an average of 80% of consumers for both mono as well as multi-brand fashion retailers prefer this type of experience.
Opportunities
Consumers are increasingly turning towards online shopping portals due to global circumstances and other convenience factors despite preferring to shop in-store for fashion articles. Developers are presented with the opportunity to craft relevant immersive ecommerce experiences based upon unique consumer value insights derived from research surrounding these preferences.
Storefront establishments afford the consumer with the all benefits of the physical shopping experience.
This includes being able to engage in naturalistic non-linear product discovery journeys via staggered merchandising setups, along with having the ability try on apparel and footwear for sizing, witness first hand colors and textures which may appear differently on varying screen displays.
However, some of the downsides include, lack of product variety availability and competitive pricing, the absence of reviews on the spot in addition to the lack of convenience(**for most, not all) of having to travel to the location.
This includes being able to engage in naturalistic non-linear product discovery journeys via staggered merchandising setups, along with having the ability try on apparel and footwear for sizing, witness first hand colors and textures which may appear differently on varying screen displays.
However, some of the downsides include, lack of product variety availability and competitive pricing, the absence of reviews on the spot in addition to the lack of convenience(**for most, not all) of having to travel to the location.
Online platforms excel in providing the consumer with vast sampling of options for varieties of style, options for pricing, reviews and overall convenience.
However, one of the main tradeoffs of this medium include the inability for the consumers to tangibly interface with merchandise contributing towards fit and quality concerns, more returns on average.
Also, the enjoyable sensations and experience for some of walking around and organically discovering new imaginative wardrobe possibilities for creative expressions via different storefront displays is absent.
However, one of the main tradeoffs of this medium include the inability for the consumers to tangibly interface with merchandise contributing towards fit and quality concerns, more returns on average.
Also, the enjoyable sensations and experience for some of walking around and organically discovering new imaginative wardrobe possibilities for creative expressions via different storefront displays is absent.
Business Value Touchpoints
Companies are seeking avenues to utilize current as well as emerging technologies to provide feedback substitution oriented solutions.
1
Building Consumer Trust+ Minimize Revenue Loss
Most online shoppers at some point have dealt with the issue of having to return clothing articles which could potentially have been avoided if they had a greater degree of access to information about the product customized to their personalized stylistic leanings, body form and viewing preferences.
For example, an individual may quickly decide to purchase a sweater from an online retailer to match another clothing article only to find out that the colors don’t match up and the fit is not ideal for their body form despite it being the typical size they always order.
Having a system like Dressing Room where the user can create an avatar personalized to the measurements of their body type along with the ability to try on clothes simultaneously and project these visualizations in augmented reality or in 3D on a traditional 2D browser would be helpful.
In addition, it would also be useful to include a recommender system in place for fashion articles catered towards the individual’s body type so this situation could have been avoided at the onset.
For example, an individual may quickly decide to purchase a sweater from an online retailer to match another clothing article only to find out that the colors don’t match up and the fit is not ideal for their body form despite it being the typical size they always order.
Having a system like Dressing Room where the user can create an avatar personalized to the measurements of their body type along with the ability to try on clothes simultaneously and project these visualizations in augmented reality or in 3D on a traditional 2D browser would be helpful.
In addition, it would also be useful to include a recommender system in place for fashion articles catered towards the individual’s body type so this situation could have been avoided at the onset.
2
Marketing Strategy, Brand Awareness, Consumer engagement loops, UX or accessibility
Companies still deal with revenue losses due to the aforementioned return issues among others despite ample traditional forms of information and multimedia present in product description pages. Also, these businesses might be seeking novel ways to drive traffic to their brands or products to ultimately perpetuate the user engagement ecommerce feedback loop site/app wide.
3
Capitalize upon the consumer virtual experiences space mainly used in the context of gaming, untapped market potentials for fashion ecommerce
I am aware that a variety of clothing or cosmetic try-on apps have been created however I have yet to see one that holistically integrates the entirety of a consumer's shopping experience. For example, one that would allow the user to simultaneously try on different footwear options, varying outfit and makeup configurations with multiple posed personalized avatars that they could then save to look books or even share and receive ML product recommendations based upon their body type and stylistic leanings input data.
Introducing Dressing Room
- Interaction Type, UI Skeleton, Shopping Avatar Creation
Dressing Room is an XR responsive fashion ecommerce prototype for online retailers that lays out a framework for how emerging AR/VR technologies can be folded into present the ecosystem with strategic implementation valuable to businesses and consumers alike.
When novel technological mediums are nascent upon the horizon the first impetus for many is to brainstorm possibilities to either utilize this medium to do everything the previous one did or to create isolative immersive experiences, segregated in some respects from the larger representative system.
Dressing Room will showcase a flexible architecture that integrates the most useful qualities of traditional 2D screen based interactions with 3D user experience emerging formats.
When novel technological mediums are nascent upon the horizon the first impetus for many is to brainstorm possibilities to either utilize this medium to do everything the previous one did or to create isolative immersive experiences, segregated in some respects from the larger representative system.
Dressing Room will showcase a flexible architecture that integrates the most useful qualities of traditional 2D screen based interactions with 3D user experience emerging formats.
Rethink and enhance the future of online shopping experiences through the user centered design process, gamification concepts as well as immersive media information visualization integrations.
▝ Firstly, in this section I will detail the interaction design modality chosen, the bare bones of the 2D and 3D UI along with the basic login and avatar creation sequence.
▝ Secondly, I will demonstrate core UX processes of the Dressing Room such as product browse, select and try on. With each, weaving in possibilities for how such a UI could operate with screen based as well as immersive components, giving the user license to choreograph their own shopping experience in accordance to preference.
▝ Lastly I will cover how this platform can also be utilized for AR/VR immersive experimental ecommerce marketing along with how it is connected and holistically integrates into the parent app's user experience ecosystem.
▝ Secondly, I will demonstrate core UX processes of the Dressing Room such as product browse, select and try on. With each, weaving in possibilities for how such a UI could operate with screen based as well as immersive components, giving the user license to choreograph their own shopping experience in accordance to preference.
▝ Lastly I will cover how this platform can also be utilized for AR/VR immersive experimental ecommerce marketing along with how it is connected and holistically integrates into the parent app's user experience ecosystem.
Interaction - Attention Continuum
Interaction -
Attention Continuum
Inherently, shopping is a focused endeavor especially when it comes to personal articles of clothing. Discerning consumers like to hone in on the sizing, style and sometimes even pricing of the articles that will be representative of their personality and creative expression to the world.
Bearing this information in mind, Dressing Room is not an app that would be suitable to include any peripheral user flows into the interaction design framework. Focused as well as implicit interactions would be ideal for ecommerce fashion because this is not a persistent "always on" type of activity everyday activity for most users.
Bearing this information in mind, Dressing Room is not an app that would be suitable to include any peripheral user flows into the interaction design framework. Focused as well as implicit interactions would be ideal for ecommerce fashion because this is not a persistent "always on" type of activity everyday activity for most users.
(Source)
The majority of interactions will take place in Dressing Room from the centralized or focused state of attentional awareness.
This user defined automatically occurring system state accounts for a smaller percentage of interactions in this app outside of the standard search queries with dovetailing filtering options.
By default most of the elements of this state of the interface will be programmed automatically to provide the user with product recommendations based upon their set body metrics, preferences and browsing habits.
By default most of the elements of this state of the interface will be programmed automatically to provide the user with product recommendations based upon their set body metrics, preferences and browsing habits.
| How it Works
The app launches with the main login screen present with social media fast pass as well as traditional email login registration processes. If this is the user's first time logging in , they will be guided through the systems personal shopping avatar creation process. If already a user, this avatar wizard creation sequence will be bypassed and the app will launch into the home screen view. It should also be noted here that users also have the option to skip the avatar creation process even if logging in for the first time with the ability to access this widget anytime they want by going into the UI's settings menu.
During the avatar creation process, the user is asked to enter in their body metrics along with shoe size and then is prompted to take a screen shot of their face. Once complete, the system procedurally generates a shopping avatar from which they can choose a hair style along with fine tune their hair or eye color for the closest match. The user can always access this avatar portal again via settings if adjustments are needed.
The home page becomes visible with the featured scrollable editorial including stories, new arrivals as well as the seasonal immersive pop-up shop. The user will also see a bottom menu which allows for navigation between the cart, user settings, search/product categories along with the main home page. The top menu features a door icon which opens and closes to enable the user to access their personalized avatar dressing room at any moment during the shopping process.
During the avatar creation process, the user is asked to enter in their body metrics along with shoe size and then is prompted to take a screen shot of their face. Once complete, the system procedurally generates a shopping avatar from which they can choose a hair style along with fine tune their hair or eye color for the closest match. The user can always access this avatar portal again via settings if adjustments are needed.
The home page becomes visible with the featured scrollable editorial including stories, new arrivals as well as the seasonal immersive pop-up shop. The user will also see a bottom menu which allows for navigation between the cart, user settings, search/product categories along with the main home page. The top menu features a door icon which opens and closes to enable the user to access their personalized avatar dressing room at any moment during the shopping process.
The app launches with the main login screen present with social media fast pass as well as traditional email login register processes. If this is the user's first time logging in , they will be guided through the systems personal shopping avatar creation process. If already a user, this avatar wizard creation sequence will be bypassed and the app will launch into the home screen view. It should also be noted here that users also have the option to skip the avatar creation process even if logging in for the first time with the ability to access this widget anytime they want by going into the UI's setting menu.
During the avatar creation process, the user is asked to enter in their body metrics along with shoe size and then is prompted to take a screen shot of their face. Once complete, the system procedurally generates a shopping avatar from which they can choose a hair style along with fine tune their hair or eye color for the closest match. The user can always access this avatar portal again via settings if adjustments are needed.
The home page becomes visible with the featured scrollable editorial including stories, new arrivals as well as the seasonal immersive pop-up shop. The user will also see a bottom menu which allows for navigation between the cart, user settings, search/product categories along with the main home page. The top menu features a door icon which opens and closes to enable the user to access their personalized avatar dressing room at any moment during the shopping process.
The home page becomes visible with the featured scrollable editorial including stories, new arrivals as well as the seasonal immersive pop-up shop. The user will also see a bottom menu which allows for navigation between the cart, user settings, search/product categories along with the main home page. The top menu features a door icon which opens and closes to enable the user to access their personalized avatar dressing room at any moment during the shopping process.
| Hardware
The individual can elect to utilize simply one or a number of these devices in combination while transiting through different aspects of Dressing Room's user experience.
| Hardware
The smartphone/tablet UX gives the user the most agency as far as ease of access to all of the interactive options inclusive of augmented reality. However, the desktop experience is can be utilized with a user's personalized shopping avatar and currently, the AR/VR HMD is targeted mainly for usage for the seasonal pop-up shops or instances of AR visualization only.
| Login + Avatar Creation
| Login +Avatar Creation
After the user logs in for the first time, they will be taken through the shopping avatar creation widget. At any point during this process, the user can elect to skip out of this avatar wizard to jump directly into the shopping experience if desired.
The above footage demonstrates the avatar creation wizard. This process creates a user's avatar by having the user enter in body metrics followed up by a screen shot of their face. I opted in this instance not to go with a full body scan from a cell phone because I wanted to implement an efficient way for users to quickly create their own avatars without having to take this extra step which may be riddled with inaccuracies due to lighting or other perspective distortions especially if this is not a professional scan.
After their face picture and measurements are input, the shopping avatar is automatically generated with the system giving user's the ability to select a hairstyle, tweak skin tone, eyes and even change their original body measurements or foot size if desired.
Once the full body avatar creation cycle is complete, they can save it to their profile and even create other avatars when shopping for family, friends.
After their face picture and measurements are input, the shopping avatar is automatically generated with the system giving user's the ability to select a hairstyle, tweak skin tone, eyes and even change their original body measurements or foot size if desired.
Once the full body avatar creation cycle is complete, they can save it to their profile and even create other avatars when shopping for family, friends.
Dressing Room inclusively caters to all ethnicities, body types, skin tones, hair textures and genders alike. Here are a few examples of avatars that I 3D modeled and rendered for demonstration. Although, in actual use these types of models would be procedurally generated.
A defining quality with all of them is the missing hair. This is intentional because the photo widget only wants to register the user's face, users have the ability to select from a range of different hairstyles after their primary avatar has been generated.
I developed the user interface this way to cut down on the system having to create a 3D mesh of the hairstyle of the user from a 2D image in real-time which can often yield results less than desirable. Another option for this is to automatically select from premade hairstyles to approximate what is detected in the photograph while still being editable/changeable if desired. This could potentially ease a user pain point of having to jump through another hoop in order to get to the primary shopping experience.
I developed the user interface this way to cut down on the system having to create a 3D mesh of the hairstyle of the user from a 2D image in real-time which can often yield results less than desirable. Another option for this is to automatically select from premade hairstyles to approximate what is detected in the photograph while still being editable/changeable if desired. This could potentially ease a user pain point of having to jump through another hoop in order to get to the primary shopping experience.
| Interface Skeleton
This section will detail the core user interface components of Dressing Room as applicable to the smartphone/tablet and AR/VR headset modalities.
The 2D user interface has all the commonplace UX ecommerce interactions with the exception of immersive interaction components woven into the shopping experience which will be showcased below and in the prototype section of this case study.
The experimental 3D UI for HMDs would only be used in this current version of the app for accessing the seasonal immersive pop-up shopping experiences. The demonstration below is constitutive of an animated sketch illustrating the user's controller free hand gesture interaction possibilities for navigation and product discovery inside a virtual snow globe product merchandizing environment for winter season product promotions.
The 2D user interface has all the commonplace UX ecommerce interactions with the exception of immersive interaction components woven into the shopping experience which will be showcased below and in the prototype section of this case study.
The experimental 3D UI for HMDs would only be used in this current version of the app for accessing the seasonal immersive pop-up shopping experiences. The demonstration below is constitutive of an animated sketch illustrating the user's controller free hand gesture interaction possibilities for navigation and product discovery inside a virtual snow globe product merchandizing environment for winter season product promotions.
2D UI
Exhibited here is the Dressing Room door that is a persistent fixture across the entire interface unless the user opts to tap the minimize button to hide it from view.
This feature enables the individual to enter into their virtual dressing room at any moment to access their look book, favorites or wish list while trying fashion articles on with their avatar. Here the user can view their virtual self via the 2D screen or in augmented reality.
It should also be noted that the user can access the settings/user account menu at any point to add more avatar profiles or to make changes to their current one.
This feature enables the individual to enter into their virtual dressing room at any moment to access their look book, favorites or wish list while trying fashion articles on with their avatar. Here the user can view their virtual self via the 2D screen or in augmented reality.
It should also be noted that the user can access the settings/user account menu at any point to add more avatar profiles or to make changes to their current one.
2D UI Demo
Here we see the basic workings of the core user interface functions. This entails the homepage editorial scroll for featured products and seasonal immersive pop-up shop in addition to "empty door" bottom menu button interactions without going into granular detail which will be revealed in the prototyping section.
| Login + Avatar Creation
3D UI
This experimental 3D UI for HMDs is used only in this current version of the app for accessing the seasonal immersive pop-up shopping experiences. The horizontal prototype below is a first draft animated sketch illustrating the user's controller free hand gesture interaction possibilities for navigation and product discovery inside a virtual snow globe product merchandizing environment for winter season product promotions.
3D UI Demo
- For seasonal/promotional Pop-up shopping only
After the user holds up their wrist on either hand a button appears for interaction. Being that this is an experience catered towards fashion articles, I thought it fitting to have an actual clothing button to be at the helm of the UI.
Once the user selects the button the snow globe zone section appears in which they can rotate the button with their opposite hand to scroll through each of the areas. These three sections include the Jewelry Enclave, Footwear Favorites along with New & Featured. When the user selects one of the areas, the snow globe map of the pop-up shop is invoked for further horizontal prototype "empty door" interactions.
***This 3D UI is the first round of many iterations to come and could definitely use some improvements to transparency of selections and interactions, especially upon initial launch. It was built in under a day without any initial sketching and wireframing as this was the 3D sketch. While it does present some interesting interaction possibilities, all elements need to be reevaluated for usability, edited and polished for version 2, stay tuned!
Once the user selects the button the snow globe zone section appears in which they can rotate the button with their opposite hand to scroll through each of the areas. These three sections include the Jewelry Enclave, Footwear Favorites along with New & Featured. When the user selects one of the areas, the snow globe map of the pop-up shop is invoked for further horizontal prototype "empty door" interactions.
***This 3D UI is the first round of many iterations to come and could definitely use some improvements to transparency of selections and interactions, especially upon initial launch. It was built in under a day without any initial sketching and wireframing as this was the 3D sketch. While it does present some interesting interaction possibilities, all elements need to be reevaluated for usability, edited and polished for version 2, stay tuned!
Prototype
- User Journey Scenarios, 2D/3D, AR/VR
Product Browse + Selection
Product Browse
- 2D Smartphone/Tablet View
Home Page Editorial Scroll
Get acquainted with new and trending curated product offerings to refresh your look and spark the inspiration of personal expression.
Illustrated here is the home page feature products editorial with the Dressing Room button and all other standard e-commerce interaction components visible.
Category Browse
I integrated the search into the main category selection bottom menu for ease of access. The user can perform a textual or image based search in which a picture is taken with their camera phone to assist the computer vision system with finding similar product types.
In addition to the traditional product categories, there is also a dedicated personalized recommendations section that is generated on the basis of the user's selected avatar along with browsing and purchase habits.
In addition to the traditional product categories, there is also a dedicated personalized recommendations section that is generated on the basis of the user's selected avatar along with browsing and purchase habits.
Once a user search is performed or a sub category selected, products are presented in this scrolling UI. Take notice that the user opted to minimize the Dressing Room door portal with the top left arrow during this interaction.
Product Filter
Filter the results of your browsing activity to efficiently hone in on specific desired offerings.
This user interface boasts all the features to be expected in a fashion oriented ecommerce app with the exception of the filtering classification that users can turn on or off the basis of their body type preferences.
Product Selection
- 2D Smartphone/Tablet View
Select and explore a variety of product visualization formats in addition to vital contextual information.
This product information page contains all the standard components necessary for the ecommerce shopping experience along with a help/messaging icon to ease any questions or pain points. The like button collates the favorited merchandise into a collection that is accessible once the user opens the dressing room via the icon on the top left of the screen. The idea is that after favoriting, the user can try the item or items on their virtual avatar now or at any point in the future.
Besides entering into the dressing room for the avatar try-on interactions, users can also tap on the augmented reality environmental view icon located on the right to access their phone's camera. This would enable the shopper to try the item directly on themselves or have it spawn in their personal setting by itself for immersive examination. Within this AR module, the user cannot try on every item on their person, it depends on the product type however, they can always tap to spawn in in their environmental settings. Users can only try items on their virtual avatar in the dressing room after favoriting it.
Besides entering into the dressing room for the avatar try-on interactions, users can also tap on the augmented reality environmental view icon located on the right to access their phone's camera. This would enable the shopper to try the item directly on themselves or have it spawn in their personal setting by itself for immersive examination. Within this AR module, the user cannot try on every item on their person, it depends on the product type however, they can always tap to spawn in in their environmental settings. Users can only try items on their virtual avatar in the dressing room after favoriting it.
Product Fit Calculator
Other elements of the UI to take into consideration include the product fit calculator. It was important to include this here because one of the goals of the app was to reduce the incidence of returns and having this widget could greatly assist in calculating a good fit based upon their input body metrics along with leveraging data from fashion manufacturers regarding their sizing standards.
At the very bottom of the fit calculator pop-up is a settings button which allows the user to switch avatars along with being able to deactivate their profile to get different fit recommendations as needed.
At the very bottom of the fit calculator pop-up is a settings button which allows the user to switch avatars along with being able to deactivate their profile to get different fit recommendations as needed.
Product Selection + AR Environmental View
View merchandise on the familiar 2D UI or virtually from the comfort of your own space with augmented reality view.
Here is shown varying clothing articles that have been spawned in the user's own environmental context for further perusal. In these instances, unlike the example shown above with the footwear, the user favorited all of the items first. Then they went into dressing room mode and activate AR view mode without their avatar to distribute multiple instances of their favorited items across their living space.
This is an example of a ring AR hologram being placed in the users environment.
Pictured here is also a screen shot of the individual's personalized favorites collection which they can utilize to spawn the holographic instances. This favorites menu is accessible inside the dressing room interface once the door is opened.
Pictured here is also a screen shot of the individual's personalized favorites collection which they can utilize to spawn the holographic instances. This favorites menu is accessible inside the dressing room interface once the door is opened.
This is an example of a ring AR hologram being placed in the users environment.
Pictured here is also a screen shot of the individual's personalized favorites collection which they can utilize to spawn the holographic instances. This favorites menu is accessible inside the dressing room interface once the door is opened.
Pictured here is also a screen shot of the individual's personalized favorites collection which they can utilize to spawn the holographic instances. This favorites menu is accessible inside the dressing room interface once the door is opened.
Product Try-On
- 2D Smartphone/Tablet View
Try-On Virtual Avatar
Enter the dressing room portal to try products on for look and size. Mix and match combinations, visualize new expressive possibilities!
This UX process flow exhibits the user entering into the dressing room portal via the top left and icon and then perusing around the interface to try on different items.
The user would have to already added items into their favorite collection. The shopper can then try on these favorited items one at a time or in combination with other clothing or accessories. If the individual favors the outfit but would like to save the combination for future purchase or simply design inspiration, they can add that custom outfit configuration into their look book database. Inside the user generated look book sub menu, the user can select one of their saved outfits to try it on again or to batch add the whole composition of merchandise into their cart for checkout.
Checkout can also occur within the favorites menu for current selections that are displayed on the avatar. If the user wishes to refresh their outfit selections, they can either hit the refresh button on the left menu or tap to deactivate each favorited item the model is wearing individually.
The user would have to already added items into their favorite collection. The shopper can then try on these favorited items one at a time or in combination with other clothing or accessories. If the individual favors the outfit but would like to save the combination for future purchase or simply design inspiration, they can add that custom outfit configuration into their look book database. Inside the user generated look book sub menu, the user can select one of their saved outfits to try it on again or to batch add the whole composition of merchandise into their cart for checkout.
Checkout can also occur within the favorites menu for current selections that are displayed on the avatar. If the user wishes to refresh their outfit selections, they can either hit the refresh button on the left menu or tap to deactivate each favorited item the model is wearing individually.
Try-On Person
Try products on your own person in real-time instantly via quick access augmented reality view.
These demonstrations illustrate the ability for the shopping to immediately try own jewelry items from simply tapping the AR view icon on the product page. This differs from the aforementioned AR environmental view because these product are being visualized as holograms on the actual user in real-time. Currently, this real-time try on few is limited select jewelry items however quick access AR environmental view without the try-on is available for all items.
Here are some more examples or augmented reality visualization try-ons as a result of the user tapping on the fast pass AR view on the product page.
Product Discovery + Experimental Marketing
Pop-Up Shop Layout
- Interactive Virtual Environment
Select and explore a variety of product visualization formats in addition to vital contextual information.
During seasonal marketing campaigns companies can create immersive virtual pop-up shops exhibiting featured merchandise to ecommerce consumers in a fun and engaging format.
The screen grab to the right demonstrates this aspect of Dressing Room's interface as one of the headliners on the home page editorial. Depending upon what type of promotion or season is being run, the fashion ecommerce site can change the theme accordingly. I chose the wintertime holiday's theme for this prototype and thusly fashioned each section of the virtual environment in this vein.
This pop-up shop is best experienced through the VR hardware modality, however it is still functional through the smartphone AR medium as a tap to place portal the user can walk though to see the wonderland snow globe environment.
These seasonal immersive pop-up shops are not purposed to replace normal shopping and browsing activity. Rather, it aims to drive brand awareness and memorable instances of consumer engagement through the creation of gamified delightful moments while displaying new products personalized for each user.
The screen grab to the right demonstrates this aspect of Dressing Room's interface as one of the headliners on the home page editorial. Depending upon what type of promotion or season is being run, the fashion ecommerce site can change the theme accordingly. I chose the wintertime holiday's theme for this prototype and thusly fashioned each section of the virtual environment in this vein.
This pop-up shop is best experienced through the VR hardware modality, however it is still functional through the smartphone AR medium as a tap to place portal the user can walk though to see the wonderland snow globe environment.
These seasonal immersive pop-up shops are not purposed to replace normal shopping and browsing activity. Rather, it aims to drive brand awareness and memorable instances of consumer engagement through the creation of gamified delightful moments while displaying new products personalized for each user.
Venture intrepid shoppers into the gamified interactive snow globe wonderland zones to discover new wares and incredible deals all while having a wintry blast!
The virtual snow globe pop-up shop affords the user license to explore three distinct areas of product offerings around the setting . As an "Easter egg" element, there are also teeny tiny reindeer roaming across the landscape, some of which secretly contain promotional offers if the user is lucky enough to tap on the right one.
In keeping with the home grown nature of pop-up shops, a large portion of the wares featured in these virtual shops will come from slow fashion local or entrepreneurial designers. In addition, 20% of all profitable revenue from all wares discovered, saved to favorites, look books or eventually purchased will go towards research and development in building an eco-friendly sustainable infrastructure for product manufacture and recycling.
The fashion articles in the pop-up shop will have limited availability as they are featured products and limited editions which will be produced in small batches.
In keeping with the home grown nature of pop-up shops, a large portion of the wares featured in these virtual shops will come from slow fashion local or entrepreneurial designers. In addition, 20% of all profitable revenue from all wares discovered, saved to favorites, look books or eventually purchased will go towards research and development in building an eco-friendly sustainable infrastructure for product manufacture and recycling.
The fashion articles in the pop-up shop will have limited availability as they are featured products and limited editions which will be produced in small batches.
Pictured here is a map legend and top isometric view of the three regions I created in the pop-up shop for perusal. The names are quite self-explanatory but the interactive affordances in each section vary. The Footwear midway showcases products in a gamified format where as the New & Featured are exhibits the features of just one product and the Jewelry Enclave showcases an array of tiled products.
This was done in this prototype to experimentally showcase the wide variety of interactive possibilities in an ecommerce virtual world.
However, if this product were to go into live production and usage, it would most likely be suggested to keep the interactive features consistent across the landscape. This would serve to ease any unforeseen pain-points and benefit accessibility as well as readability of the interface.
This was done in this prototype to experimentally showcase the wide variety of interactive possibilities in an ecommerce virtual world.
However, if this product were to go into live production and usage, it would most likely be suggested to keep the interactive features consistent across the landscape. This would serve to ease any unforeseen pain-points and benefit accessibility as well as readability of the interface.
Pop-Up Shop 2D Interactions
- 2D Smartphone/Tablet
Get acquainted with the seasonal pop-up shop in mobile view before transitioning into the immersive VR HMD experience.
When the user selects the pop-up shop button from the home page a screen will appear detailing more information about the experience. In the case here, this page descriptively illustrates the zones and experiences that the user would encounter along with the interfacing platforms such as VR or mixed reality glasses. This page provides links to each platform such as the Oculus or Magic Leap or Windows Store where the user can download the company's app for this platform.
Although the user can enter into the pop-up shop from their smartphone/mobile view, there is limited functionality as the experience has been intended and optimized for immersive HMD eyewear.
In future iterations of this product if proved valuable, it would be an interesting venture to change the entire experience for the 2D smartphone/tablet view by making exclusively augmented reality merchandising setups that do not totally occlude the user's surroundings such as the case here. This implementation could potentially improve upon the experience for this medium.
Although the user can enter into the pop-up shop from their smartphone/mobile view, there is limited functionality as the experience has been intended and optimized for immersive HMD eyewear.
In future iterations of this product if proved valuable, it would be an interesting venture to change the entire experience for the 2D smartphone/tablet view by making exclusively augmented reality merchandising setups that do not totally occlude the user's surroundings such as the case here. This implementation could potentially improve upon the experience for this medium.
Pop-Up Shop 3D Interactions
- 3D AR/VR Glasses
New & Featured - Zone 1
Discover the warmth of the down of clouds for all your winter weather gear! Approach clouds in this area and they will begin to snow while revealing illuminated merchandise and product information.
Upon entry to the new and featured zone, the user is able to walk up to varying clouds which result in them showcasing product visualizations. The first three clouds the individual approaches will show elements of the product's composition with the fourth cloud culminating in exhibition of the actual item along with interactive options to change the color, size as well as add to cart or favorites if desired.
This zone visualizes the potential of a user transiting through a semi "riding through rails" like experience of a single product where most of the interactions are automated. Yet, it places merchandise in a fantasy-like magical setting to add to the marketing of ambiance surrounding this exclusive limited time offer product and how it can be utilized to provide warmth from the sub zero cold weather elements.
This zone visualizes the potential of a user transiting through a semi "riding through rails" like experience of a single product where most of the interactions are automated. Yet, it places merchandise in a fantasy-like magical setting to add to the marketing of ambiance surrounding this exclusive limited time offer product and how it can be utilized to provide warmth from the sub zero cold weather elements.
Product Element 1
Cloud one will light up and start snowing as it provides contextual information about the specific type of polyester used in the outerwear product.
Product Element 2
This footage information about the nylon being used in the product.
Product Element 3
The third display exhibits the ethically harvested down that is used in the winter coat design.
Product Display
Displayed here is the fourth and final cloud merchandising arrangement culminating in the overall product reveal of the winter coat. The user is afforded more interaction possibilities here with being able to change the item's color, add it to their bag, favorites or even share with others.
Footwear Midway - Zone 2
Traverse the foothills of footwear to fuel the GOAT of adventures. Using your cupid heart bow and arrow play the favoriting game by shooting at soles that you find appealing.
The Footwear Midway area of the pop-up snow globe purposes to have the user experience the joy in the gamified shopping experience of discovering products while trying to aim and shoot at the products found appealing. Rather than scrolling through linear lists of products on a screen I sought to experiment with engaging avenues of product discovery with a fun interactive component that would create a memorable experience that users would associate with the brand.
Favorites - Shooting Game/Browse
Firstly, upon entry to the Footwear midway zone, the user will see a range of products circulating across the terrain. The objective of the experience is to expose the consumer to new and exclusive items that align with their styling and size interest. They are equipped with a bow and arrow to subsequently shoot at the products they want to favorite until the experience ends.
Favorites - Selection UI
In this same zone, there is a favorite menu user interface where the user can select a few of the items they favorited for closer examination.
Favorites - Product Examination
The user can then revisit the terrain in this section to view the 3D visualizations of their favorited products in greater detail. They have the interactive ability to scale, translate and rotate the object along with being able to switch the color ways, sizing, add to cart and other actions/settings.
Jewelry Enclave - Zone 3
Possess the ornament of artisan crafted jewelry from snowflake season's women's collection! Select one of the product category holiday bulbs to see it drop down, animate and reveal a tiled selection of goods from that category.
I implemented the interactive feature of holiday bulbs here that the user could tug on in VR to view the tiled product arrays that resultingly appear. Upon selection, the bulb displays the products along with other interactive components to take advantage of during the shopping experience.
Once a product array becomes visible, the user can select some of the items from that category and if they are done can once more tug on the bulb to retract that visualization.
In the process of these interactions, the system is keeping track of the products the user selects via a floor based UI that the user can select at any time to extrude the shopping product visualization widget for perusal of the favorite products or even purchase.
In the process of these interactions, the system is keeping track of the products the user selects via a floor based UI that the user can select at any time to extrude the shopping product visualization widget for perusal of the favorite products or even purchase.
Roving Reindeer - Interactive Promotional Offer
Spot and select one of the roving reindeer that are meandering throughout the landscape of the globe for your chance to win a coupon or promotional offer! Once selected, the galloping reindeer will reveal it's coupon or lack thereof from which the shopper can subsequently redeem or store for later usage.
Teeny tiny reindeers permeate this virtual environment galloping around every zone and terrain that interfaces with the user. Their implementation is a surprise "Easter egg" element because if the user is able to catch or tap on one of them, they just might win a prize or promotional offer.
This footage illustrates one of the interactions possible when a user has caught a galloping reindeer in the virtual snow globe. The reindeer maximizes, issues it's coupon, the user selects it and then the experience vanishes. This is just one iteration but the possibilities are endless as far a what type of content or prizes or promotions can be implemented in this scenario.
Process
- Design Research + Strategy + Product Development
This section of the case study will elucidate the progressions towards the first user experience prototyped iteration of Dressing Room. The journey will be documented through illustrative deliverables with respect to the investigations and research that formulated the foundation of design strategy. Design thinking in the vein of the UCD double diamond method was utilized as the process framework.
I investigated how immersive technologies could be usefully integrated into the current fashion ecommerce ecosystem geared towards the creation of novel strategy driven and enjoyable user experiences exclusive to this mixed reality medium.
The Double Diamond design methodology was utilized to structure the development process of Dressing Room.
Firstly, I took a broad swath divergent stance to gain an understanding about the current fashion e-commerce market, new developments in the tech space along with the actors, feedback and previous studies.
I then was able to use convergent thought processes and prototyping skills to explore my primary research question/issue in depth in efforts to craft an iterative solution space for user centered design solutions that satisfy company and consumer objectives derived from critical insights gained.
Firstly, I took a broad swath divergent stance to gain an understanding about the current fashion e-commerce market, new developments in the tech space along with the actors, feedback and previous studies.
I then was able to use convergent thought processes and prototyping skills to explore my primary research question/issue in depth in efforts to craft an iterative solution space for user centered design solutions that satisfy company and consumer objectives derived from critical insights gained.
Discover
| Secondary Research
Published sources and studies were consulted as a preliminary means of gaining further insight into the essential questions I posed critical to the useful and valuable development of Dressing Room.
| Secondary Research
What relevance and opportunity gaps do immersive product interactions present for fashion ecommerce development futures.
Companies are searching for avenues to drive brand awareness, enhance customer satisfaction and boost revenue while lessening financial losses incurred from product returns.
▪ 62% of consumers expressed enhanced feelings of connectedness and trust for brands that utilized AR/VR experiences along with 53% indicating that they would be more likely to purchase according to a Greenlight VR industry insights study.
(Source)People overwhelmingly still prefer to shop in store for apparel products.
▪ Fashion e-commerce has become a commonplace fixture among the sea of online marketplace wares in which the consumer can conveniently shop from any data or WIFI enabled location, utilize ongoing coupons, take advantage of promotional offers and social media discoverability as well as personalized product recommendations and reviews. Yet despite all of these online benefits, roughly 80% of consumer spending on apparel items still happens overwhelmingly at in store locations according to a 2017 Oliver Wyman apparel consumer survey of more than 1500 US applicants.
(Source)▪ An analysis of this phenomena cites the human trained or innate need to touch and feel this category of items before procurement as rationale for the physical shopping preference. The lack of tangible presence of the merchandise also contributes towards the product return pain point for consumers as well as a loss in revenue for retailers.
(Source)There is a growing consumer interest in for immersive technology personalization features in the ecommerce sector.
▪ A Klarna survey recently conducted indicated that there is a growing interest in Gen Z and millennial shoppers for the implementation of immersive tech in the shopping sphere along with these shoppers wanting software that would enable a digital avatar for virtual fashion commerce.
(Source)What systems are currently being utilized in the market to solve for the most prominent fashion ecommerce shopping pain points.
Businesses have developed product try-on and fit calculation service integrations to address some of these issues.
Traditional Solutions(non-immersive)
Without usage of immersive technology developments, True Fit along with the online marketplace giant Amazon along with other major retailers have already begun to devise digital interventions to alleviate the sizing as well as merchandising tangibility pain point.
▪ Amazon’s personal shopper app enables users to actually try on the outfits for size via a series of back and forth shipments to the customers residence.
(Source)▪ Amazon’s personal shopper app enables users to actually try on the outfits for size via a series of back and forth shipments to the customers residence.
▪ True fit’s platform serves to leverage all the sizing data across the industry to provide accurate fit calculations to customers helping them to gain confidence in making an informed purchase decision thus helping companies to drive sales.
(Source)Immersive Solutions
▪ Some ecommerce giants who have utilized immersive digital interventions to address these industry needs include the Nike fit as well as Warby parker app. The Warby app enables consumers to try on eyewear before purchasing to allow for a preview of the look and feel of merchandise to gauge if it would be a complementary fit.
▪ The Nike fit app solves for the pain point of pinpointing the exact size of the customer via sensor scans on the user's smartphone inside their app. Nike has reported findings that over 60% of shoppers are walking around in the wrong shoe size.
(Source)How could immersive technologies be implemented into the present ecommerce fashion ecosystem effectively.
It is important for companies to integrate immersive technologies within an ecommerce framework that consumers already understand for usability consistency standards. These new integrations should seek to ever increasingly include varying types of multisensory product visualization experiences albeit grounded in the familiar.
▪ Academics researching solutions for the apparel ecommerce marketplace have touted immersive media forms such as AR/VR or mixed reality to be the next big area with solution space potentials for some of these issues as it helps to move the internet of information into the direction and purview of the internet of multisensory experiences. Rather than simply being a virtualized equivalent to the real-world shopping experience, the platform can be utilized to explore media and information rich features of product, reviews as well as a virtual try on feature in addition to a mixed reality social media induced marketing avenue for brand promotion and lifecycle retainment.
(Source)▪ In 2017, Amazon acquired a Body Labs, a company who specializes in generating true to life digital avatars for digital media applications be it ecommerce, gaming, simulations with sights presumably set for future e-commerce integration. This move by a major online retailer forecasts a shift in the industry soon for virtual shopping avatars. I think that it would be a lot more efficient if the user could simply enter their vital measurements along with other body type data to have the system generate a virtualized avatar that could simulate the look and fit of an outfit on the consumer. This would be an example of a useful feedback substitution intervention in light of the user not being able to tangibly inspect the merchandise. More research and user studies need to be performed to determine the overall user satisfaction with the virtual avatar method in how it measures up with the rating of the in-store shopping experiences.
(Source)| Login + Avatar Creation
| Primary Research
Qualitative user interviews were are documented here to further gauge consumer insights, values and needs.
I conducted target demographic interviews for dressing room after completing secondary research and analysis for fashion e-commerce solutions. The goal was to gain a more refined granularity of consumer insights from some of the large scale industry studies I surveyed as a means for interaction design input for the app. Here, I opted not to do surveys as well due to a plethora of applicable market research already available in this arena to assess directions and generalities from which I could steer the more qualitative personalized interview sessions towards more specific functions and features of this prototype.
Behaviors to Investigate
▪ How often do you purchase clothing or shoes online?
▪ Do you prefer to shop for clothing articles in person or online and what do you value the most or like the least about each of these experiences?
▪ Do you prefer to shop for clothing articles in person or online and what do you value the most or like the least about each of these experiences?
▪ What attributes are most important to you for online clothing shopping?
▪ Are you a casual, frequent or moderate shopper and for what types of fashion/accessory items?
▪ Do you often click on advertisement banners for new or featured products? If so, what draws you in, sales, promotional offers or new releases, etc?
▪ How often do you browse through, favorite products and then return to such listings. Or is your browsing behavior mostly in the context of explicit search functions.
▪ Have you had to return items often and if so, what has the experience been like for you?▪ Do you play mobile games and if so, what types of experiences and genres do you typically interact with?
▪ Do you utilize bitmojis or other forms of a virtual avatar or emoticons often? How does it make you feel and what are usually the contexts of usage?
▪ Do you prefer to shop for clothing articles in person or online and what do you value the most or like the least about each of these experiences?
▪ Do you prefer to shop for clothing articles in person or online and what do you value the most or like the least about each of these experiences?
▪ What attributes are most important to you for online clothing shopping?
▪ Are you a casual, frequent or moderate shopper and for what types of fashion/accessory items?
▪ Do you often click on advertisement banners for new or featured products? If so, what draws you in, sales, promotional offers or new releases, etc?
▪ How often do you browse through, favorite products and then return to such listings. Or is your browsing behavior mostly in the context of explicit search functions.
▪ Have you had to return items often and if so, what has the experience been like for you?▪ Do you play mobile games and if so, what types of experiences and genres do you typically interact with?
▪ Do you utilize bitmojis or other forms of a virtual avatar or emoticons often? How does it make you feel and what are usually the contexts of usage?
Findings/Insights
Merchandise trending and shares on social media highly influence spending and purchasing decisions of young adult audiences while middle aged to older adults favor quality craftsmanship, consumer ratings and brand recognition.
With this in mind, it would be interesting to implement a product discovery gamified user experience for dressing room that either links to or from trending topics posts or items on social media. Also, efforts should be made to design the experience of product placement that is not just able to textually describe but immersively display product characteristics in a variety of viewing formats. It would be interesting if such forms of information visualization product feedback from users could be tagged to the image or AR/VR 3D model of the merchandise for live convenient and memorable and engaging interactions rather than scanning through a linear based reviews list.. For example, a user could click on a certain attribute of the product and opt to hear a short stream of audio feedback or mixed reality pop out of comments within a vista of their spatial environment.
Each participant actually expressed interest in the creation of a virtual shopping avatar but had misgivings about the accuracy of fit if the 3D body model scan method was implemented as well as general sizing variances from different manufacturers that can lead to further issues which is already an issue with e-commerce and contributive of returns, a business and consumer UX pain point. Efforts should be made to not only use a 3D body model scan for the avatar, but and/or the input fields for a person’s measurement. The business could integrate a platform into their product listings that leverages industry data based upon the person’s measurements in order to provide correct sizing in accordance with a particular brand or manufacturer to help alleviate the problem of fit. It should be made clear on the product page via a recommendation meter and sizing assurance descriptors.
One interview participant was an occasional shopper who valued a strictly utilitarian approach and does not necessarily enjoy the experience of shopping, rather wants to search, easily find and purchase their goods efficiently. This is where the notion of accessibility comes into play. Even though dressing room is designed for a multiplatform immersive experience with the ability to create a virtual shopping presence, it still should be flexible enough to allow users to skip through such processes if not desired. Subsequently, they should be able to navigate via the commonplace 2D search function and product page screen browser based modalities to suit their spartan like particular needs and desires.
With this in mind, it would be interesting to implement a product discovery gamified user experience for dressing room that either links to or from trending topics posts or items on social media. Also, efforts should be made to design the experience of product placement that is not just able to textually describe but immersively display product characteristics in a variety of viewing formats. It would be interesting if such forms of information visualization product feedback from users could be tagged to the image or AR/VR 3D model of the merchandise for live convenient and memorable and engaging interactions rather than scanning through a linear based reviews list.. For example, a user could click on a certain attribute of the product and opt to hear a short stream of audio feedback or mixed reality pop out of comments within a vista of their spatial environment.
Each participant actually expressed interest in the creation of a virtual shopping avatar but had misgivings about the accuracy of fit if the 3D body model scan method was implemented as well as general sizing variances from different manufacturers that can lead to further issues which is already an issue with e-commerce and contributive of returns, a business and consumer UX pain point. Efforts should be made to not only use a 3D body model scan for the avatar, but and/or the input fields for a person’s measurement. The business could integrate a platform into their product listings that leverages industry data based upon the person’s measurements in order to provide correct sizing in accordance with a particular brand or manufacturer to help alleviate the problem of fit. It should be made clear on the product page via a recommendation meter and sizing assurance descriptors.
One interview participant was an occasional shopper who valued a strictly utilitarian approach and does not necessarily enjoy the experience of shopping, rather wants to search, easily find and purchase their goods efficiently. This is where the notion of accessibility comes into play. Even though dressing room is designed for a multiplatform immersive experience with the ability to create a virtual shopping presence, it still should be flexible enough to allow users to skip through such processes if not desired. Subsequently, they should be able to navigate via the commonplace 2D search function and product page screen browser based modalities to suit their spartan like particular needs and desires.
| Market Analysis
| Market Analysis
Here I identified products or services to be utilized as solution space precedents and potential competitors for Dressing Room.
Market analysis was conducted on six virtual fashion and beauty oriented companies and their applications for the development of Dressing Room. This shed insights into the current landscape of augmented reality virtual store and try-on applications to see if the plan for development of this app was useful in filling any valuable opportunity gaps to meet and even exceed the needs and expectations of consumers and businesses alike.
There are a great number of companies starting to incorporate AR functions into their mobile online presence and I chose a sampling here representative of a good variety of different features and experiences presently being utilized. For example, some of the apps only utilized the front facing smartphone cam while others focus exclusively on the hands or feet and some even allow for realistic cloth simulations and personalized sizing with customized avatar creation.
There are a great number of companies starting to incorporate AR functions into their mobile online presence and I chose a sampling here representative of a good variety of different features and experiences presently being utilized. For example, some of the apps only utilized the front facing smartphone cam while others focus exclusively on the hands or feet and some even allow for realistic cloth simulations and personalized sizing with customized avatar creation.
Direct & Indirect Market Overview
Market Synthesis
In surveying this broad sampling of fashion and beauty oriented direct, and indirect competitors, I learned that many companies are making strides in immersive e commerce marketplace to offer novel visualizations to their consumer niche.
What was noticeable is that each of the apps with the exception of the cosmetics try-on GLAM Lab currently occupy a rather experimental status in the sense that their features have not yet been combined and inserted into a scalable information architecture to be implemented on a more permanent basis on large scale platforms. In the cosmetics app, one is able to view the makeup in real-time but can't see it featured alongside an outfit they would like to purchase. Similarly, the Waanby Kicks allows the individual to try on shoes but the viewing angle is rather limited.
The Avametric cloth simulation app offers a rather generic avatar to try on clothing and part of the shopping experience is seeing one’s likeness in the garments which could incentivize purchase since the online medium lacks the physicality of real-world dressing rooms. We are in the lean forward media age of participatory experiences and it is a necessity moving forward to include a useful and purposeful set of personalization and varying visualization perspective features to offer to consumers.
Fulfilling this opportunity gap to implement some of these features and techniques in these venues would presumably serve to to address or solve some of the business pain points of e-commerce such as returns associated with sizing, along with providing engaging formats for product discoverability, marketing and much more. Given this insight, I will continue with the development of Dressing Room, an immersive try-on and product browsing application for the fashion industry.
What was noticeable is that each of the apps with the exception of the cosmetics try-on GLAM Lab currently occupy a rather experimental status in the sense that their features have not yet been combined and inserted into a scalable information architecture to be implemented on a more permanent basis on large scale platforms. In the cosmetics app, one is able to view the makeup in real-time but can't see it featured alongside an outfit they would like to purchase. Similarly, the Waanby Kicks allows the individual to try on shoes but the viewing angle is rather limited.
The Avametric cloth simulation app offers a rather generic avatar to try on clothing and part of the shopping experience is seeing one’s likeness in the garments which could incentivize purchase since the online medium lacks the physicality of real-world dressing rooms. We are in the lean forward media age of participatory experiences and it is a necessity moving forward to include a useful and purposeful set of personalization and varying visualization perspective features to offer to consumers.
Fulfilling this opportunity gap to implement some of these features and techniques in these venues would presumably serve to to address or solve some of the business pain points of e-commerce such as returns associated with sizing, along with providing engaging formats for product discoverability, marketing and much more. Given this insight, I will continue with the development of Dressing Room, an immersive try-on and product browsing application for the fashion industry.
Define
| Empathy Mapping
An empathy map was developed to organize insights from user interviews to get perspective through the lens of targeted user of this platform and feed these findings into the iterative product development cycle.
| Empathy Mapping
| Persona
| Persona
After culling knowledge from research, interviews as well as market synthesis touchpoints, I developed a role based personal to enable empathetic insights and perspective about proposed user motivations and needs for this type of ecommerce platform.
| Octalysis Framework
| Octalysis Framework
In efforts to promote user adoption and cultivate the user's sense of belonging within the platform, I envisioned usage of Dressing Room through the Octalysis Gamification Framework. Games are something that people put effort to engage with because they are touching upon an individuals core drives humans needs/desires. This is yet another tool that I am utilizing in my UX arsenal to further empathize with the potential userbase of Dressing Room.
Here, I utilized the 8 core drives of the Octalysis framework to define the types of user experiences that invoke black hat motives to draw people in initially to peruse the platform and shop for for wares and then white hat motives to encourage user retentions of the ecommerce ecosystem.
For example, the bottom half of the octagon represents black hat influences such as scarcity, avoidance and unpredictably which strongly tug upon many individual's emotional core to pique initial interest especially in terms of limited availability stock when shopping. In the case of Dressing Room, I interpreted this as user's desire and curiosity to not miss out on opportunities in the form of sales or limited edition items or promotional incentives.
While long-term, the aim is to generate customer retention via making the individual feel good about their shopping experience through highlighting opportunities for empowerment with personal creation expression. This is also done through social influence and recommendations systems, ownership through the ability to create personalized avatars, lists and lastly through epic meaning which affords shoppers the chance to contribute towards humanitarians causes of their choice just by purchasing items.
For example, the bottom half of the octagon represents black hat influences such as scarcity, avoidance and unpredictably which strongly tug upon many individual's emotional core to pique initial interest especially in terms of limited availability stock when shopping. In the case of Dressing Room, I interpreted this as user's desire and curiosity to not miss out on opportunities in the form of sales or limited edition items or promotional incentives.
While long-term, the aim is to generate customer retention via making the individual feel good about their shopping experience through highlighting opportunities for empowerment with personal creation expression. This is also done through social influence and recommendations systems, ownership through the ability to create personalized avatars, lists and lastly through epic meaning which affords shoppers the chance to contribute towards humanitarians causes of their choice just by purchasing items.
| Prioritization Matrix
During the prototyping phase I detailed the first iteration of how a fashion ecommerce system could function with all of it's immersive elements. This section will detail the production of these elements with the order of importance based upon providing this platform with a unique offering in the marketplace while also providing solution space potentials for the discover pain points.
| Prioritization Matrix
The main differentiating value touch point with Dressing Room resides in the the enablement of customized shopping experiences that ensure the optimal look and fit of sought after fashion articles. Placing the Avatar creation element and along with the fitting room and sizing calculator as developmental priorities derives from this basis.
The next order of importance includes creating product visualizations with augmented reality visualized in the user's real-time setting either environmentally or on their own person while looking at their hands, feet or head with a smartphone or smart AR glasses. The impact of these viewing modalities upon business and branding needs to be further investigated to ascertain the profitability in the development investment. This is a priority because it needs early testing and modifications if worthwhile in a fashion based context.
The remainder of the user interface features are typical of most other ecommerce platforms yet are essential to the function of the system such as search, settings, filter and other commonplace interactions.
Lastly, items twelve and thirteen deal with experimental marketing campaigns with seasonal pop-up shops. VR/AR has gained quite a bit of mainstream traction in recent years but it remains to be discovered if the demographic utilizing this hardware aligns with the habitual fashion oriented shopper. I would greenlight this VR pop-up shop for a developmental test run only after production of the primary features aforementioned along with more user testing and interviews. This element has deals with brands visibility, consumer engagement along with lifecycle retention are important components in the long-term.
The next order of importance includes creating product visualizations with augmented reality visualized in the user's real-time setting either environmentally or on their own person while looking at their hands, feet or head with a smartphone or smart AR glasses. The impact of these viewing modalities upon business and branding needs to be further investigated to ascertain the profitability in the development investment. This is a priority because it needs early testing and modifications if worthwhile in a fashion based context.
The remainder of the user interface features are typical of most other ecommerce platforms yet are essential to the function of the system such as search, settings, filter and other commonplace interactions.
Lastly, items twelve and thirteen deal with experimental marketing campaigns with seasonal pop-up shops. VR/AR has gained quite a bit of mainstream traction in recent years but it remains to be discovered if the demographic utilizing this hardware aligns with the habitual fashion oriented shopper. I would greenlight this VR pop-up shop for a developmental test run only after production of the primary features aforementioned along with more user testing and interviews. This element has deals with brands visibility, consumer engagement along with lifecycle retention are important components in the long-term.
| Recommendations
| Recommendations
Insights discovered during the secondary research, market analysis and user studies of fashion ecommerce yielded the following general development recommendations for Dressing Room.
Craft a flexible user interface centered around the agency of accessibility for legacy as well as newly introduced interactive elements.
In the process of acculturating the user to new immersive user experiences, it is a sound methodology to build such experiences within the context of familiar interfaces. The rationale is that all mediums have their affordances as well as tradeoffs when performing certain tasks along with taking into account the preferential interaction modality of some users. As this pertains to Dressing Room, this translates to nesting these immersive experiences inside of the primary 2D UI smartphone/tablet based portal along with having UI buttons and links to these experiences integrated on product listing pages or the editorial of the homepage. This is opposed to making a whole separate system for these interactions.
Designing the experience in this manner would afford user the flexibility to use which interface browsing and shopping modality best suited for their needs at the time instead of forcing them onto an interface that they might not need or be uncomfortable with using. It's about giving users freedom, choice and the ability to opt out. While on the other hand individuals that wish to engage with this immersive media can do so with ease within the context of the same framework.
Designing the experience in this manner would afford user the flexibility to use which interface browsing and shopping modality best suited for their needs at the time instead of forcing them onto an interface that they might not need or be uncomfortable with using. It's about giving users freedom, choice and the ability to opt out. While on the other hand individuals that wish to engage with this immersive media can do so with ease within the context of the same framework.
Develop a personalized user experience that fosters transparency and trust about products and services.
Many of the primary as well as secondary research insights pointed towards users wanting to see more features in regards to personalizing the e-commerce interaction experience. Adding these attributes could also dovetail business needs because it would enable the user to gain a better sense of the correct fit, look and feeling of the fashion articles if they could see them in the context of their own virtual avatar or other immersive viewing and fit calculation interface integrations.
I suggest providing the ability to generate a 3D customizable shopping avatar for each consumer through the input of their headshot along with body type, weight and measurements. I would recommend this instead of full body scanning as a method to generate fast and accurate body proportions which might be distorted with perspective inaccuracies if not utilizing a professional scan. This is also inclusive of giving the user an option to add favorites tags to their profile to attribute stylistic inclinations for the ML recommendation system. Also enable the ability to try-on a multiplicity of items at the same time, pose, edit and even generate look books to save configurations for later sharing, purchase or perusal.
Besides the 2D UI for the lion share of the shopping interactions, the augmented reality views include:
I suggest providing the ability to generate a 3D customizable shopping avatar for each consumer through the input of their headshot along with body type, weight and measurements. I would recommend this instead of full body scanning as a method to generate fast and accurate body proportions which might be distorted with perspective inaccuracies if not utilizing a professional scan. This is also inclusive of giving the user an option to add favorites tags to their profile to attribute stylistic inclinations for the ML recommendation system. Also enable the ability to try-on a multiplicity of items at the same time, pose, edit and even generate look books to save configurations for later sharing, purchase or perusal.
Besides the 2D UI for the lion share of the shopping interactions, the augmented reality views include:
AR Vista - (Back facing smartphone cam) user is able to tap and place to view and inspect products in a region of space before them
AR Figural/Vista(Back & Front facing cam) user is able to view their avatar with wear the products in a regions of space around them or for some products they are able to virtually try them on in real-time such as shoes, jewelry items and cosmetics
AR Figural/Vista(Back & Front facing cam) user is able to view their avatar with wear the products in a regions of space around them or for some products they are able to virtually try them on in real-time such as shoes, jewelry items and cosmetics
Engage with new media immersive technologies to develop experimental marketing campaigns via seasonal or special occasion pop-up shops to drive brand awareness, loyalty and consumer engagement.
Every fashion ecommerce site has editorials on their homepage often displaying features or promotions of some kind. They are often available for either a limited time or quantity and given the specialized nature of this marketing element, I suggest experimentation with immersive technologies here to provide a unique, valuable and compelling experience for shoppers.
Insertion of a seasonally based pop-up shop with specialty products along with a gamified interaction design framework would differentiate Dressing Room from other platforms by providing an innovative shopping experience that consumers could not have in regular stores nor at other sites.
How it would work is, dependent upon the season or promotions being run, user is able to enter into a VR/AR popup shop populated by items catered towards their preferences and browsing habits to discover merchandise and wear of value and interest.
Earlier in this case study it was mentioned that most fashion shoppers still prefer to make purchases at brick and mortar retailers. Providing multisensory immersive experiences such as a VR product shop may assist in converting some of this demographic to online shopping. This could be experimented with on the basis of the marketing of the the experience as a means of unique feedback substitution in the absence of some of the benefits of tangibility while shopping through traditional means.
Insertion of a seasonally based pop-up shop with specialty products along with a gamified interaction design framework would differentiate Dressing Room from other platforms by providing an innovative shopping experience that consumers could not have in regular stores nor at other sites.
How it would work is, dependent upon the season or promotions being run, user is able to enter into a VR/AR popup shop populated by items catered towards their preferences and browsing habits to discover merchandise and wear of value and interest.
Earlier in this case study it was mentioned that most fashion shoppers still prefer to make purchases at brick and mortar retailers. Providing multisensory immersive experiences such as a VR product shop may assist in converting some of this demographic to online shopping. This could be experimented with on the basis of the marketing of the the experience as a means of unique feedback substitution in the absence of some of the benefits of tangibility while shopping through traditional means.
Develop
| Secondary Research
I mapped out a general overview of the system architecture detailing the parent as well as child interactive elements for the Dressing Room application to organize all of the developmental insights.
| Information Architecture
The map illustrates all the main components of this ecommerce app with the distinctive features being the avatar creation process along with the insertion of immersive viewing modalities on the product page, a virtual dressing room for product try-ons and the seasonal pop-up shop featured on the editorial home page.
| User Flow
| User Flow
This user flow illustrates three of the most common ecommerce user interactions such as launch the app, browsing through product offerings as well as viewing the merchandise.
At the onset of the user flow, the individual is given the initial option to create an avatar if this is their first time logging in or to skip the process for later. The user skips the process in this instance and then lands onto the homepage where they scroll through the editorial.
After clicking on one of the featured product pages, they decide to add some the items to their favorites database. The favorites are product lists that can be viewed singularly or adorned on the consumer's virtual avatar if they decide to create one. In the map above, the user simply wishes to view the standalone product without the avatar through AR environmental view to inspect the item in immersive view for greater detail.
On this interaction list, the user can also view the merchandise through traditional browser 2D view, VR view if they are in the pop-up shop or in AR Figural view if the product listing qualifies for real-time immersive try-on for their face, hands or feet.
After clicking on one of the featured product pages, they decide to add some the items to their favorites database. The favorites are product lists that can be viewed singularly or adorned on the consumer's virtual avatar if they decide to create one. In the map above, the user simply wishes to view the standalone product without the avatar through AR environmental view to inspect the item in immersive view for greater detail.
On this interaction list, the user can also view the merchandise through traditional browser 2D view, VR view if they are in the pop-up shop or in AR Figural view if the product listing qualifies for real-time immersive try-on for their face, hands or feet.
| User Experience Mapping
An user experience map was created to analyze the emotive touch points that a user may experience when interacting with Dressing Room. As part of the user centered design process, it is important to empathize with users to gain useful perspectives which can inform iterative developments of the design process.
| User Experience Map
The structure of the experience map is inclusive of touch points that are process oriented in regards to interface interactions as well as the resultant thought and feelings outputs of a potential user. The above diagram demonstrates the user logging in creating and avatar along with experiencing some of the core interactive components of the interface.
Some useful insights were derived from this process especially in regards to accessibility. In the context of this app it would be useful to give the user options to direct their own experience while transiting through the interactions with the app. This translates to giving the option to skip through certain process or not interact altogether with elements that do not suit their needs. Another discovery is that some user's were delighted at the prospect of the virtual pop-up shop but had questions about how to navigate and felt unsure. Others had reservations about creating their shopping avatar because they had concerns about their privacy and where their data would be shared.
All of these sentiments and more were considered and solution space opportunities were generated in the graph to alleviate these pain points and improve the over all user experience of Dressing Room.
Some useful insights were derived from this process especially in regards to accessibility. In the context of this app it would be useful to give the user options to direct their own experience while transiting through the interactions with the app. This translates to giving the option to skip through certain process or not interact altogether with elements that do not suit their needs. Another discovery is that some user's were delighted at the prospect of the virtual pop-up shop but had questions about how to navigate and felt unsure. Others had reservations about creating their shopping avatar because they had concerns about their privacy and where their data would be shared.
All of these sentiments and more were considered and solution space opportunities were generated in the graph to alleviate these pain points and improve the over all user experience of Dressing Room.
| Style Guide
| Style Guide
This style guide displays the fonts, logos, colors and main interactive buttons and components for this ecommerce platform.
Logos
Displayed here is the main logo with text, the squircle app button for smartphones/tables and the logo without text.
2D UI
Interactive buttons and menus bars for the 2D UI
Color Scheme
General app color scheme
Fonts
Utilized fonts
| Wireframes
The wireframing for this immersive project is split into a few subsections. This includes sketches, 3D design and lastly, interactive implementation with Adobe XD and Unity 3D.
| Wireframes
Sketches
2D UI Sketches
The process began with simple rough sketches to ascertain the base structure of the 2D UI of the app along with some button/menu placements and content suggestions. I like to keep these drawings very loose with just enough illustration to get started designing and experimenting with the look and feel in the prototyping program Adobe XD. I find that working is this manner is a lot faster than coming up with a heavily detailed picture perfect sketch followed up by a greyscale wireframe prototype because a lot of designs get altered in production anyway for a number of aesthetic or functional purposes. Therefore, after these preliminary wireframe drawings, I jump straight to creating a few variants of the final prototype and this greatly expedites the development process.
Here are some more wireframe development sketches with these drawings illustrating the login and avatar creation process and portal. To the right are a few icons I had proposed for immersive AR view in the app however, ended up not using these in the exact form as depicted. It was great to simply flesh the ideas out on paper for consideration.
3D UI Sketches
(Seasonal Pop-up Shop)
These 3D UI sketches detail the virtual snow globe environment for the seasonal pop-up shop of Dressing Room's winter wonderland environment. Similarly to the sketches above, I worked with very loose rough sketches to come up with the basic layout and the three zones that would be inside of the globe.
These include the Footwear Midway, the Jewelry Enclave with hanging holiday bulbs along with the New and Featured zone. From this point, I went straight into the 3D round, modeling and sculpting elements in Maya and Zbrush to come up with a few iterations for the final environment.
These include the Footwear Midway, the Jewelry Enclave with hanging holiday bulbs along with the New and Featured zone. From this point, I went straight into the 3D round, modeling and sculpting elements in Maya and Zbrush to come up with a few iterations for the final environment.
After the initial 3D UI Sketches, I found it necessary to draw out a few more sketches for each specific zone so that I could lock in my mental and imaginative processes as I began to model in the 3D packages. With the holiday bulbs, I imagined them gigantic in size with the user being able to tug on them to expose featured product categories.
With the footwear midway, I thought of it almost like a carnival game albeit shooting at shoes as the were walking across the snow covered mountainous landscape to fuel the GOAT(greatest of all time) adventures. With the clouds I thought of the notion of the down of clouds raining forth merchandise, just like they issue forth rain in the natural world. Yet in this case, I say down as it relates to the warm feathered fill of winter jackets and utilized this play on words opportunity to showcase components of featured winter coat that was of course filled with down.
To the far left, this first sketch details a 3D UI platform that I came up with for usage in the holiday bulb zone once the user had selected items for perusal.
With the footwear midway, I thought of it almost like a carnival game albeit shooting at shoes as the were walking across the snow covered mountainous landscape to fuel the GOAT(greatest of all time) adventures. With the clouds I thought of the notion of the down of clouds raining forth merchandise, just like they issue forth rain in the natural world. Yet in this case, I say down as it relates to the warm feathered fill of winter jackets and utilized this play on words opportunity to showcase components of featured winter coat that was of course filled with down.
To the far left, this first sketch details a 3D UI platform that I came up with for usage in the holiday bulb zone once the user had selected items for perusal.
2D Development
Design
Once the sketches were complete, I began creating variations of the 2D UI for Dressing Room in Adobe XD. I segmented the design into 5 sections in relation to app interactive processes. This included the initial login, avatar creation and onboarding, the home and search menu, product pages, along with the interactive dressing room view.
Prototyping + Micro-animations
Having the design complete I rigged up the varying sections with prototype interactions to illustrate the workings of the final app in each section.
3D Development
Modeling
| Snow Globe Environment
Two versions of the snow globe were created, one for usage in the Unity3D interactive engine and the other one for Maya animated demos for 3D interaction prototyping. The globe on the above, the Maya version was modeled with a wooden base, terrain and populating elements.
| Tertiary Details
Other assets such as rocks grass and trees were modeling as a means to flesh out the backdrop of the winter wonderland environment. Here I went for the low poly aesthetic as you can see I purposely triangulated these simple meshes then hardened the normals to created the blocky look. I did this as well because if it were to be imported into the Unity interactive engine I wanted to be cognizant of performance and therefore keep the poly count at a reasonable amount.
| Final Composition
I began to distribute all the elements across the environment utilizing mash to paint the vegetation geometry on the surface along with manually placing other assets.
With the environment complete, I then began to model elements specific to each of the three feature areas. The screenshots above are elements from the Jewelry Enclave with interactive holiday bulbs. I created them in a separate environment and then imported them in to the main scene.
| 3D UI Icons
3D Icons were created on Maya from SVGs exported from Adobe illustrator and Flaticon graphics database. These were generated for usage in some of the virtual user interfaces with the user selects products in this virtual environment.
| 3D Avatar + Clothing
In actual practice avatar in Dressing Room will be generated by the system procedurally however for the sake of this prototype, I 3D modeled a human subject to utilize for demonstration purposes. Here you see a close up of the head along with the body hair, eyes, teeth and mouth.
I knew I wanted the prototype to feature clothing try-on so I modeling and sculpted clothing for this avatar for the Dressing Room widget in the app. In actual practice, clothing will be created as a result of 3D scanning or some other product capturing method by the retailer.
The try-on portion of the app also included accessories and footwear so a select few of these were modeled as well for demonstration.
Surfacing
Inside of Maya I created shaders with Redshift 3rd party render engine to surface the environment and assets. The above screenshots showcase some of the shaders I created along with the layered shading networked with Fresnel I created for the snow filled ground landscape. Most of the textures I created were procedural colors or textures already in the 3D package with a few outside textures that I sourced from my texture library or hand painted in other 3D texturing packages.
| Environment
Here is a perspective view of the fully textured landscape. on the overall globe I utilized a ramp and on many of the scene elements I imported as Redshift proxies which read the textural information from another scene but in the master scene 3D work view they appear white. Other assets, I did not create proxies for which will appear in their intended colors for render such as the stylized snow filled pine trees.
This is a close up example of the procedurally textured tree along with the layered texture landscape that appear greyscale in perspective view yet the render will reveal it's blended surfacing.
| Avatar + Clothing
Besides texturing the landscape, I hand painted many of the 3D textures associated with the avatar and the clothing after sculpting these asses in Zbrush. I then went about generating vary types of maps such as specular, albedo, normal and more. The above screen shot displays just a few of these maps I created for the avatar and fashion articles for the demo.
Animation
There were quite of few moving parts and elements to be animated in this scene and character and a few of such work progressions are illustrated above to give an idea of my process.
The first screen shot showcases a herd of wandering reindeer that I first animated singularly then put into mash to animated along a conformally mapped curve on the landscape's geometry surface. The next screenshot demonstrates the footwear midway circulations along with the dynamics I configured for the falling snow in the globe. The third screen shot displays another dynamics simulation I created to demonstrate the hearts particle simulation after a user shot and favorited merchandise.
The first screen shot showcases a herd of wandering reindeer that I first animated singularly then put into mash to animated along a conformally mapped curve on the landscape's geometry surface. The next screenshot demonstrates the footwear midway circulations along with the dynamics I configured for the falling snow in the globe. The third screen shot displays another dynamics simulation I created to demonstrate the hearts particle simulation after a user shot and favorited merchandise.
During the animation process, I heavily made usage of set driven keys from which I created custom animation sliders. Such is the case in the 3D UI interface platform above part of which I utilized for the Jewelry Enclave's animation at the ending sequence.
A separate scene was also created for the experimental 3D UI to showcase the user's ability to navigate in this virtual pop-up show with controller free hand gestures to either teleport or take a guided walk to any one of the 3 zones inside of the snow globe featuring promotional merchandise.
Interactive Implementation
User Interface
For the augmented reality interactions of Dressing Room, I built out a working prototype for a few of the fashion articles for the user to either try on or view in an environmental context. The above screenshot illustrates the creation of these interactions via the 2D UI with Unity 3D's user interface system in which I inserted custom thumbnails for the clothing.
AR Foundation - Android
I built the unity scene for the Environmental view perspective with AR Foundation for android AR Core. I surfaced these assets using Amplify shader editor along with importing texture maps and then utilized Unity's post processing effects for reflections and polish. Additionally, I activated AR light estimation which detects the light in the user's setting and utilizes that to realistically illuminate the AR holograms that the user places within their environmental context.
Vuforia - Marker System
For the Figural AR view, I utilized Vuforia's marker based system in tandem with invisible hand geometry to enable the ability for the user to try on jewelry items such as bracelets, watches and rings with realistic effect. Post processing was also used in this scene to generate reflections and effects.
Deliver
| Usability Testing
I aim to investigate the user’s accessibility, affective response and perceived value of the Dressing Room fashion e-commerce portal.
| Usability Testing
I investigated how immersive technologies could be usefully integrated into the current fashion e-commerce ecosystem geared towards the creation of novel strategy driven and enjoyable user experiences exclusive to this mixed reality medium.
First Impression Tests
Five- second as well as First Impression tests were conducted to test the app’s legibility, trustworthiness, emotional impact and general appeal. The app login and avatar creation sequences were tested along with important user interface features such as the dressing room widget, product browse, selection and varying viewing modalities.
During the onboarding sequence, some of user’s expressed impatience and concern over the drop-down sphere menus for the gender weight and height and desired for something more simplistic. For them, it was also too lengthy and not inclusive enough as it didn’t allow for the adjustment of measurement units between feet and meters along with access to the unisex gender identity. However, there was a positive response to the body measurements section with the human figure shape which leads to the insight that visual and animation can be included but must dovetail precisely to the subject in question, not simply for visual design cosmetic purposes. It was also noted that besides entering body measurements, users should also be allowed to select a body type model such a mesomorph, ectomorph, endomorph for example that best represents their body type. The reason for this is that sometimes people can be the same size but clothing will fit differently due to these variances.
Another question raised was the privacy policy in place for all the body data they would put in while creating their avatar. While the user is creating their shopping digital double, there should be a help menu in place in the beginning or persisting throughout the experience which outlines the legalese.
Participants thought it would be helpful to see the full body of the avatar once they created it without clothing on or just the bare essential undergarments so that they could better gauge the accuracy of the procedural generation to see if any adjustments were necessary.
Once completing the avatar creation process, most users had no idea on how to access their virtual dressing room. However, they felt at ease when navigating through many portions of the interface due to it having a similar structure in some respects to many other ecommerce platforms. The dressing room button was mistaken for the home link for many users. Once inside the dressing room, some user’s commented that they would like to see their avatars try on clothing against different backgrounds not just the stark white setting.
Upon clicking on the link for the editorial for the pop-up shop, many users skipped over the explanatory text and images to experience the interactions directly. The majority of user’s preferred to learn while doing rather than reading then doing.
During the onboarding sequence, some of user’s expressed impatience and concern over the drop-down sphere menus for the gender weight and height and desired for something more simplistic. For them, it was also too lengthy and not inclusive enough as it didn’t allow for the adjustment of measurement units between feet and meters along with access to the unisex gender identity. However, there was a positive response to the body measurements section with the human figure shape which leads to the insight that visual and animation can be included but must dovetail precisely to the subject in question, not simply for visual design cosmetic purposes. It was also noted that besides entering body measurements, users should also be allowed to select a body type model such a mesomorph, ectomorph, endomorph for example that best represents their body type. The reason for this is that sometimes people can be the same size but clothing will fit differently due to these variances.
Another question raised was the privacy policy in place for all the body data they would put in while creating their avatar. While the user is creating their shopping digital double, there should be a help menu in place in the beginning or persisting throughout the experience which outlines the legalese.
Participants thought it would be helpful to see the full body of the avatar once they created it without clothing on or just the bare essential undergarments so that they could better gauge the accuracy of the procedural generation to see if any adjustments were necessary.
Once completing the avatar creation process, most users had no idea on how to access their virtual dressing room. However, they felt at ease when navigating through many portions of the interface due to it having a similar structure in some respects to many other ecommerce platforms. The dressing room button was mistaken for the home link for many users. Once inside the dressing room, some user’s commented that they would like to see their avatars try on clothing against different backgrounds not just the stark white setting.
Upon clicking on the link for the editorial for the pop-up shop, many users skipped over the explanatory text and images to experience the interactions directly. The majority of user’s preferred to learn while doing rather than reading then doing.
Informal Benchmark Tests
Takeaways
Make the data entry input options for avatar creation as direct, inclusive and accessible as possible when it serves a purpose to do so.
Accessibility for Dressing Room entails inclusion of the skip option being clearly visible for those wishing not to engage in avatar creation along with including a unisex gender identity to make user of varying identities feel comfortable. Other accessibility areas for consideration were changing the interface to allow the user to directly select the measurements be they in feet and yards or the metric system in addition to having the button in the settings for new avatar creation to be positioned outside of the dropdown menu where it was hidden away unknown for the tested user.
One last insight is that users really found the data entry for the shoe size and other body measurements using the manakin to be highly engaging and helpful for the overall visualization of the units they were inputting because of the direct correlation to the body part. However, the abstract spheres dropdown to enter in the height and weight proved to be cumbersome and could use a revision for the sake of functional simplicity.
One last insight is that users really found the data entry for the shoe size and other body measurements using the manakin to be highly engaging and helpful for the overall visualization of the units they were inputting because of the direct correlation to the body part. However, the abstract spheres dropdown to enter in the height and weight proved to be cumbersome and could use a revision for the sake of functional simplicity.
Include brief in-app step-by step pop-up tooltip sequences to provide users with an interactive simulated practice sequence of the distinctive buttons and features of the platform to avoid confusion.
Users often confused the top door logo of the dressing room for the home button and therefore did not select it when asked to enter into their pop-up shop with a customized avatar. They mistakenly thought that the main page’s seasonal pop-up shop was the dressing room instead.
In watching users navigate throughout the interface it became apparent that this along with some other minor feature discoverability issues presented the need to have a brief in-app tooltip tutorial sequence. This would give users the chance to get more familiar with all the distinctive UI features not found in other typical e-commerce platforms.
Another thing to consider especially for the pop-up shop was to also include these types of in app simulation sequences in the virtual world because I found that most users did not stop to read the instructions about the pop-up shops zones. Instead they chose to dive right into the experience and therefore the user experience or instruction needs to cater towards these tendencies. The user should be guided just enough to allow them to experience their own aha moments of element or product discovery. This interaction framework has been shown to stimulate user’s feelings of accomplishment within any given system.
In watching users navigate throughout the interface it became apparent that this along with some other minor feature discoverability issues presented the need to have a brief in-app tooltip tutorial sequence. This would give users the chance to get more familiar with all the distinctive UI features not found in other typical e-commerce platforms.
Another thing to consider especially for the pop-up shop was to also include these types of in app simulation sequences in the virtual world because I found that most users did not stop to read the instructions about the pop-up shops zones. Instead they chose to dive right into the experience and therefore the user experience or instruction needs to cater towards these tendencies. The user should be guided just enough to allow them to experience their own aha moments of element or product discovery. This interaction framework has been shown to stimulate user’s feelings of accomplishment within any given system.
Design for device affordances with respect to human factors considerations rather than a one size fits all methodology for the immersive media components.
The design plan was to make the seasonal pop-up shop available to both smartphone/tablet users as well as those with VR headsets. I created a single environment for this shop yet it proved difficult for users to navigate around and experience the full range of interactive potentials when trying to view this virtual setting from their 2D device. It was cumbersome to have to hold the phone up to see this media for extended periods of time.
Rather than completely cutting off smartphone/tablet users from these seasonal features, I think it would be beneficial to create a small tabletop fantasy pop-up shop for the wares catered towards this user base with simple tap and touch interactions.
Another pain point that came up while in the virtual pop up shop was that some of the users did not know where some of the elements were within a single zone because they were located outside of the user’s field of view. It should be noted here that all currently active UI elements should be situated in the user’s FOV unless there is some reason to have them elsewhere in the scene. If the instance does present itself to have a feature outside of this direct field of vision then audio or visually animated cues should direct the user’s attention to this area.
Rather than completely cutting off smartphone/tablet users from these seasonal features, I think it would be beneficial to create a small tabletop fantasy pop-up shop for the wares catered towards this user base with simple tap and touch interactions.
Another pain point that came up while in the virtual pop up shop was that some of the users did not know where some of the elements were within a single zone because they were located outside of the user’s field of view. It should be noted here that all currently active UI elements should be situated in the user’s FOV unless there is some reason to have them elsewhere in the scene. If the instance does present itself to have a feature outside of this direct field of vision then audio or visually animated cues should direct the user’s attention to this area.
Redesign gesture-based 3D UI for readability while also simplifying the VR pop-up shop to include only one or two interaction schemes.
While the gesture based hand 3D UI demo may provide for an interesting animated sequence, the actual interaction mechanics are not suitable accessibility-wise for the average user. Individuals should not have to continue to tap on the button to access all the menus, rather they should be available after the first selection to maximize efficiency and readability. This first iteration was useful as an initial 3D sketch to illustrate development ideas but the next iteration could use the aforementioned modifications among others discovered in the usability investigations.
Secondly, the VR pop-up would benefit from having only one or two interaction schemes so as not to confuse users of the platform. Currently, Dressing Room is a conceptual demo of a potential immersive e-commerce application and I thus aimed to showcase the variety of interactive possibilities that could be created. However in actual practice, I would utilize these workings as a template of sorts to extract just a few of these interactive elements for usage on a more down to earth scale for the average user.
Secondly, the VR pop-up would benefit from having only one or two interaction schemes so as not to confuse users of the platform. Currently, Dressing Room is a conceptual demo of a potential immersive e-commerce application and I thus aimed to showcase the variety of interactive possibilities that could be created. However in actual practice, I would utilize these workings as a template of sorts to extract just a few of these interactive elements for usage on a more down to earth scale for the average user.
Review
- Final thoughts, summary and insights for the project
Dressing Room can be utilized as a template for fashion ecommerce platforms to holistically integrate immersive technologies into their present ecosystem for marketing and business growth.
Dressing Room provides a responsive solution space template for companies to solve business problems, expand marketing reach and delight consumers which ultimately translates into increased opportunities for growth. I approached this product development journey via the iterative integration of UX strategy, design research, composition and immersive media into the present fashion e-commerce infrastructure.
Foremost, emphasis has been placed upon empathizing with users' desires and needs from the targeted demographic while also even looking at extreme users or outliers to investigate how the system could be designed to make it accessible to everyone. Working on this foundational basis, I paired these factors with business needs to furnish an extensible prototype.
Below are listed some of the opportunities and business value touchpoints along with how they were addressed throughout the course of this product development cycle:
Foremost, emphasis has been placed upon empathizing with users' desires and needs from the targeted demographic while also even looking at extreme users or outliers to investigate how the system could be designed to make it accessible to everyone. Working on this foundational basis, I paired these factors with business needs to furnish an extensible prototype.
Below are listed some of the opportunities and business value touchpoints along with how they were addressed throughout the course of this product development cycle:
Building Consumer Trust + Minimize Revenue Loss
▪ Fit Calculator
▪ Avatar dressing room widget
▪ Augmented Reality Try-on Feature(Select Items)
▪ Avatar dressing room widget
▪ Augmented Reality Try-on Feature(Select Items)
Marketing Strategy, Brand Awareness, Consumer Engagement loops, UX Accessibility
▪ Flexibility in giving agency to users to determine the level of engagement with the platform, users can opt out of creating an avatar or any of the other immersive features while still benefiting from sizing/fit calculator and product recommendations
▪ Other users can choose to explore these immersive features depending on their level of comfort or willingness
▪ Providing limited time offer VR seasonal pop-up shops with exclusive wares to draw interest
▪ The ability to try on merchandise in AR as well as create your own virtual shopping avatar stimulates a participatory sense of ownership with the platform
▪ Users are able to share their outfit configurations or try-ons to varying other social media channels
▪ Other users can choose to explore these immersive features depending on their level of comfort or willingness
▪ Providing limited time offer VR seasonal pop-up shops with exclusive wares to draw interest
▪ The ability to try on merchandise in AR as well as create your own virtual shopping avatar stimulates a participatory sense of ownership with the platform
▪ Users are able to share their outfit configurations or try-ons to varying other social media channels
Marketing Strategy, Brand Awareness, Consumer Engagement loops, UX Accessibility
Capitalize upon the consumer virtual experiences space mainly used in the context of gaming, untapped market potentials for fashion ecommerce
▪ Experimental immersive product marketing with VR pop-up shop featuring “Easter egg” elements and gamified interaction scenarios
▪ Mini games as an enjoyable means of product discovery
▪ Ambiance of virtual environment to stimulate memorable experiences associated with brand awareness
▪ Futureward, there exists the potential for purchased real fashion articles to permeate virtually through avatars on other platforms almost akin to NFT wearable in a digital virtual ecosystem of the future populated by user’s digital avatars
▪ Mini games as an enjoyable means of product discovery
▪ Ambiance of virtual environment to stimulate memorable experiences associated with brand awareness
▪ Futureward, there exists the potential for purchased real fashion articles to permeate virtually through avatars on other platforms almost akin to NFT wearable in a digital virtual ecosystem of the future populated by user’s digital avatars
Working on Dressing Room challenged me to discover new potentials for the transformation of the fashion e-commerce marketplace to provide solutions for some of the common pain points as well as the exploration of blue ocean territory in this immersive technology space.
I was able to utilize my full range of design, prototyping and development skill sets to take a step back and critically analyze virtual shopping from a more objective perspective through primary and secondary research. This enabled me to cast aside bias and initial assumptions with the ability to also discern areas for improvement for the next iteration of this product.
Moving forward, more research needs to be done with user testing to determine the user base’s reception and willingness to engage in some of the new features as well as UX improvements upon existing ones. This prototype constitutes an archetype of possibilities for this sector, any elements of which can be utilized by varying fashion e-commerce retailers as per the appropriate context for their clientele as well as product offerings.
I was able to utilize my full range of design, prototyping and development skill sets to take a step back and critically analyze virtual shopping from a more objective perspective through primary and secondary research. This enabled me to cast aside bias and initial assumptions with the ability to also discern areas for improvement for the next iteration of this product.
Moving forward, more research needs to be done with user testing to determine the user base’s reception and willingness to engage in some of the new features as well as UX improvements upon existing ones. This prototype constitutes an archetype of possibilities for this sector, any elements of which can be utilized by varying fashion e-commerce retailers as per the appropriate context for their clientele as well as product offerings.