Standard workflows dial

  • From Alaska to California, Providence Medical Group's (PMG) 400+ ambulatory clinics orchestrated 3.5 million unique patient visits annually. But not all their clinics were created equal, so they looked for a way to raise everyone's performance in the system by identifying and sharing the most successful clinic workflows - starting in Oregon.

  • Standard workflows dial page
  • Clinic operations and management practices varied widely, because clinic practice tips were spread only by word of mouth. This caused long staff onboarding times, inconsistent workflows, and varying levels of care delivery between clinics.

    Seeking improve the performance of every one of its clinics in five states by reinforcing best practices, Providence Medical Group (PMG) in Oregon asked for a digital product that could capture, articulate, and rapidly deploy expert-to-expert knowledge.

  • Version 1.0

    Version 1.0

  • Version 2.0

    Version 2.0

Dialing in on quality

  • 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."

  • Navigation concept

    Early interface navigation concept.

  • Metadata concept

    Early thoughts on how to show metadata.

Version 3.0

  • The first web application prototype depended on a C# console application for sending XML updates to vendor hosted web server. While not sustainable, the solution duct-taped things together well enough to show value and generate immediate funding for further development. The concept was attractive, innovative, and consistent enough with PMG's way of doing business that it received funding for building a completely out-of-the-box SharePoint solution using out-of-the-box parts and a bit of client-side code.

  • Version 3.0

    Version 3.0

  • (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.

  • Ratings opened a clean, interactive star-ratings dialog.

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.

  • Version 4.0

  • (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.

  • Early version

  • (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.

Under the hood

  • The SharePoint 2010 production platform cached all CSS and JS files, so they ended up inside the HTML file. This made development fast, and non-developers could understand the code enough to tweak it from a simple text editor like Notepad.

  • SharePoint
    • 1 code-behind page
    • 1 script library
    • 1 document library
    • Term Store
    • Scoped Search box, page and refinement panel
  • Protocols
    • C#
    • JavaScript
    • jQuery libraries = Core, UI, Imagemapster, SharePoint Services
    • HTML
    • CSS
  • Design
    • Analysis, composition and usability
    • Graphics
  • Tools
    • Visual Studio
    • Team Foundation Server
    • Notepad++
    • Inkscape


  • Shortly after it's initial release, the Dial had become "THE" place to go for Oregon PMG clinic providers, medical assistants, front office personnel, and others else in the Oregon region for information touching on ambulatory operations including staff in education, quality, revenue cycle, operations, and Epic training. Dial usage eventually leveled out at a steady rate of 20k document hits per month over it's five year lifespan. Though this number seemed low by Internet standards, PMG leaders considered the number to be significant for an internal facing app that applied solely to Oregon's 25K employees - good enough, that is, to consider expanding the idea to enterprise users on an better search platform.


  • Product architect from concept, customer ideation, and creative design to coding. Augmented out-of-the-box SharePoint features with client-side code. Wrote XML file generator console application. Responsible for web site pages, lists, libraries, display forms, web parts, term store, and search experience. Kept product alive and well from product lifecycle through enterprise operations stages. Drove strategy and tactics.