A Pocket Guide to Medicinal Herbs
For this Refinery29 x Traditional Medicinals branded experience, the objective was to create an original custom interactive microsite on Refinery29.com that takes our readers through an informative journey into 29 different medicinal herbs to learn about their health properties. As the lead designer, I was responsible for creating the overall look and feel of this feature, from the initial ideation and wireframes, to art directing an illustration style, developing the interactive features and designing and branding the overall look and feel to bring this feature to life.
Created: In-house at Refinery29
Art Director/Design Lead: Michelle Lin
Illustrator: River Cousin
Web Developer/Lead Product Designer: Lee Misenheimer
Lifestyles Editor: Eliza Dumais
Below are a few wireframes that I had presented to the client of what the experience could look like, and with the chosen direction (wireframe #1), I designed it to spec in more detail, and worked with Product to code and bring this unique experience to life across desktop, tablet and mobile.
In giving this interactive guide a modern feel, I decided to use two sans-serif fonts for both the header (Druk Wide) and body copy (Brown STD), both Refinery29 fonts.
However, I felt like an additional font was needed for the header, and was excited to introduce the typeface Aequitas to the Refinery29 website — Aequitas Bold was the perfect serif font that achieved a perfect balance of creating an encyclopedic feel, while adding an element of playfulness that compliments the organic curves of the illustrations.
I worked with the illustrator River Cousin, who has an incredible and unique hyper-realism meets surrealism aesthetic that was perfect for this feature. I was very inspired by vintage field guide books from the 70's but wanted to find a delicate balance in juxtaposing vintage elements with bright modern colours to redefine herbal guides as something that would appeal to Refinery29's core audience of millennial and gen z female readers.
Working with River, we wanted the illustrations to look vibrant on three types of backgrounds: 1) dark green (to represent the nocturnal), 2) golden tan (to represent the light) and 3) hot pink on sienna (the wow factor).
River's hyper-realistic style, coupled with experimenting with neon yellow as an unconventional highlight colour helped the illustrations pop on the screen. In varying the sizes of the grids, it gives an extra opportunity for some of these herbs to shine.
The Interactive Guide
Here is the final detailed wireframe for both desktop and mobile! Overall, it was a great experience in being able to bring a new design onto the Refinery29 platform and helped to redefine a reader's journey through a branded experience.
Check it out live on Refinery29 here.
The interactive components of this guide involved an hover effect applied to the tiles — as the reader moves around the page, the herbs illuminate from the darkness and "comes to life."
I designed the pop up cards in sienna with a hot pink glow to create an unexpected surprise that felt encyclopedic but modern and feminine at the same time.
The side navigation bar also expands on hover for quick access to all the herbs at once!
Lastly, to promote the interactive page and also spread awareness about Traditional Medicinals, I designed a series of different banners that appeared on Refinery29.com.