Stuart Gordon
Sr. UX Designer

Sound Family Medicine

Creating a new website from the ground up

Sound Family Medicine

Five clinics in South Pierce County, Washington State

Sound Family Medicine (SFM) is the largest independent, physician-owned medical practice in East Pierce County.

They have a total of five clinics offering primary, same-day walk-in, and senior care.

Their site was over 5 years old and was in need of a complete overhaul.


New Website Design Goals

  • Help current and onboarding patients complete their goals effectively.

  • Design the user experience to be simple, friendly, and intuitive.

  • Group information to be relevant and easy to access.

  • Eliminate website complaints to the call center. 

  • Attract and retain new patients.

My role

  • Led and produced the user experience design development.

  • Assembled a temporary UX design team.

  • Worked with a SEO specialist to produce the Information Architecture.

  • User flows and sitemap diagrams.

  • Interactive mid- and hi-fi wireframes.

  • Tested proposed feature usability at several junctions.

  • Developed design system and all UI.

  • Produced the final visual design and style sheet UI.

  • Worked closely with development team from handoff to launch.

  • Presented design updates throughout the process to key stakeholders.

The Discovery Process

Insights gained through staff interviews:

  • The site has three primary audience groups:

    • Information seekers

    • New patients onboarding

    • Current patients

  • The SFM patient call center receives 1-3 calls per week complaining about the current website.

  • Users complain there is too much content on the site

  • Many use the search field as the primary navigation tool.

  • Most users are unaware they can make online appointments, pay their bills, and check their electronic medical records via the "mySFM" portal.

  • Staff loses valuable time on the phone with patients guiding them through the site.

User research phase
Sound Family Medicine

Current patient survey

Survey Analysis (Top responses out of 160)

Using a survey technique, we gathered feedback from the existing users.

How do you typically find a new medical clinic?

1. Insurance provider directory (103)

2. Family/Friend/Word-of-mouth (77)

3. Google search (72)

4. Yelp (16)

What features would you use the most on the medical clinic’s website?

1. Clinic locations (89)

2. General information (84)

3. Online appointment scheduling (83)

4. Insurance/billing information (81)

5. Physician ratings (80)

What’s your main consideration when choosing a (new) primary doctor or medical clinic?

1. Insurance acceptance (120)

2. Ratings and reviews of physicians (110)

3. Location of medical clinics (91)

4. Friends or family validated (47)

5. Availability of appointments (44)

What features on a website are likely to cause you to have a positive impression of a business?

1. Find the information I’m looking for.

2. It’s professional and well-organized.

3. It’s easy to navigate.

4. It’s mobile-friendly.

What features on a website are likely to cause you to have a negative impression about a business?

1. It takes too long to find the information I'm looking for.

2. Too many clicks to get to what I need.

3. Too much to read.

User Interviews

We followed up by phone with users (who opted in) in order to get a better understanding of their experiences with the site.

Most common answers:

“I try to find a clinic that is close with good ratings, and it’s a reputable establishment.”

“Definitely need to be within my insurance network so it covers all costs.”

“Testimonials for the physicians is important to me.”

“Calling to make an appointment is the easiest, but online booking is also convenient.”


  • Users care more about a patient’s experience with a doctor rather than a “star-rating.”

  • They use the clinic website as a way to initially relate to the clinic, the doctors, and their values.

  • Many users do not trust doctors.

Average Demographics
Age range
Marital status
Competitive Analysis

Understanding where the site stands in the market

The three biggest market influencers/competition is:

  • MultiCare

  • The Vancouver Clinic

  • University of Washington Medical Center

Old Site Usability
Sound Family Medicine

Site before redesign and rebrand

User Discoveries from the old site

  • People typically didn't scroll below the fold on the home page.

  • Testers didn't know where to find the list of physicians.

  • Browsing through the providers is cumbersome -- they wanted a filter tool.

  • “Learn more" button goes to the clinics' page

  • New patient sign up process needs to be clearer.

  • Search bar is the primary navigation tool.

Sound Family Medicine
Affinity Mapping
Sound Family Medicine

Bundling Ideas and Facts

Using the affinity diagraming method, we gathered large amounts of data and organized them into groups and themes based on their relationships.

The Takeaways:

• I need the clinic to be within my network.

• I need the office to be close to my work or home.

• I need to know the ratings/reviews of the clinic and the physicians.

• I prefer online bookings/services.

• I need to make sure it is a reputable establishment.

Abbreviated Persona (i.e. target audience)

Kris, 32, her family and a baby on the way, just moved from another state to Puyallup, WA. The neighborhood is new for her and she is looking for a family medical clinic and a primary care physician she hopes will be able to treat the entire family, that's within their insurance network, close from home, and has a reputable reputation.

Problem statement

Her free time is very limited so she needs to find what she's looking for quickly. If a site she's looking at is too slow or too frustrating, she will leave it and also form a negative opinion of the business.

Solution Hypothesis

Redesign the Sound Family Medicine’s website by prioritizing users' needs (in this case from the new patient’s perspective):

• Find information easily (available physicians, general info, location)

• Check insurance acceptance quickly

• Online appointment capability

• Simple and clear navigation

Sound Family Medicine

Flow chart to help visualize the user path.

Information Architecture

Closed card sort

Making the site easy to use consists of organizing information in a way that people find what they’re looking for quickly.

Terms were written on post-it notes (gleaned from the competitive research performed), then participants were asked to group the individual notes according to criteria that made sense to them.

From that, the collected data was synthesized and a site map created and iterated. 

Sound Family Medicine

Applying data collected from card sort, comparative research,  and SEO requirements to create a site map.

This is the final after 8 iterations.

Testing Prototypes
Sound Family Medicine

Sketches used for testing

Paper Prototypes

Based on research findings, competitive analysis, and information architecture, testing design prototypes began.

Testing proposed new features

• An easier path to checking insurance acceptance

• Separate providers from locations in the nav bar 

• Add physician and provider search criteria

• Make finding walk-in clinics easier

• How to make appointments

Sound Family Medicine

Paper prototypes used for initial testing.

User Testing

We gave the test participants three tasks; check insurance, find a doctor, and make an appointment.


  • “Make an Appointment” button was not that noticeable.

    • Next iteration we added "Make an Appointment" more prominent

  • They weren't sure if they could make appointments online.

    • Added "How to make an appointment" 

  • Testers did not notice the phone number by the logo, weren't sure where that number will direct them either. We added "Call Patient Services" before the phone number.

  • 100% of testers used the navigation instead of the call to action buttons.

  • 75% of users wanted a way to create an
    appointment from the provider’s page

  • Location information should also be in a footer.

How can the experience improve even more?

Brainstorm takeaways

  • Develop solutions for the homepage to highlight the most important functions.

  • Explore having two experiences for new and current patients.

  • Create a quick menu for patients that includes the most relevant functions of the website.

  • Place the buttons below the hero image (users missed them on the right).

  • Highlight Sound Family Medicine lines of business on the homepage.

Mid-fi wireframes

First iteration

Adding new design features

• Home page quadrant buttons to highlight the main functions of the website to make it clear where to find the most important information in the onboarding process.

Appointment requests to give patients another option to contact the clinic. (By using this form, the front liners would contact onboarding patients to help them make an appointment to facilitate the process.)

• Adding a provider search bar simplifies how users can search for providers.

Truncating and reorganizing the individual provider's information for quicker scan.

Second iteration

Testers for the first iteration skimmed over the homepage quadrant buttons on the right, so we tested a hypothesis that the quick-link buttons will be more pronounced below the hero photo and above the fold.

The three quick-links initially were:

  • How to make an appointment

  • Insurance information

  • See our specialties

After testing and SEO analysis, these changed to:

  • Find a doctor or provider

  • How to make an appointment

  • Logon to mySFM or pay a bill online

Sound Family Medicine
Nine iterations later...

Results were impressive

After improvements, the average time to complete the tasks was 63 seconds (remember, it had been 2 minutes!).

• The fastest time was 30 seconds!

• New patients find their primary care provider with only 6 clicks.

Did we help Kris? Our testers think so...

100% of users tested responded that their experience with the new design was “easy” and “intuitive”.

“I can find a doctor for my kid so much quicker now.” -- User #6

“Wow, what an improvement over the former site.” -- User #2

“I was able to find all the information I need within seconds!” -- User #9

Adding style
Sound Family Medicine
Sound Family Medicine

The newly minted homepage comes to life

UI Design

Once we tested and improved the usability, I designed the final screens in Adobe XD.

Working with the new brand palette of colors, fonts, and photo style, my design goal was to keep the format airy, fresh, and easy to scan. I kept the yellow from the former site for the call-to-action areas.

Main areas of improvement

  • Homepage: All essential navigation is above the fold. The quick link buttons stand out visually.

  • SFM's line of business was added per SEO best practices.

  • The "Services" and "Resources" pages became overview pages with topic cards to help users navigate complex subject matter.

 See the new site.

Next steps

We got most of what we wanted on our wish-list, but more will be added as SFM's technology capabilities catch up.

  • Implement an online appointment booking feature.  

  • Add a special "special news" section that can be added or removed on the homepage.

  • Tap into and display the current wait time at the walk-in clinics.

Thank you for making it to the end! If you have any questions about this or any project please shoot me an email.