PROJECT SCOPE
Agni Atelier is a high-end streetwear brand that partners with celebrities and professional athletes. The site has been increasing in traffic but not in sales. Users often spend a significant time on the site, but rarely make purchases.  The primary focus was on simplifying the Add-to-Cart process.
ROLE
Research, User Flows, Wireframing,
Ideation, UI, Prototyping

PROBLEM SPACE

Agni Atelier's desktop Quick Shop view involved multiple steps.  A pop-up window required users  to scroll for relevant information. The Quick Shop experience did not align with the high-end brand experience. We spoke to repeat customers, as well as first-time visitors. Our research was focused on luxury streetwear shoppers since this is a niche market.

RESEARCH

Users do not want to visit product pages

There are multiple reasons users overwhelmingly do not want to visit product pages.  One concern is that the site will load slowly, particularly on mobile devices and will be time consuming.  Another issue is that users will not go back to the same point in the product list.

50% of visually driven product sites do not have Quick Views

Quick Views enable users to stay on product list pages and make assessments quickly. The goal is to allow users the ability to assess the most important product features without going to the specific product page.

Simplify product variation

Variations displayed separately can confuse and frustrate users if the same product is shown multiple times throughout the site. All style options should be combined into a single item so users can see all choices in one product listing.

Make available sizes visible throughout the site

Surprisingly, 63% of websites do not clearly show available sizes, which are often hidden in dropdown menus. Users need to see if their size is available as quickly as possible, without the need for additional navigation.

QUICK VIEW ON DESKTOP

To simplify the shopping experience on desktops, I included all relevant information on hover. If users are interested in the product, they would be able to see price, color options and sizes before they visit the product page. The product images autoplay, which allows users to view all product images as well while they are hovering.  The user can add to cart directly from this point. 

mobile

Concept A:
When viewing the product list page, users are able to tap the "Quick Shop" button for each item.  By selecting quick shop, a pop-up appears, allowing users to view all product images, select color and size and add to cart.  Users do not have to visit the product page to add to cart, enabling them to save time.

To make it obvious to users that they are in the quick shop page and not the main product page, I added a pop-up window, allowing them to see the product list in the background. Users can then "X" out of quick shop to return to the exact point in the product list view.

Users can also click directly into the product page by clicking on the image.
Feedback:
  • 6 of 10 users first visited the product page.
  • 4 of 10 users first visited the quick shop page.
  • 3 of 10 users thought that selecting quick shop would automatically add the item to cart.
Concept B:
When viewing the product list page, users can swipe on each product to view additional images.  This allows the user to view all product images before they click into the product page.  Colors options are clearly visible for each product.  
Feedback:
  • 6 of 10 users swiped to see more images in product list view. All of those who swiped had a highly favorable view of this feature.
  • 8 of 10 users felt that seeing one product image, price and color options on the main product list page gave enough information to determine their level of interest.
  • This Concept tested higher than Concept A

RESULTS

Top