Work
Designing a B2C platform connecting gyms, trainers, and gym members
Overview
Europa Universe was a new direction for Europa Sports following its acquisition by Prenetics, a leading health sciences company focused on consumer health and longevity. While Europa Sports had built its reputation as a wholesale distributor serving the B2B market, Prenetics saw an opportunity to expand into the B2C wellness marketplace.
As the sole designer on the project, I was responsible for every aspect of the user experience, from branding and marketing to the shopping interface and print collateral. I worked across a 12-hour time zone with an international development team, navigated complex technical constraints within Shopify's platform, and designed a system that served three distinct audiences: gym owners, personal trainers, and gym members.
The project created a commission-based model where gyms could offer their members access to premium supplements without the having to maintain stock. Members would scan QR codes placed throughout their gyms, gaining access to curated products at prices below Amazon, while gyms and trainers earned commissions on every sale.
Though the project was decommissioned before public launch due to Europa Sports' closure, it was one of the most challenging projects I've worked on. It tested my skills as a UX/UI designer, front-end developer, and brand designer while collaborating with an international team under a tight deadline.
My Role
Lead UX/UI Designer
Lead Front-End Developer (HTML / CSS)
Key Results
Decommissioned before launch when Prenetics closed Europa Sports.
Projected 6-Month Targets:
- 20-30 gym partners, $500K+ sales
- Gym commissions: $500-1,500/month per location
- 5,000+ active members, 15-20% conversion rate
- 30-40% repeat purchase rate
-
Gyms Member Rewards ApplicationGym members scanned QR codes to access a personalized shopping app offering premium supplements at prices below Amazon, with $100 in welcome credits. Their gym earned commissions on every purchase without managing any inventory.
-
Trainer's Rewards ApplicationThe Trainer Rewards App allowed personal trainers to earn passive income by recommending premium supplements to their clients through shareable links and QR codes. Trainers received commission on every purchase while positioning themselves as trusted advisors who could guide their clients' nutrition choices.
-
Gold's Gym Member Rewards ApplicationThe Gold's Gym Member Rewards App is a custom-designed application that allows Gold's Gym members to access their personalized shopping app offering premium supplements at prices below Amazon, with $100 in welcome credits. Their gym earned commissions on every purchase without managing any inventory.
The Challenge
Through research, we discovered a significant pain point in our existing customer base. Gyms were tired of maintaining supplement inventory. They didn't want to determine what products to stock, manage inventory levels, or dedicate retail space & staff to selling protein powders, energy drinks, nutrition bars... etc.
Pain Points
For Gyms:
- Inventory management (ordering, stocking, tracking)
- Capital tied up in product inventory
- Which products members actually wanted
For Personal Trainers:
- Limited income streams beyond training sessions
- Missed opportunity to guide clients' supplement choices
For Gym Members:
- Limited product selection at their gym
- Higher prices at gyms compared to online retailers
- No expert guidance on which products suited their fitness goals
For Europa Sports:
- No access to the B2C marketplace
- Revenue limited to wholesale relationships
- Missing the higher margins available in B2C sales
Explore
Discover
Research Approach
As the only designer, I didn't have other designers to collaborate with, though my database administrator helped with logistics and technical questions. The real challenge was working with a team 12 hours ahead in Hong Kong and Malaysia. Simple questions took a full day to answer. I couldn't just walk over for a quick conversation. Everything had to be documented thoroughly. Research findings, design decisions, and rationale all needed to be written clearly enough for the team to understand without needing me to explain.
Competitive Analysis
I analyzed competitors using affiliate programs to understand best practices:
- How they onboarded new affiliate partners
- Marketing messaging and value propositions
- User flows from discovery to purchase
This research revealed that successful programs emphasized simplicity, transparency in commission structures, and made the value proposition immediately clear.
Shopify Plugin Evaluation
Since we decided to use Shopify Plus as our e-commerce platform, I needed to identify the right affiliate program plugin. I downloaded and installed the three top-rated options, created test accounts, and thoroughly explored their functionality and features.
I evaluated each based on:
- Ease of integration with Shopify's existing checkout
- Customization capabilities
- Reporting and analytics for affiliates
- User experience for both administrators and affiliates
- Technical documentation and support
After comprehensive testing, I recommended UpPromote as the best fit for our needs due to its flexibility and robust feature set.
Comprehensive Sitemap
Mapping out the Europa Universe e-commerce store with the Affiliate Program
End-to-End Workflow
Documenting the complete lifecycle from gym sign-up through member purchase to commission payout, covering Sales & Marketing, Digital Operations, and Europa Sports warehouse logistics.
This information ensured everyone understood the full scope of the system. Creating the site map and end to end workflow was critical for identifying priorities and dependencies.
System Architecture
Worked with the team to map out the entire Europa Universe ecosystem, documenting how Shopify, our custom Europa Store backend (EP), email systems (via Sendgrid), and the SFTP server for order fulfillment all communicated with each other. This technical architecture showed:
- How customers, Shopify, and our backend systems exchanged data
- API endpoints and data flows between systems
- Integration points for the UpPromote affiliate plugin
- Order fulfillment workflows from purchase through shipping
User Flow Documentation
The team and I created detailed user flow diagrams for the two most complex experiences:
Member Sign-Up & $100 Credit Flow:
- Customer scans QR code (GET request with gym affiliate parameters)
- Shopify redirects to custom signup page with affiliate tracking embedded
- Customer submits email to sign up
- Backend creates Europa member account and Shopify customer account
- System generates account activation URL
- Automated generation of 5 x $USD 20 discount codes tied to customer
- Sendgrid email service delivers codes to customer
- Customer can activate account and begin shopping with credits
This flow required coordination between Shopify's customer management, our custom backend for gym affiliation tracking, automated coupon generation, and email delivery. All happening seamlessly in the background while the user simply entered their email address.
User Flow Diagram for Member Sign-Up & $100 Credit Flow
Trainer Affiliate Purchase Flow:
- Client clicks trainer's affiliate link (URL parameters track affiliate ID)
- Shopify verifies affiliate signature and customer identity
- Customer browses and places order
- At checkout, web pixel fires to tag order with affiliate data
- UpPromote plugin processes affiliate attribution
- Backend maps Shopify order to Europa systems
- Webhook triggers on order payment, notifying fulfillment systems
- SFTP server receives order for warehouse processing
- Shopify periodically reads inventory from SFTP to keep stock levels current
- Fulfillment notification sent to customer
- Affiliate commission calculated and tracked for trainer payout
This flow demonstrated the complexity of tracking affiliate commissions while maintaining a seamless shopping experience—everything from step 3 onward happened invisibly to the user, but required careful orchestration of multiple systems.
User Flow Diagram for Trainer Affiliate Purchase Flow
End-to-End Business Process Mapping
Beyond technical flows, we documented the complete business lifecycle:
- Sales & Marketing: How gym partners were recruited, onboarded, and provided QR code materials
- Digital Operations: How the Shopify platform, affiliate tracking, and custom backend worked together
- Product & Inventory: How Europa Sports' wholesale products were made available for B2C purchase
- Order Fulfillment: How orders flowed from Shopify through the warehouse SFTP system to shipping
- Commission Payouts: How gym and trainer commissions were calculated, tracked, and distributed monthly
These detailed diagrams and documentation ensured everyone, from developers building features to executives evaluating ROI, understood how all the pieces fit together.
Key Insights
- Zero Friction for Gyms Gyms would only adopt the program if it required absolutely no operational effort. The phrase "zero upfront cost, zero inventory, zero operational effort" became our mantra.
- Price Competitiveness Was Essential Gym members were sophisticated online shoppers who knew Amazon prices. Our "guaranteed prices below Amazon" promise needed to be prominent and verifiable, but MAP pricing restrictions meant we couldn't show prices until checkout. This created a significant UX challenge.
- Three Distinct Audiences, One System We were designing for gym owners (business decision-makers), personal trainers (affiliate sellers), and gym members (end consumers), each with different motivations, needs, and contexts. The system needed to serve all three seamlessly.
- Trust Through Curation Gym members wanted expert guidance, not an overwhelming catalog. "Expertly curated" products and clear categorization (Today's Deals, Weekly Top 10, Just In, Top Brands) would differentiate us from generic supplement retailers.
Interpret
Analyzing to conceptualize
Working collaboratively with the international team including Prenetics marketing, I established the information architecture for three distinct but interconnected experiences:
Gym Owner Marketing Site
- Value proposition and program benefits
- How it works (3-step process)
- Sign-up form for sales contact
- Success stories and testimonials (planned)
Trainer Marketing Site
- Trainer-specific value proposition
- Passive income opportunity
- How to get started (3-step process)
- Affiliate program details
- Sign-up form
Member Rewards Application
- Onboarding flow (QR scan → sign-up → $100 credit)
- Product discovery (Just In, Today's Deals, Weekly Top 10, Top Brands, Browse All)
- Shopping experience (product listings, details, cart, checkout)
- Account management
- Order history
The application needed to be intuitive for first-time users arriving via QR code while accommodating repeat visitors who knew exactly what they wanted.
Solve
Wire-framing
Given the time zone constraints, I developed an efficient wire-framing process that maximized our limited synchronous collaboration time.
Marketing Pages
I referenced the content strategy developed with Prenetics marketing and began wire-framing the UX and UI, focusing on:
- Image placement and sizing
- Methods to communicate the program's who, what, when, where, and why
- Form design and placement
- Call-to-action strategy and prominence
I created several variations exploring different approaches to content organization and visual flow. During our video conference sessions, I shared these variations and we collectively evaluated which communicated most effectively. The team provided feedback, and I iterated between sessions.
Lo-Fi & Hi-Fi Wire-frames for Marketing Pages
Member Rewards Application
I began with simple sketches during brainstorming sessions with the international team via video. We identified two key sections for the main interface:
- Header Area - Handling the gym's brand logo, page title, member profile/avatar, and general browse button
- Grid Layout - Showcasing all available category CTAs (Just In, Today's Deals, Weekly Top 10, etc.) with the sign-up field for new members
The wire-framing moved quickly because we had reviewed on the core experience during our workflow sessions. The interface needed to be simple, icon-driven, and immediately understandable even for first-time users arriving from a QR code scan.
Exploring UI navigation and layout with wire-frames
Implement
Visual Design
Brand Identity: Europa Universe
Europa Universe was a new B2C division of Europa Sports, and I was tasked with creating its visual identity. Since this was a fast-moving project, we didn't have time for a fully developed brand system, so I established the foundational elements:
Logo Design I wanted continuity with Europa Sports' existing brand while giving Europa Universe its own distinct identity. I explored many different stylings. I ended up using the same typeface as the Europa Sports logo but added a unique mark.
Exploring Europa Universe Logo
Color Scheme We decided to use Europa Sports' existing palette, purple, black, and gray, for brand consistency. However, for the e-commerce experience, I chose a black background to create visual differentiation from Europa Sports' B2B site (which used lighter backgrounds). The black also made product images pop and gave the platform a modern feel.
Typography I selected Roboto Condensed from the Roboto font family, which Europa Sports used on their website. The condensed variation provided a modern, excellent legibility on mobile devices which was important for our QR code-driven experience.
Application Design: Home Screen to E-commerce
Member Rewards Home Screen
The QR code experience was designed to feel instant and personalized. A member walks into their gym, sees a poster on the wall, scans the qr code with their phone, and lands on a home screen that looks and feels like it belongs to their gym. If they're a Gold's Gym member, they see the Gold's Gym logo with yellow branding. The application recognizes which gym they scanned from and immediately themes itself accordingly. This created immediate recognition and trust.
E-commerce Interface
We chose a pre-designed Shopify theme as our foundation rather than building fully custom. This saved weeks of development time while still allowing significant customization through Liquid templating and custom CSS.
Gym's Branded Home Views and Europa Universe Branded E-commerce Views
A Variety of Interface Design Screens
Marketing Pages
The marketing pages (targeting gyms and trainers) were fully custom-designed by me. While using the same black background and typography as the e-commerce store, I created unique visual elements specifically for these pages:
- Graphics & Illustrations I designed custom graphics illustrating the three-step process for both gym owners and trainers, making the value proposition immediately scannable.
- Image Selection I used photography that showed gym environments, trainers with clients, gym members using the app, and icons representing the app's features.
- Layout & Visual Hierarchy I structured the marketing pages with clear sections:
- Hero with primary value proposition
- Benefits & advantages overview
- Application walkthrough
- How it works (3-step visual process)
- Testimonials
Print Collateral
The QR code posters needed to work in gym environments which were often crowded, visually busy spaces with varying lighting conditions. I designed multiple sizes (large wall posters, small counter cards, locker room signs) that all shared core design principles:
- Bold Color Blocking I used large blocks of each gym's primary brand color as the dominant visual element, creating immediate brand recognition and ensuring the posters stood out in cluttered environments.
- Minimalist Approach No cluttered details or excessive text or images just the essential information needed to drive the scan action.
The color-blocking approach created visual consistency between the physical posters in the gym and the digital app experience members encountered after scanning, reinforcing that they were in the right place.
QR Code Posters
Development
Technical Implementation
As Lead Front-End Developer, I was responsible for translating all designs into functional code within Shopify's ecosystem. This required deep technical understanding of Shopify's architecture, Liquid templating language, and how to customize a platform not designed for our specific use case.
Learning Shopify In-Depth
While I had used Shopify before, this project required mastery at a much deeper level. I taught myself:
- Advanced Liquid syntax and logic for conditional rendering
- Shopify's template structure and file organization
- Custom section development
- Metafield creation and management for storing gym-specific data
- App integration (particularly the UpPromote affiliate plugin)
- Theme customization best practices
Marketing Pages Development
I coded the HTML and CSS for both marketing sites (gym owners and trainers) from scratch, working within Shopify's page template structure. Key technical implementations included:
- Responsive Design Mobile-first CSS ensuring perfect rendering on smartphones (primary device), tablets, and desktops. I used CSS Grid and Flexbox for flexible, fluid layouts.
- Web Forms Integration I integrated forms that captured gym owner and trainer information, routing submissions to the sales team for follow-up. Forms included validation, error handling, and success states.
- Accessibility Semantic HTML, proper heading hierarchy, ARIA labels where needed, keyboard navigation support, and sufficient color contrast throughout.
- Performance Optimization Optimized images, lazy loading for below-the-fold content, minimized CSS, and efficient use of Shopify's CDN.
- Performance Optimization Optimized images, lazy loading for below-the-fold content, minimized CSS, and efficient use of Shopify's CDN.
The marketing pages were characterized by stakeholders as "stunning and alluring". Successfully balancing aesthetic appeal with conversion-focused design.
Member Rewards Application
The Member Rewards app required more complex technical implementation to achieve our custom requirements within Shopify's structure.
- Brand-Switching System
This was one of the most technically interesting challenges. I created a CSS variable
system that could dynamically theme the entire application.
When a QR code was scanned, URL parameters indicated which gym the member belonged to. JavaScript captured these parameters and updated the CSS variables, instantly retheming the interface. I handed this CSS system to the development team, who implemented the JavaScript logic to make it functional in Shopify.
- Affiliate Tracking Integration Working with the UpPromote plugin, I customized the UI to make affiliate tracking invisible to the end user. When trainers shared their links, the tracking happened via URL parameters and cookies, but the shopping experience remained unchanged. I styled the trainer dashboard within UpPromote to match our brand aesthetic.
- Onboarding Flow The $100 credit onboarding required several connected systems:
- Member scans QR → lands on app → prompted to sign up with email
- Email capture form (custom designed by me)
- Account creation in Shopify
- Automated coupon code generation (10 x $10 coupons)
- Email delivery with codes
- Member applies codes at checkout
I coded the front-end form experience and worked with developers to ensure smooth handoffs between each step.
Testing & Quality Assurance
I organized internal testing sessions with approximately 12 Europa Sports employees to perform end-to-end testing. We tested:
- QR code scanning from multiple gym brands.
- Brand switching accuracy
- Product browsing and search
- Cart functionality and pricing display.
- Checkout process
- Affiliate link tracking
- Email delivery
The only major issue we discovered was a problem with the automated email containing coupon codes. The development team quickly resolved it, and we were ready for real-world beta testing with actual gym partners.
Collaboration Across Time Zones
Working with a team 12 hours ahead presented unique challenges that required adapting my process:
- Asynchronous Work Style I produced design work during my daytime hours. The Hong Kong/Malaysia team reviewed it during their morning (my night), provided feedback, and began development. I'd wake up to their comments and iterate the next day. This 24-hour feedback loop meant decisions took longer than working with an in-house team.
- Maximizing Synchronous Time Our video conferences via Google Meet were scheduled at times that worked for both. Often late at night for me, early morning for them. These hour-long sessions were critical for:
- Presenting design progress
- Discussing complex problems requiring real-time dialogue
- Making decisions that needed immediate input from multiple stakeholders
- Sprint planning and prioritization
Solution
Europa Universe delivered three interconnected experiences on a single Shopify Plus platform:
- Marketing Sites (Gym Owners & Trainers) Conversion-focused pages explaining program benefits, commission structures, and three-step processes.
- Member Rewards Application When members scanned QR codes, they landed on a branded home screen displaying their gym's logo and colors. The interface featured categories, email signup for $100 credit, and standard e-commerce shopping. Trainers accessed the trainer interface plus earnings dashboard with affiliate tracking via UpPromote plugin.
- Print Collateral QR code posters in multiple sizes using bold color-blocking with each gym's primary brand color. Minimal text, maximum visual impact.
Results & Impact
Project Outcome: Decommissioned before launch when Prenetics closed Europa Sports.
Projected 6-Month Targets:
- 20-30 gym partners, $500K+ sales
- Gym commissions: $500-1,500/month per location
- 5,000+ active members, 15-20% conversion rate
- 30-40% repeat purchase rate
Reflection
Key Takeaways
Being able to handle multiple design disciplines kept the project moving without waiting for specialized help. The quality of our process mattered even though the project didn't ship. It was canceled due to business decisions, not poor execution.
What I'd Do Differently
Get everyone aligned earlier to avoid mid-project course corrections. Test with actual gym members sooner instead of relying only on internal testing. Build more cushion into timelines since time zone delays meant simple questions took a full day to answer.
Conclusion
Europa Universe represented one of the most comprehensive design challenges of my career. Requiring brand creation, multi-audience UX design, complex front-end development, and print design, all while navigating international collaboration and aggressive timelines.
As the sole designer leading a high-profile project for a major health sciences company, I proved I could deliver end-to-end solutions that balanced business objectives with user needs across three distinct audiences.
While the project's cancellation due to organizational changes was disappointing, it doesn't diminish what was accomplished: a fully functional, well-designed system that solved real business problems and demonstrated sophisticated design thinking. The experience reinforced that great design process, collaborative problem-solving, and continuous learning matter as much as the final outcome.
