BulbaBites banner
.03

BulbaBites

ROLE

UX / UI Design
Frontend Dev

TEAM

Two Designers
Two Developers

TIMELINE

4 Months
06/2023 - 09/2023

TECH STACK:

Figma / FramerFigma / Framer
JS / HTML / CSSJS / HTML / CSS
Node.jsNode.js
ReactReact

Overview

Working at the San Diego Super Computer center as an intern, my colleagues and I worked to create a meal planning application called 'BulbaBites'. This application was designed to cultivate custom meal plans and recipes based upon the users preferences, dietary restrictions, budget, and fitness goals. Consequently, I was able to gain insight into the dynamics of a comprehensive design and development team.

Problems

    After extensive user research during our daily FigJAM sessions ;) we noticed recurring frustrations among users of meal planning apps:

  • A noticeable bias toward specific demographics, cuisines, and lifestyles.
  • Poor integration of dietary preferences, restrictions, or medical needs.
  • Difficulty scaling recipes in relation to individual health goals.

Goals

  1. Create an app approachable for users with varying levels of nutrition knowledge, from beginners to experienced planners.
  2. Design flexible features that support both casual meal prep and highly structured nutrition tracking.
  3. Build an experience that is sensitive to eating disorders, avoiding triggering language or hyper-fixation on numbers.
  4. Ensure inclusivity across cuisines, dietary needs, and lifestyles so users feel seen and represented.
Problems to Approach diagram

Pencil IconScrum 1–2: What does flexibility look like in design?

My first challenge was simplifying the complexity of meal planning without stripping away functionality. Working closely with our cross-functional team, I led the visual language and structure of the app, ensuring the branding carried a sense of warmth and approachability.

Scrum 1–2 supporting image

Low Fidelity

Stemming from my favorite Pokemon, Bulbasaur, the name Bulbabites was coined hopefully adding playfulness to sometimes a tedious daily practice. My fellow designer and I hypothesized as to how we could manifest conceptual branding into useable artifacts like a website:

Scrum 3–4: How can we make meal planning feel less overwhelming?

Once the foundation was set, I focused on creating adaptability within the interface. With input from developers and nutrition experts, I iterated on responsive layouts and frontend interactions that allowed recipes, preferences, and health goals to scale fluidly.

Reflection

On BulbaBites, I applied full-stack development and systems design methodologies to create a responsive, interactive web application optimized for both performance and accessibility. My contributions spanned front-end engineering, To UX/UI, to branding, and even some backend! Overall, I worked with an incredible team of engineers and designers to not only create this web app but to find my foundation as a developer and my philosophy as a designer.

View more of my work below!