WebMD

I joined Healtheon in 1997 when it was a startup. After the IPO the company merged with WebMD and changed its name. After working on several products I became lead designer of Healtheon Practice, Healtheon’s new web portal for physicians and their office staff.

Before we began design on Healtheon Practice, we did numerous doctor office site visits. One of the key things we learned was the that most physician practices have an office manager who manages the business side of the practice - leaving the medical end to the physician. Physician practices are like small businesses where the physician is the owner. For things such as Refererrals, Authorizations, Claims and Lab Reports, the office manager was much more knowledgeable than the physician. We also did numerous site visits to insurance claims processing centers and laboratories.

Below is a screen capture of the prototype for Healtheon Practice 1.0. Healtheon Practice provide physicians with news and reference information as well as the most common physician practice transactions - elibibility, referrals, claims and clinical reports. Notice the tabbed navigation bar on the left. This provided convenient organization and access to all of the services offered in the portal. All major functions were simulated in a prototype. The prototype was iterated on many times before arriving at a final design.

User Interface Integration Guide

It quickly became obvious that new services would continually be added to Healtheon Practice. Some of these would be developed internally; others would be partnered. A User Interface Integration Guide was created that provided information on how to develop a service that would be consistent with Healtheon Practice. The guide and the prototype worked together. The guide described integration - the prototype showed examples of integration, and provided a platform for designing new services. The Integration Guide was distributed widely - both within the company and to partners.

Healtheon Practice 1.0 was very successful. In the months following its release, Healtheon embarked on a series of mergers and acquisitions that dramatically increased the richness of the information and services that could be offered to physicians. Also during this period the decision was made to change the brand of the physician portal - from Healtheon Practice to WebMD Practice. These factors necessitated a redesign of the portal. A new version of the UI prototype was created that reflected the new look and new branding. The previously existing services were updated and an intensive effort was launched to design and prototype the new services that would be added. Because the core of the prototype already existed, this was accomplished very quickly.

Below is a screen capture of WebMD Practice (version 2.0 of the physician portal).

The tabbed navigation bar from version 1.0 was replaced with a new design that featured expandable categories. Each category was a header (Today's Medical News, CME, Medical Community, etc.). When the user clicked on a category it expanded, displaying the services underneath. When the user clicked on a new category it expanded, and the previous category collapsed.

Expand/collapse was implemented using JavaScript and document writes (i.e. the code was all on the client). Because expand/collapse did not require a page reload (and thus a round trip to the server) it was virtually instantaneous. This was crucial, because it enabled and encouraged users to explore the portal. New users could click through all of the categories, and quickly see all of the available services. Nothing was hidden or buried; everything was always quickly accessible using the Navigation Bar.

Branding

WebMD Practice was architected so that it could be easily rebranded. This allowed WebMD to offer different products built on the same platform. It also allowed partners to rebrand the portal with their logos and their colors. By modifying a stylesheet and a finite set of 8 images, a completely different look could be given to the portal. The set of customizable assets was documented and made available to customers and partners who wished to give the platform a different visual look.

Below is a screen capture of WebRN, WebMD's portal for Nurses. Both WebMD Practice and WebRN used the same platform and the same set of common services.

WebMD Practice 2.0 provided a wide range of services, including: Medical News, Continuing Medical Education, Secure (encrypted) email, Eligibility, Referrals, and Claims. One popular feature allowed physicians to create a web site for their practice. A wizard was used to prompt the user for information to be contained in the site. This included an optional feature that allowed patients to schedule appointments over the internet.

The screen below shows an example of a physician page generated by the wizard.

Users were able to choose from a set of 9 visual styles for their website, and they could preview how their site would look. Styles were switched simply by swapping in a different stylesheet and a different set of image assets. The HTML was exactly the same regardless of style.

One final example from WebMD Practice. This screen below shows a referral, one the common transactions performed at a physician's office.

The prototype demonstrated the dynamic behavior of the user interface. For example, it included a service for checking patient insurance eligibility. The prototype did not actually check patient eligibility of course. Rather, when the user of the prototype entered search criteria and clicked "Search for Patient", the prototype simulated searching a database. A "Search In Progress" message was displayed using JavaScript timer events. After a realistic period of time had elapsed (simulating the time it would take to search a real database), an example search results screen was displayed.

The ultimate testament to the success of the prototype was that it and the product were virtually indistinguishable. Even after the real product was available, the prototype was often used for demonstrations.



PORTFOLIO | ABOUT