Mobile Design
UX Research & Design
UI Design

InVision App

Major contributions
Lilit Tounian: C&C Analysis
Tom Cohen: Wireframing
Terri-Lee Taylor: User Interface Design

View Prototype

Fashion & Machine Learning

Many companies leverage AI by discovering ways to apply it to existing industries. In tech, Amazon is working on a way to use artificial intelligence to decide whether an outfit is stylish, or generate like items based on an image. 

In this case study, we took on the challenge of introducing Artificial Intelligence, specifically machine learning, to an existing voice in fashion, Mr. Porter. Mr. Porter is an award winning men’s fashion retailer carrying over 300 high-end brands.

Our goal was to design an agent that would learn a user’s preference and provide intelligent recommendations based on emerging trends.


How can we design an app to acquire knowledge for the AI to begin building a picture of the user’s style choices?

How can the AI provide suggestions and make outfit choices?

What will the balance of suggestion (expert styling practices) vs. observation (imitating the user’s non-expert style choices) be?

Will the AI have a personification or avatar?


Lilit Tounian
Tom Cohen


Finding Out What We Don't Know

At the beginning of this project, we recognized that we first needed to understand Mr. Porter as a business. We started with a Business Model Canvas to familiarize ourselves with how Mr. Porter operates.

We learned that Mr. Porter is much more than a retailer. It is a voice for emerging designers in men’s fashion. In addition to the 300+ brands represented at Mr.Porter.com, the company also has a comprehensive editorial team that focuses on producing a weekly digital magazine and a another publication six times a year.

We realized that because Mr. Porter already has an edge in giving fashion advice, there is a huge opportunity for the company to get closer to customers by adding a stylist to its offerings. 


Comparing Existing Technology

The Business Canvas was a great starting point for finding out what we didn’t know, however, we still needed to understand the role of a stylist. After revisiting our goal we realized that we simply needed to understand the businesses that already offer shoppers with a "digital" stylist.

The idea we had to keep in mind is that the process of choosing what to wear, is derived from cognitive processes, specifically sensation & perception. While real-life stylists may be able to rely on deriving information from a client visually, a digital stylist may need to draw conclusions another way.

Instead of comparing how stylists do their jobs, we compared multiple digital fashion stylists to each other. We began our Comparative & Competitive Analysis with Enclothed, Nordstrom & StitchFix.

  • Is login necessary?
  • How did they ask about personal style? (ie. Visual, Categories, Explanations etc.)
  • Did they ask about personal lifestyle? (ie. Occupation, Method of Commute etc.)
  • Did they ask about preferred brands, color preferences or styles of items?
  • Did they ask about body metrics like exact weight, height or size?
  • Did they ask about fit preferences or issues? (ie. Slim, Regular etc)
  • Did they ask about Cost Preferences?
  • Did they ask about age?

Screenshots from C&C Analysis

We noticed that each company chose to get information about the user with visuals. Instead of asking the user to describe his style, they asked him to choose outfits from a group of pictures.

We also noticed that each company asked about the same exact body fit issues. This is important because it confirmed our assumption that fashion relies heavily on visuals & sometimes even the best wording for a type of style can be subjective.


Understanding People & Their Needs

Now that we had an idea of how digital stylists asked about a users style, we sought to understand how men approach the shopping process for themselves. We wanted to make sure that our AI would meet their needs. 

Since the items sold at Mr. Porter catered to a specific audience, we knew we couldn’t ask everyone about their shopping habits. We needed a screening question that allowed us to get an idea of what kind of brands the user can afford:

“Have You Ever Purchased an item from one of these following brands?”

We were careful to show the luxury brands at the highest and lowest price points at Mr. Porter. We also mixed well known brands with a few smaller brands just to gauge the level of each interviewees knowledge of fashion.

  • Our ideal users are mostly between the ages of 24 and 35
  • Most of them have corporate jobs (ie. Real Estate, Banking, Law, Marketing etc)
  • Many users value being able to see an item clearly to understand it’s size, fit or style.
  • Most users stated that cost, convenience were the most important reasons they choose to shop online.
  • Despite their preference, all users shopped online less than a few times per week.
  • Each user described their personal style differently however the common theme was a variation of business casual
  • Most users got their fashion inspiration from either their friends or trusted magazines/online sources

Screenshots from User Research Survey


"Robots Need Love Too"

While we conducted user interviews, I thought it would be a great idea to start considering the personality or role of the AI Stylist with an Empathy Map.

Usually, Empathy Mapping for a User Persona helps us get closer the user by understanding their feelings & thoughts. In creating a product, we aim to solve problems and not to create new ones. By understanding how the user is thinking & feeling, we can better create solutions that work for them.

Chris Butler at Philosophie uses the same principles of empathy mapping for the user and applies it to the agent. Since many of technologies that are included in AI can be broken down into forms of cognitive processes (thinking, listening and seeing), the empathy map for the agent would help us get closer to creating an accurate model of a stylist.

  • Does: Make intelligent recommendations based on both the users preferences and current fashion trends
  • Senses: Understand the context for which the user is seeking fashion advice.
  • Says: Tells the user what is or isn’t fashionable & explain that decision
  • Thinks: Processes information like a stylist in that it recommends items that compliment me
  • Feels: Recognizes patterns in good & bad responses from the user and takes them into consideration for future recommendations. 

The Ideal User

After a few days of user interviews, we synthesized our data by using the user interviews to create a user empathy map.

We used the key information derived from our user interviews & the Empathy Map shown here, to create Nigel Porter.

Nigel Porter is a 26 year old Real Estate agent that values looking good in quality clothing. He often gets overwhelmed by online fashion options, & the time it takes him to shop.

He is preparing to go to his company's party, by planning what to wear. How might we help Nigel find an outfit?

Nigel Porter

  • Age: 26 years old
  • Profession: Real Estate Agent
  • Salary: $120,000 per year
  • Style: Business Casual

Nigel usually shops on Amazon a few times per month. He has recently taken up shopping on luxury fashion sites he learns about through his friends. Nigel models his style after his friends and a few people he sees on social media. Since Nigel goes to a lot of professional events, he has a need for clothing that looks good. However, when shopping for things to wear, Nigel often feels overwhelmed with the choices available.

  • Goals
    • Seeks convenience and a simple purchase process
    • Prefers high-quality clothing
    • Isn't obsessed with fashion but wants to look good
  • Frustrations
    • Gets overwhelmed with online fashion options
    • Doesn't know how to style himself for events
    • Too busy to spend time shopping in-store

Anticipating the User's Needs

With the information from the Empathy Map for the Agent and our User Persona we set out to help Nigel find something appropriate to wear to his party. His simple journey would look like this:

Nigel Opens the App → He Gives Information About His Style → The agent gives him recommendations.

We realized that if Nigel is seeking a stylist, he would need to always have an opportunity to get information from the stylist whenever he needed it.

From the agent's position, Nigel's need for continued feedback could act as input. If we could find a way for Nigel to both give and recieve feedback, we would help the machine learn his habits, preferences and recommend new items within his comfort.

We used this information to collaboratively work on wireframes through a Design Studio session.

  • Rank Your Outfit
    Nigel can take a picture of his outfit and get recommendations for how to make his outfit more stylish.
  • Shorter Onboarding Questionnaire
    Nigel can enter information about his preferences in a short amount of time since the AI will learn about him through continued use of the app.
  • Outfit Liking/Disliking System
    Nigel can rate outfits in a way that is intuitive to him, tinder-style! By swiping left or right, Nigel will let the machine what he likes/dislikes.
  • Compute An Outfit
    If Nigel sees an item he likes in Mr.Porter's store, he can get personalized recommendations for how to style the outfit.
  • Personal Closet 
    Nigel can save items or outfits he likes for future reference.

Design Studio for Porter.You


Testing Our Ideas

One of the key issues in building our wireframes was where the users landed when they clicked on Porter.You in the app. 

At first we decided that the user would have to register to access the stylist. After registration, the user would always land on the recommendations page.

However, user testing proved that the onboarding questions were seemed too long for new user that is just interested in seeing what the stylist can do. Plus, we realized that any recommendations for a new user would be generalized since our app relied on continued use to work.

So, we created three entry points to Porter.You. I focused on the Outfit Ranking portion of the wireframes.

  • From shopping to Porter.AI
    If Nigel is already in the app, he can access Porter.You from the bottom navigation or from the "Compute An Outfit" button under each item
  • From Outfit Ranker to Onboarding
    Whenever Nigel gets a rating of his outfit before he has registered to the app, he will also recieve a prompt to register for personalized recommendations
  • From the homepage of the app to Onboarding
    If Nigel knows that he wants to register to the app, he can simply click on the prompt on the homepage to enter the onboarding process.

In this flow, Nigel will open the app seeking feedback for his outfit. He will click the stylist section on the homepage, land on the camera, take a picture the recieve a rating of his current outfit. He will also recieve recommendations for how to improve his outfit with additional looks & complimentary color schemes.

Through user testing we learned that the color schemes weren't very useful to someone that was new to fashion. We also learned that it can feel invasive to land on the camera every time the user opens the stylist.

Another challenge I faced was how to send the user through the on-boarding system once we've hooked him with a fun outfit ranking. Through more user testing, I learned that a simple prompt was enough to get a interested in receiving personalized recommendations.

  • Users did not like landing on the ranking camera when entering Porter.You
    Improved by creating an intro screen for users to choose between on-boarding & getting a ranking
  • Users found the on-boarding flow enjoyable
  • Users enjoyed swiping to like/dislike outfits
    Improved experience by adding like/dislike swiping to the onboarding experience
  • Users wanted to see items in an outfit without having to enter the store
    Improved experience by adding a breakdown of the items included in the outfit
  • Users did not understand the personification of the saved item as a 'Closet" 
    Improved by changing "closet" to "favorites"

Getting Nigel to His Goal

After multiple iterations and rounds of testing, we were ready to create a high fidelity prototype. As the person in charge of the UI, I knew that it would be important to make Porter.You fit seamlessly into the app.

At the same time, I thought it would be necessary to differentiate Porter.You from the rest of the app to avoid confusion between the store & the stylist.

Striking this balance was challenging but was achieved through making one subtle change between the general app and the stylist; inverting the colors.

Since the color scheme was just black/dark gray and white, the change wasn't very noticeable to users. It was noted that the simple color scheme, forces users focused on the photos and the content rather than style of the app.


Next Steps

Although we were able to gain  valuable insights from designing & testing the AI stylist, I would have liked to explore multiple ways for prototyping this system.

Personally, I would have enjoyed creating an interactive prototype that would have access to the users camera so that we could test different ways to convey 3D mapping.

It would have also been nice to dive deeper into machine learning & play a part in defining how the agent would make decisions. .

Overall, I really enjoyed this project! It was my first introduction to understanding Artificial Intelligence & I still continue to seek out knowledge about the subject.

Copyright Terri-Lee Taylor 2018 | All Right Reserved