Aldo Group E-commerce / Product List Redesign
Research - UX Design - UI Design - Usability Testing
Intro
In recent years, our product and brand teams have been working hard to infuse new functional features into Aldo footwear. The original PLP tiles relied solely on an icon to demonstrate whether a product had a feature such as waterproof. This was a problem because not all product features are easily conveyed with just an icon; many users browsing our site miss important cues that ALDO carries footwear with function. This results in lower brand equity and conversion rate.
In addition, Aldo has been working hard to improve accessibility across our sites. This is important because Aldo is a brand that leads with kindness and ensuring that our website is accessible to everyone is core to that mission. As well, various international laws state that websites in North America must adhere to specific accessibility standards. Aldo’s original PLP (product list page) had contrast issues when lifestyle images interfered with product labels and made them near invisible. This is a problem because it hinders visibility on the site and makes specific content inaccessible to our users.
Year /
2021
Duration /
5-month design
6-month development
Role /
Responsible for research, conceptualisation, design, user testing, logic annotations, and supporting dev. teams for deployment
Tools Used /
Sketch, Invision, Zeplin, After Effects, Adobe Illustrator, Usertesting.com
Process
General process followed to complete the PLP redesign. We always design with a mobile first design appoarch.
1/ Research
Definition of Problem & Goals
Competitor Analysis
Initial Product List Analysis and Audit
2 / Information Architecture
Define key content fields for Product Tiles
Consider Brand-Specific Needs
3 / Wireframes & UI Design
High Fidelity wireframes using existing site styles
4 / Usability Testing
High Fidelity Prototyping
Remote User Tests
Compile findings and annotate friction points
5 / Iteration
Alter designs to remove friction points
Retest updated prototype
6 / Finalize Designs & Annotate Logic
Finalize custom Product tile UI for each brand
Finalize screens for Desktop & Tablet
Annotate logic and states for developer hand-off
Original Product List Page
Original Product List Page / Mobile & Desktop screens
The Tiles’ Problem Areas
While conducting research and auditing the tiles to improve product awareness and accessibility, we discovered a few problems that we flagged to address during the redesign. Besides the issues listed below, we also discovered issues with the PLP header, and with the product filter.
Poor Contrast for Wishlist & Labels
The mobile view placed the tile’s label and wishlist icon on top of the image.
Poor Contrast for Pricing
The desktop view placed all product details on top of the image. This caused contrast issues for all elements but most concerning was that in some cases the price was completely hidden.
No room for long names & SEO
The tiles did not have solutions for cases where product names would be longer. This also meant that there was no room to show important SEO text on the product tiles.
Feature Icons far from label
Icons for product features and the labels that were meant to describe them did not have clear proximity. This leads to lower understanding that these fields are related and lowers users understanding of the feature.
Competing labels share a spot
Descriptive labels for product features and labels meant for promotions or product information share the same place on the product tiles. This means that users will miss important details regarding product availability, promotions, or product features.
No way to pause motion
In cases where the product is being shown in a video there was no way for users to pause motion on the tile. This is an accessibility violation and can be annoying for users if they want to stop the video to get a static view of the product.
The Goals
Based on the competitor analysis, tile audit, and latest ux benchmarks we deteremined that redesigning the product list page would mean focusing on…
Ensure product tiles remain accessible regardless of screen size or photography used.
1/ Improve Accessibility
2 / Improve Product Feature Awareness and Clarity
Define key content fields for Product Tiles
Account for Brand-Specific Needs
Allow product tiles to showcase product features & important labels such as “online exclusive”
3 / Improve Pricing Label Clarity & Reduce calls to CCC
Ensure promotional labels maintained close proximity to the price
Test different wording on labels to find the clearest copy to use to avoid confusion
Support multiple types of product photography to demonstrate the different context a product could function in
4 / Showcase Product Versatility
5 / Improve SEO
Feature product SEO & category text on every product tile without requiring hover or interaction
Once the initial PLP enhancements were released, we set up the system to be flexible to adapt and so we continue to flag areas of improvement
6 / Capture & Prioritize related issues
Analytics and tracking data showed that users were not scrolling on the PLP. Users were more likely to bounce upon entry to the page. The product list page did not entice users to continue scrolling the page and we wanted to test altering the layout to improve scroll behaviour.
Highlights /
Large product tile with hero product
(Difficult to anticipate what is below the viewport)Category Quick Links are very manual to implement
(Difficult to maintain therefore rarely used despite high usage by users)
First Adjustment / Original PLP Headers
First Adjustment / Revised PLP Headers
The new designs have rearranged the position of the content to make it more intriguing to scroll. The update also shows category quick links at the top of the product list page. The previous page design allowed for category quick links but the process was extremely manual so teams were not able to implement the links on many of the pages. When we updated the PLP header we automated the process to use the first product image in a category for the links. In cases where there was no image available for a category, an alternative text version would be shown.
Recent tracking data suggests that these links are used frequently and work well to direct users to products they are particularly interested in.
Highlights /
Automated quick links for categories
(Supports two variations - one that pulls a product category image, the other uses text when no image is available)Optional Image placed at the top of page
Altered ‘Filter’ & ‘Sort By’ Placement & UI buttons
Overview of the Full PLP Redesign
Product List Page Redesign / Mobile & Desktop grid
Product List Comparison / Left: Old Desktop PLP. Right: New Desktop PLP
What we changed and why
🎨 Maintaining Sufficent Contrast for Names, Labels, and Controls
In the old product tiles the name, price, and labels were all featured directly on top of the product photography. However, depending on the image, the text contrast was not always sufficient to be clearly visible. So now the text is always protected from the image.
🧾 Show SEO text on product tiles
The previous tiles only revealed the SEO text for products on hover. This was not good for SEO and prevented users from gaining clarity on the type of product. Users would need to rely solely on the product image to know what the product was and what category the product fell under.
🏷 Separating important price and context labels from feature
The old tiles only had one place for all types of labels. This meant that teams would often override important labels to prioritize labels for branded activations or product features. The new tiles now have multiple places for labels and the places are different for things regarding brand versus price.
📓 Supporting Two Product Tile Versions for Testing
The new tiles are shared between Globo, Call It Spring, & Aldo. We created two different tile layouts to test. Each tile has a distinct advantage that we want to test to assess if one performs better than the other. The V1 tile supports a price-specific label for cases where a promotion directly impacts a product’s price. The V2 tiles allows multiple product features to be shown on the PLP.
🛍 Supporting Two Product List Grids for Multiple Brands
The code bases of Aldo, Call It Spring, and Globo, are becoming increasingly unified. However, the Globo product list page uses a 3 column grid with a filter. While Aldo and Call It Spring use a 4 column grid with a filter in an overlay. We decided to build each product grid for each brand where teams could test the performance of the different grid layouts using a feature toggle.
👡 Highlight Brand & Product Activations
Aldo is collaborating more and more with other brands and people to build unique product collections. This means that it is becoming more important to ensure that products can be attributed to specific activations. Besides Aldo, Globo is a brand market place that sells many products from many different brands. It is key that product tiles on the Globo site support ways to attribute products to specific brands.
Left / V1 New Product Tile Grid
Right / V2 New Product Tile Grid
Tile Adjustments / Creating Multiple Versions
An important goal for the business is to grow product awareness. ALDO now carries many products with features that improve the function and versatility of the product line. There were two design variations that had two different placements for the product feature label. We prototyped both for testing and We hoped that in we might see if there was a significant difference in whether one placement was more likely to be missed by users.
Version One (V1) Product Tile
Product features on images. Labels are featured below the image.
Version Two (V2) Product Tile
Product features are featured below the image. Labels are on images.
Tile Adjustments / Implementing V1 & V2 for Testing
Both versions were well noticed in user tests, so it was decided that each version would be developed for A/B testing. We chose to do this because, in the V1 tile, we are able to showcase pricing labels close to the price. In user tests, this was shown to positively improve users’ understanding of promotions applied to the product’s price. In the V2 tile, we are able to support showing multiple attributes. The opposing benefits and inconclusive user testing results led us to the conclusion that we would like to further test the two approaches with A/B tests.
In the market, there are two common grid treatments
Grid Adjustments / Supporting Two Grids
4 Column Grid
Able to see more products in view port on desktop. Filter is hidden in overlay.
3 Column Grid
Able to see filter within grid. Less product images visible on desktop.
Left / V1 Product tiles filtered
Right / V2 Product tiles filtered
Adjusting Filtering Behaviour / Product Features
In the case where a product has multiple features, the V1 product tile can only show one feature. If a user were to filter for a product feature and the feature was not initially prioritized to be shown on the product tile, should we change the product feature to show the one that filtered for? Or would it be more beneficial to showcase the other feature available for that product?
We assessed this question in remote usability tests and found that users use the product grid to verify that the filter was truly applied. Therefore, it caused confusion when the tile didn’t show the feature that was filtered for.
Solutions /
Allow for merchandise teams to create feature priority
When users filter for a feature, the priority then changes to show the feature filtered for
Three Brands, Three Audiences
Left / Aldo Product List
Center / Call It Spring Product List
Right / Globo Product List
Aldo / Default V1 Product Tile
Aldo Shoes
Aldo’s target audience is primarily young and middle-aged women that keep up with fashion trends. The website is international with our focus being on sites for Canada and the United States. Aldo also has the largest reach of the three brands.
Brand Specific Considerations /
Showcasing product quality and function is increasingly important
Improving Accessibility
Highlighting Product Variety
Decrease CCC calls related to price & promos
Call It Spring / Default V1 Product Tile
Call It Spring
The audience for Call It Spring is younger, currently focusing on Gen Z. Call It Spring is also international and has websites for both Canada and the United States (there are no longer physical locations in USA). The vegan and sustainable product initiatives also make it popular for conscious buyers.
Brand Specific Considerations /
More UGC and Lifestyle photography used
Frequent Influencer Collaborations
Visual Style of Website follows strict grid
Globo / Default V2 Product Tile
Globo
Globo is a family-focused brand. Popular with parents as it is a marketplace where families can buy high-quality shoes for both adults and kids. Globo is specific to Canada and sells products from brands like Nike, Banff Trail, Sketchers, and Addidas.
Brand Specific Needs /
Desktop / 3-column product list with filter in the grid
Brand Logo placement
Display for Brand Name
Display Multiple Product Features
Deluxe PLP Revamp
While investigating the best solutions to improve product awareness, and improve accessibility while browsing on the site, we discovered a few problem points that we flagged to address during the redesign.
Dark & Light Mode
The old Deluxe PLP provided a brand experience for pages being used on special collections. However, it had significant issues with the legibility of product tile text. CMS users controlled the background colour of the page and sometimes would forget to check certain product states for contrast ratios.
The Problem with the Old
Animating to ensure accessibility
While entering the page, users have an immersive experience when browsing a speciality collection. Once the user starts scrolling, however, a white background layer appears behind the tiles to protect them from the background gradients.
This ensures sufficient contrast between product tile text and the background colour.
