Men's Luxury Retailer E-Commerce Audit
September 2022 - October 2022
My Role
Product Designer - Interaction Design, Visual Design, Userflows
The Team
Amy Cannon - Project Manager
Shrey Kumar - Developer
Smith Milner - Developer
Hector Rodriguez - Developer
Alexandre Bortolotti - Developer
Project Overview
For over 65 years, our client's name has been synonymous with luxury menswear in Canada. Myself and other team members had partnered with them to bring next generation digital experiences to their clientele. Needing to improve on an already existing digital experience to match their high-end in store experience, I was brought on to help improve the overall UX and introduce new features that aligned with their mission.
context
Enhancing the ecommerce experience for one of Canada's largest luxury retailers.
What did we do?
To achieve their vision of a next generation digital experience, The Client needed a digital platform that could support them today, tomorrow, and for years to come. The team had proposed a new philosophy to modernize their retail architecture with three primary goals: achieve more consistent data, provide a reliable source of truth for key information, and in anticipation of powering multiple interfaces, improve conversion rates across mediums. Collaborating extensively with our developers, PMs, and the client themselves, we had launched a great number of features to the site which helped our clients attain their goals and retain their trust in us.
The challenge
Improving the overall usability and accessibility of the site
the challenge
How do we take an already established brand and help modernize their online e-commerce platform?
Some background information
Since the start of the pandemic, our client had been wanting to enhance their online e-commerce platform in order to stay up-to-date with their competitors. Their main objective had been to increase their online revenue and improve conversion rates. In order for them to reach their goals, the team and I had decided to perform an audit for the key pages (Product Results Page & Product Page). To help us improve the experience of the website, we had utilized Baymard Institute's best e-commerce practices.
Key Objectives
Improve site functionality
Modernize their online e-commerce to surpass their current competitors
Being more inclusive
Wanting to improve on the sites accessibility scores, some content on the site was not very friendly to those who might have any sort of vision impairment.
Project Timeline
image
product results page
Improving the overall usability and accessibility of the site
Utilizing Baymard as a source of truth
To start off this audit, we began by delving deep into the product results and detail pages. Our methodology involved going into the Baymard Institute website which houses over 1000 different guidelines for having a UX friendly e-commerce platform.
Upon our first review of the site utilizing those guidelines, we found numerous usability and accessibility issues with the page. Here are some of the high severity issues as indicated by Baymard's guidelines:
Example audit results (not from the client)
image
Existing issues with the Product Results Page
The Product Results Pages on the site provides a relatively good experience for finding and browsing products, however certain filter functionality and product card visual styling could be improved to create a cleaner page and a more optimal user experience for scanning and narrowing products.
1. Inconsistent product information & layouts
There is a lack of consistency on the results page. Often resulting in product information that is too crowded, and visually inconsistent.
2. Inefficient controls when navigating through product lists
The act of navigating through the results page is behind in some functionalities that many established e-commerce sites already have.
3. Improper product sorting & filtering
Sorting and filtering has somewhat unintended results when customers are trying to narrow down their search options.
Existing issues with the Product Details Page
The Product Details Pages also provides a good experience for learning more about a certain product. However, there are number of issues that do not allow for a smooth browsing experience that can often lead customers to wanting more.
1. Needing better product imagery
The experience of navigating through product images needed to be in improved in terms of browsing and getting more detailed information.
2. Inconsistent product details
Accessibility for some content on the page needed to be improved so that customers can easily find the details they need.
3. Inconsistent cross-selling opportunities
Up-selling sections of the page have been displaying irrelevant products to customers.
PRP - Product information & layout
1. Inconsistent product information & layouts
The issue with product information & layout
The layout of content on the results page could be improved to create a cleaner page and a more optimal user experience for scanning and narrowing products.
Product Information Is Not Conducive to Scanning
Old Design
New Iteration
The product information on the PRP is not conducive to scanning and increases cognitive load due to a lack of visual separation and text hierarchy when trying to scan for critical information like the price.
We suggested that a complete visual refresh of the Product Cards could help visually define product cards to enclose all related information by utilizing space, different font sizes, and colour to break up text blocks to make information easier to scan and digest.
Prices Appear Too Small on Desktop/Mobile
Image Description
Image Description
Prices on the PRP appear too small and can easily become lost within other elements on the page.
It is recommended to always display prices in list items and ensure they are easy to discern by styling the new price to be more prominent than discounts, old prices, and nonessential list item info.
No Indication of Different Colour Options
Image Description
Image Description
Having repeated colour variations throughout the PRP can end up clogging up the results page and will make it harder for customers to find what they need.
We recommended to use colour swatches to indicate the different variations in list items (and a single swatch or text if there’s only one colour).
Product Images With Background Have no Visual Separation on Mobile
Image Description
Image Description
Non-Standard product images with colour-backgrounds have no visual separation on mobile. Images lack padding on 2x2 mobile product list creating extra effort to perceive visual separation.
Adding additional padding in between each product cards allow there to be clear visual separation between the products.
PRP - Product List controls
2. Navigating through Product Lists
The issue with Navigating
Shifting through the results page in its current state has the potential to be very confusing for customers. Certain integral elements and functions to help navigate the page are missing entirely.
PRP has No total results
Image Description
Image Description
There are no indication of how many products are available within the PRP. The total size of the product list is an important indicator for users as it helps them gauge the likeliness of relevant products being in the list.
We decided it was best to show the total number of items in the Product List so that customers are able to easily tell how many products there are to browse from.
PRP utilizes pagination instead of "load more"
Image Description
Image Description
The old PRP had used pagination for introducing more products. Due to the sheer amount of potential results on a page, when an inappropriate product-loading method is used, customers may have difficulty loading more results, and may be overwhelmed by the number of products loading.
We recommended to use a ‘Load More’ button instead of endless scrolling or pagination to improve the UX of this page. It was recommended by Baymard to use "Load More” combined with lazy loading for category-based product lists.
PRP - Filtering & sorting
3. Improper product sorting & filtering
The issue with filtering and sorting
Good sorting and filtering options on an e-commerce website are essential for enhancing the user experience, increasing sales, and staying competitive in the market. They are a key element in helping customers find the right products quickly and efficiently, which can lead to improved customer satisfaction and business success.
“Clear All” Is Not Styled as a Button on Mobile
Old Design
New Iteration
Within the product filter modal on mobile, “Clear All” is not styled clearly as a button. It had the potential of being perceived the same as plain text with no other visual affordance to suggest it is clickable on mobile.
In separate filter interfaces, provide a prominent, sticky ‘Apply Filters’ button, as well as a ‘Clear Filters’ button and way to exit the interface without making any changes. We also wanted to avoid auto submitting filter options as they’re selected.
There was also no sticky “Apply Filters” button on mobile. The process of applying filters is more troublesome when each filter choice was autosubmitted. When filters are applied it isn’t immediately apparent to customers unless they exit the filter interface.
Price Filter Doesn’t Not Have User-Defined Ranges
Image Description
Image Description
For price filtering, customers cannot set a custom price range that might be relevant to them, which they might expect from price filter conventions on other e-commerce sites.
We recommended to allow user-defined price ranges for all numeric filtering values. For numeric filtering values, provide both predefined and user-defined range filters, and allow users to enter only the maximum or minimum value of the numeric range as recommended by Baymard.
zero match Filters Are Hidden Instead of Deactivated
Image Description
Image Description
On the site, filter properties with zero matches are removed entirely. Customers simply have no way of knowing that they aren’t seeing the full set of filtering values (i.e., there’s no indication that options are missing). Additionally, the interface doesn’t inform users if they’ve applied a too restrictive combination of filters.
As filtering values become unavailable, we decided it was best to display them as greyed out options. Ideally if clicked, it would show a dialog describing why the value is unavailable and how to re-enable it.
PDP - Product Imagery
1. Product Imagery
The issue with product imagery
High-quality images make your products look attractive and appealing. This can capture the attention of potential customers and entice them to explore your offerings further. In e-commerce, first impressions matter. The first thing a potential customer sees is the product image. However, if a customer is unable to reliably do that, then that could sour the experience for them.
Enabling Product Zoom
Old Design
New Iteration
Images on the PDP don't offer a reliable zoom feature. For some customers, they would want to know ideally what kind of material is being used and to see all of the fine intricate details of the clothing piece.
We recommended to allow customers the ability to zoom upon hovering over an image so that they are able to discern more detail in any product they may be interested in.
Utilize Smaller Thumbnails on Mobile To Represent More Images
Old Design
New Iteration
Images on mobile rely on using dots to indicate more imagery. The problem with this is that customers have no clear indication of what images are next and will have to swipe to get to the right image they want.
Baymard had recommended utilizing smaller sized image thumbnails on the mobile PDP to indicate that there are more images at a glance and so customers can choose which images they’d like to jump to.
PDP - Product Details
2. Product Details
The issue with product Details
Having detailed information about the product is an integral part to any e-commerce platform. However, if the content isn't all that accessible, there will be a significant numbers of customers who will have trouble accessing and viewing that information.
Increase Size of Price and Place Alternative Pricing Options in Close Proximity
Old Design
New Iteration
The size of the pricing is very small compared to other information on the page. In addition, the different pricing options was located further down the page forcing customers to scroll down to find that information.
Provide shipping information on the PDP so that customers can have an estimate on when they can expect their products to arrive. Consider embedding a delivery-date estimator field depending if the customer has theiraddress added to their account to allow for a more accurate delivery- date estimate
PDP - Cross Selling
3. Cross-Selling
The issue with Cross-selling
Cross-selling can lead to higher sales and revenue for an e-commerce business. By suggesting related or complementary products to customers, you encourage them to add more items to their cart, increasing the average order value. However, if the content is not relevant to what the customer is currently viewing, there could be a lot of confusion.
Cross-Sell Sections Sometimes Offer Unrelated Items
Old Design
New Iteration
Under certain PDPs, cross-sell ‘You may also like’ section tends to show unrelated products to customers instead of relevant or supplementary products
We wanted to show only complimentary items in the “You May Also Like” carousel. It could be used to offer complimentary products that encourage customers to add more items to their order
Working with some constraints
During my time on the project, my primary role was to utilize best e-commerce UX practices to help introduce those small-medium features on the desktop/mobile versions of the site. Due to time/budget constraints, a lot of these features had to be completed within a number of weeks with little time for in-depth research or user testing. However, that did not hinder the quality of the end product.
There have been a significant amount of changes that have been introduced to the site since joining the team. Many of which have improved the overall quality and UX of the site for Harry Rosen's clientele.
design system
Revamping the old design system
What didn't work
Prior to joining the team, Harry Rosen had an already established design system that another designer had worked on. On top of that, it was built within the Sketch & Invision pipeline so it made it difficult to collaborate with other designers and developers day to day.
Outdated design library
The issue with this design system was that it was severely outdated and had lot of the components were not in use.
Slow design handoff
The design system was built within the Sketch & Invision pipeline so it made collaboration/handoff with other designers and developers extremely tedious and slow.
North star improvements
Retiring the Sketch & Invision pipline
I took it upon myself to completely modernize the Harry Rosen design system by retiring the Sketch & Invision workflow and instead bringing it to Figma.
Scalability
We chose Figma because of how easy it is to collaborate with clients, devs, and project managers to build a scalable system
Enhancing accessibility
Accessibility was also a very important consideration when revamping this design system. With that, I wanted to also updated some colour and font choices whilst still aligning with the established brand guidelines so that they met WCAG standards.
conclusion
Key takeaways from the audit
What I learned from this project
Performing a site-wide audit
Performing a partially site-wide audit takes a great deal of organization and coordination with other members of the team
Finding opportunities within constraints
Despite there being a short amount of time, viewing constraints from different perspectives helped brew new approaches to tackle other constraints.
Understanding the Brand
Having a deep understanding of the brand whether it's their design library, voice, etc has helped tremendously in making the right choices when it came to improving the site.