How do you turn a gym platform into a full shopping experience without breaking the flow? That was the challenge behind PowerZone’s e-commerce layer — a seamless extension of the existing platform where users can browse, add to cart, and purchase workout gear and digital training plans without ever leaving the experience.
Project Overview
As an extension of the PowerZone gym platform, the e-commerce component was designed from scratch to enable users to purchase workout products and digital training plans directly online. The project reached a complete, handoff-ready UX/UI design — covering the full shopping experience across desktop and mobile — but was not carried through to development.
Role
UX/UI Lead
Core Features
- Full e-commerce user flow from product discovery to checkout
- Cart management including empty cart state and product handling
- Seasonal and promotional banner design with CTA variations
- Style exploration for special promotions and campaign moments
- Responsive design across desktop and mobile viewports
Design Process
The e-commerce layer was designed to feel native to the existing PowerZone experience. Rather than rebuilding the visual system from scratch, the existing component library, typography, and color palette were extended to support new patterns — product cards, cart states, promotional banners, and checkout flows — while keeping the experience consistent for returning users.
UX Flow & Screen Design
Every screen in the shopping journey was designed and accounted for — not just the happy path. This included empty states like the empty cart screen, error handling considerations, and edge cases that are often overlooked in early-stage design but matter significantly to the final user experience.
- Product listing and detail screens
- Cart flow — active cart and empty cart state
- Checkout flow
- Seasonal promotional banners and CTA explorations
- Special campaign layouts for offers and limited-time promotions
Promotional Design Exploration
One of the most visually rich parts of this project was exploring how the platform could adapt its look and feel for seasonal campaigns and special promotions. Multiple banner styles and CTA treatments were explored — balancing brand consistency with the visual urgency that drives conversion in e-commerce contexts.
Figma Prototype
E-Commerce Flow
The prototype covers the full e-commerce user journey — product listing, product detail, cart management, empty cart state, and checkout — designed to integrate seamlessly into the existing PowerZone experience across both desktop and mobile.
Tech Stack
Design
- Figma — user flows, wireframes, UI mockups, interactive prototype, promotional explorations
Repositories
Value Delivered
A complete, handoff-ready UX/UI design for a fully integrated e-commerce experience — covering every screen state, every key user flow, and a range of seasonal promotional styles. The design is ready to be implemented whenever development resumes, with a clear architecture plan and a responsive prototype that leaves nothing to interpretation.
