UI – Website – Better with Bacon v1-1

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

Better With Bacon Prototype Link

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.

Hey look what you found 

    Back to Top

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

Hey look what you found 

        Back to Top

Wireframes

Wireframes were created using Adobe XD, showing page layout and elements for the home page, landing pages, and product pages.

Hey look what you found 

        Back to Top

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

Hey look what you found 

    Back to Top

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

Comments are closed.