Holland Hospital Bone & Joint Center

Improved design and mobile experience for hospital orthopedic surgery website

Dr. Derick Johnson is an orthopedic surgeon located in West Michigan. He specializes in anterior hip replacements and was also first in West Michigan to offer Mako SmartRobotics™ for total knee replacement.

Services:
Design
User Experience
Front-end Development
Back-end Development
Accessibility
Technologies:
Drupal 9
Project Link:
Senior couple walking along shoreline

Project Expertise

Content-managed websites

This website was built to replace an outdated site, and ensure that content managers can add new content and make updates with ease. This was a big improvement to the overall admin experience.

Project Contributors

Frank head and shoulders, with glasses, beard, and red checked dress shirt

Frank Holub

Developer

Riley head and shoulders, with glasses, light brown hair, and a dusty pink sweater

Riley Rittenhouse

UX Designer, Front-end Developer

Project Brief

RDG was tasked with building a new Drupal 9 website for the Holland Hospital Bone & Joint Center that provided a better user experience. Their old website was outdated and felt disconnected from the new Holland Hospital branding. Our main goals were to:

  1. Update the overall design to be more modern and better align with the Holland Hospital branding.
  2. Create a better user experience by simplifying navigation, eliminating unnecessary content and taking a mobile-friendly approach. We also wanted to provide an easier content administration process for future updates and basic maintenance of the site.
  3. Simplify the process for patients needing to request an appointment, download documents and access the patient portal. Follow accessibility best practices to make an inclusive experience for all users.
Bone and Joint Center website before
Bone and Joint Center website showing large video and header information

An outdated and text heavy site was redesigned to be a clean, more modern site. 

Challenges and Solutions

Throughout the course of this project, there were several challenges we needed to overcome in order to create a high-quality website that achieved the client's goals.

Challenge

Working within the Holland Hospital branding, while still creating a unique design

Solution

Finding balance

We took our time in the design phase to ensure that the site we built would meet and hopefully exceed all the expectations of our client. We went through several rounds of revisions to perfect the designs and found ways to subtly apply the Holland Hospital branding. This was applied to a range of components that could be used for content creation.

Challenge

Content that was very image heavy which increased page load times

Solution

Responsive image styles

We leveraged the Critical CSS module to deliver above-the-fold styles as quickly as possible, used responsive images to get the best quality image for each screen size, and lazy loaded images below the fold to help reduce some of that extra load time. Using Google’s Lighthouse tool to benchmark site performance, we recorded a 57% increase in Lighthouse performance scores between the initial site build and the launch-ready version. Appropriately caching images and aggregated assets drastically reduces load times for subsequent visits.

Before and After

The previous website had many elements and large images competing for attention, as well as some accessibility issues, specifically with color contrast. The client wanted their new website to have a more sleek and elegant feel, so we used lots of black and white images with pops of color to direct user's attention to action items like scheduling an appointment.

Before view of Bone and Joint Center mobile website
BJC homepage mobile view
Mobile menu for BJC website

Simplifying the navigation, using Critical CSS and utilizing responsive layouts helped improve the mobile experience.

Patient information page Bone and Joint Center
BJC contact form
Rapid Development Group saw our vision for a new Bone & Joint Center website and thoroughly executed the project. Their team was quick to respond, meet deadlines, provide creative web solutions, and design elements for a more user-friendly website. Working with Rapid Development Group made the process seamless.
Calie A. Holland Hospital