PTS Nutrition Website Design » Sean Viljoen Freelance
PTS Coach Competition Motion Graphics
PTS Coach competition video edit
January 6, 2019
PTS Nutrition Performance Products 3D Render
PTS Nutrition 3D Modeling
January 3, 2019

Web Design


PTS (Performance Through Science) Nutrition is a range of nutritional products sold in South-Africa. The company itself i.e PTS offers both training, physical assessment and Wattbike reselling. This build, however, focuses purely on the nutritional products and the design thinking followed suit. A powerful contrast between the product colors, the text elements, and visuals placed on a dark gradient-ed backdrop. Working in perfect harmony with each other.


Spread the love:

PTS Nutrition Supplemental Pruducts Website Design

The design had some complications when the actual product imagery was needed. Label printing ran over the scheduled timeline and forced me to render the products in a 3D modeling program, viewable here: PTS 3D Modeling. This gave me more than enough space to adjust product images as I saw fit. In different environments, adding much more to the final product shots than would otherwise be possible.

My inspiration was drawn from modern-day design trends. The background gradient-ed to give the site depth. The darker design also makes the elements pop-out much more. The white products pop out, as well as the colored labels. Each label's color was then individually used to place emphasis on different elements on the site. Each pertaining to the correspondent product.

What it takes to succeed


The site predominantly makes use of a CMS i.e Wordpress. The reason for this being easy management by the client or any future designer. Wordpress (if used correctly) also has a considerable amount of aditional back-end feauture. Some of these feautures include site compression (useful in on-page SEO), full site tracking (handy when doing big paid marketing pushes and seeing if the efforts worked) and e-commerce management (purchase tracking, invoicing, mailchimp integration). These are some of the more basic features, useful in creating User Experience workflow.




The main landing page acts as a simple one-page scroller direction users to the most important pages of the site. Heatmap tracking assures we get clicks where it matters.


Home Page

PTS Nutrition Products For Performance Website Design

The home page makes use of an AJAX banner to create movement once you land on the site. Each product on a banner that rightly describes what it's meant to be used for i.e weight loss... The site is scroll-able and places emphasis on the products individually.

Science of Supplements

PTS Nutrition Science Of Supplements Website Design

The Science of Supplements page replaces the generic about us page. This is both much more informative as well as holds more power when getting the site indexed by search engines. Strong, Niche driven keywords.


PTS Nutrition Supplement Pruducts Website Design Shop

At the end of the day, the main purpose of most websites is "sales". The more pleasing the product, the easier the sell. With that in mind... Visual stimulus has a massive impact on whether or not your user hits "purchase".


PTS Nutrition Performance Website Design

As previously stated, the products were rendered using 3D software. What that means is that I could take the most eye-catching shots and build a page from these. This, coupled with in-depth product descriptions made it an easy sell.


PTS Nutrition Performance Web Design Blog

Generally, it is good practice for a site to have a blog. This will help greatly in ranking on Google and other search engines. More pages, mean more potential to get users on your site. This, coupled with keyword research and keyword specific content shows massive traffic improvement in the long term.

Contact Us

PTS Nutrition Performa Productsnce Web Design Contact

Naturally, having a channel where the client can not only purchase the product but also contact the supplier directly is a must have. The easier to use the better. The contact form also assures no spambots have the ability to auto-fill fields and crowd up your inbox.

Products for Performance

Aditionally, we created three extra pages. Each one based on why you would need the product and which product best works for which need. The three pages were namely "Weight Loss" "Weight/Power Training" and "Endurance Sport". These pages also link directly to the products and assure users have the ability to purchase based on individual needs.

Technical SEO - Page Speed


Site load times play a massive role in Search Engine Optimization and in how well your site gets indexed. The quicker the load time, the more preference your site takes above your competitors.


PTS Nutrition Supplemental Mobile Website Speed

On average, the site fully loads within 7 seconds. The pre-loaded elements assure the site is usable before all content is fully loaded. That is to say... within a 2-second time frame. It is estimated that after 4 seconds of load time you start losing a significant amount of traffic and it waterfalls from there-on. Anything over 12 seconds is sure to lose you about 80% of your potential site visitors.

Not only evident in SEO and how well your site gets indexed, but also in how many potential customers you have the ability to retain. A fast, effective, well designed and user-friendly site is what gets you the sales.

The above are tests from 3 reputable sites namely... Google, GTMetrix and Pingdom Tools. These show effective load times, above 80% of competitor sites with a final load time of fewer than 7 seconds. A well compressed, quick to load website.

Related Projects