Recipe Template
Martha Stewart


Brand

Martha Stewart

My Role

Product Designer

Year

2017

Martha’s product team assigned a tall order: Make the best recipes better and grow user engagement and loyalty while maintaining scale.

I conducted user interviews, picked up stakeholder buy-in with wireframes, and tested prototypes with user groups. Once I got the green light, I polished the design to blend in with MSL’s current web design aesthetic. The problem was, the brand’s style was not meeting usability standards. I waived the red flag to the product team and a plan of attack was added to the product roadmap.

During the user testing, there were a number of pain points which could easily be addressed. The ability to print the recipe as a preformatted page was an easy win, but to conserve ink I removed all color from the text and made printing images and notes optional to the user. Recipe details were cleaned up and displayed high on the page. The recipe actually feels like it is a card as a nod to printed cookbooks.

The barrier to entry for leaving a comment was softened with a “How would you rate this?” prompt instead of just a generic comment button. The entire rate and comment flow was redesigned to feel natural and fluid.

I included a floating action bar with various actions that stay with the user the length of the recipe, which proved successful. Events per user went up 158%, pages per session went up 58%. We introduced an updated way to display video content and it paid off. Mobile video starts went up 251%. Leaderboard viewability went up as well, which is great for making sure I continue to get a paycheck.

Image Option 2
This image style was more inline with the portrait images used on the previous recipe design.
Image Option 1
But this was the hero image stakeholders steered toward.
Image Option 3
However, with testing, we found this image to be more in line with what we would eventually launch with.
Details were available at a glance, and the image was the main focus, while still keeping SEO happy with copy location. Eventually, we pivoted on image styling due to number of portrait images in Martha's library.
Ingredients and directions could be checked off for grocery shopping or tracking progress.
Another direct result of user interviews, comments were expanded to include media and replies and a new Q&A section for convenience.
Content Recirc
A fail forward of similar recipe types and abbreviated recipe cards would display at the end of the recipe to keep the users on the site if the initial result wasn't to their liking.

While a video is playing, it will detach from the page and dock with the user after scroll.

The transition from the rating call to action to the first step of the review process.

The Floating Action Bar micro-animations

This was my fix for the interruption of our pinned interaction bar by the upcoming iPhone X menu indicator.