-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanf1.html
237 lines (211 loc) · 15.4 KB
/
anf1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>
<body>
<header role="banner" class="header">
<a href="/" rel="home" class="name__container">
<span class="name__intro">my name is</span>
<span class="name">Summer Saleh</span>
</a><!--end name class-->
<nav class="primary-nav" role="navigation">
<ul class="primary-nav__list">
<!-- <li class="primary-nav__item"><a href="https://summersaleh.github.io/#resume" class="primary-nav__link">Resume</a>
</li> -->
<li class="primary-nav__item"><a href="#work" class="primary-nav__link">Work</a>
</li>
</ul><!--end primary-nav__list-->
</nav><!--end primary-nav-->
</header>
<div class="access-container" id="access">
<h1 class="access-title">A&F Outerwear Visual Filters</h1>
<div style="margin: 1rem;">
<h3 class="access-subtitle mb05">Opportunity</h3>
<p class="mb05">Customers who apply filters when shopping for outerwear are more satisfied post-purchase and ultimately spend more than those who don’t, but only a small percent of traffic engages with outerwear filters today.</p>
</div>
<div class="flex-container">
<div class="flex-1">
<h3 class="access-subtitle mb05">Challenge</h3>
<p class="mb05">How might we enhance our filtering experience to encourage engagement and help customers easily find what they’re looking for?</p>
</div>
<div class="flex-2">
<h3 class="access-subtitle mb05">Methodology</h3>
<p class="mb05">Remote, unmoderated, task-based user study + questionnaire</p>
</div>
</div>
<div class="flex-container">
<div class="flex-1">
<h3 class="access-subtitle mb05">Participants</h3>
<p class="mb05">15 current/potential A&F shoppers</p>
<p class="mb05">All participants were recruited via IntelliZoom, the participant community of our user research platform, UserZoom.</p>
</div>
<div class="flex-2">
<h3 class="access-subtitle mb05">Demographics</h3>
<ul class="work-list">
<li>8 female, 7 male</li>
<li>US only</li>
<li>Shops for clothes online at least seasonally</li>
<li>Age 22-29</li>
<li>College educated at a 4-year university (current student or recent graduate)</li>
<li>Shops within the A&F competitive set</li>
</ul>
</div>
</div>
<div style="margin: 1rem;">
<h3 class="access-subtitle mb05">Discovery</h3>
<p class="mb05">In the fall of 2019, Abercrombie introduced a seasonal visual filtering experience on the guys and girls outerwear category pages. This was designed by the marketing design team with no UX input at the time.</p>
<p class="mb05">It was prominently displayed on the top of the page and the experience consisted of four attributes. Color, weight, lining, and features. Each of which contained a set of multi-selectable filters.</p>
<p class="mb05">10% of page traffic that interacted with the filtering experience had a 2x higher revenue per visit and higher CSAT(customer satisfaction scores) than those who did not. That data was pulled from the CX team and the analytics team.</p>
</div>
<h3 class="access-subtitle mb05">Defining the Opportunity</h3>
<div class="flex-container">
<div class="flex-1">
<h4 class="work-copy mb05">Business Impact</h4>
<p class="mb05">Customers who apply filters when shopping for outerwear ultimately spend more than those who don’t; however percent of traffic engaging with the filter is low.
</p>
</div>
<div class="flex-2">
<h4 class="work-copy mb05">Customer Impact</h4>
<p class="mb05">Customers who apply filters when shopping for outerwear are able to more easily find what they are looking for and are ultimately more satisfied with their experience.
</p>
</div>
</div>
<div style="margin: 1rem;">
<h3 class="access-subtitle mb05">Hypothesis</h3>
<p class="mb05">If we help customers understand their outerwear options and easily find what they are looking for then we will achieve higher filter engagement, revenue/visit, and customer satisfaction.</p>
</div>
<div style="margin: 1rem;">
<h3 class="access-subtitle mb05" style="margin-top: 2rem;">Research</h3>
<h4 class="work-copy mb05">Based off data gathered from internal analytics we uncovered:</h4>
<p class="mb05">Color was the most used visual filter, likely because it was the default filter in view upon the page entry.</p>
<p class="mb05">Of the weight filters, mid-weight is the most frequently applied for both genders across all sites; however in EUUK there was higher interest in filtering down to heavyweight.</p>
<p class="mb05">The lining filter was mostly used to narrow results to sherpa-lined items across both genders</p>
<p class="mb05">Feature filter usage was similar across genders with water and down having the highest engagement and recycled fill having the lowest</p>
</div>
<div style="margin: 1rem;">
<h4 class="work-copy mb05">After compiling internal research, I conducted a series of qualitative surveys to understand the customer needs and motivations and to answer the following questions:</h4>
<ul class="indent-list" style="list-style-type: disc;">
<li>What is the customer mindset when shopping for outerwear?</li>
<li>What attributes are most important when shopping for fashion outerwear vs. functional outerwear?</li>
<li>What helps users understand how warm a product will be?</li>
<li>How do users think about warmth vs. weight as product attributes?</li>
</ul>
</div>
<div style="margin: 1rem;">
<h4 class="work-copy mb05">Key Finding:</h4>
<p class="mb05">Most users indicated they start their shopping experience with at least a general idea of what they’re looking for, but not necessarily a specific garment in mind.</p>
<p class="mb05">Users are not likely to approach outerwear shopping with intention to just browse until they find something they like.</p>
<p class="mb05">Shoppers prioritized color, style, and warmth (respectively) for fashion outerwear shopping, and warmth, machine washability, and water resistance for functional outerwear.</p>
<p class="mb05">In the absence of temperature ratings, “material” was the most commonly used term to describe what aspects of a garment best translate to warmth, referring to both exterior fabric and inner lining.</p>
<p class="mb05">Users also rely on product photos, reviews, and technical specs on the product page.</p>
<p class="mb05">Users see warmth and weight as two separate attributes.</p>
<p class="mb05">Most believe the heavier a coat is, the warmer it will be, but they also believe a lightweight or well-insulated material can provide ample warmth.</p>
</div>
<div style="margin: 1rem;">
<h3 class="access-subtitle mb05">Business Goals</h3>
<ul class="indent-list" style="list-style-type: disc;">
<li>Make filters findable and easy to understand and use.</li>
<li>Limit filters to the most useful/important options</li>
<li>Help customers understand the differences in outerwear attributes, like warmth/weight.</li>
<li>Give users a quick way to reset selections or add/remove filters.</li>
</ul>
</div>
<!--Testing 1 -->
<h3 class="access-subtitle mb05" style="margin-top: 2rem;">Testing</h3>
<div class="flex-container">
<h4 class="work-copy mb05">1st Iteration: Filtering Strategy Concepts</h4>
<div class="flex-1">
<p class="mb05">After going over the initial findings and goals with the UX designers and using components available in the company's design system we wanted to test different filtering strategies for user understanding and preference.
</p>
<h4 class="work-copy mb05">Test designs:</h4>
<ul class="indent-list" style="list-style-type: disc;">
<li>Shop by style</li>
<li>Shop by attribute (color, warmth, features)</li>
<li>Shop by functional vs. fashion</li>
</ul>
</div>
<div class="flex-2">
<img class="img-size" src="images/outer/anf1_img1.png">
</div>
</div>
<div style="margin: 1rem;">
<h4 class="work-copy mb05">Key findings</h4>
<p class="mb05">While users were receptive of the ’shop by style’ concept, 73% of participants would prefer to shop by attribute, driven mainly by male shoppers.</p>
<p class="mb05">However, users predict their preferences would change in different scenarios. When shopping for fashion outerwear or if shopping for something specific, they may prefer to shop by style.</p>
<p class="mb05"><span style="font-weight: 600;">Winning design:</span> shop by attribute</p>
<p class="mb05">While ‘shop by style’ or fashion/function seems to be a viable filtering strategy in some use cases, it does not meet the needs of users shopping for functional outerwear, who prioritizes several factors like warmth and technical features over product style.</p>
</div>
<!-- Testing 2 -->
<h3 class="access-subtitle mb05" style="margin-top: 2rem;">Testing</h3>
<div class="flex-container">
<h4 class="work-copy mb05">2nd Iteration: Evaluation</h4>
<div class="flex-1">
<p class="mb05">Once the strategy was narrowed to the shop by attribute approach, I tested design iterations for usability and qualitative feedback.
</p>
<h4 class="work-copy mb05">Test designs:</h4>
<ul class="indent-list" style="list-style-type: disc;">
<li>Tab layout vs. accordion layout</li>
<li>Warmth attribute icons vs. gradient scale vs. checkboxes</li>
<li>Feature icons</li>
</ul>
</div>
<div class="flex-2">
<img class="img-size" src="images/outer/anf2_img2.png">
</div>
</div>
<div style="margin: 1rem;">
<h4 class="work-copy mb05">Key findings</h4>
<p class="mb05">Tab and accordion layouts both tested positively for usability, while preference skewed slightly in favor of tabs.</p>
<p class="mb05">Users favored the gradient warmth scale over icons, noting that the warm hues help communicate the warmth of the product.</p>
<p class="mb05">There was, however, a noteworthy appetite for specified temperature ratings.</p>
<p class="mb05">Users demonstrated an accurate understanding of unlabeled feature icons and had no critical feedback on this tab.</p>
<p class="mb05"><span style="font-weight: 600;">Winning design:</span> tabs with gradient warmth scale</p>
</div>
<div class="flex-container-column" style="margin-top: 2rem;">
<h3 class="access-subtitle mb05">Final Design</h3>
<img class="img-size-long" src="images/outer/anf1_img3.png">
</div>
</div>
<footer class="c-footer" role="contentinfo" id="work">
<div class="l-container">
<ul class="l-grid l-grid--wowee-zowee">
<li class="l-grid__item">
<a href="/anf1" class="c-block c-block--boxed c-block--link">
<h3 class="c-block__title">Abercrombie Outerwear Visual Filters</h3>
<p class="c-block__desc">Tested variations of outerwear visual filters with current/potential A&F shoppers to gain qualitative insight on how users prioritize attributes when shopping for outerwear, and if this changes between fashion/functional outerwear.</p>
</a><!--end c-block-->
</li><!--end l-grid__item-->
<li class="l-grid__item">
<a href="/anf2" class="c-block c-block--boxed c-block--link">
<h3 class="c-block__title">Abercrombie PDP Subcategories</h3>
<p class="c-block__desc">Observe users' behavior as they interact with 5 design variations of subcategories on PDP, collecting qualitative feedback and identifying any points of friction and survey users on understandability, ease of use, perceived values, and overall preference of the design variations.</p>
</a><!--end c-block-->
</li><!--end l-grid__item-->
<!-- <li class="l-grid__item">
<a href="/dating-app-analysis" class="c-block c-block--boxed c-block--link">
<h3 class="c-block__title">Dating Apps Analysis</h3>
<p class="c-block__desc"></p> -->
</a><!--end c-block-->
</li><!--end l-grid__item-->
<li class="l-grid__item">
<a href="/accessibility" class="c-block c-block--boxed c-block--link">
<h3 class="c-block__title">FabFitFun Accessibility Evaluation</h3>
<p class="c-block__desc">This project through Kent State required performing an accessibility evaluation using the three methods that we learned about – automated code inspection, manual code evaluation, and experience walkthrough - as well as reporting the results of your evaluation and providing recommendations.</p>
</a><!--end c-block-->
</li><!--end l-grid__item-->
<li class="l-grid__item">
<a href="/library-architecture" class="c-block c-block--boxed c-block--link">
<h3 class="c-block__title">Taylor Community Library Information Architecture</h3>
<p class="c-block__desc">The Taylor Community Library’s mission is to provide knowledge and information to the users of their site. Their users need to be able to complete all tasks such as: finding the library catalog, information about student reading program times, reserving a meeting room, etc.</p>
</a><!--end c-block-->
</li><!--end l-grid__item-->
</ul><!--end l-grid-->
</div><!--end l-container-->
</footer>
</body>
</html>