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.
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.