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.

pts nutrition website design introduction image

AThe 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.

Pages

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 website design pages home example


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 website design pages science of supplements example


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.

Shop



pts nutrition website design pages shop example


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".

Products



pts nutrition website design pages product gaba example


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.

Blog



pts nutrition website design pages blog example


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 website design pages contact us example


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

pts nutrition website design pages weight  loss example
pts nutrition website design pages power training example
pts nutrition website design pages endurance sport example

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 seo mobile responsive

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.

pts nutrition seo google page speed result
pts nutrition seo gtmetrix page speed result
pts nutrition seo pingdom page speed result

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

  • BP
  • DHL
  • BMW GROUP
  • NOKIA
  • SUPER M