Activewear E-Commerce Storefront
Ten screens with full desktop and mobile parity through the purchase funnel.
A brand storefront and shopping experience for an activewear label, structured around athletic photography, product collections and a mobile-complete purchase funnel. I designed ten responsive screens with desktop and mobile parity the whole way through — home, products, product detail, cart, payment and mobile checkout — plus the promotional banner components and wishlist toggles. Sole website UI designer; identity and the WooCommerce build were other people's.
- Role
- Sole website UI designer
- Timeframe
- Aug 2023 – Aug 2023
- Stack
- Figma
- Evidence
- Design file
Sole Website UI Designer for Bertelli Sportwear, an athletic activewear and fitness apparel e-commerce brand. Designed 10 responsive screen layouts on the primary Design page across desktop and mobile devices (Homepage, Produtos, Compra, Carrinho, Pagamento, Checkout - Mobile, and mobile viewports) backed by a 12-node Style Guide specifying high-impact promotional banners (Banner Destaque, Product Banner), interactive wishlist heart toggles, button component sets, and athletic typography in Figma (file key lYBgdCb9uGl9jzr4DPq7RL).
Agency employment at Sagitta delivering from August 16, 2023 to August 24, 2023. Juan served as the sole website UI designer within the agency team: Kelvin Bezerra created the Bertelli Sportwear visual identity and logo, Juan designed the complete activewear e-commerce storefront and purchasing funnel in Figma, and an external no-code developer implemented and published the store on WordPress using WooCommerce and Elementor. Scoped by Ramon.
D2C activewear e-commerce UX: high-energy athletic fashion
- 10
- responsive shopping layouts on the primary Design page
- 12
- style guide tokens, promotional banners, and interactive states
- 244 KB
- verified historical WooCommerce/Elementor build on Wayback
- 8 days
- from design kickoff to final implementation handoff
Fitness fashion is heavily visual and lifestyle-driven. Customers purchasing activewear look for fit, fabric performance, and aesthetic motivation. Converting shoppers requires high-energy editorial imagery, effortless sizing and color selection, and a streamlined purchasing funnel that prevents cart abandonment on mobile devices.
End-to-end shopping funnel across 10 responsive layouts
On the primary Design page (node 1:15), I structured the complete e-commerce purchasing journey:
- Brand Homepage (Homepage & Homepage - Mobile) — Full-bleed athletic hero banners (Banner Destaque), seasonal collection launches, new arrivals carousels, and customer trust badges (free returns, secure payments).
- Catalog & Collections (Produtos & Produtos - Mobile) — Multi-column grid with category filters (leggings, sports bras, outerwear), interactive wishlist heart toggles, and instant quick-view triggers.
- Product Detail View (Compra & Compra - Mobile) — Focused product page highlighting high-resolution fabric textures, size selector chips, color variant swatches, and prominent 'Comprar Agora' CTAs.
- Bag Drawer & Checkout (Carrinho, Pagamento & Checkout - Mobile) — Slide-out shopping bag drawer with order quantity steppers, shipping fee estimation, and a streamlined mobile checkout flow with minimal input friction.
Historical deployment is verified: the 2024-09-01 Wayback snapshot (244,251 B on Elementor / Hello Elementor) proves public shipping with section sequences matching Figma. 'Shipped' evidences that the design was coded and published—not that Juan built the backend code or created the brand logo.
Promotional banners and interactive UI tokens
The 12-node Style Guide page (node 1:16) standardized Kelvin Bezerra's brand assets: dark and vibrant secondary accent colors, typography scales optimized for fashion merchandising, promotional hero banners (Product Banner), button hover states, and wishlist heart micro-components.
What this project is and is not
- Not brand identity or logo design. Kelvin Bezerra created the Bertelli Sportwear visual identity and logo.
- Not WordPress or WooCommerce development. The storefront was assembled in WordPress by an external no-code developer.
- Not fashion manufacturing or logistics. I designed the digital shopping experience, not the apparel or inventory supply chain.
- Not currently accessible on the live web. The business ceased operations and the domain is dead; delivery is verified via the 2024 Wayback capture.
- Not supported by sales analytics. No revenue, conversion rate, or order volume metrics exist in the portfolio record.
The value of mobile-first apparel e-commerce
Bertelli Sportwear illustrates how modern activewear brands engage mobile shoppers through visual storytelling and frictionless checkout. By combining editorial fashion photography with clean product cards and responsive layout discipline, the design delivered a complete, high-converting digital storefront.
Evidence
The e-commerce storefront was implemented and published to production. The company subsequently ceased operations and the domain bertellisportwear.com.br is offline today (verified curl 000). Historical delivery is verified via an era Wayback Machine archive (2024-09-01, 244 KB on Elementor 3.23.4 with the Hello Elementor theme, 388 Elementor references and the page title 'Bertelli Sportwear - Seu corpo em movimento'), which corresponds to the audited Figma shopping suite. No sales or conversion metrics exist. This case study documents D2C activewear e-commerce UX, collection browsing, and mobile checkout flows.