Horizon author block

To create a new block that enables our site visitors to expand and view the author details on every month’s Horizons.

I built components in Figma to showcase behaviour and responsiveness for handoff to developers.

Collaborated with the content team to ensure we covered all necessary elements for the promotion of our analysts. Showed component flexibility to feature siz to one authors.
Competitor analysis research. How are other competitors in our industry promoting similar content and their analyst’s research?
Ensured the component inherits the current design system grid to avoid unnecessary changes to CSS styles.
In the new block, the grey band block, which housed the author's information, has been removed. The author components are now integrated into the story section to make the user story content quicker to scroll through.
With the additional space, I introduced the headshot element, which showcases 6 to-1 headshots for authors.

Aligned typography to the newly launched design system. Headings and body text now align in size, spacing and weight stylings.

New Hover styling action on anchor point links within the story
The narrower width of body text helps readability and responsiveness for various screen size transitions.
Now, it has the functionality to house a promotion feature that the marketing team can turn on and off within the body text block.
The iconography has been updated to match Wood Mackenzie's newly launched brand. The icon style is outlined and cleaner.
I have worked with developers to now have the option to save the page's content for any readers.
I have added timestamp functionality so the user can better understand how long it will take to read content.