Minted Category Page Replatform
Role
UX/UI, Strategy
Duration
1 year
Overview
Category page was the second part of the site experience to get updated to leverage a new platform. The MVP was focused on using existing data and customer insights to make better user experience and set up the framework for future enhancements and iterations.
This project was broken broken into phases, this case study represents phase 2 MVP. It is a representation of the coordination and collaboration needed with cross-functional teams. It also required an understanding of both back and front end systems.
The challenge
Context
Minted’s digital experience needed to be replatformed. Site experiences were limited to what the monolith could handle. The company vision was for the customer experience to be driven by best-in-class, scalable, flexible, efficient tools that help the user discover and purchase products in a quick and frictionless manner.
Problem
Replatform and redesign category pages to enable a stable flexible, scalable architecture that allows for future feature development, testing and improvements. Additionally:
Provide consistency through systems
Make it easier for users to find what they are looking for
Make it easier for our internal teams to create and manage category pages.
KPIs
Primary: conversion
Secondary: CP to PDP continuation, ATV
Also tracking: Performance, rate of favoriting, filter use, CP scroll depth
Constraints
Filter function changes, merchandising tooling, and anything that involves IA updates (like breadcrumbs) will not be addressed in phase 1. Product attribute data will also not be migrated yet.
What users were saying
In shop alongs we see users consistently struggle with filters, seeing details within a product image on mobile (most prevalent in stationery), confusion around assortment and one of the largest issues, price perception. Users perceive Minted as expensive because price is not displayed on category page.
Excerpt from a moderated shop along where the user kept trying to use the left rail on desktop
“It’s a habit, using filters on the left”
Excerpt from an unmoderated shop along where the user stated they would rather shop with Zola because Minted doesn’t show price
“I’m really hesitant because it’s not showing what the base price is.”
Excerpt from an unmoderated shop along where the user filtered to 2 results in fine art
“It makes the site seem less sophisticated.”
What our data was telling us
Minted's analytics setup is a bit of a mixed bag across different pages, with some gaps where legacy elements weren't properly tagged. Despite this, Content Square gave us a good directional understanding of how people actually use these pages.
Since Minted operates across four main categories (Stationery, Fine Art, Direct from Artist, and Pick & Pack), I made sure to analyze top-performing pages from each category on both desktop and mobile. This helped confirm that user behavior patterns were consistent across the site.
Generally what we were seeing was that the left rail was not getting as many clicks as filters above the product grid. The left rail was trying to do too much at once—mixing navigation links, filters, and services—which created confusion and duplicated functions elsewhere on the page.
Qualitative studies showed users typically expect to find filters on the left side fo the page and the interaction data confirmed this. This clearly pointed to moving filters to the left of the grid on desktop and rethinking the left rail elements entirely.
I also collected heat map data for product cards and page headers. Headers generally saw minimal engagement (except when they functioned as visual filters). On product cards, color swatches received the highest engagement when available, giving us a clear direction for highlighting this feature.
The examples shown are from the stationery category (Holiday photo cards and wedding) content square mapping for clicks.
Minted category page audit
We were maintaining multiple templates across category pages and search results were not leveraging the same template either. This was causing a lot of additional set up time and maintenance as well as disrupting our users mental model for interacting with our site. Additionally marketing and design needed to create additional asset types across categories because the specs were not the same. The design system was also not widely used across these pages and updates were cumbersome.
Summary of competitive analysis
Most direct competitors have:
Breadcrumbs or some navigational wayfinding
Header is displayed as live text
Optional visual or text based filters exposed
Ability to sort
Some indication of price on product cards
A way to get to related or additional products
Summary of e-com patterns
Most e-com sites have:
A fairly standardized page header space
Subcategories as either filters or links
Ability to sort, generally grouped within filter drawer
Product grid maximizes the viewport. Product cards sit edge to edge within the viewport and some have the ability to switch from a 2 column to 1 column grid on mobile
Price is almost always present on product cards
E-com filter specifics
Most e-com sites have:
Currently minted filters are hard to read, vary in UI style and are buried within groups
Other retailers elevate all filters to the same level rather than filter blocking
Consistent UI language is used for filters
Category links or filters may be present in the filter drawer
There is a clear and consistent way to apply the action at the bottom of the drawer
A phased approach
This project was very large and nebulous so we broke it into phases. The focus for this particular case study is phase 2.
PHASE 1
Back-End Restructure
What to expect on site
No change to front end, CP will look and function the same as today.
What we are doing
Build a New SKU service to provide all data to serve/display a Cat Page
Update front-end code base
Connect existing Cat page to new SKU service
PHASE 2
Cat Page Redesign MVP
What to expect on site
A 1:1 parity of current functionality + data presented in a restructured/redesigned template addressing core hierarchy and interface issues
What we are doing
Redesign of current functionality/capabilities to provide a consistent CP experience, address customer pain points and provide a jumping off point for future enhancements, e.g. product cards, badges, filtering, & content
Streamline to a smaller number of templates to serve all verticals’ use cases
Evaluation of current filter and left nav content
Examine data to enable CP for products currently on LP
PHASE 3
Data & Tools
What to expect on site
Upgraded Tooling
New data elements in filters or product cards (eg: price or promos)
New Cat page features
What we are doing
Introduce new data for population into CP (e.g. price)
Rebuild tools for filters and popranking
Note: will require updated processes, tools, roles/responsibilitiesCP enhancements: evaluate new CP features
Remove reliance on indexing
FUTURE
Enhancements
What to expect on site
TBD
What we are doing
Continue to evaluate new CP features
Iterate and test into performant experiences
Breaking down phase 2
This project needed to be broken down into manageable pieces that could simultaneously be iterated on. I needed to think in terms of the holistic view but also how this project would need to be reviewed by stakeholders and built by engineering. I planned to focus on:
General page template - This template should be able to be reusable and be able to be leveraged for ALL categories AND for search results.
Filters - Filters should function and have the same visual language across all categories. The left rail needed to be evaluated and combined with filters.
Product cards - Create a universal product card component that can be used for any product type and is flexible to extend in the future as more data becomes available.
Page header - The header should be modular, it should allow for the capability to house text only, a marketing asset, visual filters or text filters.
Marketing assets & product recs - work with marketing to create new specs and guidelines for assets within the product grid. Additionally provide provide rec placement and strategies for leveraging Monetate.
The original Minted Category page.
Collaborating with stakeholders and crossfunctional partners
Large redesigns and replatforms require a lot of people to weigh in and also be taken along for the journey. Minted has had a specific way of doing things for so long that change becomes a bit uncomfortable. In order to navigate this uneasy feeling and move forward I used as much data, customer insights, and competitive analysis as I could to fuel my redesign discussions.
In order to get everyone on the same page and in the right headspace I like to lead worksessions. These worksessions focus attention on specific parts of the experience, supporting changes with detailed competitive analysis, logic and data. We keep our focus on a specific area, I present my findings that led to my design decisions and then open the floor for questions and have some of my own questions ready in advance to help steer the conversation in a productive manner. If a topic comes up that is out of scope (for example updates to tooling) I would validate the idea and keep a running list of thought starters for discussions in later phases.
I also found that early conversations about difficulties with set up, maintenance, tooling, SEO etc. helped created a clearer holistic view of the experience not just from a user perspective. These discussions helped me keep anchored in a north star vision so that I knew which ways my MVP would need to be able to flex in the future.
Build to scale
An good example of future forward design in one of it’s smallest forms would be the discussions around the supporting data on the product card.
At larger companies we would easily be able to run A/B tests on different product card configurations but at Minted it’s not so simple, we didn’t have a universal component and the tooling wasn’t set up entirely properly to control them.
The goal was to get to one universal product card. In worksessions I discussed with crossfunctional partners the desire to add price. This led us to valuable discoveries around what price display was right across each category and though price display was not in scope for phase 2 I iterated on price display to get a more concise view of what we should be working towards in order to help inform the variables for price display on the component.
We also had discussions around sales and promotions. At the time we were running a very manual test for promotional price on PDP, customizer and purchase so it was important to consider how that experience might transcend other pages.
I gauged interest in some other potential tests for variants within the product card for future use as well. Ex: swapping color swatches for a variant that was text only but reveal multiple attributes like additional frame size, additional formats, etc.
Worksession files were structured to have conversations around specific parts of the experience in order to foster focused productive collaboration and feedback. Below is an example of price & promo discussions for the universal product card. We reviewed competitors, discrepancies in our current experience, desires from a product owner perspective. This was the opening discussion to set the stage for several follow up meetings to define price. Based on this discussion I created several pricing example wires and wrote detailed discovery criteria in confluence for engineering to investigate.
Example snapshot of a confluence doc I put together for engineering for pricing discovery. Each line item contains a category with specific examples to reference, a question or topic to investigate and a reference image. The last column was for engineers to add their findings.
This example is from the initial component card build with modifiers for each attribute that could display in phase 2 as well as placeholders for phase 3 price and promo displays.
Ideally by building a placeholder into the product card component and pending engineering discovery we could allow for price variants that could flex to fit any category. This new data display in a universal product card would allow for easier testing.
Documentation
An example from the figma handoff file created for engineering. The file is broken down by feature and each feature should be an epic with stories for each AC. The figma page is then linked to jira, and conversely jira is linked to the figma page. I created an AC doc in confluence that linked all the tickets and we also used it to compile the bug tickets and QA status.
The MVP
Thanks to all of the collaboration, designing and reviewing with the UX team, cross functional team members, engineers and stakeholders we finally got to an MVP we all felt confident in. The key differences:
A standardization of page width and breakpoints. This allowed for larger images on most viewports (New feature: allowing users to toggle from 2 to 1 column on mobile)
A reusable front end template using the new design system.
Filters in a more logical place without nesting
Better integration of the left rail content. We removed duplicate filters, removed extraneous links.*
Updates to product image rendering**
Alt images on mobile
Added the ability to surface recently viewed products on all templates and additional product recommendations containers below the grid.
Parity between all device types.
* This was a work in progress, due to tooling issues any updates made to the MVP data would also be made to the control. Updating these links is also a manual effort from a very small team and required site standards from UX.
** We were using 2 different image rendering tools on the site. The one most widely used on category page was more manual to update to render shapes, backgrounds, etc. We migrated to focus on one tool which by using a script would save set up time and cost. This swap was a big deal and took a lot of coordination across teams to get it working properly but also helped with page performance.
Takeaways
Minted needs to run tests for a long time in order to get results because they are still a relatively small company with a lot of seasonal products. Directionally the test was positive although ever so slight and we did see continuation go up from category page to PDP, we were still seeing some drop off after PDP and customizer.
For MVP we couldn’t display price on the product card and because of this one of my theories is that users were getting to PDP or customizer and seeing price for the first time (shown as a subtotal) and bouncing. I did not get to iterate on this further before I left but I did get to have some great conversations around the next phase of enhancements.
Future Enhancements
Tooling updates
We need to rebuild the tools for filters and popranking.
This would allow us to more easily test changes to filters like order, addition or removal of specific filters or changes to terminology.
Drupal marketing tools updates
The product grid marketing assets are time consuming to update, break easily and are less mobile friendly due to bugs.
If we updated and fixed the tooling we could allow for faster setup and mobile specific assets.
New data elements
The product card component was built future forward to house new data elements. The MVP was launched without price or promos because the data does not exist at the category page level.
Breadcrumbs
The current way Minted taxonomy is set up the breadcrumbs would appear useless if we displayed them.
Breadcrumbs are important for wayfinding and SEO but the IA needed to be sorted first
Refinement of additional links
This was an ongoing effort to pair down the additional links that were formerly in the left rail.
For launch we were unable to get all pages to their desired state so we made the section collapsible.
Site standards
A site standards document was started by UX to capture guidelines and best practice for marketing and crossfunctional teams when setting up specific areas of the site. This document should continue to evolve.
Sort
Allowing the user ability to sort by price or newness.