Fresenius Kidney Care

Site Redesign  |  FreseniusKidneyCare.com

The Ask:Revamp Fresenius Kidney Care’s current website with a focus on streamlining information delivery, simplifying the navigation, and fixing accessibility issues across the entire site in conjunction with a backend migration to a headless architecture.

As the lead designer on this project, I focused on usability issues that had been increasing the site’s bounce rate and lowering retention among the client’s 65+ year old target audience.

Client
Fresenius Kidney Care
Role
Lead UI/UX Designer
Timeline
Two Months
Year
2024

The navigation

The original hover-activated fly-out navigation was not accessible and very difficult for Fresenius’s 65+ year old main demographic to use effectively. Many of the core pages were hidden under parents, and some pages weren’t in the navigation at all. We shifted to an intuitive mega menu design that simplified the navigation across all viewports.

Desktop view of Fresenius's navigation
Mobile view of Fresenius's navigation

accessibility

text is high-contrast dark blue color on white background

organization

childless pages are organized together to help visibility

experience

activated navigation section is highlighted

usability

removed hover activation, all pages are shown with one click

MVP design system

Without a component library or web style guide, the site became bloated with components designed for one time use, pages that used inaccessible colors, and brand elements that had since been replaced in print media. As part of the redesign, we replaced all existing components and built a scalable component library and web style guide with robust documentation.

Fresenius component with an icon to the left, text to the right, and a blue button at the bottom
Component with an image of an icon to the left, text to the right, and a text only button at the bottom
Fresenius homepage component with an image on top, headline and body copy under, and outlined button at the bottom
Fresenius component with icon on the top, headline and body copy under, and text button with an arrow at the bottom
Dropdown question component with the last dropdown open
Component with an image of a woman holding a pill bottle and text below the image with a text only button at the bottom
Button with rounded corners, dark blue background, and white text reading “Sign up now”
Button with rounded corners, outlined in dark blue, with dark blue text reading “Sign up now”
Button with rounded corners, outlined in white, with white text reading “Sign up now”
Text only button with dark blue text reading “Learn more” with a dark blue arrow to the right
Fresenius sub-nav with breadcrumbs under

timelines

built reusable components that reduce development time

responsive

designed components in multiple sizes and built them to scale with the viewport

deliverables

created page templates with established typefaces, colors, and typography

brand awareness

updated all components with new brand colors, icons, and photography

Recap

To increase accessibility and usability, we created multiple button styles, used colors strategically to divide content and direct the user’s eye across pages, and applied a mix of photos and icons.

The age of the target audience was our guiding star for every decision we made across the redesign. From small choices to more foundational changes like redesigning the navigation, we made very decision with the end user in mind.

  • Reduced bounce rate
  • Enhanced overall user flow
  • Optimized layout for key actions
  • Increased engagement and usability
Mobile view of Fresenius Kidney Care's homepage
Desktop view of Fresenius Kidney Care's homepage
back to home