A Pocket Guide to Medicinal Herbs
Sponsored by Traditional Medicinals, the objective of this custom, interactive microsite is to take readers through an informative journey to learn about 29 different medicinal herbs and their health properties.
Inspired by Farmers' Almanacs and vintage field guidebooks from the 1970s, I created a visual identity that juxtaposed these encyclopedic vibes with a mix of bold modernity, and crafted this vision through the initial ideation and wireframes, art direction for illustration, and developed the interactive features to bring this microsite to life.
Art Director & Design Lead: Michelle Lin
Illustrator: River Cousin
Web Developer: Lee Misenheimer
Lifestyles Editor: Eliza Dumais
Initial Concepts & Wireframes
Initial wireframes I presented to the client of how the experience can be brought to life.
Typography & Palette
Exploring outside our company fonts, I was able to introduce a new typeface — Aequitas to the Refinery29.com site. Aequitas Bold was the perfect serif font that achieved a perfect encyclopedic aesthetic, while adding an element of playfulness that compliments the organic curves of the illustrations.
To bring contrast, I used two sans-serif fonts, Druk Wide and Brown STD for all the other sections of the microsite.
I brought on the illustrator River Cousin, with his incredible hyper-realism meets surrealism aesthetic that was perfect for this feature.
Experimenting with neon yellow as an unconventional highlight colour brought a new sense of life to these illustrations, and helped the illustrations feel vibrant on three background colours: dark green (nocturnal), golden tan (the light) and hot pink on sienna.
The Interactive Guide
By varying the sizes of the grids on the microsite, opportunities were provided for some of these herbs to be prominently featured. Here is the final microsite for desktop and mobile. Check it out live on Refinery29 here.
A hover effect on the tiles creates an illumination effect on the herbs as readers hover over them — bringing the herbs from darkness to life. For the pop-up cards, I used an entirely different colour combination of sienna and hot pink to create an unexpected surprise.
The side navigation bar expands to a list of all the herbs for quick reference.
R29 Homepage Takeover
To promote the microsite, I designed a series of different banners that appeared across Refinery29.com, including on the homepage banner.