HPVcancerbye

A perfect mobile-first design for the educational web, let users focus on content that matters most.

2022
Website
https://www.hpvcancerbye.com/

Introduction

We would like to share our latest website design works from our design team hpvcancerbye.com. We believe most of designer may be interested in the process of UI/ UX, experience. hpvcancerbye.com is not a typical educational website, which not only to educate people about HPV, but also to drive a specific group of people to get the vaccine. Therefore, our  design priority is to make the site fully mobile friendly.

Background and Design Challenges

Our client want to solve specific user problems that we’d discovered and create an immersive online experience. These user problems included the following:

- They have different campaign message in same page. Users found it difficult at times to locate information—or even to know where to look for specific content. We needed to rebuild Web site’s info structure and improve content discoverability.

- hpvcancerbye.com  is unique among many similar educational sites because of the diversity of its user personas. Through different disease, symptoms can find the user. Everyone could find the value from this site, making it difficult to pinpoint an ideal primary user persona for which to design the site.

We simplified the categorization of information and ensure that all users could find key details up front and with ease.

Result

We designed a unique icon for each symptom, which used across whole website for increased familiarity. Since Web site is text heavy, we used flat illustrations to break the monotony and reduce the complexity of the content. We used pastel colors such as green, coffee, yellow, and beige in the illustrations to increase the contrast between the text and the visuals.

Designing an educational Web site might not seem to be that challenging. We also used lottie HTML 5 animation to optimize the information and CTA buttons on the whole page, ensuring that users can learn about HPV health information and HPV vaccine through a lot of infographics.

HPVcancerbye
HPVcancerbye

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.