top of page

Blissful Bites

A responsive recipe website and android app

Meet Blissful Bites, a culinary sanctuary meticulously developed using a blend of Figma, HTML, CSS, and Java. This responsive recipe website and app serve as your indispensable cooking companion, seamlessly integrating technology to redefine and elevate your culinary experience. Say farewell to the complexities of recipe exploration — Blissful Bites here to creating sweet memories one bite at a time!

Screenshot 2023-12-31 at 4.39.19 PM.png

The Design Process

The design process for this project took a unique turn from the traditional UX design approach, primarily due to its classroom context. Unlike the typical scenario where market testing would guide our decisions, our team found itself in a distinctive position. By emphasizing team collaboration, we shaped our project direction through collective brainstorming and idea exchange,

The design process was broken down into three simple steps. 

1. Brainstorming

2. Prototyping in Figma

3. Building

Brainstorming and Prototyping a Design

In our collaborative effort, our team generated multiple ideas within our constrained time frame. After thoughtful consideration, we reached a consensus to develop a website/app functioning as an interactive recipe book. During brainstorming sessions, each team member provided valuable insights, refining the concept into a cohesive vision. An integral component of our project involved incorporating a feature for users to submit their recipes for inclusion on the website, fostering community engagement.  After we prototyped the idea in Figma, extending the development into both website and app formats. Our collaborative journey led to the development of a dynamic website and app serving as an interactive recipe book.

Screenshot 2024-01-23 at 11.41.06 AM.png

Building

To construct the website, we utilized HTML and CSS for the fundamental structure and visual design. Java was employed specifically for creating the user-submission form, although it currently doesn't collect the submitted data. To enhance responsiveness, Bootstrap was incorporated into the development process. When faced with the desire to integrate features beyond the scope of our class, we conducted research to uncover the necessary techniques. For instance, we explored methods for converting Bootstrap buttons into image-based buttons to enrich the user interface. This proactive approach allowed us to expand our skill set and implement additional functionalities beyond the standard curriculum.

Screenshot 2023-12-31 at 4.40.51 PM.png
bottom of page