The Finished Website
The final design for this website, which has also been discussed in the process section below, can be seen in the video below. I believe that this website I have designed and developed is a vast improvement on the original. The implementation of a new style (specifically colours and font), as well as a new shop format, top menu, page headers, and text panels all contribute to the new look of the website. In my opinion, this new style makes the website look much more modern, and in touch with the main target audience, which is mainly athletes (amateur or professional) and sporting teams. Furthermore, this style was also created so that it could be easily transferred to the Australian and New Zealand sites that Grip Star Socks also run, which I will also be re-designing. In particular, for the USA website, the style was based off the colour red used on the United States flag. So, for the Australian website, the style will be based off the colour yellow used on the Wallabies rugby union jersey, and the New Zealand website’s style will be based off the teal colour used on the NZ Olympic team’s jersey, as well as the Blackcaps cricket team jersey. While small changes will made to this website over time, a walkthrough of the final design and website can be seen below.
The Process
This opportunity was brought forward to me while doing some internship work with the Capalaba Bulldogs Football Club, where I was doing some small work as a media intern. The person I was working for offered me another opportunity with this company called Grip Star Socks, who produce special socks for professional athletes in leagues such as the Super Rugby, A-League Football, and Australian rugby league players. Furthermore, this company also provides to leagues and players all around the world, including the USA, UK, and New Zealand.
Work on this website first started when my colleague and I sat down to figure out what was wrong with the current website that this company had in place for the Australian variant of its business. We decided the main sections that needed to be desperately fixed included the top menu, the news/blog section and page, the shop page, as well as the general design and style of the website. A video showcasing what the current version of the Australian website looks like can be found below.
In terms of the top menu, I found it to be filled with too many items that could be omitted, put into sub-menus, or combined with other items in the same page. Therefore, we decided that the only items in the top menu would be “Product Benefits”, “Testimonials”, “News/Blogs”, “Shop”, and “About Us”. As you can see below in the early iterations of the new USA website, this creates a much more fluid and modular menu, as it also allows me to have the social media icons for the business, as well as the shopping cart icon in the top menu without it looking cramped.
At this point, I started to work on making panels that would display the necessary information on each page in a visually pleasing and clear manner. From the beginning, we knew we wanted a panel with text on one side, and a picture on the other, with an overlapping semi-circle in the middle. The first iteration was a lot taller, using a basic black and white colour scheme. This was obviously changed over time, with future iterations making the panel wider and shorter, and using the colour scheme of the USA website (red and white).
The next step was to go through each individual page (excluding the shop, cart, and checkout pages for now) and edit them so that they could be ready for content to be inserted into them. Firstly, we changed the names of “Product Benefits”, “Testimonials”, and “About Us” to “Socks”, “Athletes”, and “About”, respectively. Most of the work for these pages was inserting the panels into the pages, and creating image headers for each page.
For the news page, I created a template in Elementor’s theme builder so that the page would update automatically when each new blog/news post was made, with correct formatting and positioning each time. Furthermore, I also created a template for each single post, so that the people writing the posts would be able to write their article with as much ease as possible, and the article would also show up on the website with the correct styles, positioning, and formatting.
At this point, I had to start work on the shop aspect of this website, which was arguably the most time consuming and hardest part of building this website, for a variety of reasons. For the shop side of things, the company were already using WooCommerce, which ended up creating a number of problems with styling the cart and checkout pages in particular, which had to be solved by writing my own custom css code.
However, for the shop and single product pages, I was able to more templates that would allow each page to edited with ease in the future. For the product page, I made a product archive template which displayed each colour variation available for each sock (15 variations in total). To help with this, I used a variation plugin that allowed me to have full control over what variations I could have displayed on the shop page (for reference, the plugin I used can be found at https://woocommerce.com/products/products-by-attributes-variations-for-woocommerce/?quid=cc335cab41cff6cb510af4ce84082672). One problem that took me quite a while to fix was that the images wouldn’t display at the correct width/resolution. This problem was also occurring on widgets that displayed the Grip Star range on other pages across the website. To fix this, I had to inspect the code on the live website to find what was causing the problem, and insert my own custom css code on the Elementor end of things.
For the single product page, I created another template that showed all the necessary information for each product, including title, description, price, add to cart, images, breadcrumbs back to previous pages, and a widget I made that shows other products in the Grip Star range. The variation plugins that I used for the single product page can be found at https://www.radiustheme.com/downloads/woocommerce-variation-images-gallery/ and https://www.radiustheme.com/downloads/woocommerce-variation-swatches/.
The final part of creating this website was styling the cart and checkout pages. Because of WooCommerce’s limitations with styling these pages for some reason, this whole part was done by writing my own custom css code, which made it very time consuming and hard at some points. I do believe this part of the build gave me some good experience in coding however. Otherwise, all that was left to do after this point was fix some small issues with styling and formatting, before making the website live to the world.
