The All of Us Research Program, part of the National Institutes of Health (NIH), is building one of the largest biomedical data resources of its kind. I had the opportunity to work on various digital products that were part of the research program.
I was asked to design a new landing page for the All of Us Research Program:
- Using layout similar to other landing pages previously created for this program
- Using the same copy from these previous landing pages, mix and matching them in the various page modules
- Finding new photos to use
- Creating at least one module with a navy background and text with lines in different colors.
- Rainbow gradient also welcomed in different ways as an accent.
I came up with three design approaches for the landing page, with subtly different concepts.
“Everyone on Earth is related to everyone else, according to our DNA.”
- In this design concept I used the circles to represent our genes and the invisible links that connect all of us.
- On the Hero image I removed the photo background allowing it to pop out of the page creating depth. It also removes the distractions of the surrounding background allowing us to focus on who this person is.
- The light gradients with pops of color and photos of people smiling give the page an uplifting energy, inspiring happiness and hope.
- The illustrations give the page a whimsical feel.
- The dark navy grounds the page by adding drama and intensity.
The All of Us Research Program reflects the rich diversity of our country.
- In this design concept I used the rainbow gradient, which is one of the brand elements, to represent diversity and inclusiveness. In connection with other elements and colors I chose it also makes the page happy and uplifting.
- The headlines with each line of text in a different color remind us that different individuals can live together in harmony.
- The lines pulling in different directions give movement and energy to the page.
- Alternating the dark navy with light background colors make the design more dynamic and exciting.
Compassion and Innovation
- This was the “safer” approach that followed more literally the design brief.
- It’s a more subtle design where I used the peach pink to contrast with the navy.
The pink embraces us in a warm hug while the navy crates trust and a sense of safety.
- I used again the rainbow headline over the navy background, balancing the drama with a little touch of joy, without being overly cheerful.
- Some image positions were shifted out of alignment reminding us that this program will bring innovation, advancement and positive change.
Feedback and Progress
Internal stakeholders decided we should move forward with the second design concept: Inclusiveness.
I fine-tuned the design and created designs for different breakpoints:
Smartphone / Mobile – below 800px
Desktop Medium – 800 px to 1200 px
Desktop Wide – above 1200px
I also created new variations that would be submitted to A/B testing.
The different variations we created for A/B testing included:
- Hero image: Still Image vs Video
- Headline variations
- CTA message variations
- Localization vs Sans Localizations
- FAQ module vs Sans FAQ module
- CTA position: Inline vs Sticky header or footer