Friends NYC is a store located in Brooklyn, NY. They sell everything from vintage clothing and accessories to candles, books, and puzzles. Friends is a hole-in-the-wall treasure trove of cool finds, founded and operated by two best friends, Mary Meyer & Emma Kadar-Penner. In addition to thrifting cool items, they strive to create positive social change through charitable giving and event hosting.
Sign above the entrance to Friends physical location in Brooklyn
Retail stores like Friends were impacted especially hard by the COVID-19 pandemic. Unable to open their physical location, Friends was forced to conduct 100% of its business online. With their livelihood on the line, they quickly found that their online store suffered from low customer conversion and lacked the character that made their physical location unique.
Friends brought me on as their lead digital designer. I worked to understand their customers and identify potential issues within their users' experience, as well as design and validate potential solutions.
As the sole user experience designer, I also coached stakeholders and team members in the value of user-centered design, helping them to avoid falling into patterns of bias and ineffective design trends.
We aimed to create an experience in which customers enjoy shopping online as much as they do in person, easily find products that interested them, and understand the ethos of Friends.
Additionally, we worked to increase online sales and emphasize the cultural role and social movement of the store.
While qualitative data is usually preferred, it can also be expensive. With cost in mind, my first suggestion was to look at the site’s analytics to understand how customers were using it.
Desktop vs. Mobile
The first metric was simple. Are users accessing from desktop or mobile? 70% of sessions were on mobile and only 30% were on a desktop. This emphasizes the importance of a fully optimized mobile site as this is where most customers would encounter it.
Desktop vs. mobile sessions
Page data for pages on friendsnyc.com
This said, 30% of customers accessing via desktop is not insignificant. It turns out the “promotion” funnel - which desperately needed some visual treatment - was gathering significantly more clicks on mobile (219) than desktop (18) - indicating that the banner design was not as effective on desktop.
Additionally, a slightly higher bounce rate on the home page indicated that users might not be engaged by the content here. Since the typical user flow was to click on the promotion banner, I proposed that we could drive more traffic into the store by updating this feature.
I quickly donned my visual designer hat and had a little fun updating the promotion pop-up.
In the current design:
Current promotion banner on mobile
I proposed the following updates:
Proposed promotion banners for mobile and desktop
The team thought the promotional copy needed to be more prominent. My design emphasizes the timer as the visual stimulus, which creates a sense of curiosity and urgency, triggering greater interest in the promotion than the copy.
I played around with this idea and it turns out they were right. The promotional copy provides context to this colorful box on the user’s screen. It’s important that this context be clear, otherwise, users will close it rather than clicking through.
I made the copy bigger and added a background to increase the contrast of the timer, which connected it to the button - affirming the relationship between the countdown and the button.
Final promotion banners for mobile and desktop
I also suggested that we make the button copy more specific. Clarity of the outcome of the interaction (i.e. “Shop Clearance”, or “Shop Vintage Clothing”) would result in additional clicks. The user is more likely to click something if they know exactly what is going to happen.
The analytics indicated that users were browsing the store by “Shop All”, “Clearance”, or “Sale”. Based on a slightly higher bounce rate from these pages, I made the following assumptions:
Upon exploring the store first-hand, I hypothesized that the information architecture was inhibiting users from finding what they were looking for.
Simply put, the navigation was confusing.
To present a navigation that matched the mental model of our users, I needed to understand how they would group the products and content on the site. Cue the card sort study!
I opted for an open sort study to avoid influencing users of certain card groupings.
What: 45 cards - listing the names of site pages and menu items
Who: Past customers and online shoppers unfamiliar the Friends NYC website
How: Participants were asked to sort all cards into groups, naming the groups as they went
18 participants completed the study out of 49 who started it. I attribute this low completion rate to the nature of open sorting.
A few participants even commented that they “could not figure it out”, or that “the naming functions [were] confusing”.
A closed sort may have resulted in more completed sessions, however, I stand by the value of not influencing groups by predetermining them.
A closed sort could be done in the future to further refine the data we received.
Dendrogram showing how cards were grouped by participants
The study yielded the dendrogram above, which shows the hierarchical relationship between cards. The content seemed to fall into 7 groups, which provided the following insights:
Physical Store / Culture indicates a mental separation of these tasks from online shopping. By separating these items we can reduce cognitive load and highlight the cultural aspects of the store.
Homegoods seemed to contain a few sub-groups. There are the actual homegoods, health & wellness products, and gifts. These are different enough to be shown separately.
The team loved the “gifts” section insight and ended up spinning an entire section of the physical store based on this!
“Sort By” is not a group of pages but rather methods by which users can view content. This said, while “$20 or less” and “new” show how users might filter products, “Vintage”, “Brands”, and “Sale” are categories of products and should have applicable sections within the store.
Clothing / Accessories / Jewelry all validate how these items are currently organized. Users can easily identify products that belong within these sections.
I also suggested that we update “Return Policy” to “Support / Returns” in the footer as it sounds more friendly and supportive, which could help relieve stress when a customer needed help.
With this data, I developed the site map:
The stakeholders found tremendous value in this process and agreed that this update would make it easier for users to find what they were looking for.
Friends is a cool place. The physical store radiates character and trendiness. The online store felt more like a Shopify template. Mary and Emma expressed to me that they wanted the site to be more original and match the energy and character of the brick and mortar store.
Based on the analytics, we also knew that by engaging users with a delightful experience, we could increase the time spent on the site, decrease session bounces, and increase completed transactions. Win win!
Typically, I would conduct user research at this point. However, with the revised site map completed - a quick visual treatment would enable us to validate these ideas while gathering qualitative data.
With limited resources it was important to invest wisely and make the most out of each step of the process.
Home page
Text dropdown
Image dropdown
Vintage apparel page
Notable features and improvements:
Two-level Navigation
Based on the revised information architecture, we needed a way to divide the site into 2 sides - Shopping and Culture. I proposed a navigation with 2 levels:
Menu Hover Interactions
The navigation menu would apply hover interactions to display the content within each section, in the form of either a dropdown menu or a gallery of products. This would provide additional context to the navigation while immediately engaging users with products.
Iconography
Icons add flavor and visual appeal while increasing comprehension and reducing the cognitive load of the user. In our case, a hand-drawn aesthetic would match the vibe sought by the stakeholders.
Filtering Options
The ability to sort products (e.g. new arrivals) and filter by price would help the users quickly and easily find items that interested them.
Section Hero Images
The current site featured a hero image section on the home page, however, the sub-pages showed only a title and description. I theorized that adding images to these pages would provide additional context and define the framework within which we wanted customers to shop these products.
Image dropdown
Current section headings and sub-menu
Before proceeding with too much visual design, it was important to identify which pages were the most traveled and would have the largest impact on the user’s experience.
As with any e-commerce project, I immediately questioned the check-out flow, but was delighted to find that the experience here was excellent.
This was corroborated by the analytics, which showed significantly less bounce from the checkout flow than the product discovery flow.
It seemed that if users were able to find something they liked, they would rarely abandon the checkout.
The analytics indicated high traffic on the landing page and product discovery flow, so we agreed to focus our efforts on those areas of the experience.
Home page
Text dropdown
Apparel page
Vintage apparel page
Scroll state showing how the menu will stick to the header
.png)
Before testing these designs with users, I presented them to the stakeholders and received the following feedback:
I also suggested a small visual update:
I also decided to add the product page to the user flows as this was a crucial step of the user’s journey once they were interested in a product.
Home page
Text dropdown
Apparel page
Vintage apparel page
Product page
Product page with quantity option
Since the majority of users were accessing the site via mobile, I created mobile versions as well.
Home page
Home page variation
Menu
Expanded menu
Home page
Home page variation
Menu
Expanded menu
Apparel page
Apparel page with catagories
Footer (apparel page)
Filtering options
Apparel page
Apparel page with catagories
Footer (apparel page)
Filtering options
Product Page
Product page - scroll
Product with quantity option
Product scoll - fixed header
Product Page
Product page - scroll
Product with quantity option
Product scoll - fixed header
To validate the current design on a budget, I ran a guerrilla usability test. By sacrificing target users for a cost-friendly approach, we got fresh eyes on our product to identify any obvious usability issues.
I went to a local consignment store (where people are familiar with this type of shopping experience) and asked a few people to take a look at the design, specifically investigating the following:
Outcome: Everyone identified it as an online store. No one, however, had anything to say about “who” they were. When prompted on who might run the store, I received answers like “someone from New York City”.
It was apparent that we were not clearly conveying the story of Friends and what they stood for. Thus, it was important to add some context to the home page.
Update: Add context to the home page that tells the story of Friends. Specifically, sections for “About”, “The Friends Movement”, and a section about their Charitable giving.
The idea for a charitable giving section inspired a filter option to sort by products made by certain communities - such as Black-owned, Women-owned, or made in NYC.
This would enable customers to make a positive impact by deliberately shopping for products that supported these communities!
Outcome: Not a single person noticed this feature. Some said “I didn’t know to look there” when prompted about the Culture page. A few expressed that having 2 menus was confusing and seemed unnecessary to them.
It appeared that this idea was a failure. That’s why we do these things.
Update: Use a single menu, listing “Culture” as an option within the primary navigation. This layout compliments the last update - adding cultural content to the home page.
Home page (1)
Home page (2)
Home page (3)
Home page (4)
Home page (1)
Home page (2)
Home page (3)
Home page (4)
Home page (5)
Home page (6)
Menu
Menu - expanded
Home page (5)
Home page (6)
Menu
Menu - expanded
Filter options
Filtering options - selected
Product page
Product page - scroll
Filter options
Filtering options - selected
Product page
Product page - scroll
With a viable design that met the needs of our users and stakeholders, I developed a prototype.
I conducted a study with the goal of validating the design, identifying any usability problems, and gathering additional qualitative data about our users behavior and shopping habits. We recruited 4 participants through a screener survey distributed among the store’s network of past clients.
Our target participants met the following criteria:
Remote interviews were conducted with each participant, in which they were prompted about their general online shopping habits and asked to complete the following task within the prototype:
You are planning to attend a vintage party this weekend and want to buy something to wear. You are a size S and would like the product to be "Made in NYC". Use the application to find something to wear.
The majority of users are accessing the site via email marketing, meaning they land on specific product pages rather than the home page.
This amplifies the need to include breadcrumbs for the user to orient themselves, as well as options to explore similar products from the product page.
Participants also noted that they are interested in seeing “Goes Well With” or “Customers Also Shopped” on the product page. These options provide similar items consistent with the user’s interest, in addition to social validation of what other users have purchased.
Update: Add breadcrumbs and similar products to the product page.
All 4 participants indicated that they prefer to see products immediately on the home page. Their behavior supported this, as none of them read any of the text and 3 of 4 didn’t scroll to the bottom of the page.
Even in a test session in which they were being asked to explore the page, they were not engaged enough to make it to the bottom.
Update: Follow the hero section with related products and replace blocks of text with a looping video that expresses the “vibe” of the store.
In 3 of the 4 sessions, users asked about a timeline of upcoming events.
Friends hosts in-person and virtual events each month, information on which would be located in the “Culture” section of the site.
The test sessions made it clear that showing event information on the home page would accomplish a few things:
Update: Add an events section to the home page.
"I am coming here to shop, but am delighted to learn that they are social justice warriors"
- Kim (Participant #1)
"I am more likely to buy something when I know the money goes to someone who does good for people" - Stephanie (Participant #3)
Based on participant testimonies, this section provides both experiential and financial value.
This said, lack of a clear action for the user to take resulted in no action from the user. Apart from expressing the philanthropic efforts of the store, the goal of this section is for users to shop based on community (e.g. “Shop Black-Owned Brands”) as this would benefit both the subject community and the store.
Update: consolidate the “Charity” sections into a single “give back” section, which could collapse to a carousel of panels on mobile.
Redesign of philanthropy section (desktop)
The filtering options were accessed and used by 3 of the 4 participants with no issues, who all commented that this feature felt natural and met their expectations. The 4th stated that she rarely uses this feature on other sites.
One participant mentioned that “shuffle is a cool idea [they] had never seen before”, saying that she sometimes experiences “analysis paralysis” and liked the idea of being shown random items to shake up her shopping routine.
Two usability problems were also identified:
During the interview, I prompted test participants about the use of a “quick view” pop-up when a product was clicked. All 4 participants agreed that they find this functionality useful because it preserves their scroll position and gives them quick access to additional images, which helps them make a quick decision about the product.
Although it seemed obvious to include this feature, I discovered some interesting research on the topic that said otherwise.
Baymard Institute, an independent web UX research institute, had conducted in-depth research on this exact function and concluded that
“quick view features cause severe usability issues - to the extent where sites should generally avoid using [them] altogether” (Holst, 2015).
They go on to explain that quick views act as a band-aid over “deeper rooted design issues with a site’s product listing pages” (Holst, 2015).
Additionally, a quick view function can force the browser to load content twice, which could slow the performance and negatively impact the user’s experience. In the worst case, users can actually mistake the quick view for the full product page, causing them to miss important information that could help make the sale.
Based on this research, I believed the desire for this feature among users to be born from the lack of information on the product listing itself. It’s possible users were also primed to want this feature simply by me asking them about it.
I decided to solve this problem by focussing on the product listing itself.
I first identified the features afforded by a quickview pop up:
I pulled out my whiteboard and sketched a product panel that included these features.
Happy with my design, I created a digital version:
I would have liked to validate and iterate on this design separately from the entire website, however the project timeline restricted my ability to test this further.
I was starting to think I had bitten off a little more than I could chew and the scope of our project was too big.
Regardless, a deadline is a deadline. The show must go on.
By watching users interact with the design, I notice a few additional things that I thought would improve the user’s experience:
All usability and functionality problems have been addressed, resulting in an experience that ensures customers quickly find items they are interested in and understand the ethos of the store and its founders; all while providing the stakeholders with the tools necessary to engage customers personally and create a connection with them that drives conversions and increases online sales.
With our ideas validated, I created a final set of mobile and desktop mock-ups.
Home page
Home page scrolled
.png)
Clothing page
Product page
Home page
Home page (1)
Home page (2)
Home page (3)
.png)
.png)
.png)
Menu
Menu - expanded
Clothing page
Clothing page + categories
.png)
.png)
Menu
Menu - expanded
Clothing page
Clothing page + categories
Filter options
Product page
Product page (2)
Product page (3)
.png)
Filter options
Product page
Product page (2)
Product page (3)
With the design approved by the stakeholders, I began the process of handing everything off to our developer.
I was struck by the complexity of this process, as most of my projects in the past had ended once we had validated the design. It was crucial for me to provide the necessary resources for the development team to quickly implement these ideas so that we could continue to test and iterate on them.
I created a Style Guide to outline the guidelines for use of color, typography, and interface elements. I also provided an outline of product listing variations that could be used in different contexts.
The final mockups for the mobile and desktop experience were shared as Figma files rather than images, which enabled the team to inspect the CSS of specific elements, reducing friction in their workflow and increasing the speed of their process.
In this project, we set out to create a unique shopping experience that increased online sales and emphasized that Friends is more than a store.
Based on the feedback from our test participants, we accomplished this task. All four participants expressed a sense of delight from interacting with the site and confirmed that it felt congruent with the in-store shopping experience of Friends.
Additionally, the store-owners expressed a sense of pride in the site.
“We are thrilled with the results of our work with Connor and feel confident our new-and improved website will be a major success”
Although the user is at the center of my process, it is always rewarding to have your efforts validated by the stakeholders.
While we did struggle at first to navigate this task, I am confident that the final designs have accomplished this.
As indicated in our study, certain aspects of the Friends “movement” (events, charity work, etc.) needed to be more clearly expressed. Our final design finds a happy medium between the store and culture, ensuring all new customers are aware of all the amazing work being done by these social warriors.
A happy user usually means a happy bottom line. However, we cannot validate the impact of the updated design until it has been implemented.
Once the updated site is live, we will monitor metrics for revenue, bounce rate, and page value to determine if the work we have done is financially beneficial.
The design process is always ongoing. In our case, there a few clear next steps:
Working with Friends over the last few months has been an amazing experience. I have learned so much about myself as a designer and the real world application of user experience design. Let’s recap:
First, it is important to set realistic expectations for project scope.
It can sometimes be easy for me to bite off more than I can chew. Setting unrealistic timelines and expectations can make the process less effective, especially when working alone. Design is most effective when it is focused and direct. Involving too many variables can “muddy the water” and make results unclear.
In this project, we first sought to improve the information architecture of the website. This process was coordinated and deliberate, resulting is an efficient evaluation of the problem and execution of the solution.
As the project scope grew into redesigning entire user flows across multiple devices, the process became very complicated. User feedback became less useful as we amended so many different aspects of the experience and updates to the design were cumbersome, requiring excessive amounts of time to complete.
Second, never put the cart before the horse (design before the research).
With actual financial implications, I made budget an important aspect of my process, opting to use Google Analytics data and stakeholder input to identify the problems rather than using real user data.
While this data did help me to identify problems of usability and site structure, I believe my design process would have been more successful if I had begun collecting qualitative data earlier. On future projects, I plan to spend more time understanding the problem and less time trying to solve it. Before you climb a ladder, make sure it’s leaning against the right wall.
Lastly, working in a bubble can be challenging.
As a solo designer, I had to play my own devils advocate and question every decision I made. I sometimes found myself falling subject to confirmation bias or being influenced by stakeholders. Working alone, it can be challenging to keep yourself in check and hold an open perspective towards the design. To overcome this, I had to stay aware of when I was becoming too attached to certain ideas and evaluate them empirically.
In conclusion, I am honored to have had the opportunity to work with Friends. This project was as rewarding as it was challenging and I feel that I have grown a great deal through it. Not only as a designer but as a researcher, a communicator, and a project manager. I look forward to future work with these amazing people.
Product List Usability: Avoid "Quick View" Overlays
Christian Holst, 2015.
