A patient experience built to earn trust and drive discovery
PROBLEM
Clinical excellence doesn't translate to digital discoverability
Respected physicians, unclear unified brand
COSI's surgeons are recognized leaders in orthopedic care, but their individual reputations weren't connected to the clinic itself. Patients discovered the physicians through word of mouth and social media, then landed on a website that felt disconnected from their reputation. The fragmented digital presence and generic tone made the practice seem less credible, not more.
Overpowered by larger health systems
Competing against Cleveland Clinic and University Hospitals without a cohesive online presence meant COSI couldn't leverage its real advantage, the personal reputation and expertise of its physicians. The website did nothing to differentiate a physician-owned practice from massive health systems.
Discoverability
The site wasn't ranking high for relevant searches. Patients couldn't find COSI despite actively searching for orthopedic care in the area.
Content
Incorrect and vague information didn't help patients make informed decisions or consider COSI for their care. Stock photos and visual inconsistency undermined credibility.
Navigation
The appointment booking process was confusing, the site structure was unclear, and CTAs weren't obvious. Patients struggled to understand where to go or what to do next.
Accessibility
Font sizes, contrast ratios, and missing alt text blocked the primary demographic, seniors researching orthopedic care, from using the site.
THE CHALLENGE
How might we design a digital experience that reflects clinical excellence, unifies the practice's brand, and earns the trust of patients actively searching for orthopedic care?
+334%
Organic clicks
+163k
Monthly impressions
4x
Search ranking gain
12.5x
Faster organic growth
SOLUTION
A scalable, patient-first redesign
The redesigned COSI website is built around one principle: every decision should make it easier for patients to find what they need and trust what they find. Rather than redesigning for visual polish alone, I focused on the underlying structure: clearer information architecture, accessible visual design, and content depth that supports patients making real decisions about their care.
Clarity and accessibility
A site seniors can actually use. Larger text, stronger contrast, clear visual hierarchy, and obvious next steps so they can find what they need without strain or confusion.
Depth and information architecture
A site users can research thoroughly. Organized content broken down by condition and specialty, detailed treatment information, and a scannable structure that let them find what they need quickly and share it with others.
Here are some key screens on COSI…
LIVE SITE
Quickly understand if COSI is right for you
Find out what COSI treats, meet the team behind your care, and hear from patients who've been where you are without making a single call.
LIVE SITE
Learn exactly how COSI can help you get back to physical activity
Browse conditions and treatment options organized by joint so you can find what's relevant to you and understand what care might look like.
LIVE SITE
Get to know your doctors before you commit
Learn about the clinic's values, philosophy, and expertise behind your care so you know what to expect and who you're trusting with your health.
LIVE SITE
Everything you need to plan your visit
Find phone numbers, driving directions, handicap parking instructions, and a printable directions option to prepare for your appointment.
Impact
Active users grew 187% and page views increased 171% in the year since work began, reflecting a site that more patients are finding and actually spending time on.
UNDERSTANDING
Understanding the patient journey
Hearing what the front desk staff had to say
I used the front desk staff as a proxy for patient insights, and they ended up revealing friction points other tools I had access to wouldn’t have been able to surface. One major insight was that younger patients and caregivers were the majority of patients who were scheduling online, whereas older patients were calling the office for basic questions like directions and hours.
Our main demographic is older patients who don't typically know what information is on the website.
Front desk staff
They also flagged an issue with the online scheduling system, where patients were able to book with the wrong physician or selecting insurance options that specific doctors don’t accept. These created more work and room for human error on their part, since they had to closely review appointments to make sure the patients’ visits went smoothly and sometimes errors would go unnoticed until the time of the appointment.
What user behavior data showed
Hotjar revealed scroll depth was shallow on most pages on the original site; content hierarchy wasn't giving users a reason to continue past the first viewport. Click mapping showed where patient intent actually was: users were actively seeking information about individual surgeons and showing significant interest in certain joints over others. Both validated prioritizing more specific content on the clinic itself and the services it provides.
Who I was designing for
These insights informed two primary personas who are often making care decisions together:
Margaret
AGE: 68
OCCUPATION: RETIRED
FAMILY: GRANDMOTHER
Motivations: Getting back to daily life without pain, finding a doctor she can trust
Goals: Book an appointment with a reputable orthopedic specialist
Pains: Technology that assumes she's comfortable navigating complex websites on her own
Sarah
AGE: 44
OCCUPATION: MANAGER
FAMILY: MOTHER (MARGARET'S DAUGHTER)
Motivations: Finding the best care for her mother as efficiently as possible
Goals: Quickly vet a specialist and feel confident enough to recommend them to Margaret
Pains: Websites that bury the information she needs to make a fast, informed decision
PRODUCT THINKING
The reasons behind my design decisions
Every decision was guided by a simple question: does this help Margaret and Sarah find what they need and trust what they find?
Reduce friction at decision points
scroll
DESIGN CONCEPT
Homepage restructure
The original homepage tried to do everything at once: a massive logo, a vague CTA ("Call for Specialty Information"), contact details in the hero, and a block of dense copy about the clinic's philosophy. None of it was organized around what a patient actually needs when they land on the page.
I restructured the homepage around a patient's decision-making process, surfacing one idea at a time: here's what we treat, here's who we are, here's what other patients say, here's how to get started. The hero went from "Expert Orthopedic Care" with a phone number to a clear value proposition, "The Care That Keeps You Moving," paired with two distinct CTAs: "Schedule an Appointment" for patients ready to act, and "Meet Our Doctors" for those still evaluating. Each section earns attention before asking for the next scroll, guiding the patient through the decision rather than asking them to sort through it themselves.
Impact
First visits increased 190%, meaning nearly 3x more patients are landing on the site for the first time and finding a reason to stay.
DESIGN CONCEPT
Navigation clarity
The original nav consumed roughly a third of the screen. The logo was oversized, pixelated, and stacked vertically, pushing all meaningful content below the fold. On mobile, some pages even had a "skip to content" button just to scroll past it.
I reduced the nav to a compact horizontal bar with a smaller logo laid out horizontally so it's present but not dominant, more breathing room between links, and a persistent "Book Online" button in a contrasting color so it's always visible without overwhelming the page. The goal was to make the navigation reliably there without getting in the way of the content patients came to see.
Impact
Nearly half of all users are on mobile, where the original navigation consumed a third of the screen. Reducing it was one of the highest-impact changes for the majority of the audience.
Scheduling form improvements
The third-party scheduling platform had usability issues that were preventing patients from completing bookings. Required "reason for visit" options included jargon like anterior hip vs. posterior hip, terms most patients like Margaret might not know. Middle name, secondary insurance, and insurance card photo uploads were all marked as required fields, even though most patients don't have multiple insurance cards to upload. A fillable text field asked "how did you hear about us" when a dropdown would reduce effort.
I simplified the visit reason options to use patient-friendly language, removed unnecessary required fields so Margaret could complete the form without getting stuck on information she didn't have, and standardized the form formatting for consistency. These changes removed barriers that had nothing to do with the patient's actual intent to book.
Design for the actual user
Accessibility as a foundation
The original site used 14px body text, had multiple instances of low contrast text on backgrounds, and alt text that repeated file names; a screen reader would announce "surgery-center-817-by-688-dot-jay-peg" instead of describing the image. For Margaret, who may be managing vision challenges alongside her knee pain, these were barriers to access.
I increased body text to 16px, corrected contrast ratios to meet WCAG guidelines, rewrote all alt text to be descriptive, and standardized the heading hierarchy so screen readers and sighted users could follow the same content structure. Tap targets were sized for less precise interactions, and the navbar became sticky so users can navigate from anywhere on the page without scrolling back to the top.
DESIGN CONCEPT
Information Architecture
Mega menu
The original navigation had a handful of top-level links with no clear logic to what lived where. As the site expanded from roughly 20 pages to over 85, a standard dropdown couldn't accommodate the depth without becoming overwhelming, especially for users who aren't comfortable with technology.
I designed a mega menu organized by clear categories: Conditions broken down by body part, Services with brief descriptions so patients understand what each one means before clicking, and Specialties for Sarah when she already knows what type of care her mother needs.
Content depth
The original site lacked the information Sarah needs to make a decision. There was little detail about what conditions the clinic treats, what treatment options exist, or what to expect as a patient. Sarah comparing COSI against Cleveland Clinic would find significantly more substance on their site and move on.
I expanded the content library to include condition pages organized by body part, each with defined conditions and treatment options written in plain language. The intention is for each condition card to link to a dedicated page with deeper information, giving Sarah the level of detail she needs to confidently recommend COSI to her mother.
Impact
65% of all users arrive through organic search, and those visitors spend nearly 3x longer on the site than anyone else (1m 12s vs 33s). Patients finding COSI through search are reading and engaging, not bouncing.
Building something that scales
LIVE SITE
Global footer
The original site scattered contact information across the page: address and phone number in the homepage hero, hours in a floating box, email buried below the fold. The footer existed but only repeated the address, phone, and social links. Margaret could spend time on the providers page, find a doctor she liked, and have no way to find the clinic hours without navigating back to the homepage. I consolidated everything into a structured global footer keeping the address, phone, quick links, social media, and legal pages. This is where users expect to find contact information on any website, on every page, without having to go looking for it. Above the footer, a final CTA strip gives patients who scrolled through the entire page one last prompt to book before they leave.
DESIGN CONCEPT
A structure that grows with the clinic
Most patients don't arrive knowing exactly what they need. Sarah knows her mother's knee hurts; she doesn't know if it's arthritis, a meniscus tear, or something else entirely. The IA was designed around that reality. She starts at the conditions level, narrows to knee, and finds a list of common conditions with plain language descriptions that help her identify what Margaret is likely dealing with. From there, each condition card is intended to link to a dedicated page with deeper information on symptoms, treatment options, and what recovery looks like which gives Sarah the detail she needs to feel confident before ever calling the clinic.
The structure was built with that next step in mind. As COSI grows its content library, the architecture is already in place to support it without a redesign. Sarah's journey from "knee pain" to "this is the right doctor" gets more complete with every page added.
Visual cleanup
The original site used multiple shades of blue inconsistently, background photos that were hard to identify and competed with content, and inconsistent card and component styling. I reduced the palette, removed decorative background images that weren't serving a purpose, and standardized component styles across the site. The goal wasn't minimalism for its own sake but making sure every visual element was earning its place on the page.
I monitored page behavior through Hotjar after launch to confirm the templates were working as intended. For example, the eyebrow labels I'd designed with a light rounded fill was being clicked by users who mistook it for a button. Removing the fill was a small adjustment, but came directly from watching real behavior rather than assuming the design was working.
REFLECTION
What I walked away with
Not quite there yet
I designed a system for the redesign, but it didn't always map cleanly onto the global design capabilities of the WordPress builder I was working within, partly a learning curve on my end in not fully understanding the builder's limitations until I was deep into implementation. The result required compromises I'd solve differently in a more flexible build environment. It's functional, more polished than before, and ultimately doing its job: converting patients more effectively than the original site ever did.
What’s next
The current site is a foundation. Several pieces of the original vision were deprioritized to launch, and each one represents continued work toward a fully patient-centered experience: individual surgeon pages with their photos featured on relevant condition pages, expanded condition and treatment content, a patient information hub with downloadable forms and surgery prep guidance, and a surgery center page for the facility in the same building. Each addition closes a gap between what patients are searching for and what the site currently delivers.
Key learnings
Know when research adds value
Fix what common design knowledge already tells you, then use research to surface what you couldn't have predicted.
Constraints clarify priorities
Limited budget and tight timelines forced decisions that actually made the work better. Every element had to earn its place.
Ship, then refine
Getting something live creates traction, real data, and stakeholder buy-in that waiting for perfect never does.
Watch what users actually do
Observed behavior will always tell you something your assumptions missed.