Improving User Experience with React and Sitecore

As a health-care organization that provides quality care to many current and prospective patients, the ability to easily navigate thousands of physicians to find one that is “just right” is critical. Physicians are their product! Recently, we worked with a large health-care client with an existing physician-finder tool that was beginning to show its age. The tool functioned well, but it dropped the user into an experience that was often quick to overwhelm.

Meet the New Guide

Rather than drop the user into a sea of physicians, the new approach was to replace the landing page with a launch pad to a guided search (fig. 1) that took the user through the most important filters before landing on a more manageable and relevant results page. One of the biggest changes was that when users got to the results page via the new guide, only physicians who were accepting new patients were displayed. In some cases, this effectively filtered out over one thousand physicians who weren’t relevant to the patient.

Screenshot of the Find a Doctor search interface.
Fig. 1

Technical Considerations

This was a situation that was ripe for a modern front-end development framework. The site had used KnockoutJS as a JavaScript templating solution in the past. However, Knockout has also been showing its age, and more robust and well-supported frameworks have emerged. Specifically, we narrowed our options down to ReactJS and VueJS due to their proven track record, community documentation and support, as well as their ability to integrate nicely with Sitecore JSS should we decide to use it. It was a close race, but we ultimately settled on ReactJS simply due to having more developers on the team with React experience.

Data Integration with Sitecore

During this project, we were also faced with the challenge of how to get physician data from the client’s back-end systems onto the website since the REST API they created for us was not intended to be consumed in real-time. Previously, data was downloaded from the API and directly inserted into four different Lucene indexes which had to be rebuilt often to keep data in sync. This was an expensive, time-consuming operation that was ready for an overhaul.

Our approach was to create an import agent that would run nightly and import all the physicians and their related filters into Sitecore as bucketed items. The process was simple – hit the API and grab the data in bulk, and then perform an “upsert” on the appropriate bucket in the Sitecore tree. This procedure can also be kicked off on-demand to support data updates during the day (fig. 2). With the data being persisted as Sitecore items, it is now indexed by Sitecore’s default mechanism allowing us to work more efficiently using the native Sitecore API. 

Screenshot of Physician Import Settings panel within the Sitecore CMS interface.
Fig. 2

An Application Within an Application

A common design pattern with ReactJS is to create a Single Page Application (or SPA) where the entire app is one page and “virtual pages” with relevant content are loaded on-demand with the help of a router. Because our client’s existing website was not an SPA, we essentially needed to create an SPA for the guide experience that existed inside of the larger non-SPA, the website itself. As a side note, because the guide was not required to be indexed by search engines (only the physician detail pages had this requirement), we did not need to create this app using Server-Side React Renderings.

Once we had a breakdown of UX design pieces that warranted their own React component, we created a map that explained each component’s props and child component hierarchy, sliced them into product backlog items, and planned out our sprints.

For testing, we harnessed Jest and Enzyme to unit test the JavaScript code.

Lessons Learned

Because this was our team’s first foray into React, there were a few growing pains and lessons we learned along the way. We were not initially able to utilize Webpack, so we ended up using a combination of Gulp, Babelify, and Browserify to transpile and bundle our code. Another issue we faced was prop-drilling. As our component structure was sliced rather thin for reusability, we ran into issues getting data from higher-level components into deeper child components, requiring us to create pass-through props for components in the middle-tiers. Future releases will likely rely on more focused component composition or the Context API. Furthermore, this functionality was written before React Hooks started to become a standard, and thus would likely transition to utilizing Hooks in the future. As previously mentioned, we will look to utilize Webpack in future releases.

The Result

Our client, especially on the UX side, was extremely happy with the result of this project. We implemented their vision perfectly, performance was drastically increased, the patients were given a much more welcoming experience, and we as a development team had a lot of fun working with front-end JavaScript frameworks. Since the release of this feature, our team has lovingly embraced the JavaScript side of things even more than we did previous. We implemented a team culture of avoiding jQuery and other frameworks when vanilla JavaScript worked out-of-the-box in our supported browsers. It also spawned many other side projects and learnings about how to incorporate VueJS and ReactJS into our solutions when the situation calls for it. It was really fulfilling to be able to learn a technology we hadn’t used before, implement it in the client’s vision, and have a blast while doing so.

Screenshot of Step 1 of the Find a Doctor interface.
Screenshot of Step 2 of the Find a Doctor interface.
Screenshot of the search results for the Find a Doctor interface.

Related Ideas, Info and Stuff You’ve Gotta Read

Creating an Interactive Regional Map with Mapbox and Sitecore

Creating an Interactive Regional Map with Mapbox and Sitecore

Discover how we created an elegant and user-friendly way to display regional statistics combining both Sitecore and Mapbox.
Creating Immersive Front-End Sitecore XP Experiences with GreenSock and ScrollMagic

Creating Immersive Front-End Sitecore XP Experiences with GreenSock and ScrollMagic

Learn how we crafted a smooth, interactive, immersive experience that takes the user through the patient’s journey from beginning to end.
Charting a Path to Sitecore with Highcharts

Charting a Path to Sitecore with Highcharts

Read how we showcased 1,000+ charts of medical data into a navigable, memorable user experience.
Migrating Sitecore Indexes from Lucene to Solr

Migrating Sitecore Indexes from Lucene to Solr

When we were upgrading our Sitecore 8 project to Sitecore 9, we needed to come up with a new solution for indexing the data. Our Sitecore 8 project was using Lucene for indexing which posed two problems: Lucene was not supported in our Sitecore 8 environment configuration, and Lucene was not supported in Sitecore 9.
Paul Brienza
Paul Brienza
Chief Growth Officer
(414) 270-7175
paul.brienza@laughlin.com

Let’s Talk

    Be in the know, now!

    Receive a monthly dose of big thinks. Don’t worry, you can unsubscribe at anytime. Privacy Policy