BACKGROUND
Abercrombie & Fitch is an American clothing company focusing on casual clothing for young adults, with shipping available to most countries worldwide. Their clothing and accessories have a trendy, high-quality feel that matches their elevated prices.
My two teammates and I were tasked with analyzing and restructuring the information architecture of the Abercrombie & Fitch website. As such, I worked with my team on a semester-long study to tackle the following problem:
How can the existing information architecture of the Abercrombie & Fitch website be restructured to better serve their customers?
My team specifically focused on restructuring the Women's section due to the sheer amount of clothing items available in this section, and any test results could be applicable to Men's and Children's sections. Since Abercrombie and Fitch is a popular global brand, tasks should be universally successful and easy for users of any origin and background. These include but are not limited to:
– Searching for clothing items that match the user's needs
– Discovering all types and categories of clothing that Abercrombie offers
– Creating or signing into an Abercrombie account
After gathering and interpreting the data gathered through testing, my team and I presented the final deliverable in the form of an interactive medium-fidelity prototype.
methodology
These user testing methods were the most significant to my data collection and analyses:
– Card Sorting
– Tree Testing
– Wireframing and Prototyping
Beyond the activities and tests mentioned above, I was also responsible for working along my two teammates from the Information Architecture course. While we shared a fair and equal proportion of the work, I often took the initiative to schedule calls and meetings with my team. Scheduling meetings outside of class time was especially helpful with time management regarding practicing our presentations and meeting deadlines for deliverables.
AFFINITY MAPPING
We started our study with affinity mappings to determine the targeted user groups using the A&F website. After arranging post-its containing traits of potential A&F users, we ultimately identified and agreed on the following groups:
– Person of color (POC)
– Abercrombie & Fitch loyal customer
– International online shopper
I chose POC as my user group as I personally identify with this group and can better align my tests and analyses to target them. Moving forward, I also recruited participants who were POC to perform my tests.
Personas
Each of the three user groups determined in the affinity mapping was used to create a persona. I interviewed two people identifying as a person of color to build my persona. I asked them questions regarding their basic information, to their values and pain points when navigating through online fashion sites.
USER TEST: CARD SORTING
The first test my team and I conducted was an Open Card Sort. I aimed to determine how users would sort clothing items in the Women's section to create new categories that may differ from the original categories on the A&F site. All these findings determine if clothing categories need to be renamed and reorganized, and whether the A&F navigation menu needs to be restructured.
A total of 16 participants were tasked with sorting various clothing items into new categories of their own creation. I recruited four participants, where I was a moderator for two participants. A sample of a participant's categories is shown below.
After evaluating all card sort results, there were a few new categories that participants had similarly created. These include "Dresses & Sets" instead of "Dresses & Jumpsuits", and separating "Intimates & Sleepwear" into two distinct categories.
In addition, most participants did not sort items into the original "Matches & Sets" category. Particularly, one of my participants in a moderated test mentioned that they "didn't quite know what sets were" and questioned whether they strictly involved "tops with bottoms, or dresses with shoes".
FINAL sitemap
Using the findings from our open card sort and discussing as a team, we agreed on the following sitemap for the Abercrombie & Fitch website. "Sweater Dresses", which is marked in green under "Warm Layers", was a modification of the sitemap after performing future tests (see User Test: Tree Testing).
Specific changes made within the Women's section are listed below:
Warm Layers becomes a new category that includes clothing items suitable for cold weather
Intimates and Sleepwear are separated into two distinct categories
Active Sets are now under both Matching Sets and Active
Warm clothing items, such as Sweaters and Knits, are now under Tops. Fashion Sets are also available under Tops and Bottoms.
User flow
As a precursor to wireframing and prototyping, I used FigJam to create user flows which helped me focus the necessary path of actions to complete a task, rather than focusing on the visual designs. The following is a user flow demonstrating the sign-up process to join the myAbercrombie rewards program. This visualization indeed emphasizes the amount of personal information that a user needs to disclose to the site, but as this process is rather familiar and universal among other platforms, it is predictable and easy to follow.
USER TEST: TREE TESTING
After completing the A&F sitemap, my team and I conducted moderated and unmoderated tree tests on a total of 8 participants using Optimal Workshop. I sought to determine if the clothing categories from the sitemap made sense, both in name and organization, and if users could navigate to the items they had in mind.
I specifically had a concern with Sweater Dresses being overwhelmed among all other clothing categories within "Dresses" and wondered if they could be more easily discovered. Thus, I wrote a task that asked users to find something suitable for cold weather, as they are going to an outdoor event requiring them to wear something dressy. We expected users to find Sweater Dresses regardless of their familiarity with the A&F site.
The task overall had a low success rate of 13%. Even though the participants I tested saw "Sweater Dresses" as a subcategory under "Dresses & jumpsuits", the results showed that participants did not associate "warm dressy clothing" with sweater dresses.
Ultimately, this shows that users' clothing preferences differ for the task provided and do not necessarily indicate a sub-optimal placement or wording of the category. In fact, users intuitively went for "Warm Layers" or "Dresses & Jumpsuits" as their preferred paths, but chose other viable dressy options instead.
With this in mind, my team and I decided that "Sweater Dresses" should be included in both “Warm Layers” and “Dresses” categories to increase its discoverability.
Another key task expected participants to locate "Fashion Sets", where we assigned the following scenario:
"You’re looking for an outfit for a job interview, and don’t have time to search for both a top and bottom separately. How would you find the items you’re looking for?"
However, one of the participants in my moderated tests was confused as to what the category "fashion sets" stood for. They mentioned that "fashion sets don't make sense, it could be more specific like 'formal sets' and 'active sets' to make the style clear".
The results below further highlight that "Fashion Sets" isn't the most intuitive option as users went for other formal one-item clothing options in "Dresses & Jumpsuits". With these results, we decided to make "Fashion Sets" as a subcategory of "Tops" and "Bottoms". Similarly, all other sets under "Matching Sets" are now subcategories of their respective style, i.e. "Active Sets" as a subcategory of "Active".
USER TEST: WIREFRAMING and prototyping
For our final test and deliverable, my team and I created mid-fidelity web and mobile prototypes on Figma based on the results from our tree tests and all other tests collectively. We recruited a total of 6 participants to use these prototypes in moderated testing sessions. Accordingly, I moderated two tests on participants who were People of Color and assigned each of them two tasks to complete.
The following two flows show the web and mobile wireframes involving the following task:
Fall is here and the evenings are getting colder, but not cold enough for a big parka yet. Find an item you could wear in the evenings.
The prototypes were created to closely resemble the current visual design of the Abercrombie & Fitch website on web and mobile. The only changes we applied were in the Women's section, as all listed categories reflect the modifications from our sitemap and user tests.
All six participants were successful in completing the task. Specifically for the mobile prototype, one of my participants found the hamburger menu icon "intuitive and effective". They clicked on the icon immediately after the homepage did not contain the information they were looking for, and they wanted to see all the available contents of the site.
However, my other participant found that the large graphics can be potentially distracting. They mentioned that "items that are larger and graphic-based are quickly noticed", but distracts users from the most effective feature, which in this case is the dropdown menu bar containing all available categories under "Warm Layers".
Yet, my team and I recognized that mobile interfaces can easily look too condensed due to screen size limitations. In addition, as all our participants were successful in completing their task, we decided not to introduce any changes to the prototype.
The following flows are the web and mobile wireframes for the myAbercrombie membership sign up task.
The prototypes were designed to closely resemble generic sign-up interfaces, as the only element that is specific to A&F is the "Join myAbercrombie" tab title in the mobile prototype.
Our participants were all successful in completing this task. In particular, one of my participants mentioned that the prototype "looks exactly like an average sign up window" and thus could intuitively know what to do without reading all the labels.
Due to the high user success and predictability of this task, my team and I agreed to not introduce any changes to the sign-up process.
RECAP: ALL CHANGES
1. Add “Warm Layers” category
2. From Matching Sets, make “Active Sets” “Sleep & Lounge Sets” “Swim Sets” and “Fashion Sets” subcategories within “Active” “Sleepwear” “Swimwear” “Tops” “Bottoms”, respectively
3. Include “Sweater Dresses” in “Dresses” and “Warm Layers”
4. Separate “Intimates and Sleepwear” into “Intimates” and “Sleepwear”
Due to the high user success in other tasks, all other original categories and site structure have been maintained.
Takeaways and next steps
I worked with a variety of qualitative and quantitative methods to evaluate the current information architecture of the Abercrombie and Fitch website. As participants were entirely successful in completing their tasks with our final prototypes, I can verify that our tests and discussions as a team were productive and comprehensive. Moderated tests are especially valuable for gathering qualitative data, whether in the form of user quotes, or observing a user's body language and reactions.
Since many users are global shoppers, it would also be valuable to study the information architecture of A&F's customer service section, and determine if it is comprehensive and intuitive enough to remotely assist users who have varying levels of digital literacy and cultural backgrounds. Our study could also benefit from testing with a greater and broader scope of users beyond the three user groups determined in our affinity mapping. A way to do so is by using platforms like UserTesting, where monetary incentives can be given to global users to take our tests.