Mountain West Dermatology

Project overview

A fully rebuilt website for Mountain West Dermatology, designed to be accessible, user-friendly, and compliant with WCAG standards.

Project duration: January 2025 – March 2025

The problem: The previous website for Mountain West Dermatology was inaccessible, difficult to navigate, and did not meet WCAG compliance requirements.

The goal: To rebuild the website for full WCAG compliance with improved navigation and a better user experience for all patients.

My role: Lead UX designer, accessibility consultant, and website builder

Responsibilities:

• Conducted a heuristic accessibility review to identify compliance issues.
• Led UX research, including user and stakeholder interviews, to understand patient needs.
• Designed and built the website with accessibility best practices.
• Conducted usability and accessibility testing

Heuristic review

The full heuristic review of the Mountain West Dermatology website assessed 125 key usability and accessibility checkpoints based on WCAG 2.1 AA standards. This evaluation identified a range of issues affecting navigation, readability, interactivity, and compliance with legal requirements. While the full review covered all findings in detail, the table below presents a condensed version, highlighting the most critical issues with the highest impact on user experience and accessibility. These key areas were prioritized for improvement to ensure the website meets both legal compliance and usability best practices for all users.

Stakeholder presentation

After completing the heuristic review, I took the initiative to create a 5-minute stakeholder presentation summarizing the most critical usability and accessibility issues along with proposed solutions. I sent this presentation via email to the Mountain West Dermatology practice manager. To my surprise, the practice manager was thrilled to see that a solution was already in motion for a problem he had been struggling with for years. This presentation led to an in-person meeting, where we discussed not only improving the website but completely rebuilding it. He later used the same video to present to the 9 dermatology partners, making it an easy and effective way to communicate the urgency and value of the project.

View full transcript

Below are several examples of the critical usability and accessibility issues I pointed out in the Stakeholder presentation

The website is missing basic legal requirements such as:

• Privacy policy
• Terms and conditions
• Cookie policy
• Accessibility statement
• Copyright notice

These are often added to the footer.

More clarity is needed in the website copy to let users now how to complete new patient paperwork

Images should have meaningful alternative text for screen readers. The alternative text for the logo on the home page reads “Add a subheading.”

Other images were missing alt text or had numbers for alt text.

Links need to be visually distinct from body text

Body text should be left aligned to increase readability

Contrast for body text (<24 px) should exceed 4.5:1. Below we see a contrast ratio of 2.98:1.

Main heading on home page should be labeled as an h1 with subheadings labeled h2, h3, etc. Here it is labeled as an h4. Additionally the heading does not have accessible contrast against the graphic

Body text, line height, and text block width are inconsistent. It’s best to use appropriate headings and spacing to clearly distinguish different content sections.

UX research

User interviews

To understand how patients interact with the Mountain West Dermatology website, I conducted in-person interviews with patients in the waiting room. The goal was to identify usability barriers, common behaviors, and potential areas for improvement. I interviewed 15 patients ranging in age from 32 to 81, with the majority between 60 and 80. The group closely represented the practice’s actual patient demographic.

User interview insights

Personas

Rhonda

Age: 74
Location: Grand Junction, CO
Patient since: 2003
Tech comfort level: Moderate
Devices used: Desktop computer and smartphone
Communication preference: Phone calls and in-person conversations

“I can look things up online, but I’d rather just call and talk to someone who knows what’s going on.”

Background:

Rhonda is a loyal, long-time patient of Mountain West Dermatology. She trusts the care she receives and prefers personal interaction over digital interfaces. She uses her desktop computer at home for basic tasks like email and browsing for local businesses. She has a smartphone, mostly for calls and looking things up quickly when she’s out. She likes websites that are simple and to the point but still feels more confident calling to get answers.

Goals:

• Quickly confirm office hours and location
• Understand what services are offered
• Find the phone number easily and call directly
• Feel reassured that she can speak to a real person

Frustrations:

• Doesn’t want to dig through menus or long pages
• Gets frustrated if she can’t immediately find a phone number or map
• Pop-ups, cookie banners, or overly designed pages confuse or annoy her
• Doesn’t trust she’ll get everything she needs from a website

Bill

Age: 75
Location: Fruita, CO
Patient since: 2019
Tech comfort level: Comfortable
Devices used: Smartphone and laptop
Communication preference: Mix of digital and phone

“I’ll use the website if it’s easy, but if it’s confusing, I’ll give up and just call.”

Background:

Bill was referred to Mountain West Dermatology and didn’t need to look them up before his first visit. But now that he’s a returning patient, he sometimes visits medical websites to find provider bios or refill information. He’s fairly tech-savvy but appreciates straightforward design and lots of cues to help him stay oriented. He doesn’t want to get lost in a sea of tabs or have to scroll too much to find what he needs.

Goals:

• Access provider bios and credentials
• Get clear info on how to prepare for appointments
• Find his way back to the homepage easily
• Know where to go next without guessing

Frustrations:

• Doesn’t like when websites feel cluttered or overwhelming
• Hates when navigation is hidden or inconsistent
• Gets annoyed when he can’t find what he’s looking for in a couple clicks
• Prefers simplicity over flashy features

Stakeholder interviews

To better understand the goals and needs behind the Mountain West Dermatology website, I conducted a full day of in-person stakeholder interviews at the clinic. I spoke with all nine physician partners, as well as the office staff, billing department, and medical assistants. My goal was to uncover each stakeholder group’s unique perspective — including what they felt the website should communicate, what was missing or unclear on the current site, and what features would better support both staff and patient needs. Conversations were informal and flexible, and I invited anyone on the team to share feedback. These interviews uncovered a wide range of priorities and pain points that directly informed my redesign strategy.

Stakeholder insights

Competitive audit

To understand how other dermatology practices structure and present patient-facing content, I conducted a focused competitive analysis of nearby and regional websites. I concentrated most closely on two local competitors: Montrose Dermatology, located about 60 miles from Grand Junction (approximately a 1 hour and 15 minute drive), and Epiphany Dermatology, a multi-location practice with a clinic in Grand Junction. These two sites provided the most relevant comparisons in terms of geography, audience, and services, and I reviewed them in detail. While I did not perform full accessibility audits, I noted key accessibility issues to reinforce my standards-based approach to inclusive design. I also briefly explored several dermatology websites across the country to identify broader design patterns. This analysis helped highlight both strengths in the local landscape and specific areas where Mountain West Dermatology could differentiate itself through the depth of its clinical expertise.

Ephiphany Dermatology

Design and accessibility

• Hero section featured a moving video without pause or stop controls, which is not accessible for users with sensory sensitivities
• Some text was too small to meet accessibility standards
• The red accent color, commonly associated with errors, felt visually confusing
• Font choices were modern and readable
• Included a strong, professional photo of their Grand Junction location

Navigation and structure

• Main navigation did not feel intuitive
• Service categories were clearly organized with helpful descriptions for each linked service
• FAQ section was not extensive but well-organized and easy to read
• Footer was well-structured, with subheadings and many helpful links

Patient experience and content clarity

• “Meet Your Providers” section was minimal, with limited information — and only one dermatologist listed for the Grand Junction location
• Online scheduling was available, which is a helpful accessibility feature for users who cannot easily call to book appointments
• Featured services were supported with imagery and clearly presented in card format, making them easier to scan and understand

Montrose Dermatology

Design and accessibility

• Featured a scenic local video (aspen trees and mountains) that created a strong first impression but lacked controls to pause or stop playback, which can be disruptive for users with sensory sensitivities
• Logo placement on the video reduced readability and contrast, making it inaccessible to users with low vision
• Some text was too small to meet accessibility guidelines
• Several elements had insufficient color contrast
• Site uses an accessibility overlay, which can interfere with the tools many users with disabilities rely on

Navigation and structure

• Main navigation included categories like “Shoppe” and “Cosmetic” that would not apply to MWD
• Mohs surgery was not grouped with other medical services, creating potential confusion
• Footer was well organized, with subheadings and ample links for quick access

Patient experience and content clarity

• “Get In Touch” page was clear and well-structured
• New patient information was easy to find and included helpful, direct instructions
• Doctor bios were laid out in a simple, user-friendly way

Starting the design

Site map (iteration 1)

Accessible text version

Home

• Header navigation
  • About us
    • In-house dermatopathologist
    • Mohs surgeons
    • Patch testing specialist
    • Services
  • FAQ
  • Physicians
    • Dr. Weber
    • Dr. Kirkegaard
    • Dr. Deeths
    • Dr. Paul
    • Dr. Donaldson
    • Dr. Morrell
    • Dr. Laggis
    • Dr. Kappius
    • Dr. McCoy
  • Products
  • Contact
• Footer navigation
  • New patient paperwork
  • Medical release form
  • Patient satisfaction survey
  • Price transparency
  • Careers
  • Privacy policy
  • Terms and conditions
  • Notice of privacy practices
  • Cancellation policy
  • Accessibility statement

Design system

This sticker sheet is a visual guide to the design system, with all elements created in accordance with WCAG 2.1 AA accessibility standards. Key accessibility considerations include:

• Font sizes are defined in rem units to allow for user scaling (WCAG 1.4.4)
• Paragraph line height is set to 1.5 for improved readability (WCAG 1.4.8 – AAA level guideline)
• Paragraph text is left aligned and constrained to a maximum width of 853px to support readability and prevent overly long line lengths (WCAG 1.4.8 – AAA level guideline)
• Color and typography combinations meet minimum contrast requirements of 4.5:1 for regular text and 3:1 for large text (WCAG 1.4.3)
• Link text is visually distinct and maintains at least a 3:1 contrast ratio from surrounding body text (WCAG 1.4.1)
• All headings follow a clear semantic structure to support screen reader navigation (WCAG 1.3.1)
• All informative images include meaningful alternative text (WCAG 1.1.1)
• External links open in new tabs and are labeled to indicate this behavior (WCAG 3.2.5 and 2.4.4)
• Interactive elements are operable by keyboard and have visible focus states (WCAG 2.1.1 and 2.4.7)

These choices ensure that the system is usable, legible, and inclusive for a wide range of users and devices.

Wireframes in Figma

To explore and compare homepage layout options, I created a series of mid-fidelity mockups in Figma. These examples focus on layout, hierarchy, and visual balance using real photography and typography, but without finalized content or fully styled components. At that point in the process, I was still determining how much input stakeholders wanted in the design; it turned out they were happy to leave those decisions to me. The mockups shown here represent just a few of the variations I explored to help clarify direction before moving into development.

First iteration website build

Key design decisions based on stakeholder and user input

Reinforced that all providers are board-certified dermatologists throughout the site, particularly on the homepage and Physican page, in response to the importance stakeholders placed on board certification.

Included provider education and board certification details on each bio page to highlight credentials and build trust with patients. I also created an infographic on the physicians page to clearly communicate the many years of education and training required to become a dermatologist.

Created dedicated pages for Mohs surgeons, the in-house dermatopathologist, and the patch testing specialist to emphasize their unique roles and qualifications.

Whenever possible, made a clear distinction between Mountain West Dermatology PC and Mountain West Dermatology Aesthetics—ensuring users understand they are separate practices with a professional relationship. Reinforced that Mountain West Dermatology PC provides only medical and surgical dermatology, with no cosmetic services offered.

Built out individual pages for each doctor, incorporating space for personal statements, education, and other relevant information to help patients feel more informed and familiar with their provider.

Developed a robust FAQ section to address common patient questions, such as what to expect at a first visit, billing policies, and the practice’s medical-only focus.

Designed the site with a simple, intuitive structure in response to user feedback, using a minimalist approach to reduce cognitive load and ensure ease of use for patients of all ages.

User testing

User testers

JH

(female, 77) – moderate tech comfort, uses iPad

RA

(male, 58) – high tech comfort, uses laptop

ER

(female, 72) – comfortable with tech, uses laptop

SB

(male, 29) – high tech comfort, uses laptop

SH

(male, 76) – comfortable with tech, uses desktop

JB

(female, 74) – moderate tech comfort, uses desktop

Insights and actionable steps

1. Finding specific services

Insight: JH expected to see fellowship-trained Mohs surgery specialists listed under “Services,” while SB found the Services dropdown misleading because it only listed Mohs surgery and Patch testing, making it seem like those were the only services offered.

Quote: “If I go to Services and click Mohs, I’d expect it to mention the specialists.” – JH
“It makes it seem like those are the only services you offer.” – SB

Action taken: Reorganized the Services section and navigation to improve clarity and findability. Added separate pages and dropdown menu items for General dermatology and Cancer care, and included links to all four service areas—General, Cancer care, Mohs, and Patch testing—on the Services page. Also added cross-links to relevant specialists under About us.

2. New patient questions

Insight: Multiple users had difficulty finding new patient forms. They expected them under a dedicated “New patient Info” section instead of FAQ or the footer. Some users were not familiar with the term FAQ. (JH, ER, RA, SH, JB)

Quote: “There should be a New patient section right in the header.”– SH

Action taken: Added a New patient section in main navigation. This section includes how to download new patient paperwork and also directs users to FAQ for answers to questions they may have.

3. Patient forms

Insights: RA doesn’t have a printer and would prefer to submit forms digitally instead of printing them out and bringing them in. JB has cerebral palsy and has mobility issues, prefers typing to writing.

Quote: “Typing on the intake forms online was impossible. On some medical websites one can fill out the intake paperwork online.” – JB

To do: Implement an option for patients to fill out PDFs electronically and print at home. Right now implementing form submittal is beyond what is possible due to scope involved for HIPPA reasons, but there is no reason we can’t make the PDFs fillable for home printing.

4. Online scheduling

Insight: SB expected an online scheduling option.

Quote: “…Online appointments for people who cannot call during the day; either they are at their workplace, deaf, or have articulation disabilities. Having online  contact access would be easier for people.” – JB

To do: For the time being, the stakeholders have decided against this option due to implementation costs, but this is a significant accessibility issue that is worthy of revisiting.

5. Search function

Insights: SH suggested a search bar to help users find information faster.

To do: Evaluate the feasibility of a search function for users who prefer direct queries instead of navigating menus – I will conduct further user testing now that the navigation is more intuitive. This may no longer be necessary.

6. Years in practice

Insight: ER wanted to see how long physicians have been in practice, and SB was confused about the order in which physicians were listed. Wanted them in order of rank.

Quote: “I’d like to see ‘Years in Practice’ listed—people want to know how experienced their doctor is.” – ER “

It’s not alphabetical, so how are they ordered? – SB

To do: Display “Years in practice” in each physician’s bio to provide transparency on experience. Adjust the physician listing order to reflect seniority based on years in practice, making it clearer for users. Currently stakeholders have not agreed to make this change, but I believe it is worth a revisit.

Next steps