Claire

UI/UX Design/Development 2015 OpenFDA

Claire is a product for drug manufacturing marketers, drug researchers, and the general public. The system correlates adverse events for drugs, consumed from FDA data sources, to positive and negative sentiments expressed on Twitter for that drug. The results are aggregated by drug and displayed in user-friendly graphs.

Interface Driven Development

Interface Driven Development (IDD) puts the user first. We start with features and enhancements by first working on the user interface, which drives requirements gathering and also helps determine the architecture. I helped facilitate and guide the team from the beginning by conducting discovery workshops to collaborate with the customer on high-level requirements, user experience workflow, and user interfaces. We continued to flesh out user experience and wireframes, with collaboration from development team. We also conducted customer reviews of designs and connect our UX process to our Acceptance Test Driven Development (ATDD) model. The result was stories with built-in design and testable criteria to drive our definition of complete.

Design Pattern
Design Pattern

We utilized our own home-brewed responsive HTML & CSS library.

Style Guide
Style Guide

Developed a product specific style guide for future development efforts

Usability Tests
Usability Tests

In addition to testing the app with people outside of the development team, we held two demos with stakeholders and other users.

Agile Development
Agile Development

An iterative approach helped us prioritize features and improve the usability of the interface.

Claire Homepage

Customizing Analytics

We integrated several types of graphs to display the analytical data in a unique manner to draw visual correlation between negative tweets, adverse events and recalls.

  • 1Identify a recall via the teal vertical line
  • 2Correlate the amount of Adverse Events reported around the same time as the recall, via the violet circles displayed horizontally across the bottom.
  • 3Correlate the spike in negative social sentiment. Click on the icon to view relevant news articles from that date range.
Claire Analytics Overview

Claire Details

Claire Search

Claire Details

Responsive Prototype

The prototype was tested in the following browsers and hardware:

  • Chrome on Windows, Mac, iPhone 6, iPad 2, and Android
  • Internet Explorer 11 on Windows
  • Firefox on Windows and Mac
  • Safari on Mac, iPhone 6, iPad 2, and Android

Open Source Technologies

We utilized the following modern and open source technologies, among others:

  • AngularJS
  • Sass
  • D3
  • Google Fonts

Claire Responsive Views

Claire Style Guide