CHARM: Cancer Health Assessments Reaching Many

CHARM logo; CHARM Cancer Health Assessments Reaching Many

CHARM study video demonstrations

This demo is from a duplicate training site for study staff. This training site is slightly different from the final web application.

Part 1: Cancer risk assessments Part 2: Consent

About the study

The CHARM study screens healthy adults ages 18-49 to help identify those at risk for hereditary cancer syndromes that lead to increase risk of breast, ovarian, colon, and endometrial cancers. CHARM provided an online experience for patents to screen for these cancer syndromes, and if they screened at high risk they would be offered free genetic testing services. For more information on the study you can read an article about it on the CHR website.

I worked closely with a senior software developer, health investigators and research associates from the Center for Health Research, Denver Health, Fred Hutch Cancer Research Center, and other institutions to develop content and content strategy for the application. I was given user feedback and perspectives of different areas of the application from the Qualitative Core at the Center for Health Research. In addition to design and strategy of the application, I supported the senior developer and developed the entire front-end myself.

Overall Goals

In general, the goal was to create a bi-lingual (English and Spanish), responsive web application that supports low-literate users completing two screening surveys and an interactive consent with a decision aid component. The goal for this web application was to have 1,200 participants from different ethnicities, races, primary languages, health literacy, and insurance status who have screened at high risk to complete the consent and join the study.


  1. Originally, these hereditary-based cancer assessments had to be filled out in a doctor’s office so the doctor can assist patients with understanding the questions. Our institution’s Internal Review Board (IRB) required that we provided consents preceding and following the two screening assessment tools. The consent was required to have a vast amount of content for accuracy so the participants knew exactly what to expect. It was a challenge to make all this content simple enough for users to understand and to keep them interested. Our strategy included breaking the content up into sections, accompanied with descriptive illustrations and read-aloud audio for each section.
  2. Branding was another major challenge because we were to recreate within our web application two existing screening assessment tools from previous studies. It was required to prominently include the following branded identities within this web application:
    • Logos for each screening assessment tool, PREMM5 and BRST
    • Logos for two different healthcare systems that the users would have to register from, Kaiser Permanente and Denver Health.
    • Branding of the CHARM study itself which included its own logo and color scheme.

During collaboration periods, I drafted many wireframes to introduce useful components, how branding can co-exist and how we could use skip logic to enhance the user experience.


The study logged 1711 unique individuals who completed the risk assessments and the team met their goal within week of launching the site. In the end, the study recruited 880 qualified and consented participants. The mean time of completion was 4.3 minutes and the study received positive feedback from users.

“It loaded fine and it wasn’t squished or anything. It was great…. I mean, it was just very clearly laid out. And I like when there’s not a million questions on every screen. So that was well done.”
— Study participant

There were also other studies that used data from this web application and many publications resulted from it. I was included as an author for two publications on PubMed from this project.

Work Examples

An early user story of the BRST assessment tool

An Early Vision of the BRST Assessment Tool

This was an early, low-fidelity wireframe introducing an approach to the BRST assessment tool within the web application. I presented it to the team via XD on a shared screen so they could see how the steps were laid out. This assessment eventually expanded with additional questions. The “modal of relatives” only became an infographic and relatives would be selected via dropdown menu. This user story/flow was created using Adobe XD.

Interactive User Story/Wireframe of the PREMM5 Tool

This wireframe set was used to describe how a user would step through the PREMM5 tool within our web application. The first four steps seemed redundant to the BRST tool and it was decided by the team to create our own pre-screening section to answer the redundant questions between the PREMM and BRST tools so users who don’t have a family history of cancer or don’t know about their family history could quickly move on with the application.

wireframes: Multi-brand strategy select image to view it in full size in another browser window

Multi-Brand Experience

This wireframe was introduced to the team recommending how we could solve the multi-brand problem within the CHARM web application. The recommendation was to have a presence of the CHARM logo throughout the site but toned-down throughout the two screening tools. As the user passes through the PREMM or BRST tools, those logos would be in the header with the CHARM logo symbol only, separated by a vertical line. It was decided later that the Kaiser Permanente and Denver Health logos would not be seen together. Instead the user would have to select where they reside (Colorado or Washington/Oregon) on the home page and that would confirm what healthcare provider they have.