top of page
WEBSITE REDESIGN
The company wanted to create a new e-commerce website because of the bad experience and lack of protection for their sales. As the main designer and with guidance from the Digital Marketing Director and Digital Experience & Technology Director, we provided a fresh e-commerce experience that generated new sales and brand education on their products.
Problem Space
There was no brand or product education for everything they are selling
There were issues with fraud happening on the old wordpress website
Business Needs
The website was outdated and created a bad experience for users trying to buy products
Each brand and products should have information that helps educate customers on what they are buying
Find a website platform what will provide us data and have a secure payment feature
A refreshed look that aligns with the evolution of the bang energy brand & uses design principles to create a better experience
The Solution
We came up with the solution to switch website platforms to Shopify from WordPress because it aligned with the e-commerce aspect of our business needs. Shopify has a secure payment feature to prevent fraud and ensure that company sales are accurate. The decision to switch allowed us to create a better design for the website and add other information and pages missing from the original website.
Site Map
click image to view
We started with creating a site map that incorporated the header and footer navigation plus all the major pages that benefit the storytelling aspect of the website and educates the customers on our products and the company's values.
Phase 1
We focused on the main customer flow for our team to launch the new website. Launching the new website allowed us to improve the web customer experience which would continue product sales and allowed the Digital Marketing team to roll out new campaigns.
Header & Footer
Homepage
Shop Landing Page
Merch Landing Page
Product Grid Pages
Product Description Pages
View Cart
Checkout
Used a template that match the design I created
Used a template that match the design I created.
Modified a template based on my designs
Used a standard template
Account Page
Search Bar
Support Pages
Used a standard template
Used a standard template
Used a standard template
Header & Footer
Based on the site map above I designed the header and footer so customers are able to navigate the website.
Bang energy Mobile Header & Footer
Bang energy Mobile Side Menu
Bang energy Header & Footer
Bang energy Mobile Header & Footer
1/5
Homepage
The strategy behind the homepage is to educate and showcase to the customer Bang Energy's identity and products.
Shop Landing Page
The strategy behind the shop landing page is to promote our products and monthly offers. The shop landing page underwent another redesign after it launched because, during our post-launch analysis, I saw that our users wanted to explore more products instead of clicking on product & promotional banners. From that insight, I created a layout to examine the different types of products we wanted to promote with carousels and a supporting banner with a flavor or new product spotlight.
Merch Landing Page
The merch landing page is to sell Bang Energy's merch collections and banners to promote the collection of the month or merch that aligns with the campaign that is being run company-wide on all platforms.
Product Description Page
The product description pages were based on a template we used for the website but modified and added sections to help educate the customer on the product. The modifications focus on major benefit callouts customers look for when buying a drink or supplement product.
PDP - Wireframe & Bang Energy RTD
PDP - Bang Energy 6 Pack & Sweet Teas
PDP - Meltdown Energy & Quash
PDP - Wireframe & Bang Energy RTD
1/4
View Cart
The view cart page design was created before we chose a template for the website to find something that would match the experience I had made—a feature we wanted to incorporate in the section is to upsell more products right before customers checkout.
Bang Energy View Cart
Bang Energy Empty Cart
Bang Energy View Cart
1/2
Checkout
The biggest issue with the old checkout experience was that it was not user-friendly, so I focused on creating an experience that was easy to follow and standard with a lot of other e-commerce websites to continue consistency.
bang energy checkout signin
bang checkout guest information
bang checkout returning customer thank you
bang energy checkout signin
1/11
Phase 2
We focused on designing pages that educated customers about our brands and company. There are also pages to engage customers with our brand like our giveaways and discounts.
Bang Energy Brand Page
Vooz Hydration Brand Page
Meltdown Energy Brand Page
Meet the Team Page
Sustainability Page
Appreciation Discount Page
Giveaway Pages
Share Your Story Page
I was working on a redesign from the original design created for the website launch
I created a template that all the following giveaways would follow
Spin to Win Pop-up
Instagram Link Page
Bang Energy Fuel Team Page
Blogs & Events Page
Used a standard template
Used a standard template
Bang Energy Brand Page
This page focused on the content writing, images, and videos related to the Bang Energy RTD cans and the current Fuel Your Destiny campaign that was running at the time.
VOOZ Hydration Brand Page
This page focuses on creating a brand presence and educating customers on the benefits of the new VOOZ hydration drink.
Meltdown Energy Brand Page
This page focuses on creating a brand presence and educating customers on the benefits of the new Meltdown Energy drink.
Meet the Team Page
This page focuses on displaying our leadership team and their roles at the company especially usefully when the company was going through changes in leadership.
Sustainability Page
The sustainability page was created when the company was running its sustainability campaign so the design launched with the website was focused on the campaign. After the the month of the campaign was over the team discussed re-designing the page to have broader content on the steps and the mission the company was making to be a more eco-friendly company.
Appreciation Discount Page
The company was running a military discount with the help of a third-party partner called Sheer ID and wanted to expand to other occupations like teachers, students, medical professional, and first responders.
Giveaway Page
The marketing team created multiple giveaways to capture emails and subscribers to help develop their email marketing and wanted a landing page that housed all their different giveaways. I worked on a design template that all the giveaways would follow to make filling out the form simple and less intimidating than the original standard forms.
Bang energy giveaway landing
bang energy giveaway form
bang energy giveaway form
Bang energy giveaway landing
1/5
Share Your Story Page
Share Your Story was a small campaign inside the Fuel Your Destiny yearly campaign where they wanted to engage customers with their brand and see what makes them loyal to our brand. Part of the campaign was to create a giveaway to host on the website for marketing and the social media team to use when promoting it.
Bang energy share your story form
Bang energy share your story form
Bang energy share your story form
Bang energy share your story form
1/3
Spin to Win Pop-up
This was another email capture that the digital marketing wanted to use for a few weeks during the Fuel Your Destiny and Share Your Story campaign to push more sales.
bang energy spin to win pop-up
bang energy spin to win pop-up
bang energy spin to win pop-up
bang energy spin to win pop-up
1/3
Instagram Link Page
The original Instagram page was not beneficial to the company so we created a page on the website to drive more users to the website and see if traffic on the website increases.
Phase 3
This phase focused on finishing off any remaining pages and features we wanted to add to the website that were on the future proirty list. Unfortunately the company closed down so we were not able to implement any of these designs or work further on them.
Jack Owoc's Story Page
A design was being worked on before companies closure
Our Mission Page
A design was being worked on before companies closure
The Science Page
Design was not started yet
Redline Brand Page
Design was not started yet
VPX Sports Brand Page
Career Portal
Subscribe & Save Feature
Bang Energy Loyalty Club Feature
Design was not started yet
Design was not started yet
Design was not started yet
Design was not started yet
Jack Owoc's Story Page
This page was about the founder and former CEO of the company where he wanted to display his story on why he started the company. Originally the story page was very boring and had much text so the goal for this page was to break up the story with design elements to make it easier to digest and read.
Our Mission Page
Want to see more Bang Energy Projects?
bottom of page