Go to content ↓

Michael's Headquarters

On UX Design and Development

MyBCRisk.org

The website MyBCRisk.org ("My Breast Cancer Risk") is a questionnaire site that provides users with real time feedback on their current health and behaviors. As users answer questions the site provides evidence-based responses to encourage positive behaviors or suggest changes to negative behaviors.

Walkthrough of the MyBCRisk.org UI
Walkthrough of the MyBCRisk.org UI, including home page and questions with real-time responses (when available).

Design

MyBCRisk.org was a joint collaboration between the UNC School of Information Science and the UNC Gillings School of Global Public Health. Under the guidance of Professor Brad Hemminger, and with the help of another SILS student, I worked with stakeholders in the UNC Breast Cancer and the Environment Research Program to create a mobile-first, responsive design. This involved getting user feedback early and often in an iterative design process with paper and high fidelity prototypes.

Screenshot of the MyBCRisk.org home page on a small screen
The MyBCRisk.org home page on a mobile device. The iPhone 6 was released during the development process and nothing had to change, proving the responsive design approach was a good idea.
Screenshot of the MyBCRisk.org home page on a large screen
The MyBCRisk.org home page on a desktop. Priority was given to mobile screen sizes during the design phase, so not much changed at larger screen sizes.
Screenshot of a MyBCRisk.org question page on a small screen
A question page on a mobile device. By exposing all possible options on a single screen we decreased clicks/taps required so users could speed through the quiz.

Development

The website utilizes progressive enhancement and responsive design to reach the largest user base possible. In terms of progressive enhancement, all links point at real resources on the server and forms do full POST requests without JavaScript on the client (with JavaScript on the client all forms submit via AJAX with server responses updating the client without a page reload). The responsive design is implemented utilizing the Foundation framework.

Session state management is done through cookies and URL parameters. This allows users to return to the site to review their results or finish the questionnaire for up to 30 days. The results are also shareable via URL, to show friends or family where a user is doing well or may need improvement (social support). The database backing the site is PostgreSQL and the entire application ran on UNC's OpenShift instance.