Autodesk offers a range of software across industries such as design, engineering, and entertainment. To help customers quickly understand these offerings, product cards are used to organize and highlight key information effectively.
Over the years, one-off product cards were created across the site, leading to inconsistencies. With different teams managing different product cards, updates had to be implemented multiple times across various teams, creating unnecessary duplication of work. I was tasked with introducing a universal pattern for product cards that could work seamlessly across the board. The goal was to create a consistent design with enough flexibility to cater to diverse use cases.
I began by gathering insights on how users interacted with product cards. I identified the existing variations and interviewed stakeholders to understand their needs and expectations. I conducted a competitive analysis to identify common practices and user expectations. Collaborating with teams such as SEO and customer insights, we collected relevant information, and with data analytics, we analyzed the most common user pathways to better understand their journeys.
To prioritize elements within the product card, I facilitated workshops with customers to learn what features they expected, while stakeholders highlighted their priorities. From a high level, users valued price transparency and the ability to compare products, whereas stakeholders emphasized calls-to-action (CTAs) and their prominence.
With this information, I started from low-fidelity and mocked up different designs for product cards. Each exploration was reviewed by our team and tested with users.
Working with researchers, we conducted both qualitative and quantitative tests. For example, our data showed that users were more likely to click the product logo than the CTA to access the product landing page. We A/B tested a design without a CTA and found no drop-off in traffic to product pages. Usability tests confirmed that this approach remained intuitive, reducing redundant elements.
Each component was rigorously tested and refined based on findings. Once validated, I collaborated with a content strategist to document guidelines for using the product card pattern. The design system team then implemented the new pattern into our backend, ensuring scalability and consistency.
The final product card design was cohesive across the site, allowing stakeholders to customize elements as needed. This modular approach enabled faster updates without requiring manual interventions from developers. Pages featuring product cards, such as the product listing page, saw increased engagement with corresponding product centers. Additionally, CTA clicks on product cards rose, leading to more users adding products to their cart or downloading trials.
