Battle Juice Homepage & E-commerce UI/UX Design

Battle Juice is an e-commerce homepage and UI/UX design project focused on creating a bold, product-led storefront experience.

The homepage needed to introduce a high-energy product range without burying key shopping actions. The interface had to balance strong brand expression with a clear route to product discovery and purchase.

I created a product-led homepage structure that uses bold visual direction, clear content sections, and focused calls to action. The layout brings product information forward while keeping the browsing journey simple across desktop and smaller screens.

Product-led hero content with a clear primary call to action

Clear paths from brand storytelling to product discovery

Scannable section hierarchy for quicker decision-making

Repeated shopping prompts at key points in the page journey

Responsive layouts that preserve core purchase actions on smaller screens

The design puts product hierarchy and visual direction at the centre of the experience, helping visitors understand the brand and move through key storefront content with clarity.

Homepage UX and UI direction

Product-led page layouts

Responsive layouts for smaller screens

Clear visual hierarchy across core sections

A high-fidelity Figma design system and responsive website layouts, structured for a development handoff.

Figma