Juan Cámpora

Juan is the head of web design at Sagapixel, overseeing all of our projects from kickoff to launch. He has extensive experience designing websites for businesses ranging from lawyers, to manufacturing, to healthcare.

5 Best Websites for Dermatologists – What  Does & Doesn’t Work

Category:
Table of Contents

Goodskin

https://www.goodskinclinics.com/

If you’re a dermatologist looking to redo your website, you’re probably interested in seeing some examples of website design for dermatologists that are already getting it right.

As a digital marketing agency for dermatologists, we see tons of websites for practices like yours and in this article, we’re going to call out a few that we really like. We’re going to talk about the web design aspects that are working for them, as well as anything we feel may be able to improve their performance (i.e. ability to drive patient bookings and search engine rankings).

digital marketing

What Works About This Website

  • Engaging Video Hero: The website’s video hero is exceptionally well-executed. Its simplicity belies its effectiveness, as it captivates the viewer’s attention, prompting a desire to watch the entire 1 minute and 4 seconds. This video is a beautiful piece of content, serving as a testament to the significant impact that quality content can have on a website. In just 10 seconds, I was already drawn to the brand, even though I had no prior knowledge about them.
  • Clear and Well-Sized Logo: The logo is clear, simple, and appropriately sized. It occupies a prominent position in the header without overshadowing the main navigation or the primary call to action (CTA).
  • Effective Black-White Color Scheme: The use of black against a white background is an excellent choice as it enhances contrast and readability, contributing to a visually pleasing design.
  • Thoughtful Font Selection: The choice of fonts is noteworthy. The use of a serif font for headings and a sans-serif font for the rest of the text is a well-thought-out decision. The headings are attention-grabbing, while the body text remains easily readable.
  • Strategic Call-to-Action Placement: The website features three distinct calls to action on the homepage. One is in the sticky navigation at the top, another appears mid-scroll, and the last one is at the bottom of the page. This layout is ideal as it prompts users to take action at various stages of their visit.
  • Clear End-of-Homepage Call to Action: At the end of the homepage, there is a simple call to action encouraging users to contact the company. This provides a clear next step for visitors.
  • Persistent Navigation: The navigation remains accessible throughout the entire scrolling process, ensuring ease of use for all users.
  • Authentic Imagery: The website uses real images from real clients in authentic doctor-patient situations, avoiding the use of stock photography. This approach allows users to see what they can expect and fosters trust.
  • Social Proof: The inclusion of a social proof section featuring prominent publication brands enhances user trust in the company. Such elements can have a positive impact on conversion rates.
  • Before and After Section: The presence of a before and after section is particularly important for this type of business. It provides valuable visual evidence of the company’s work and can be a persuasive factor for potential customers.

What I Would Improve

  • Clarifying the Company’s Purpose: Due to the video hero occupying 95% of the above-the-fold space, there is a lack of messaging that communicates the company’s identity and services. Additionally, there is a missing compelling heading with a call to action (CTA) that could guide users effectively.
  • Navigation Alignment: The navigation menu’s current left-aligned position within the header can be confusing for users, potentially making it appear as a design error. Center-aligning the navigation would improve its visual coherence.
  • Optimizing Social Proof Placement: The section featuring prominent publication brands, a form of social proof, may go unnoticed due to its placement further down the page. It is advisable to position social proof elements prominently, possibly above the fold or near the beginning of the user’s scrolling journey.
  • Call-to-Action Visibility: Out of the three calls to action present on the page, only the one in the middle stands out due to its dark background. The other two may be easily overlooked due to certain design choices. Ensuring the prominence and visibility of all CTAs is crucial for guiding user actions effectively.
  • Enhancing Before and After Section: The before and after section, while present, could benefit from additional images and greater prominence on the website. Highlighting the transformation results is essential in this line of business to engage potential customers effectively.
  • Reconsidering the Team, FAQs, and Scheduling Section: The section containing information about the team and FAQs may not provide immediate value to first-time visitors. It may be beneficial to remove these sections from the homepage to declutter it. Instead, the scheduling an appointment section should be presented as a prominent and distinct call to action.
  • Reworking the Approach Section: The approach section, positioned immediately after the video hero, does not appear inviting to read. It contains valuable information that should be presented in an engaging manner. Consider revising the layout, possibly moving away from the checkerboard design, and rewording the copy to make it more appealing and user-friendly. The focus should be on compelling storytelling to encourage users to explore further.

digital marketing

What Works About This Website

  • Effective Light Background: The light background in the hero section imparts a sense of clarity, cleanliness, professionalism, and elegance—qualities expected from a dermatology website. This choice aligns with the emotions a dermatologist should evoke.
  • High Contrast CTAs: The dark-colored call-to-action buttons provide a strong contrast against the light background, ensuring they stand out prominently. This high visibility can enhance user engagement and interaction.
  • Personable Video with Doris Day: The inclusion of a brief video featuring Doris Day is a strategic move that humanizes the brand. People tend to connect with individuals, and this video allows users to get to know the face behind the services, potentially increasing conversion rates.
  • Well-Placed Logo: The logo’s placement at the center of the header is prominent but does not overshadow the call-to-action elements. This balanced positioning ensures the logo’s presence without detracting from conversion opportunities.
  • Light and Elegant Aesthetic: The overall aesthetic of the website conveys a sense of lightness, calmness, and elegance. This ambiance is not only attributed to the background color choices but also to the carefully selected fonts.
  • Strategic Social Proof: The placement of the social proof section right above the fold is a smart move. Building trust is essential in the healthcare industry, and this section contributes to establishing credibility from the outset.
  • Engaging Dark Background Section: The section with a dark background immediately below the fold effectively captures the user’s attention and encourages them to continue scrolling, creating an engaging browsing experience.
  • Secondary Social Proof: Further down the homepage, there is a second section dedicated to showcasing Dr. Doris Day’s media presence. This reinforces her expertise and adds to the brand’s authority.
  • Prominent Quiz CTA: The prominent call to action at the bottom of the page, inviting users to take a quiz, offers a playful and interactive way to gather information from users. This approach can lead to increased user engagement.
  • Highlighting Dr. Doris Day: Dr. Doris Day takes center stage throughout the homepage, as she should, considering she is the face and name behind the company. This approach effectively establishes her as a prominent figure in the brand.

What I Would Improve

  • Optimize Hero Message: In the hero section, the main heading and subheading could be made more prominent by adjusting the font size and using the available white space effectively. This would ensure that the message is clear and captures the user’s attention.
  • Classic Layout for Header: Consider adopting the classic layout with the logo in the upper left corner, followed by the menu and the main call to action. This layout is familiar to most users and ensures the menu remains easily accessible.
  • Improve Contrast for CTAs: Enhance the contrast for the “Direct book” call to action with a phone number. Currently, its light gray color makes it less noticeable against the light background. Improving contrast will make it stand out more effectively.
  • Highlight Popular Products: If the website’s goal is to sell products, focus on selecting two or three key products and create prominent banners and creatives to make them visually appealing and draw the buyer’s attention. This can increase conversion rates.
  • Streamline Blog Section: Simplify the blog section by reducing the number of articles displayed on the homepage. Users who want to read more can easily navigate to the blog page. This decluttered approach can improve the homepage’s visual appeal.
  • Optimize Footer: The footer section appears overwhelming with too much information. To make it more user-friendly, consider removing unnecessary links and reorganizing the content to make it more concise and easier to navigate. This will improve the overall user experience.

digital marketing

What Works About This Website

  • Effective Video Hero: The video hero effectively builds trust by showcasing the entire team, allowing users to see the specialists they will be interacting with, which can instill confidence.
  • Clear Main Heading and Subheading: Trust is reinforced by the clear and informative main heading and subheading, which convey the company’s services and area of service, ensuring users feel they’ve come to the right place.
  • Prominent CTA: The front and center call-to-action for scheduling a consultation immediately guides users towards taking action, increasing conversion potential.
  • Strong Social Proof Above the Fold: Social proof is prominently featured above the fold, with badges from prestigious institutions that validate the company’s quality and professionalism, contributing to trust-building.
  • Compelling Before and After Images: Further social proof is provided lower on the page through real before and after pictures, an effective way to demonstrate the results achievable through the company’s services.
  • Credible Testimonials: Testimonials, drawn from Yelp, Google, and RealSelf reviews, add credibility and trustworthiness to the website.
  • Clean and Professional Design: The light background with ample negative space creates a sense of cleanliness, elegance, professionalism, and lightness, aligning with the desired image for a medical practice.
  • Innovative Service Presentation: The innovative use of video backgrounds for each service box provides a real depiction of what users can expect from the company’s procedures.
  • Personal Touch with Staff Bios: The staff section with links to bio pages caters to users’ desire to know more about the specialists who will be treating them, aligning with the video hero’s personal touch.
  • Informative Video Tour: The contact form is accompanied by a video tour of the facilities, which combines two different user needs seamlessly.
  • Visible Compliance Disclaimer: The placement of a visible disclaimer in the footer is essential for compliance in certain industries and is unobtrusive but consistent, appearing on every page.

What I Would Improve

  • Enhance Logo Visibility: The logo’s size and positioning need adjustment to make it more prominent and central on the website, ensuring it doesn’t get overshadowed.
  • Optimize Color Hierarchy: The choice of colors between the main CTA and the main heading’s background can be reevaluated to ensure a clear hierarchy that directs user focus to the CTA.
  • Improve Header Elements: The Contact Us button and phone number in the header should be larger and given more space by adding padding, making them more easily accessible.
  • Streamline Navigation: The site’s structure appears cluttered with numerous links at various levels. Simplifying the navigation and reducing the number of links can improve user experience.
  • Strategic CTA Placement: The distribution of CTAs across the page should be reorganized, with inverted colors to make them stand out against the white background and a more strategic placement.
  • Redesign Benefits Section: The “Why you’ll love us” section with six benefits in a staggered layout could be redesigned to enhance readability and user engagement.
  • Refine Social Proof: The abundance of social proof elements, including multiple testimonials sections, may be overwhelming. Simplifying and streamlining these sections can maintain trust-building without redundancy.
  • Consolidate Contact Forms: There are two contact forms with unclear purposes, potentially causing confusion. Consolidating them into one prominent above-the-fold CTA and removing the other can streamline user interaction.

digital marketing

What Works About This Website

  • Clean and Inviting Design: The website’s use of clean, white negative space creates a clutter-free and visually appealing environment that welcomes users. This design choice enhances the overall user experience, making it feel open, professional, and inviting.
  • Appealing Color Palette: The website’s carefully selected color palette exudes a sense of calm and professionalism, resonating with visitors seeking dermatological services. The harmonious colors contribute to a cohesive and visually pleasing aesthetic that instills confidence in users.
  • Strategic Hero Section: The hero section’s design is strategically crafted to guide users’ attention towards the prominent ‘Schedule Appointment’ call to action. This ensures that visitors quickly understand the primary action they should take on the website, streamlining the user journey.
  • Clear and Simple Heading: The website’s clear and straightforward heading effectively communicates the company’s purpose, helping users confirm that they have arrived at the right place for their dermatological needs. This concise messaging establishes trust and clarity from the outset.
  • Eye-Catching Logo: The bright and eye-catching logo positioned within the hero section not only adds a touch of vibrancy but also reinforces brand identity, making it memorable for visitors.
  • Clear Navigation Menu: The navigation menu’s clarity and visibility against the background make it easy for users to access essential sections of the website. This user-friendly design element enhances navigation and ensures that users can explore the site effortlessly.
  • Relevant Hero Image: The hero image, showcasing the target audience (families), aligns perfectly with the heading’s message. This visual reinforcement helps users immediately connect with the website’s purpose and offerings.

What I Would Improve

  • Button Overload: The abundance of buttons above the navigation creates visual clutter and can confuse users with various functions. Streamlining and organizing these buttons logically will improve the user experience.
  • Prominent Header CTA: The main call to action in the header, such as ‘Book Appointment,’ should be given more prominence to ensure it captures users’ attention immediately. Adjusting its placement and design can make it the focal point of action.
  • Team Section Overload: While showcasing the team is valuable for building trust, the current section includes an overwhelming number of professionals. Streamlining this section to highlight key team members will make it more effective.
  • Locations Map Placement: The map displaying multiple locations should be repositioned lower on the homepage, possibly in the footer or a dedicated contact page, as it may overwhelm users when placed prominently
  • Prominence of Reasons to Choose: The reasons why users should choose the company should be given more prominence, ideally placed right below the hero section. Highlighting these benefits will engage users and encourage them to explore further.
  • Announcements Section: Announcements on the homepage may not be as relevant to users as content that highlights the company’s strengths and services. Replacing this section with more user-focused content will improve engagement.
  • Blog Section Clarity: The blog section, primarily for internal linking, should be made less visually prominent to users by removing decorative elements around it. This will prevent unnecessary distractions and help users focus on the primary content.

digital marketing

What Works About This Website

  • Prominent Contact Information: The blue banner at the top of the website displaying important contact information, such as the phone number, makes it easy for users to quickly find and contact the practitioner.
  • Complementary Color Palette: The use of a complementary color palette, with blue and orange, creates a visually appealing and harmonious design that enhances the website’s overall aesthetics.
  • Ample Negative Space: The hero section’s use of negative space provides a clean and uncluttered visual appearance, ensuring that users are not overwhelmed with information upon landing on the site.
  • Clear Headings: The headings on the homepage clearly state what the company does and where they are located, immediately conveying essential information to users.
  • Clear and Prominent Logo: The logo is clear, appropriately sized, and its color stands out effectively against the rest of the design elements, contributing to brand recognition.
  • Effective CTA Design: The use of the brand’s orange color for CTAs creates strong contrast against both white and blue backgrounds, making the calls to action highly noticeable and encouraging user interaction.
  • Personalized Hero Section: Featuring the entire staff’s images as the main hero section establishes a personal connection with users, fostering trust and allowing potential clients to get to know the practitioners.
  • Clear Navigation: The main navigation is clear, light, and easy to use, with a prominent CTA in the header that immediately captures the user’s attention.
  • Informative “About Us” Section: Below the fold, there is an “About Us” section that reinforces the message regarding the services offered and the areas where services are provided, enhancing user understanding.
  • Engaging “About Us” Video: The inclusion of an “About Us” video can help convey the brand’s personality and values effectively, catering to users who prefer visual content over text.
  • Prominent Skin Cancer Detection Banner: The banner highlighting skin cancer detection services is visually prominent and includes a clear call to action, making it stand out as a differentiator and an important service.
  • Social Proof: Testimonials scattered throughout the page provide social proof, which can build trust and credibility with potential clients.
  • Compelling CTA at the Bottom: A highly visible and enticing CTA at the bottom of the homepage with a clear call to action is impossible to miss, encouraging user engagement.

What I Would Improve

  • Header Clutter: The header appears cluttered due to the presence of a second navigation bar located above the main navigation, which competes for attention. Many items in the second navigation could be relocated to the footer for a cleaner design.
  • Header Element Alignment: The alignment of headings and CTAs could be improved to be better framed within the blue container, enhancing visual balance and the overall readability of the screen.
  • Unified Social Proof: Social proof elements should be unified and brought higher on the page, preferably right below the fold or with a teaser portion visible above the fold to encourage users to continue scrolling.
  • Shorten ‘About Us’ Video: While it’s essential to provide an introduction to the company and its practitioners, a shorter video that conveys the core message succinctly can be more engaging for website visitors. Aim for a video duration that captures key information and maintains the viewer’s interest, typically between 1 to 2 minutes.
  • Improved Text Links: Secondary text links across the page lack sufficient contrast, making them difficult to read. Consider using a more legible color scheme to enhance readability.
  • Optimize Skin Cancer Banner: The Skin Cancer Detection banner could benefit from additional margin at the top and bottom to improve its visual balance. Styling it consistently with the rest of the website while maintaining its prominence is essential.
  • Streamline Services Section: The services section should be made more succinct and could benefit from the use of light iconography to make it visually engaging and easier to digest.
  • Consolidate Punctual Services: Punctual services scattered throughout the homepage could be highlighted and grouped in a dedicated section to reduce the overall length of the page.
  • Optimize Background Map: The background map appears too large, contributing to the extended length of the homepage. Adjusting the sizes of various elements and padding can help make the site more compact and less overwhelming with information.

Schedule a call with us