Haematology Horizon

A hub tailored for healthcare professionals seeking to deepen their understanding of AstraZeneca's flagship products and expand expertise.

The Brief

AstraZeneca launched the Haematology Horizon hub in June 2021 as an MVP. Haematology Horizon is a hub for healthcare professionals looking to learn more about AstraZeneca's core products and expand their knowledge.

For Phase 2, AstraZeneca wanted to introduce educational content to the site called Medical Education - aimed at healthcare professionals looking to broaden their knowledge. I also reviewed the current website and suggested changes to improve the user experience and take on board user feedback.

CLIENT

ROLE

UX / UI Designer | OPEN Health

User journey flows, Visual design & Prototyping

Overview of proposed structure & navigation

I started by creating wire flows to help map out and understand users' journeys. I wanted to ensure that both sides were easily accessible and user journeys carefully considered.

Due to compliance reasons, disclaimers appear when users enter the site and switch to the other side. The disclaimers would alert the type of content to expect, whether it was educational or promotional material.

Organic traffic / non- promo traffic

Promotional traffic

Navigation exploration

The next task was to explore how the navigation would work. It was vital to make it clear to users that the website had a dual aspect and make clear which side they were viewing.

CTA

The CTAs are too similar and not enough for users to differentiate between them when switching to the other side of the site. Additionally, there is a risk of the user not reading the CTAs thoroughly and getting confused.

CTA + supporting text

This option feels unbalanced - there is little room for flexibility if additional menu items are added. Overall, it looks too busy and quite overwhelming.

Switch buttons

This option is too large and overwhelms the navigation. Again, there is no room for flexibility if menu items are added to the navigation.

Toggle switch

The toggle switch is an excellent alternative to the CTA, making it easier for users to gauge which side they are on. However, the toggle takes up a lot of space and needs to be more balanced within the navigation.

Conclusion

Final navigation design for AstraZeneca Medicines

Final navigation design for Medical Education

Overall, there is too much going on in the navigation. I needed to reduce some items from the navigation so it is less overwhelming and the user can focus on one thing at a time. I liked the toggle switch and wanted to go forward with this option.

I liked the toggle switch and wanted to go forward with this option.I separated the toggle switch and navigation. The toggle switch sits on the right-hand side, drawing emphasis and highlighting which side of the site is being viewed. The navigation sits below within the hero section, which futureproofs the site and gives more flexibility to the navigation.

Home

I wanted to create a clear distinction between the two sides, using subtle colour changes.

The medical education side has a darker look and feel, using the purple and dark reds from the brand guidelines, whereas the AZ products kept the same branding with lighter greys and blues as per the existing designs.

Tablet mockups showing the Haematology home page

Events & Training

The events & training page splits into a 2 column format.

On the left is a filter so users can easily filter and narrow their search. The filter will stick to the top of the page as users scroll, making it easier to change the parameters without having to scroll back up.

Users can narrow their search further on the right by sorting for upcoming or on-demand. By default, it shows all events - with featured events on the purple background to make them stand out.

Tablet and mobile mockup showing the events page

Products page

Currently, the site has one product but intends to add additional products. I wanted to make the design as flexible and futureproof as possible to accommodate the products at a later stage.

I split the page into two columns, with the product on one side with sub-pages below for quick access and the contact us module on the other. As the product line expands, the modules can easily split into a 3-column format allowing flexibility and future proofs the site.

Tablet mockups showing the AZ products page

Other projects

Sanofi Dashboard

A dashboard for healthcare professionals providing insights into disease prevalence, NHS treatment overview, and secondary care patient management.

View case study

Tourism Fiji

A website refreshed to inspire users in booking their dream holiday and experiencing the beauty and adventure of the Fiji islands to the fullest.

View case study

Oncology in Practice

A refreshed educational platform exclusively for healthcare professionals seeking expertise in oncology.

View case study