Hi-Fidelity Prototype Website
Project Details
Project Name
Better With Bacon
Year
2023
Designed For
Desktop / Laptop (1200 x 800)
Software
Adobe XD
Type
Academic - BCIT MDIA 2330 UI UX XD
Role
Nick Samaras - UI UX Designer
Prototype
Problem statement
Where does a bacon lover go for great bacon recipes?
Context
Better with Bacon is a website that hosts recipes for bacon lovers with everything from breakfasts to desserts. Better with Bacon, with its comprehensive search and filter options, will deliver the best bacon-inspired recipes from the web.
Better with Bacon was created as an assignment for my BCIT MDIA 2330 UI / UX / XD class.
Business: Recipe Search Site
User Story: For at-home cooks and bakers who what to find quality recipes fast that are easy to follow
Background: Nick and his daughter both love bacon and love to bake together and need a recipe website that has easy-to-find recipes and easy-to-follow instructions. What they have found in the past is that most recipe websites are too long with the user having to scroll down many pages to just find the beginning of the recipe which then has a poor layout for the instructions and ingredients. With this website, Nick and his daughter will be able to use a comprehensive search and filter system to easily find the exact recipe they need with simple, easy-to-follow written instructions as well as the option for audio and video instructions.
User Flow
This user flow shows the progression a user would take to search for a recipe as well as log in and sign up progression
Wireframes
Wireframes were created using Adobe XD, showing page layout and elements for the home page, landing pages, and product pages.
Design System
Typography and Color Pallet
Montserrat was chosen for its readability and for creating a simple and clean-looking website.
Color samples of bacon were used to create the color pallet for Icons, backgrounds and some text.

Components
Components were used to help speed up prototyping by making sure major screen elements remain constant throughout the website

Conclusion
Better with Bacon will deliver a user experience catered specifically to bacon lovers with its expansive filter options and bacon-specific content for meals from breakfast to dinners and desserts