Center for Cancer Precision Medicine Web Site
Center for Cancer Precision Medicine Web Site
The Center for Cancer Precision Medicine (CCPM) is a joint effort by Dana-Farber Cancer Institute, Brigham and Women’s Hospital, and the Broad Institute of MIT and Harvard to accelerate development of “personalized” therapies for cancer treatment.
The meaning of “personalized” is actually “genetic” and the work being done at CCPM is a cutting-edge effort to identify and target cancer mutations at the genetic level. Visitors to the site, however, will not see terms like genetics or gene therapy very often. This is not an oversight, it’s an intentional decision which ripples through the site’s structure, taxonomy, and editorial content.
Because, scary though a cancer diagnosis is to a patient and their family, conversations that fold in futuristic concepts like genetics add to stress and anxiety rather than reduce them. With that in mind, the client asked to minimize use of gene-related terminology and to instead refer to “personalized” or “precision” treatment.
I was tapped to work on this project following a similar, big-data, cancer treatment web project completed for competitor Mass General Hospital. The UX cycle was for this project was short and lean. Building on my previous experience with Mass General, I was asked to move straight into wireframes following stakeholder interviews.
Specific goals for the CCPM site were to:
- Establish a leadership position in the growing field of precision medicine
- Encourage participation in clinical trials
- Work seamlessly within the parent web site structure and user experience
Tasks & Deliverables
- Stakeholder interviews
- Site map
Similar Projects & Clients
- Baystate Health
- Blue Cross Blue Shield of Delaware
- Boston Childrens Hospital
- D’Amour Center for Cancer Care
- GW Pharmaceuticals
- Lowell General Hospital
- Massachusetts General Hospital
- New York-Presbyterian Hospital
- Novo Nordisk
- Siemens USA
- Southern New Hampshire Health
- UCLA Health System
- University of Michigan Health System
UX Timeline & Work Samples
Participated in two days of stakeholder interviews. Patient/family interviews would have been ideal but were not possible due to privacy considerations.
[/et_pb_vertical_timeline_item][et_pb_vertical_timeline_item title=”Site Map” use_read_more=”on” read_more_text=”View Site Map” read_more_url=”#sitemap” font_icon=”%%1267%%” icon_color=”#698943″ circle_color=”#ffffff” line_color=”#e09900″ animation=”fade_in” _builder_version=”4.0.4″ background_color=”rgba(0,0,0,0)” background_enable_color=”on” custom_button=”on” button_bg_color=”#698943″ button_border_width=”0px”]
Site map structured to position CCPM as leader in field and to drive users to a single search platform with facets for diseases, genes and mutations.
[/et_pb_vertical_timeline_item][et_pb_vertical_timeline_item title=”Wireframes” use_read_more=”on” read_more_text=”View Wireframes” read_more_url=”#wireframes” font_icon=”%%1866%%” icon_color=”#698943″ circle_color=”#ffffff” line_color=”#e09900″ animation=”fade_in” _builder_version=”4.0.4″ background_color=”rgba(0,0,0,0)” background_enable_color=”on” custom_button=”on” button_bg_color=”#698943″ button_border_width=”0px”]
Developed wireframes that extend off site map to both educate site users about precision medicine and to direct them to disease search and contact information.
Site map with call-outs for future phase content in yellow and a funnel approach driving users to a single search platform with facets for diseases, genes and mutations.
Wireframes – Sample PAges
The CCPM web site serves multiple audiences. Key among these are patients/family members and physicians. The site is as much about educating audience groups as it is about connecting them with clinical trials.
The wireframes reflect this through:
1. Educational and positioning content.
2. Faceted search that allows three, simple paths into the clinical trial dataset depending on whether the user is looking by disease, gene or mutation.
3. Prominent calls-to-action, distinct by audience segment.
4. Consultation request call-to-action on each page.
5. In-depth educational material.
Note: Unless the project parameters dictate otherwise, I intentionally keep wireframes rough and low-fidelity. I have found over the years that higher-fidelity wireframes tend to prematurely lock-in visuals and create unnecessary design contraints. Competent visual/UI designers are best left with broader creative freedom and high-fidelity wireframes tend to lead to unintended design decisions.