UX Research & Design
Lilit Tounian: C&C Analysis
Tom Cohen: Wireframing
Terri-Lee Taylor: User Interface Design
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?
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.
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.
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.
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.
Screenshots from User Research Survey
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.
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 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.
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.
Design Studio for Porter.You
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.
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.
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.
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.