Case Studies: Healthcare Portal

Overview

This project featured a patient query and visit listing interface, whose main functionality would be deployed as a JSR 168 portlet in Vignette Portal. I designed and developed a custom theme and grid for the portal container, as well as the portlet query and result listing screens.

The timeline of this project constrained our UI options somewhat, but by seperating out the presentation and behavior layer, back and front-end development was able to be carried out in parallel and iteratively. By following the "semantic markup" best practice (tables should be tables, use lists for lists) I was able to quickly sketch out markup the developers could work with. This bought time to develop and add in more refined look & feel and interaction in parallel with server-side development with a minimum of fuss caused by integration.

I used the Dojo widget system and a custom Behavior implementation to remove interaction specifics from the markup, allowing several rounds of refinement. The custom Tab widget was written to utilize more semantic markup - for a better degraded experience in accessibilty scenarios, and to allow deployment of the portlet outside of the custom Grid (which provided the dojo build and interaction scripting.)

Roles

• Visual and interaction design, mockup development
• Implementation of presentational JSP, html/css, javascript

Highlights

• Lightweight, accessible and scalable design for rapid, repeated use in critical environments.
• Custom theme (various Styles + custom Grid) in Vignette Portal to implement the portal wrapper design and portlet look & feel.
• Custom Dojo Toolkit tabset widget
• Modular CSS and javascript implementation

Technologies

• Vignette Portal (7.2) - created and deployed Styles/Theme and Grid
• JSP/JSTL for the Grid, Styles and portlet presentation layer
• Dojo Toolkit (javascript) for implementing user-friendly interface, with a clean seperation of markup (JSP) and behaviour
• XHTML, CSS