Outré – Reinventing Online Fashion Retail

Problem Statement

Retail as it exists today in both physical and digital forms is outdated an inefficient. Customers more or less have to either trawl through huge catalogues and complex retail websites to  search for the item they want, or they have to submit crude search queries like “blue pants” with varying results. On the other side,  retailers struggle to categorize their inventory and present it in a manner that is easily accessible to customers.

In a perfect world, each customer would have a personalized shopping agent that had perfect knowledge of a retailer’s inventory. A customer could say, “I want something to wear for a day at the beach,” and the shopping agent could instantly whisk together a group of outfits fit for a day at the beach.

What if a customer just wants to browse without a particular purchase in mind? In a perfect world, the customer could sit back on their couch and turn shopping into a recreation activity — like watching a runway show or browsing their Instagram feed.

Technology exists today that can make this a reality, and Outré is my case study and proposal exploring this possibility. Outré is a retail experience that allows the diverse customer groups of the “Browser” and the “Hunter” to explore fashion in their preferred manner, helping online retailers make happy happy customers and close sales.

Customer User Study

According to studies on online retail by Brown, Pope, and Voge, as early as 2001 there emerged a number of identifiable customer groups based on their typical behavior (Source).

  • The Browser: Recreational shoppers, they are there for fun and enjoy shopping
  • The Hunter: Convenience-oriented shoppers, who are driven by time and efficiency
  • The Loyalist: Ethical shoppers, who are loyal to brands, stores, and other entities
  • The Friend: Personalizing shoppers, who love to engage with store personnel

I believe that in the context of online retail, the “Browser” and the “Hunter” are the most actionable archetypes of online shoppers — where an improved shopping UX could play a major roll in converting sales. Let’s take a closer look at these two customer groups.

The “Browser”:

The Browser is simply looking to have a good time, yet if they see something they like they may stop and consider a purchase. The Browser wants to look at beautiful and attractive items, think about how they might look wearing it, and might purchase an item as a result. They want their shopping experience to be more of an entertainment and relaxation activity.

The “Hunter”:

The Hunter knows more or less exactly what they want, and are simply looking to find exactly that as quickly and conveniently as possible. They want their shopping experience to be as quick, efficient, and effective as possible. They don’t want to do much extraneous clicking. Most importantly, they have a clear idea in their mind’s eye of what they want, (e.g. a sophisticated yet fun dress for that dinner party next week,) and are simply looking for something that matches it.

The Real Problem: Two Different User Groups!

Modern online retail makes the mistake of catering to both of the “Browser” and “Hunter” groups at the same time by not differentiating between them.

The typical retail website is a huge database of clothing inventory, with filters and nested folders allowing individuals to explore the inventory and eventually stumble across something. This is not a very recreational activity for the Browser, as it involves a lot of clicking and decision making as to what section next to explore, not to mention scrolling through thumbnails of videos. Nor is this efficient for the Hunter who has to click and filter through the inventory laboriously.

Typical retail websites also have a search function for Hunters, which generally use keyword matching. What this means for a Hunter is that they might be looking for a “comfortable, airy, casual shirt to wear to the beach,” yet their keyword search would probably look more like “shirt.”  Unable to query for specific qualities like “comfortable,” and “casual,” the Hunter now has to trawl through potentially irrelevant search results.

As a result, potential sales are lost as two user groups with two very different preferences for user experience are given something middle of the road and lackluster.

Creating an Ideal “Browser” UX

One of the largest recreational browsing activities happens every day billions of times: scrolling through social media. Whether Facebook feeds, Instagram feeds, or Twitter feeds billions of users every day enjoy scrolling through wave after wave of content – myself included.

Most of the largest fashion retailers have already caught onto this trend by creating Instagram accounts with millions of followers. For example Nike’s page has 68.7M followers at the time of this post. High fashion like Louis Vuitton are also in on the act, gathering 14.4m followers.

Yet Instagram is an extremely limited medium. While reach is extremely high, there isn’t a way to include clickthrough links to a website where a browsing customer could actually make a purchase. Instead, the browser would have to search the Instagram post description for a potential mention of the item’s name, then search or find it on the retailer’s website. Not quite the “sales conversions” that brands are probably looking for. Nike might have already noticed this, as their Instagram feed is packed full of commercials  and images of sports personalities, as opposed to tangible items customers can buy.

Outside of Instagram, fashion retailer ASOS is moving in this direction, allowing shoppers to watch ‘catwalk’ videos “to better understand how long the garment is, how it is cut, how it fits, and how it moves.” This is a good move towards creating a more Browser friendly experience, yet discoverability of items is still an issue as the Browser would still have to click through and find each item.

Making Outré work for the Browser

The Browser dimension of Outré takes inspiration from Instagram, yet it also allows Browsers to close sales by showing exactly what items are for sale and by providing click through links for purchase.

The Browser also doesn’t want to think too much. If the clothing item is presented in a void, they will have to perform some mental gymnastics to imagine how the item might work in an outfit or look. Thus Outré would exclusively serve complete looks to the “Browser,” allowing them to see the “fashion in action.” The pictures would be sourced from fashion retailers’ seasonal catalogues, with each relevant clothing item indexed similarly to LookBook.

Browser Storyboard with Outré:

  1. The Browser opens Outré and is greeted with an array of beautiful fashion ‘looks’
  2. The Browser proceeds to scroll through the looks, admiring the outfits
  3. One picture in particular catches the Browser’s eye, and the Browser clicks on it
  4. Outré takes them to the look, and the Browser likes the handbag in the picture
  5. The Browser clicks for more information, and details of each item in the look appear
  6. The Browser clicks on handbag’s link, and is taken to the item on retailer’s website

Screen Shot 2017-01-20 at 5.05.34 AM.png

Creating an Ideal “Hunter” UX

Creating an ideal retail experience for the “Hunter” is a bit more difficult, and involves essentially creating an artificially intelligent “personal shopping agent.”

I am exploring how to bring real-life context to our digital retail experiences in fashion retail with through ontology / concept maps which allow an artificial intelligence agent to think similarly to a human. When people shop for clothing, they have in their mind’s eye a mental picture of what they are looking for, often defined by conversational terminology like “refined,” or even more complex notions like “something for the beach.” Our existing digital retail solutions are ill-fitted for these types of requests and instead treat clothing as discrete entities and blanket categories, like “tops” and “bottoms.”

To address this I seek to leverage and extend ontological maps such as MIT’s ConceptNet for clothing and fashion by documenting the metadata of retail objects. For example a blouse could have the attributes “white”, “cotton,” and “casual” among others. If a user then requests “something for the beach,” the artificial intelligence would be able to reference the ontological map and find that beaches “HasProperty: hot in daytime”, and thus that “cotton” and “casual” are ideal to wear “atLocation:beach.” The current retail experience is one where a Hunter casts a search query net and sifts through hundreds of results. I envision Outré as a solution in which the Hunter attaches a specific bait, casts their fishing line, and receives the exact catch they had in mind.

There is a lot more work to be done to create an intelligent shopping agent like this, but the technology definitely exists and the project is feasible.

Outré – Two User Experiences in One

Live Demo (Adobe XD)



Recognizing the diverse expectations of the “Browser” and the “Hunter,” I envision Outré to be a spring board through which both of these user groups can easily jump to their desired UX track.

The Outré demo currently has functionality for the “Browser,” and greets you with an Instagram-esque feed of “looks.” Feel free to click on each look and explore the retail items contained within them. Does this shopping experience feel like it might be a recreational activity? Leave me some feedback and send me an email 🙂 !

I am still developing the Hunter’s search functionality. The live-demo will eventually include a “search” functionality for the “Hunter,” allowing our artificially intelligent shopping agent to find them exactly what they want.


Screen Shot 2016-12-01 at 3.26.36 PM.png

UX Wireframes in Adobe XD:

Screen Shot 2016-12-01 at 3.20.33 PM.png

© Alexander Chan and http://www.alexkchan.com, 2017. Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given with appropriate and specific direction to the original content.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s