EMERGING TECHOMNI-CHANNELCLIENT-FACING

FindMyStyle

An omni-channel style discovery experience for American Eagle Outfitters & Aerie.

Date January - August 2019
Context
Master's Capstone with American Eagle Outfitters
Team
Swarnakshi Kapil, Daniela Marmolejos, Zeqian Peng, Siqi Wu
My Role
Research Lead, Product Designer

RESEARCH

Literature Review
Competitive Analysis
Interviews
Contextual Inquiry
Think Alouds

SYNTHESIS

Affinity Diagram
Empathy Map
Personas
Journey Map
Service Blueprint

IDEATION

Storyboarding
Speed Dating
Value-Effort Matrix
Prototyping
Design Workshop

DESIGN

Sitemap
User Flow
Wireframes
Usability Testing
Animation
Design System

PROBLEM SPACE

It's tough to feel confident as a teenager.

Adolescence is a difficult period of time when teenagers navigate where they fit in socially. Style is a way of easily conveying one's personality and social identity. Teenagers heavily rely on validation from friends to ensure that they purchase the right styles. However, peers don't always encourage exploration, and the sheer amount of clothes to sift through can easily lead to cognitive overload and burnout.

How might we empower teenagers to feel confident in their style decisions?

Can we connect online and in-store shopping for Gen Z?

Our clients requested that our solution was omni-channel: a connected and holistic experience across platforms. This holds particular value in the retail space, where it has been linked to increased sales and brand loyalty, especially for Gen Z.

SOLUTION

FindMyStyle: an omni-channel style discovery experience that brings personalized style data from online shopping in-store.

FindMyStyle is a product-service ecosystem that connects multiple channels. A user's journey begins online, where they create a guided inspiration board that reflects their style personality and receive AI-generated clothing recommendations.​ In-store, users can partake in AR-based wayfinding to recommended items and QR-code price tag scanning that enables shoppers to save items for later online, further informing the recommendation algorithm.

See the Magic of FindMyStyle.

Olivia is going on a date but can't find anything to wear! Check out how FindMyStyle works from a teenager's point of view.

ONLINE

Easy discoverability within AEO's existing website.

FindMyStyle lives within American Eagle's website, enabling discoverability while shopping online. As a brief onboarding experience, we give an overview of how FindMyStyle works so that users know what to expect.

Represent your personality through a guided inspiration board.

FindMyStyle's greatest focus is an inspiration board of locations, images, colors, music, patterns, and adjectives that allow teenagers to construct a digital capsule of their personality. Rather than make FindMyStyle entirely about clothes, we wanted to capture aspects of one's personality that can be communicated through style.

An accessible asset library allows FindMyStyle to be flexible & exploratory.

We sought to communicate the exploratory and dynamic nature of style discovery. Thus, after adding elements from each category, users can make final edits to their board from a library of media assets. The board's ever-changing layout and fun dragging interaction keep the experience flexible, playful, and exploratory— much like the experience of being a teenager.

ML-generated recommendations create a personalized experience.

A backend machine learning algorithm recommends items based on users' inspiration board. To get a better idea of how to pair individual articles, teens can toggle between item and outfit view.

IN-STORE

Recommendations at your fingertips.

In-store, shoppers can see sale items, clothes from their inspiration board, and other recommendations via FindMyStyle's mobile assistant.

New QR-code tag scanning further informs the ML algorithm.

QR code-equipped tags allow users to scan items to view complete outfits or save items for later. User-chosen items further inform the ML algorithm for each individual shopper, increasing style accuracy.

BACKEND

FindMyStyle is powered by a Machine Learning algorithm that learns users' individual preferences over time.

As users add to their inspiration board, their preferences are added to a query, which filters items from AEO's database to create recommendations. Over time, multiple queries with weights are added to another dataset used in supervised learning to give better recommendations. Stylists at AEO are currently building a dataset of outfits to train a neural network to recommend outfits on its own over time.

New in-store RFID technology enables FindMyStyle's mobile wayfinding assistant.

RFID sensors are installed on all clothing items in AEO. An RFID reader helps AEO track each item's location. A central hub connects items with shoppers by calculating the distance between a user and an item via a phone's bluetooth beacon and accelerometer, and updating wayfinding in FindMyStyle accordingly.

Vector characters courtesy of unDraw.co

WHAT I DID

What I contributed to the project

As part of a team of 5, I served as the Research Lead and a Product Designer. Here are some of my most notable contributions:

  • Defining research plans and recruiting participants
  • Conducting five user interviews and two in-store contextual inquiries
  • Polishing artifacts, including empathy maps and our final, hi-fi service blueprint/customer journey map
  • Leading a design workshop to ideate possible solutions
  • Storyboarding 5+ ideas and conducting 10 speed dating sessions with teenagers
  • Owned lo- to high-fidelity prototyping of FindMyStyle's online inspiration board interface
  • Created style guide and design system used across final deliverables
  • Directed, filmed, and edited final concept video in Final Cut Pro
  • Designed final project website and built in Webflow

OUR PROCESS

GENERATIVE RESEARCH

After collecting insights from 250+ individuals, we created an affinity diagram to extract common themes.

Generative research methods included surveys of 230+ individuals, 13 customer & associate interviews, 9 online shopping think alouds, & 3 in-store shop alongs (contextual inquiries). With 1000+ notes, we created an affinity diagram over the course of 6 days.

A service blueprint helped us identify gaps between online and in-store shopping.

We modeled our affinity diagram insights to see areas of opportunity in our problem space. A hybrid service blueprint and customer journey map allowed us to see underserved points in the shopping experience, and a data gap between online and in-store shopping.

→ INSIGHT #1

Gen Z-ers have created workarounds to make the online shopping experience more social.

Gen Z-ers send screenshots of different Instagram posts or images to each other for feedback in an effort to make online shopping a more social experience, indicating a desire to bring certain aspects of in-store shopping online. Users seek opinions from others while shopping online and in-store, and create workarounds to experience "real-time" shopping with friends.

→ INSIGHT #2

Teenagers passively collect style inspiration from their everyday lives.

Teenagers collect style inspiration from social media, their environment, influencers, and friends. However, this behavior is gradual and passive, and this style information is difficult to translate into actionable purchasing decisions.

→ INSIGHT #3

Data is siloed between online and in-store shopping experiences.

Data is barely used in-store, and is not exchanged between online and in-store channels. The same user is essentially a different customer when s/he shops online vs. in-store.

IDEATION

We speed dated 38 storyboards with 15+ individuals to validate needs.

We created 38 rough ideas stemming from our insights in an ideation session. Through storyboarding and speed dating, we hoped to uncover thoughts and behaviors related to these solutions that hadn't been unearthed in our research phase. A few examples are below: 

PROTOTYPING

A value-effort matrix informed lo-fi experience prototyping.

We mapped out our most well-received ideas on a value-effort matrix. This exercise informed early-stage prototyping of several ideas, including a 3D body scanner, online collaborative outfit and inspiration board creation, and in-store AR navigation.

→ PROTOTYPE 01

Inspiration board creation & AI-based outfit suggestions

Idea: Users create an "inspiration board" consisting of different images unrelated to clothes. A backend algorithm analyzes colors and patterns in the images and produces clothing recommendations.

Result: Receiving outfit recommendations from an inspiration board of images was fun and engaging. "Making an inspiration board of images is easier than making an inspiration board of clothes."

→ PROTOTYPE 02

In-store AR navigation

Idea: Users can like or dislike items, see reviews, and see recommendations from friends and influencers in augmented reality while shopping in-store.

Result: Users were intrigued by the implementation of AR, but were not interested in seeing recommendations from friends or influencers. "Seeing items that my friends like would dissuade me from purchasing them. I don't want to end up with the same outfit as my friends." 

ITERATIVE DESIGN

Low- and medium-fidelity wireframes helped us fail fast as we continued to refine FindMyStyle.

We moved forward with two of our most successful experience prototypes: inspiration boards & in-store navigation, connecting them in one holistic experience. The final 4 sprints of our project were dedicated to fast rounds of user testing, insights, and iteration that ultimately led us to our final design.

INSIGHT → ITERATION

Add anticipation by separating recommendations from the inspiration board.

Insight: Initial wireframes displayed categories, the inspiration board, and recommendations on one screen. Not only did this overwhelm users, but testers lamented that this made the experience feel more serious and strategic. "Showing me recommendations while I complete the inspiration board makes me feel like I'm being judged."

Improvement: Move recommendations to another screen that users can access after completing their inspiration board. "I can't wait to complete the inspiration board. I'm excited to see what the site recommends!"

INSIGHT → ITERATION

Make the layout exploratory and flexible.

Insight: FindMyStyle's initial layout was structured and predetermined— it felt too rigid for teenagers, who are in a time of flux and change.

Improvement: Mirror the ever-changing, exploratory nature of being a teenager through an artistic design that changes each time a user adds an element.

INSIGHT → ITERATION

Give the perfect amount structure through a guided experience.

Insight: Iteration I was a fully free asset library— users felt overwhelmed didn't know what to do with the items. In later iterations, we experimented with a structured quiz, but this experience lacked uniqueness and felt too rigid.

Improvement: Reach a happy medium through a guided inspiration board experience.

INSIGHT → ITERATION

Suggest alternatives if users dislike a recommendation.

Insight: Initially, if users disliked an item, they would be met with a blurred out view of the item that would persist with an undo button. "Blurring out dislikes doesn't help me. If I don't like any of these suggestions, the entire screen could become a giant blur."

Improvement: Confirm that users dislike an item prior to removing dislikes from the screen.

EVALUATIVE RESEARCH

25+ usability tests of 5 iterations of FindMyStyle informed our final design.

→ INSIGHT #1

Teenagers won't replace traditional social channels with an AEO-exclusive communication channel.

Early iterations of FindMyStyle had chat and share components. These continued to fail during user testing. Card sorting taught us that although Gen Z-ers want to bring social aspects of shopping online, an AEO-exclusive means of communication won't substitute iMessage, Instagram, or Snapchat.

→ INSIGHT #2

Online shopping is exploratory, whereas in-store shopping is action-oriented.

Users want to see different pieces of information online versus in-store. In-store, users value budgeting, and thus want to compare prices quickly and easily. Online shopping by default facilitates style exploration, as it is non-committal.

DESIGN DECISIONS

1. Create a theme by choosing a location

Action: To create an engaging experience from inception, users are met with an element of delight as a location polaroid generates the inspiration board’s background.

Rationale: Giving one's inspiration board a theme makes it feel more holistic and connected. This also encourages users to create a board each season, or as their preferences change.

2. Fabric swatch image recognition

Action: Users may upload their own content to their inspiration board, including fabric swatches and images. These additions are processed by backend image recognition technology to further enhance recommendations.

Rationale: We sought to balance style with personality. Making FindMyStyle too style-focused reduces playfulness, whereas removing all elements of style reduces trust in the system. Allowing users to capture a swatch from their favorite outfit builds trust and makes it a more personalized experience.

3. Outfit & item view

Action: Present recommendations in both item and outfit view.

Rationale: Shoppers spend a lot of mental energy trying to envision items in their current wardrobe while shopping. Allowing items to be viewed in outfit mode enhances recall, helping users visualize how individual pieces may look with similar clothes in their own closets.

4. Multiple options for in-store navigation

Action: Present users with multiple modes of navigation in-store.

Rationale: Through observational research and user testing, we learned that most users hold their phone with the camera facing the ground while shopping as it's difficult to hold up while carrying items. Whereas an AR view is ideal for users who just entered the store, floor plan navigation is more useful for shoppers holding several items.

5. QR code scanning

Action: Allow users to save for later with QR-equipped tags.

Rationale: QR tags make the FindMyStyle experience omni-channel, connecting users' in-store experience with online shopping. This addresses the lack of data collected in-store identified in our service blueprint.

STYLE GUIDE

1. Color Palette

2. Iconography

MEASURING OUR SUCCESS

We tested the final version of our prototype with 8 teenagers who shop at American Eagle.

To measure the success of FindMyStyle, in addition to the 25 user tests we'd completed over the summer, we conducted one final round of testing with 8 teenagers. Across the board, we heard that the experience was fun, unique, and possessed a "cool" factor that differentiated AEO from its competitors.

REFLECTION

Integrating emerging tech into a solution doesn't necessarily make it better.

Our clients were from American Eagle's Digital Innovation team and encouraged us to capitalize on emerging tech. As we experimented with an AR-first solution, however, we found that slapping emerging tech onto an interface doesn't necessarily make it better— it's best used in small doses where it can deliver added value to users.

Scope is essential to a project's success.

The scope at the beginning of our project was huge— we were basically given free rein to explore any facet of shopping. With such a large problem space, however, it took us several months to narrow down our scope. In retrospect, I wish that our scope had been narrowed from the get-go. Deciding which problem to solve was one of the most challenging parts of the project! 

Ask for feedback early and often.

We were grateful enough to have faculty advisors throughout the duration of our capstone. Most of their feedback was concentrated in the final weeks of the project, with deadlines quickly approaching. In hindsight, I wish that we had been more forthcoming about asking for feedback from our advisors to avoid last-minute changes.

WANT TO LEARN EVEN MORE?

We have a product website that dives into greater depth about our research phase, tech stack, and future roadmap. Check it out if you just can't get enough of teenage fashion!

FINDMYSTYLE WEBSITE
NEXT PROJECT >
OVERVIEWPROBLEM SPACESOLUTIONBACKENDWHAT I DIDGENERATIVE RESEARCHIDEATION & PROTOTYPINGITERATIVE DESIGNEVALUATIVE RESEARCHDESIGN DECISIONSSTYLE GUIDEMEASURING SUCCESSREFLECTION

"Let the beauty of what you love be what you do." –Rumi

© Molly Vierhile 2019