A perfect mobile-first design for the educational web, let users focus on content that matters most.
Ｗe 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.
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.
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.
