FlareTronics
Background
I got the opportunity to work for a startup called FlareTronics. They are a small business that sells DeepHeat products. These products vary from a core belt to help with period cramps to a wrist wrap that can be used for those with wrist injuries or arthritis. What makes FlareTronics different is that they use Graphene nano-material. Their Graphene can deeply and safely penetrate heat to target your desired areas.
I was contracted to redesign their website as it didn’t convey their mission well. With the success of their website, I was called back to help design their Amazon Storefront.
I am super grateful for both opportunities and would love for you to check it out down below!
Amazon Storefront Design
Timeline: December 2024 - February 2025
Tools: Figma, Amazon Seller Central, Ideogram.AI and Discord
Problem
Please stay tuned for the content as we are waiting for Amazon to approve our designs!
Website Redesign
Timeline: June - July 2024
Tools: Figma, Shopify, and Discord
Problem
There were previous iterations before I was contracted. Some of the key issues I saw was there was no branding, lack of company mission and flow/structure to the overall website. Before I got started, we needed to talk about how we wanted to communicate FlareTronics mission. The CEOs of the company also collected some user feedback from the iteration they had. With the amount of feedback from industry experts and other users, we were able to pinpoint key issues and work from there.
Video showcases old website before I started this project
Iteration 1
I created the first iterations on Figma. The key to the first iteration was to showcase the overall flow of the homepage and how each section would communicate our mission.
The first thing on the website homepage is our video that showcases our products. There is a tagline to hopefully capture our audience's attention and curiosity. Each section has an image or video in it since visuals are a strong hook and help to convey our mission. Since there wasn’t much branding in the previous design, I created some by using orange from their logo. It wasn’t too light or dark and was accessible in dark or light mode, which was important to us. There is orange throughout the design to highlight keywords, icons and backgrounds of some sections to separate them. The orange also symbolizes how their products use DeepHeat to stand out from their competitors. To showcase our products and connect more with our consumers, I utilized images from a photoshoot they had. This created a welcoming feeling for potential consumers who are interested in our company and mission. I also hand-drawn the FIR (Far Infrared Wave) and NIR (Near Infrared Wave) diagrams. The first image was just from Google. I doodled something for fun, and it ended up being a useful and amazing image, according to the CEOs. With further discussion and some more changes, we were able to develop the final product.
For the About Us page, it was really important to have one to further connect with consumers and to show them who we are. There wasn’t an about us page, so I had to create it from scratch. During the first iteration, I created a few different layout designs, and from there, we narrowed down the final design. The only request I had was that I needed to make it flow and have comparison photos. I worked around these requests while leveraging the branding I created.
For each product page, the layout was the same. It wasn’t the best since it felt and looked “boring”. Again, I leveraged the branding I created to have more consistency and a brand story. I added some icons to balance the amount of text there was since it was very text-heavy. I also replaced many of the photos since they did not help with the product page as they did not showcase the product.
Iteration 1 overview
Variations of different iterations for the
About Us and Product Page
Iteration 2 of the home page
Final Design
The final website can be viewed down below! Any chances made after July 2024 were not done by me, as my contract ended.
On the homepage, the flow of the overall website improved significantly as it tells the brand story and mission. Each image associated with the text made sense to help further explain our statement. There is consistent branding as it highlights key points and showcases brand personality. For the FIR and NIR diagrams, I added more key layers, such as the dermis with blood vessels. This image was designed to showcase a simple diagram to help consumers understand how our DeepHeat works.
The final design of the About Us page layout was simple as it highlighted our products. There are some texts at the top to explain our mission. The comparison pictures are in little tiles as there is an image and text to explain to consumers what they are looking at. I utilized colours to emphasize the comparison they see. Our products have an orange banner with text and our image below. The competitors are black and white since it is expensive and something generic in a way. Below it, there is a banner to highlight the “aerospace-grade innovation” we use. There is a technology section since our graphene is important and makes us different from our competitors. We also highlighted our partnerships with other businesses. The list is small right now, but we plan to grow!
Finally, for the product pages, we had to cut some of the text since it was too text-heavy. We used our branding orange to highlight key information since it would make skimming the text easier for some. We added more images that showcase the product to emphasize it and show different ways it could be used since the product is versatile. Overall, the layout of the product page was improved to emphasize its benefits, the science behind it and the reviews.
Final overview of the website design!
