Design of a responsive web app
role Product Designer
duration 2 months
tools Figma, Usability Hub, Photoshop
PROBLEM
The abundance of online recipes options can be overwhelming, especially for specific ones such as French desserts. Are the recipes professionally curated, high-quality, with clear walkthroughs and efficient assistance?
SOLUTION
Build a user-friendly web app for sweet French recipes, featuring filtered search, difficulty levels, prep time, technical help, and a convenient shopping list for seamless execution.
I used the design thinking approach to guarantee user-centric solutions:
• Competitive analysis
• User research
• User interviews
• Problem statement
• Personas
• User flows
• MVP
• Low-fi wireframes
• Preference testing
• User testing
• Mood board
• Mid to high-fidelity wireframes
• Usability testing
• Iterations
• Usability testing
• Iterations
• Mockups
Competitive analysis
I researched competitors in the online recipes field and how they designed their user experience.
What did I learn?
• There are no dedicated web apps for French desserts and pastries online.
• I identified strategies and UX patterns which would benefit my product, thanks to a thorough SWOT analysis.
User interview
8 users, age 28-42, from Germany, Australia, Spain, and France.
My goal was to understand their lifestyle, relationship with cooking, their behavior when it comes to researching recipes online, their goals and frustrations when following the recipes.
User persona
Interviews helped me pinpoint the problems users face when interacting with a recipe website.
Noteworthy finding:
Recipe writers assume a high level of knowledge. Some readers may not recognize tool names, and written descriptions of preparation steps may be insufficient.
User flow
I drafted a straightforward user flow, ensuring users could achieve their goals within a few clicks.
MVP
Interviews and user personas led to the creation of the MVP, highlighting the product's objective, hypotheses and Jobs To Be Done.
.png)
User flow
I drafted a straightforward user flow, ensuring users could achieve their goals within a few clicks.
Wireframes
Interviews helped me pinpoint the problems users face when interacting with a recipe website.
User testing
8 users from Germany, Australia , Spain, and France.
The low-fidelity wireframes turned out to be successful during usability tests: all users achieved the required tasks with great ease.
It allowed me to further experiment with mid-fidelity wireframes and fully move on to the UI phase.
Mood Board
I explored many recipe websites and found them lifeless. Wanting a fresh, non-traditional and French approach, I drew inspiration from Sofia Coppola's Marie-Antoinette. Let Them Eat Cake! would blend pastel tones, post-punk style, and pop art for a modern yet vintage, fun feel.
Mood Board
I explored many recipe websites and found them lifeless. Wanting a fresh, non-traditional and French approach, I drew inspiration from Sofia Coppola's Marie-Antoinette. Let Them Eat Cake! would blend pastel tones, post-punk style, and pop art for a modern yet vintage, fun feel.
UI elements & icons
UI elements and icons were crucial for setting the web app apart from other home cooking websites.
.png)
User testing
Testing revealed a seamless experience, and users enjoyed the fun aesthetics while finding the elements familiar and intuitive.
