Healthcare · Professional Services

Dr. Williams

A professional web presence for an orthodontic resident building a consultation practice and a student mentorship program. Designed and developed to earn trust before the first conversation.

GSAP AnimationsScroll MotionResponsive DesignCase SubmissionMentorship Portal
3.2min
Average session, from 45s
85%
More consultation requests
50fps
Motion floor on mid-range phones
Dr. Williams — Healthcare · Full Stack
Brief

Trust starts before the first click.

Dr. Mikaëlle Williams is a D.M.D. and orthodontic resident at the Georgia School of Orthodontics in Atlanta. She needed a professional site that could serve two distinct audiences: general dentists looking for structured orthodontic consultation, and pre-dental and dental students seeking mentorship.

Most medical practice websites are template sites that look interchangeable. The goal here was different. Create something that communicates expertise, warmth, and credibility, with a case submission system for dentists and a mentorship portal for students, and make both audiences feel like the site was built for them.

Dr. Williams — Brief
Role

One person, brand through build.

Sole designer and developer. Brand direction, motion design, GSAP animation, and responsive frontend development in Next.js.

Process

Motion with a performance budget.

I started by auditing competitor orthodontist websites, and most relied on stock photos and generic templates. That was the opportunity. Create something that felt genuinely custom and premium.

The motion design process began with storyboarding key scroll sequences. I wanted each section transition to feel intentional, guiding the visitor through the practice's story rather than just listing services.

I built a prototype early with GSAP ScrollTrigger to test animation performance across devices. That was critical, because heavy scroll animations can destroy mobile performance. I set a performance budget: no animation could drop below 50fps on a mid-range phone.

Dr. Williams — Process
Dr. Williams — Process
Design Decisions

Every choice had to earn the scroll.

Scroll-driven narrative. Rather than a traditional section-based layout, the site unfolds as a scroll-driven story. Each interaction reveals content that builds on the section before it.

Reduced motion respected. Every GSAP animation checks the visitor's reduced-motion setting. If it is on, content appears without animation and keeps the same visual hierarchy.

Custom easing curves. I developed cubic-bezier curves that feel organic rather than mechanical. Medical sites need to feel human, not techy, so the motion language uses gentle eases with a slight overshoot.

Photography first. I worked with Dr. Williams to capture authentic photos of the practice and team. No stock photos. The animations complement the photography rather than competing with it.

Dr. Williams — Design Decisions
Outcome

Three minutes instead of forty-five seconds.

The site launched and immediately set the practice apart in the local market.

Average session duration went to 3.2 minutes, up from 45 seconds on the old site. Consultation request submissions increased 85 percent. The site was featured in a GSAP community showcase. Dr. Williams reported patients mentioning the website during consultations.

This project validated that motion design, when purposeful, creates genuine business value, especially in industries where trust and first impressions matter.

← All work