scroll
Since the start of the pandemic, Harry Rosen had been wanting to enhance their online e-commerce platform in order to stay up-to-date with their competitors. They had plans on undergoing a minor rebrand and had wanted us to perform an audit their site to see where the UX could be improved.
Product Designer - Interaction Design, & Visual Design
September 2022 - October 2022
Amy Cannon (Project Manager), Shrey Kumar (Developer), Smith Milner (Developer), Hector Rodriguez (Developer), Alexandre Bortolotti (Developer)
Fix any glaring UI/UX issues that will be uncovered during the audit.
Enhance these two pages to coincide the release of the updated branding.
My plan was to spend the 1st week synthesizing the pages by grabbing the necessary screen states and variations. 2nd week, would be spent performing the audit and documenting my findings. 3rd week would be spent consolidating everything and formatting it into a thorough presentation deck.
Project Timeline
To help me perform the audit, I had utilized Baymard Institute’s online auditing tool to help me assess the criteria needed to have a great e-commerce experience since they had reported numerous things that needed to be fixed in their backlog.
Upon the first review of the PDP and PRP utilizing the auditing tool, I found numerous low-high severity issues that were present within the different product results & product details pages on both mobile and desktop.
Example audit results (not from the client)
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.
Some product cards were too overwhelming with content on the results page. Resulting in information that was visually inconsistent.
Sorting and filtering has somewhat unintended results when customers are trying to narrow down their search options.
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.
Old Design
The product information on the PRP was not conducive to scanning and had increased cognitive load due to a lack of visual separation and text hierarchy.
New Design
I suggested that a complete visual refresh of the Product Cards could help visually define product cards to enclose all related information.
Old Design
Prices on the PRP appear too small and could easily become lost within other elements on the page.
New Design
To alleviate this issue, I had recommended to always display prices in a larger format to ensure they are easy to discern.
Old Design
Having repeated colour variations throughout the PRP can end up clogging up the results page and would make it harder for customers to find what they need.
New Design
I made the recommendation to include colour swatches on the product cards so that customers could easily swap between the different variants.
Old Design
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.
New Design
My suggestion was to add additional padding in between each product cards to allow there to be clear visual separation between the products.
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.
Old Design
There was no indication of how many products are available within the PRP. The total size of the product list is an important indicator for customer; as it helps them gauge the likeliness of relevant products being in the list.
New Design
I decided it was best to show the total number of items within the Product List so that customers are able to easily tell how many products there are to browse from.
Old Design
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.
New Design
I made recommended to use a ‘Load More’ CTA 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 as it provided more of an affordance for customers.
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.
Old Design
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.
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.
New Design
My recommendation was to 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.
Old Design
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.
New Design
I 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.
Old Design
On the website, filter properties with zero matches are removed entirely. Customers simply had no way of knowing that they weren'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 restrictive combination of filters.
New Design
As filtering values become unavailable, I 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.
The Product Details Pages also provides a good experience for learning more about a certain product. However, there are a number of issues that do not allow for a smooth browsing experience that can oftentimes lead customers to wanting more.
Navigating through product images needed to be in improved in terms of browsing and getting more detailed information to customers.
Some content within the page needed to be improved from a visual hierarchy viewpoint so that customers can easily find/access the info they need.
Some up-selling sections of the page had been displaying irrelevant products to customers.
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 absolutely 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.
Old Design
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.
New Design
Allowed 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.
Old Design
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.
New Design
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.
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.
Old Design
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.
New Design
We decided to increase the size of the product price so that customers have a much easier time finding it than before.
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.
Old Design
Under certain PDPs, cross-sell ‘You may also like’ section tends to show unrelated products to customers instead of relevant or supplementary products
New Design
I wanted to show only complimentary items in the “Shop Similar” carousel. It could be used to offer complimentary products that encourage customers to add more items to their order
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.
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.
The issue with this design system was that it was severely outdated and had lot of the components were not in use.
The design system was built within the Sketch & Invision pipeline so it made collaboration/handoff with other designers and developers extremely tedious and slow.
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.
We chose Figma because of how easy it is to collaborate with clients, devs, and project managers to build a scalable system
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.
Performing a partially site-wide audit takes a great deal of organization and coordination with other members of the team
Despite there being a short amount of time, viewing constraints from different perspectives helped brew new approaches to tackle other constraints.
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.
Facilitating a small-scale branding workshop for a local startup.
(2020)
