Onboarding page

Where the women can sign up for the research project and either read about or watch a video about the project.

Onboarding page

Example section on the onboarding page explaining how women are divided into control and intervention groups and what it involves.

Onboarding page

A legal page where the project is described in more legal terms (a requirement from scientific ethics committee)

Min side (Participants)

Where participants who has been divided into the control or intervention group can view their progress and fill out the mandatory questionnaires.

Min side (Participants)

Example of an introduction page to one of the 4 mandatory questionnaires participants have to answer throughout the study.

‍

Backend system (Research employees)

Where research employees can randomize participants into control or intervention group, review their progress, enter participant data...

Backend system (Research employees)

... and release the risk score.

Min side (Participants)

Once the riskscore is released, women in the intervention group can view their risk score.

image-8
Onboarding page

Where the women can sign up for the research project and either read about or watch a video about the project.

image-7
Onboarding page

Example section on the onboarding page explaining how women are divided into control and intervention groups and what it involves.

image-6
Onboarding page

A legal page where the project is described in more legal terms (a requirement from scientific ethics committee)

image-5
Min side (Participants)

Where participants who has been divided into the control or intervention group can view their progress and fill out the mandatory questionnaires.

image-4
Min side (Participants)

Example of an introduction page to one of the 4 mandatory questionnaires participants have to answer throughout the study.

‍

image-3
Backend system (Research employees)

Where research employees can randomize participants into control or intervention group, review their progress, enter participant data...

image-2
Backend system (Research employees)

... and release the risk score.

image-1
Min side (Participants)

Once the riskscore is released, women in the intervention group can view their risk score.

Defining Project Goals

Prior to initiating the platform's design, we held several meetings with professor Stig Bojesen, professer and doctor at Herlev/Gentofte who was also responsible for the project.

During these sessions, we gained valuable insights into the research underpinning the new screening method and identified the specific challenge we needed to address when developing the platform.

Our task was to design the onboarding and signup flow, along with outlining the data exchange procedure between participants and research employees.

Userflow for the entire research process

Initially,  Stig, had pitched a fully digital signup process, allowing participants to signup to the research directly through the onboarding page.

The final singup flow turned out not to be fully digital mainly due to the Danish Scientific Ethics Committee (NCE) declaration that participants are ethically entitled to receive a face-to-face explanation about the project when they meet up for their bi-anual mammography screening.

Image: The final user flow:
1) Women ages 50-67 receive an email invite to join the research study along with an invite to their biannual mammography screening.
2) They view the onboarding page by clicking on a link in the email.
3) At they biannual mammography they sign-up for the study, give data and is assigned to the intervention or the control group.
4) They sign in to "Min side" through the onboarding page, where have to answer questions about mental and physical health as well as family history with breast cancer.  
5) The women in the Intervention group receives their risk score based on data provided.

Challenges througout the process

Being a collaborative project between the Danish Cancer Society and Gentofte/Herlev Hospital,  meant that we were dependent on text and medical knowledge about the process provided by Stig, who was responsible for the communication between NCE and us. The technicalities and requirements for the process were subject to ongoing negotiation between NCE and Stig e.g. how and when the women would be invited to the study. This meant that the Danish Cancer Society began drafting the platform text much later in the process.  Consequently, certain areas of the platform were not developed until later stages and the first usertests were performed without any text. Development of the participation and the backend system was also delayed due to uncertainties about the research process.

Designing the onboarding page

Reviewing onboarding pages

For inspiration, I analyzed the onboarding pages of comparable studies conducted in the US, such as "The wisdom study" and "My PeBs. I also examined bloddoner.dk and organdoner.dk, danish websites.

‍Some key insights

  • The websites all had strong call to action buttons that was repeated several times as users scrolled through the site, providing them with repeated opportunities to engage as they obtained more information.

  • The websites seemed to be structured around the questions "What", "Why" and "How".

  • They used imagery depicting cheerful people evoking a sense of community and a positive outlook in a difficult situation.

Understanding potential users

To gather insights into potential users I read a qualitative study on Danish women's attitude towards personalized breast cancer screening, conducted by The Danish Cancer Society (2020), focusing on topics like "perception of health" and "barrier for participating in the study.

‍Some key insights

  • Health is seen as  a balance between mental and physical health. It is about being healthy (not in a fanatic way) i.e. being able to enjoy life and eating what they like.

  • It is common for the women to talk to their friends and colleagues about health. Most women have friends/family with history of breast cancer.

  • It is important that the platform clearly explains "Why" and "How" a screening for mammography every fourth is enough.

Image: Sketches illustrating a Z-shaped layout design structured around the questions
"What is Prsonal", "Why Prsonal", and "How does it work" and frequent and clear call to actions.

Sketching and early feedback

At this stage I created sketches for the onboarding page to discuss with Stig, in order to understad what sort of information that needed to be on the website.

The main purpose of the page was to get visitors to sign-up for the project as well as  provide them with sufficient project details, ensuring they felt confident about signing up.

I presented a Z-shaped layout with a top video for user engagement and sections supporting the questions "What is Prsonal", "Why Prsonal" and "How does it work".

Sitemap

Our task was to design the onboarding and signup flow, along with outlining the data exchange procedure between participants and research employees. Initially,  project lead Stig pitched a fully digital signup process , allowing participants to signup to the research directly through the website.

However this was later changed as Danish Scientific Ethics Committee (NCE) stated that participants are ethically entitled to a face-to-face explanation about the project and a 24 hours consideration period from being told about the project to signup. Additional questions such as when participants could sing-up for the process and when they would be allocated to either the control or intervention group were also determined late in the design process. As a result, the text on the website remained incomplete for an extended period of time

Wireframing and prototyping

Early wireframes and prototypes were itereated on through feedback from Stig and the Danish Cancer Society. It was important that they were on board with the design as the Danish Cancer Society were in charge of communicating the project through text for the platform.  

Image: From wireframes to first prototypes to be tested.

Colors

I chose a soft color palette with green undertones, instead of blue colors that you would normally see on health related websites, aiming instead for colors you might see on pages focusing on mental health. Pink, which is normally the color associated with breast cancer was abandoned because women had expressed that pink could be seen as patronizing.

User tests

I conducted 10 think-aloud tests in 2 rounds, with 10 participants in total.
‍
I avoided words such as tests, and ensured participants that we were not testing their technical abilities or knowledge of the subject matter, but that we needed their honest feedback to improve the design. I ensured that the test room was comfortable and inviting, aiming for a conversational vibe rather than a formal setup.

We conducted the tests on the desktop version, as participants indicated that they primarily accessed emails from e-boks on desktop devices.

Image: Speech notes excerpt for interviews

Key iterations from user tests

We did several iterations based on observations fromt the think-aloud tests. Underneath I go through some of the most significant changes.

1. Dropdown vs buttons menu

I tested several designs for dropdown menus, but observed that it took long for users to notice them when positioned at the top of the page. Placing the menu items beneath the header made them more visible and gave a quicker overview of the page content, while allowing users to quickly select an option without the need for extra clicks.

2. Button label

Several users expressed concerns that clicking the "Deltag i forskningen" button would automatically enroll them in the project. Consequently we changed the label to “Læs mere om at deltage”. Another reason for this change was the requirement from NCE to include a page between onboarding and the part where participants confirm participation. This page had to include a legal explanation of the project.

3. Side-by-side comparison of the intervention and the control group

Users were interested in knowing how the process differed between the intervention and the control group. I therefor edited my first illustration so the user could see a side-by-side comparison of the data collection methods from both the intervention and control groups. Users could hover over the icons to access more information about the various data-collection methods.

4. Timeline of the research project

To address users feedback about wanting more information of how much time they have to set aside for the project and what is expected of them, I edited the project timeline illustration.

The new timeline shows the number of days the project spans and what is expected of participants on each day as well as the difference between the intervention and control group, reusing the illustrations from the section above for consistency.

5. Information about the risk groups

On of the biggest misunderstandings we discovered during the usability tests, was that some users thought the risk groups determined whether or not they had cancer. In reality the risk groups only provide a score indicating how high their risk is for developing cancer.
‍
Therefore, we invested significant effort in ensuring that it was clear to users that they could expand the risk groups to learn more about them and understand their implications. We added a slight animation when users hover over the risk groups.

Final design onboarding

Scroll to view the entire onboarding page

Final design onboarding page

Based on feedback from the think-aloud test made additional adjustments to the page. Underneath I go through some of the most significant adjustments to the section of the page.

Tabbed navigation
that links to sections of the page

Participants in the test found that tabbed navigation was much more intuitive so we kept that design. Users also reacted better to the button label "Læs mere om at deltage" as it seemed less  committal, thus resulting in an increase in user clicks.

The section "Forsknignsprojektets forløb - tidslinje" was moved, making it visible to users, when clicking and scrolling to the section "Hvad indebærer det at deltage".

The difference between
the intervention - and the controlgroup

Based on feedback from the usability tests, we found that the users were interested in knowing how the process differed between the intervention and the control group.

I therefor edited my first illustration so the user could see a side-by-side comparison of the data collection methods from both the intervention and control groups. Users could hover over the icons to access more information about the various data-collection methods.

More information about the process

I created a new timeline to address the users feedback about wanting more information about how much time they have to set aside for the project and what is expected of them. This timeline shows the number of days the project spanned and what is expected of the participants on each day.
‍
Additionally the timeline shows the difference between the intervention and control group.

Information about the risk groups

On of the biggest misunderstandings we discovered during the usability tests, was that some users thought the risk groups determined whether or not they had cancer. In reality the risk groups only provide a score indicating how high their risk is for developing cancer.
‍
Therefore, we invested significant effort in ensuring that it was clear to users that they could expand the risk groups to learn more about them and understand their implications. We added a slight animation when users hover over the risk groups.

Designing the backend system
& "Min Side"

After designing the onboarding page, we began the design on the backend system for employees and the participation page "Min side". We performed a few short usability tests on "Min Side", to see if the women could find what they needed on the page and if they could easily answer the questionnaires. Additionally we wished to understand how the women preferred to have their risk score communicated.

Underneath I go through some of the main interactions from the backend system and "Min Side".

Backend: Participation list

  1. Where the research employee can see a list of all participants.

  2. Research employees can add new participants by clicking the button "Ny Deltager".

  3. Reasearch employees can filter on  participation data based on completion status.

Backend: Participation list

  1. The research employee assists the participant in completing the participation consent form.

  2. Height, weight and BMI section is activated and data can now be inserted.

  3. Research employee can assist participants in completing various task (e.g. filling out the questionnaires)

  4. Research employee randomly assigns the participant to either the control or intervention group.

  5. BiRads and PRS section is activated (only for the intervention group).

  6. 90 days pass: The riskscore can be released to the participant.

Min Side: Participation page

  1. Partcipants are asigned to the intervention or the control group and is directed to "Min side".

  2. Here participants can fill out the risk questionnaire touching on physical health and family history with cancer. On the days participants have to fill out the questionnaires regarding mental health they receive an email notification.

  3. Participants can receive assistance and track their progress in the process.

  4. 90 days pass: Participants in the intervention group receives an email that directs them to Min Side, where they can view their risk score.

Key takeaways

  • Designing for the medical sector

    The project involved several stakeholders including the Danish Cancer Society, which was responsible for text on the platform and Danish Scientific Ethics Committee (NCE), which had to approve the platform's design and text. Consequently, the text on the platform had to undergo numerous iterations before it was ready to be inserted in the prototype.

    Requirements for the sign up process was also unclear well into the design process. For instance was it possible for the women to register for the project before being informed about it during their mammography screening appointment? Additionally certain usability aspects on the platform had to be deprioritized in favor of specific requirements from NCE. For instance, some text had to be repeated for legal reason, which made the platform hard to skim.  It was also uncertain what level of precision was required in the responses women provided in the questionnaire regarding family history and cancer. The precision of the responses would greatly influence the accuracy n of the risk score generated from the model in use. However, the women often struggled to recall exact details regarding the cancer history of their family members. As a result, the design of the questions had to accommodate this uncertainty.

  • Use the library 100% or not at all

    One feedback I got from a developer who worked on the platform, was that it was confusing that I had used ANT components in some places, but in others I had modified the components. The developers feedback was that if we use libraries we should either use them 100% or not at all as it can be very difficult and time consuming to edit an ANT component, without loosing important functionality and consistency as well as being difficult to maintain. If the ANT components does not meet the needs for the project, it is better to just design custom components form scratch. In this case I should have familiarized myself better with ANT components to understand the limitations and possibilities of the library. Alternatively developers should have participated in product meetings to ensure that technical limitations were taken into account throughout the process.

  • Time management

    In the end, we did not have time to conduct user testing on the employee backend system, meaning that this part of the platform might require further iterations post-pilot. The reason being that we spent too much time, testing the onboarding platform, partly because we were waiting for text from the Danish Cancer Society. In hindsight I could have pushed the testing earlier, potentially prompting the Danish Cancer society to provide text earlier. For my part I should have planned out the project better in advance considering the time allocated for testing the onboarding platform.