PSC Research Network: Connecting Patients and Researchers

January 14th, 2013 by Gage Pacifera

A while back Krysora enlisted Harmonic Northwest to help create a prototype web application that connects patients suffering from Primary Sclerosing Cholangitis with researchers trying to find a cure for the disease. The web application was built on java and Google Web Toolkit and made use of the now-defunct Google Health framework. It was a pretty cool project both in terms of what it was trying to accomplish and the functionality.. I’ll share some details below.

The Goal

Primary Sclerosing Cholangitis (PSC) is a rare disease that damages the liver, often resulting in liver cirrhosis, liver failure and liver cancer. The disease is not well understood in part because it is rare—figures for incidence estimate 0.068–1.3 per 100,000 people have the disease. There is very little PSC data for researchers to look at.

That was the primary problem that this web application tried to solve. The app was aimed at creating a place where people with PSC could share their health data so that researchers can have more data and better access to data related to individuals with PSC.

The Interface

screenshot - PSC 2The application was designed to be used primarily by two groups: PSC patients and PSC researchers. On the patient side, the challenge was to create an interface that allowed them to easily manage what could potentially be a lot of complex health data. On the researcher side, the primary challenge was creating an intuitive user interface for filtering patient data. I think we ended up finding pretty good solutions for both.

screenshot - PSC 1We divided up the patient medical information into eight primary categories and displayed those as dropdown boxes on the Summary screen. Within any of those boxes, a user could add a new item or edit an existing item, which would bring up a modal dialog. To prevent the dropdown boxes from getting too big when there are a lot of entries, we paginated the rows of entries. We also created a data entry wizard that allowed patients to add all of their information in a more guided manner.

screenshot - PSC 4On the researcher side, we created a two step UI for filtering through patient data to get a list of results. In the first step, the user is presented with a series of dropdown boxes that contain filtering options. Once the researcher has set all the options, she clicks the “Run Query” button to see the results. A list of patient data is output and the user can click on an individual result to see de-identified information about that patient. The researcher can also put in a request to contact that patient, and that request is facilitated by site administrators.

The Technology

screenshot - PSC 3We used java and Google Web Toolkit to develop the site. There were a lot of challenges getting everything to integrate with GWT, but we found ways to make it all work out okay. Fortunately we weren’t doing anything too complex in terms of javascripting as that’s where a lot of the problems popped up.

On the UI side, I used my usual standard of XHTML 1.0 strict for layout and jQuery for the dynamic effects. As expected, the combo produced a rock solid UI across the browsers on our target list.

Krysora took care of the back-end programming and Harmonic Northwest did the design and markup for the layouts.







Posted in Portfolio, Web Application, Web Development

Back to blog home