Vitargo | Fast Acting Carbohydrate Drink | A Website in Need
In a recent project I worked on as a Web Developer at Sixth Media, I had the pleasure of taking part in developing a brand new website for a very popular supplement company, Vitargo. This client project consisted of a complete website redesign, development, and SEO later on. One of the biggest issues our client had that she wanted resolved during this rebuild was the painfully slow speeds her current website had that would often be the cause of them losing customers. So our objective as developers was clear; we needed to completely revamp Vitargo’s website; from looks, to speeds.
The Process
To begin, our design was hard at work in redesigning the client’s website; giving it new features that would not only make the site have a more modern looks, but have a much better UI and UX all around. Once the designs were ready, it was time to turn the project over to the dev team. For this project, I and one other developer decided to go with a “divide and conquer” tactic in completing the site. Meaning, we grouped together to create our global variables that would be used throughout the site, and divided the pages we were going to work on. The other developer took on the home, about and shop page layout. I took on the e-commerce setup, Our Story, Team Vitargo, and Contact pages.
The Journey
Building the Vitargo website was not an overnight project. This was a well known company with a large clientele including groups like the NFL’s Kansas City Chiefs. So we made sure to make an extra effort to accomplish the project with preciseness, applying best practices as often and regularly as possible, including working at a mobile-first perspective; where we would start some of the pages developing the mobile version of the page first, then flesh it out through the different response levels.
One of the problems I faced during this process of trying to recreate our Figma was an animation that was strongly requested from the client on the Team Vitargo page. What she wanted was an animation whenever a user would hover over a Team Vitargo member’s card, a red stripe would glide across the page. This seems like a simple feature, but this one aspect was a big piece in the overall look and feel of the site, and there were little details in the code that needed to be implemented.
By adding code for hover effects when the parent container (the card) was being hovered over the mouse, and doing media query transitions on our red rectangle, we were able to recreate exactly what the client wanted in a visually appealing animation on every Vitargo ambassador’s card!
Example of final product of what the Team Vitargo cards looked like with their animation.
Finishing the Project - Beginning Optimization
Once we completed the project, we weren’t in the clear as far as getting ready to return this brand new, stunning site to the client. As one last measure, we wanted to make sure her site accomplished both her goals; being a new visually stunning site, and being faster than ever before. So our team knew that before we could truly say we were done, we needed to go through and do all we could to optimize their website and increase their site speed. To get started, we decided to record what their current site speed scores were by testing it using pagespeed.web.dev by Google, a free resource where you can paste the URL of your website and receive your Google ranked site scores. This was extremely valuable for us because when we tested the site’s scores on mobile and desktop, we realized that there was more work to do than we thought.
The two things we decided we needed to focus on in order to increase their site speed was optimize code, and optimize images. I decided to take no the image optimization challenge as I had recently been learning about media formats and output optimization in my studies at my college, Utah Valley University. In order to improve speeds, we strived to have any kind of icons be made as SVG files, and, with the majority of the image assets on the website being larger photographs, I decided to convert the image assets into WebP files, as they would be able to best retain the high quality of the image assets, while keeping their file sizes very low.
The Optimization Results
We completed our optimization objectives and it was time to regroup and resubmit our site to see the site speed improvements. They were as follows:
Before
After
Conclusion
At the end of the day, the Vitargo project was a huge success. We were not only able to complete the project within its allocated deadline; but we were able to create an exactly replica of its original Figma design created by the web designer, we were able to create fluid, responsive layouts throughout the entire site, and we successfully doubled the website’s speed performance from when we originally finished the site to implementing optimizaiton. When compared to the original site, even the client was astonished by how much faster she was able to navigate the site.
Looking back on the project we found ourselves to have an extremely successful experience, however, there was definitely times where I saw we could have better implemented things to have a more efficient process. For starters, it would have been a much better idea to immediately go and optimize the assets our clients gave us as soon as we received them, rather than waiting until the end of the project to go back through and optimize them all. Additionally, I would have loved to have kept better track of the before and afters of Vitargo’s original site and would have loved to keep the client more involved during the process so they would be able to experience the changes throughout the project as we were implementing all the things she dreamed up with the designer. But at the end of the day; I take great pride in the team I got to work with and our accomplishment of taking a big company’s website, and making it even better.