Magento Product Page Template Update

We currently have an issue with the color filters and size filters on our catalog and search pages. Associated products are being displayed together with the actual search/filter product. We believe if we remove all the color associations on products it will provide more accurate search and filter results. The solution we have devised is shown below, but please let us know if you have a better cleaner/easier solution to the problem above. We are looking to modify the Magento Product Page Template to look like the attached image on the desktop. (also need to add the color variations to the mobile theme) - Currently we have the "Associated products" listed as color and size variations. - We will be removing the color variations and only have size options in associated products. - We want to have "Related products" as the color variations to appear as they do in the screenshot. Clicking on the color will simply open that particular product page. This quote is for the template changes to the desktop and mobile template only. We will manage the product upload and associations ourselves. Please private message me for any further clarification.