A responsive web solution for Burnt Butter new and existing users that want to upload recipes using a web browser rather than the mobile application.

Product Designer

Product Manager

User research

Information Architecture

Prototyping & Testing

Product strategy



We want to increase number of subscribers on Burnt Butter platform since is currently available only on iPhone and also improve overall engagement by helping new and existing users generating more content in the form of recipes. 


As a solution to this problem I designed a responsive web product where new and existing users can sign-up or login to the platform via a web browser. During phase one users will only be able to manage their profile page and upload new recipes thanks to a faster recipe builder interface redesigned specifically for the web experience.  


Based on the success of the KPIs set for this product, phase 2 will start in order to include more features that are available on the app. 

burntbutterweb problem statement.png


I conducted desk based research trying to pinpoint specific elements of the user journey on 4 popular recipes share website. The objective was to study the different approach and how the information is presented to the final user and find opportunities to set Burnt Butter apart from competitors.



I deconstructed the app journey into flows to gather a bird's eye view on Burnt Butter web phase one.

The sitemap shows the user’s journey in the following areas: onboarding, profile page for new or returning users, create a recipe and recipe page. Each flow identifies KPIs set for the project pinpointing exactly where in the user’s journey might need improvement based on analytics.

profile page.png
create a recipe.png


‘Create a recipe’ is without a doubt the backbone of Burnt Butter. This is the place where users generate content and really engage with the platform.


I created a medium fidelity prototype for an almost real experience to draw the best feedback from users and to encourage ideas. I also ensured that the semantic was consistent with the native application.
The findings have been duly recorded and have helped me to design a web experience that has the usability of the product at heart
and as a result should increase user engagement with the platform.

burntbutterweb prototype.png


To better adapt content to the different screens, I adjusted gutters and margins width that changes at different breakpoints: desktop uses 3 columns with 24dp gutters and 120dp margins. On tablet, at breakpoint of 768dp the layout grid uses still 3 columns with 12dp gutters and 6dp margins. On mobile, at a breakpoint of 320dp it changes to single column with 8dp margins. 



In support to the developers that are building phase one of Burnt Butter web, I created the style guides to go with this solution


Consistency between the native application and the web solutions has been the main focus. Also a solid UI toolkit will allow to easily layer new features and iterations.

burnutbutterweb styleguide.png
burnutbutterweb styleguide2.png
burnutbutterweb styleguide3.png