My Role and Project Background
In the summer of 2006, I joined a UnitedHealthcare project team that had been tasked with figuring out a method to convert all customer health plans from unformatted text data to formatted documents that could be compiled as PDFs and viewed online. The plan documents were used by customers when communicating available benefits to employees and by UnitedHealthcare sales teams when negotiating plans with the customers.
Image that I used to explain how XML could be used to establish a structure that could be styled using CSS. In this case the h1 formatting will be applied to the text “[INSERT CUSTOMER NAME HERE]” defined in the CSS.
Plan documents were typically mailed or emailed and then discussed during the sales process and they were difficult to navigate when they consisted of unformatted text. At a time when Drupal, Google Docs, and Joomla were starting to gain traction and online content was becoming the norm, paper health plan proposals consisting of line after line of 8-point Courier font were outdated and not how UnitedHealthcare wanted to be presented.
My primary job was to design the XML templates (XSLTs) that would be used for producing the health plan documents and provide UX design and wireframes that could be used for developing a site for accessing, reviewing, and negotiating the plans.
Methods and Strategy
We used Altova StyleVision for developing XSLT stylesheets and the report layouts, and Altova XMLSpy for writing and editing the XML, creating the XML schema, and for integrating with other code that was required for queries and pulling existing data into the layouts.
Example image showing the StyleVision editor
Most of my time was spent working on layouts in StyleVision. It provides a visual drag-and-drop design interface and is a very easy tool to use for XSLT coding. It supports CSS and JavaScript, and it can output to Word, PDF, HTML, and text.
Development was similar to other projects that use CSS for style and layout except that the content we were using consisted entirely of variables, which meant that we couldn’t validate our designs without first attaching the XSLT to a stylesheet and an XML document, then running it against the data that was used for creating the XML. The layouts would be empty without the data and the data would be disorganized without the XML.
Solutions and Delivery
The first thing necessary was to define how we wanted all of the content to look in the finished PDFs and online in HTML. We limited our style library to headings 1-4, body, ordered lists, unordered lists, and maybe 35 class selectors and id selectors to style content like headings in our content. We completed a fun sticky note exercise to get a sense of what people preferred for the heading and body size and styling. People who wanted to be involved could sketch out their own styles and put them up on the wall alongside of other sticky notes that had the same or similar sketches. I don’t have any photos of the final wall of notes, but it was similar to this one that I made in Photoshop afterwards in order to have a record of the event.
Sticky notes showing “votes” for preferred formatting of the Heading 1-4 and body styles
Benefit Plan Report example image from UAT
The consensus winner for styles was all caps and bold on all headings, underline on heading 4, and font size determined by print body at 12-point, online body at 16-point, and all the headings sized up from these body styles in 4-point increments. A couple of example pages using this styling (and the XSLT, XML, and CSS) is shown here.
With the report layouts in relatively good shape, the next task on the job was to begin working with other designers to pull together layouts and wireframes for the site that customers and sales would use for reviewing, negotiating, and discussing the plans. Development work on this site was not going to begin until after my contract concluded, but we wanted to have recommendations in place early so that they developers could start their part of the project with user flows and layout ideas ready.
There were four primary pages to include in the design process: Home, Current Plan(s), Plan History, and Active Negotiations. Wireframe sketches for these pages are shown below.
