With 400+ ambulatory clinics orchestrating 3.5 million unique annual patient visits across five western US states, Providence Medical Group (PMG) sought to raise overall clinic performance by identifying and reinforcing best-practice operations, clinic management, and patient workflows through a SharePoint web application.
The web application successfully addressed many of the underlying conditions leading to long staff onboarding times, inconsistent patient experiences, and varying levels of care delivery between clinics by capturing, articulating, and rapidly spreading expert-to-expert knowledge more effectively than the usual word-of-mouth sharing in meetings and conferences.
As the business set about creating and validating documentation for the best way to do things like charting, rooming patients, and making post‐visit corrections, creative minds set out to organize concepts around a mental model of a patient's journey through the clinic.
Free from the constraints of any particular vendor or software solution, an artist and group of creative leaders quickly latched onto value of this journey as the key organizational concept that drove document metadata and the design of a compact half-circle navigation element in the web application that became known internally as "The Dial."
Version 3.0
The concept was attractive, innovative and consistent enough with PMG's way of doing business that it received sponsorship for building a fully SharePoint solution using out-of-the-box parts and client-side code.
(1) Dots and Sections - the animated dots on the outside edge of the Dial revealed their purpose on mouseover and returned all documents related to that purpose when clicked. Section arcs inside the dots described a patient's pre-visit, office visit, and post-visit experience. When clicked, these arcs returned all the documents of the section.
(2) Bars - the half-circle navigation sat on top of button "Bars" that linked to key topics of interest spanning the entire patient visit.
(3) Help & Suggestions - the Dial also contained links for requesting Help or submitting Suggestions for improvement.
(4) Search Box - a search box auto-suggested specific documents alphabetically by title, and the sequence of input characters where highlighted in those titles. Users could open a specific document directly from the list, or return a list of documents where the search term or phrase matched document titles or descriptions. This made finding things fast if you knew what you were looking for.
(5) Reflection of the Day - filling the empty space below the Dial with something spiritually meaningful to the mission prior to a search became an opportunity to connect Dial users with the daily reflections maintained by ministry leaders and announced every morning over the Providence Portland Medical Center public address system.
(6) Full-body Search - since the Dial search box code could not return terms found in the documents themselves, a "Full-Text Search" scoped search box on the top right side of the page filled that gap, alongside announcement web parts for news, document updates, and related links.
(7) Filters - this Dial version trimmed document search times down to a few seconds. It allowed users to refine results by Clinic Type, Provider Role and State.
(8)/(9) Icons - provided visual cues to document type and how the document related to internal PMG initiatives or alerts.
(10) Ratings - while clicking on the hyperlink opened the document, clicking on the result body exposed a details page for document ratings and other basic document metadata.
(11) Related Details - the details page also showed related PMG initiatives such as the Periodic Table of Meaningful Use, Statusbook, FAQs, and content warnings by state.
Version 4.0
As word of the tool spread, so did the volume of users and number of workflow standards documents, spreadsheets, and videos. Suggestions and shortcomings were quickly identified and resolved through several corrective code releases that vastly improved usability, expanded functionality, and reduced upkeep costs.
Sadly, much of the metadata and relationships with internal content lost importance to the group. No-one cared about ratings, no matter where they were placed in front of users. The grey background looked heavy after a while, and the filters were too constrained by column widths for growth. A new version addressed many of those ills, resulting in a cleaner look and feel.
(12) Settings Toggle - mobile users could not rely on a mouseover to reveal the purpose of dots or section arcs, so a show/hide toggle button gave them the ability to show or hide those details.
(13) Independent Parts - for visual clarity, the Reflection of the day and search result panes detached from the Dial navigation to create more space for support information, settings, and filters.
(14) Filter Stack - filters moved to the right of the Dial in a stack. This enabled users to filter results before searching.
(15) Save Filters - consumers frequently accessing a particular set of filtered documents could now save these selections on exit.
(16) Single Click Results - without the need for an information page, clicking anywhere in the result would open the document.
Build
A single HTM file contained all of HTML, CSS styles and JavaScript code. I stored the file in a "scripts" document library on the site along with the jQuery Core and SharePoint Web Service library files it relied on, and I deployed the file in a Content Editor Webpart on the home page of the PMG site.
I customized the SharePoint Display Form with XSL and XSLT code, and I used Inkscape to create the handful of images that supported the look and feel of cards and navigation.
Results
Shortly after the Dial's release, PMG marketed the product in Oregon PMG clinic provider, medical assistant, front office personnel and other staff meetings. It quickly became popular as the best place to go for ambulatory operations information like education, quality, revenue cycle, operations, and Epic training. Dial usage eventually leveled out at 20k document lookups per month throughout its lifespan. This was a low usage rate by Internet standards, but PMG leaders considered the number to be significant for an internal facing app that applied primarily to Oregon region's 25K employees.
Responsible for product architecture and development from concept to code, including out-of-the-box SharePoint web site pages, lists, libraries, display forms, web parts, term store and search experience features. Drove strategy and tactics. Maintained product through numerous enterprise operations changes.
2011 to 2012
The first two versions of the Dial relied on JavaScript UI code provided by a vendor. I setup the SharePoint 2010 site and a C# console application to retrieve and send XML data to the vendor. This duct-taped things together well enough to show value and generate immediate funding for further development.
2012 to 2021
I fully integrating the app into SharePoint 2010 as a single HTM file which displayed the documents when called from a Content Editor Webpart on the home page of the site. This HTM file contained all the web part's HTML, CSS styles and JavaScript code, and it resided in a "scripts" document library on the site along with images and jQuery Core, UI, Imagemapster, SharePoint Services library files. I setup the SharePoint Term Store for document tagging and a scoped search page for finding content inside of documents. I built and maintained icons using Inkscape.