Client

TM Nutrition, a company specializing in physician-formulated nutritional products, needed an eCommerce platform to launch its flagship product, Vis Pre-Surgery Drink Mix.

Problem

TM Nutrition needed a website that clearly communicated the science-backed benefits of Vis Pre-Surgery Drink Mix while building trust with healthcare professionals and patients. The site also had to provide a seamless purchasing experience and be visually appealing, mobile-friendly, and easy to navigate.

  • Competitive Analysis and Research

  • Information Architecture

  • Low and High Fidelity Wireframes

  • Usability Testing

  • Developed on Shopify

Responsibilities

Tools

  • FigJam

  • Figma

  • Notion

Research and Discovery

Leveraging Industry Insights to Build Trust and Drive Conversions

I analyzed similar pre-surgery nutritional products and top-performing health & wellness e-commerce sites to identify industry standards, UX best practices, and areas for differentiation. Key takeaways included:

  • Clarity in medical benefits was crucial for trust-building.

  • Simple and intuitive navigation led to higher conversion rates.

  • Customer testimonials and clinical backing increased credibility.

Competitive Analysis

Understanding Our Users: Patients & Professionals at the Heart of Care

User Personas

Based on stakeholder discussions and market research, I identified two primary user personas:

  1. Patients preparing for surgery – Seeking an easy-to-use pre-surgery nutritional supplement.

  2. Healthcare professionals – Recommending science-backed solutions to patients.

These personas guided design and content decisions, ensuring the site addressed their needs effectively.

Design & Development

Strategic Structure: A Seamless Path from Discovery to Decision

Information Architecture

The website structure was designed to guide users seamlessly from awareness to purchase. Key sections included:

  • Homepage – Product introduction, benefits, and CTA.

  • Product Page – Detailed breakdown of how Vis works, ingredients, and purchasing options.

  • Science & Clinical Evidence – Establishing credibility.

  • FAQ & Contact Page – Addressing concerns and enabling direct communication.

From Sketch to Screen: Crafting a Seamless User Experience

I developed low-fidelity wireframes to outline the layout and user journey. High-fidelity mockups were then created in Figma, incorporating TM Nutrition’s branding elements for a professional and trustworthy look.

Home Page

Product Page

Designing Trust: A Clean, Modern Look with a Medical Touch

UI & Visual Design

  • Clean, modern aesthetic with a medical-grade feel.

  • Soft blues and greens to convey trust and health benefits.

  • High-quality product imagery to enhance visual appeal.

  • Icons and infographics to explain complex medical benefits simply.

Optimized for Success: Custom Shopify Design Built to Convert

I customized the Shopify Sense theme to align with the design vision, ensuring:

  • Mobile responsiveness for an optimal experience across devices.

  • Custom CSS enhancements for improved readability and design consistency.

  • Seamless checkout integration to drive conversions.

Key Features & Solutions

Engaging Homepage with Clear Value Proposition

  • A compelling headline and subheading immediately communicate why Vis is essential for surgery preparation.

  • A prominent Call-to-Action (CTA) encourages immediate purchase.

Trust-Building Product Page

  • Scientific explanation and ingredient transparency build credibility.

  • A structured layout enhances readability and navigation.

  • High-quality, professional product images reinforce trust and showcase key details.

Cart Page: Clear & Informative for Confident Purchase

  • Transparent pricing, including discounts and shipping costs, to eliminate surprises

  • Option to update quantity or remove items effortlessly

  • Minimal-click checkout process to reduce friction.

  • Guest checkout option for quick and hassle-free purchases.

Checkout Page: Seamless & Secure Transaction

  • Flexible payment methods, including credit cards, PayPal, and Shop Pay

  • Secure form for entering shipping details, payment info, and finalizing the purchase

  • Transparent pricing, including discounts and shipping costs, to eliminate surprises

Mobile & Tablet Optimization

  • Ensured fast-loading, responsive design for seamless mobile shopping.

  • Thumb-friendly navigation and optimized tap targets for ease of use.

Home Page

Product Page

Order Page

Contact Page

Results & Impact

✅ Increased Credibility – The clinical-backed storytelling and professional design positioned Vis as a trusted pre-surgery solution.

✅ Enhanced User Experience – The intuitive navigation and clear CTAs provided a seamless journey from awareness to checkout.

✅ Optimized for Conversion – Strategic placement of CTAs and streamlined checkout flow minimized drop-offs and increased sales potential.

"The website exceeded our expectations! Thank you for your intuitive approach and for creating a platform that will grow with our business. We truly appreciate your dedication and for always going above and beyond to bring our vision to life."

Dr. Thea Marx, Vis CEO & Founder

Lessons Learned & Next Steps

  • User Testing & Feedback – Gathering real customer insights will help refine the site further.

  • SEO & Content Strategy – Ongoing optimization for organic discoverability.

  • Post-Purchase Experience – Adding educational resources for post-surgery recovery could enhance long-term engagement.

Conclusion

The Vis Pre-Surgery Drink Mix Shopify website successfully delivered a trustworthy, user-friendly, and conversion-optimized experience for both patients and healthcare professionals. By combining strategic UX design with Shopify’s robust eCommerce functionality, TM Nutrition now has a strong foundation for online growth and brand credibility.