Canyon - Dynamic Product Cards

Canyon - Dynamic Product Cards

Dynamic Product Card Design for Canyon

Desktop, Mobile · Scalable Component Design



This project was a huge undertaking for Canyon in 2022. As the main touchpoint of the e-commerce store the restructuring and redesign the product cards on the product grid for bikes and gear would significantly improve the user experience for customers. The new updated designs objective was to do the following:

  • Work seamlessly with the new filters and product landing pages
  • Add new additions to the product grid that make customers feel more informed
  • Add new additions to the product grid that help customers make faster decisions
  • Update grid inline with e-commerce best practices

To be included in this update was a considerable amount of improvements for usability. After a detailed UX audit and wire-framing process there were some key topics set as a focus. Predominately this surrounded functionality for mobile users, seamless integration of product filters, colour selection numbering (colour +5 etc.), tag functionality, rollovers for desktop devices, adjustable content sizing and finally compare functionality integration.


For this project specifically garnering all stakeholder input across the business was a big challenge. There were so many moving part and various lines of input and communication.

My Role

Project lead, Competitor analysis and review of current best practices, project scoping, project delivery, wireframes, prototyping, user experience design, UI design, communication with key stakeholders, developer handover, QA on staging and development environments. Key stakeholder responsibility for in-depth research, and end-to-end design of the user experience.


The new canyon product tiles are set to be released in the upcoming November release on It will be globally accessible for all users of the web experience with a focus on targeted improvement of mobile conversion which is the largest growing area of the business.

🔐 Project Currently under NDA restriction.  Get in touch for more details and Figma Overview.

George Beattie - Product Design UI Portfolio
George Beattie - Product Design UI Portfolio