eMed Weight Loss Platform - Marketing Landing Page ( Figma to Webflow )

Project Overview

This project was completed as a real design challenge during an interview process with eMed.

A conversion-focused one-page marketing website designed and built for eMed, a personalized weight loss program featuring FDA-approved medications delivered to patients.

Role: UX/UI & Web Designer
Timeline: January 2026 (1 week sprint)
Tools: Figma, Webflow
Deliverables: High-fidelity design, fully responsive website

The Challenge

Design and build a simple, functional one-page marketing website that:

• Clearly communicates eMed's value proposition

• Builds trust for users considering medical weight loss solutions

• Guides users through a clear journey from awareness to action

• Works seamlessly across desktop and mobile devices

This project tested my ability to think strategically about UX, execute polished UI, and translate design from Figma into a working Webflow build.

My Approach

1. User Journey Mapping

I approached this as a conversion-focused journey for users who are weight-loss curious but potentially skeptical about medication. The flow addresses three critical questions:

• What is this? (Hero section with clear value proposition)

• Why should I trust it? (Clinical approval, FDA backing, testimonials)

• How does it work? (Simple 3-step process, program details)

2. Design Strategy

Trust-building as priority: In healthcare, credibility is the biggest barrier to conversion. I strategically placed trust signals early:

• FDA-approved medications highlighted prominently

• Clinical backing and safety information

• Real patient testimonials with results

• Professional product photography

Clear visual hierarchy: Used typography scale, color contrast, and white space to guide users naturally through the page without overwhelming them.

Balanced tone: Mixed clinical credibility (product shots, stats) with aspirational outcomes (lifestyle imagery, success stories).

3. Design Decisions

Color Palette:

• Primary blue for trust and medical credibility

• Soft pastels for approachability (counterbalances clinical feel)

• Clean white space for scanability

Typography:

• Clear hierarchy with bold headlines and readable body text

• Consistent spacing system for rhythm and professional polish

Layout:

• Strategic use of 2-column grids for "What's Included" section

• Hero section with strong visual + clear CTA

• Social proof positioned late to reinforce decision after building trust

4. Figma to Webflow Translation

Built the Figma design with Auto Layout to mirror Webflow's flexbox behavior, making translation smoother. Used components for repeated elements like cards and buttons to maintain consistency.

Responsive approach:

• Designed mobile-first, then scaled up for desktop

• Ensured CTAs remain thumb-friendly on mobile (min 44px height)

• Stacked columns appropriately on smaller screens

• Maintained readability with 16px minimum body text on mobile

View Project

Figma Design: View Figma Prototype

Webflow Link: Preview Link

Results & Learnings

What worked well:

• Trust-building strategy effectively addressed user skepticism

• Clear visual hierarchy made the page scannable and digestible

• Responsive design translated smoothly across all breakpoints

• Template-based development in Webflow allowed rapid iteration

What I learned:

• Importance of balancing clinical credibility with approachability in healthcare design

• How to structure conversion-focused user journeys

• Translating high-fidelity designs into functional, accessible websites

• Working efficiently within template-based platforms

If I had more time:

• Add micro-interactions for enhanced engagement

• A/B test CTA copy and placement

• Incorporate animation to guide user attention

• Develop additional pages (How it Works detail page, FAQ, Blog)