“Eat your vegetables!”: Architectural Design of the Solution

Team 9: Carolina Borbon, Tomy Di Felice, Caroline Gao, Andrea Liao, Annie Ma 

Bubble Map:

For our bubble map, we focused on three large areas of “Feedback,” “Building your network,” and “onboarding.” These areas reflect the most important aspects of our user experience and are the highest priorities for our wireflows and UX design.

1. Feedback: Feedback is extremely important for us to facilitate behavior change and encourage users to improve their vegetable eating habits over time. We give feedback by enabling users to give and receive feedback from friends through meal pictures or direct dialogue (comments) and giving fun facts when users miss a post.
2. Building your network: Building a community and network of like-minded individuals can be a powerful tool in promoting behavior change and providing support. By creating a social aspect to the platform, users can share their experiences, recipes, and tips with others, as well as receive encouragement and motivation from their peers. Our app allows users to add friends, invite friends, and interact with them through giving/receiving feedback and meal posts.
3. Onboarding: A good onboarding experience can help users understand how BeMeal works, what it has to offer, and how it can benefit them. We allow users to set up meal times, create a profile, and add and invite friends.

System Path:

For our system path, we decided on three “starting points” or ways to find our app for the first time:

1. A recent college grad student who was invited to join the app via a text from a friend (add friend feature on the app)
2. Current college student walking into the dining hall saw a QR code to learn more about eating vegetables
3. A user who wants to eat healthier and searched on the app store

All three starting points lead to the same “sign-up page” flow where the user would set meal time ranges. After that, they would be offered to add friends and then post a photo of their meal after receiving a notification from the app. At this point, if they successfully posted a photo, they would be able to react to their friend’s posts, or if they missed a post, receive nutritional knowledge. 

In terms of informing our wireframes, the system path, and specifically the nodes, were a great graph representation of what we envisioned our app’s core features to be. We would translate each node to a seat of wireframes. The system path allowed us to see that the signup page is crucial because all paths start there. Therefore we will prioritize and place special focus on this flow, trying to make it as simple, and low friction as possible to decrease the number of users who abandon our app before even seeing the core features.

Individual Wireflows:

(1) Account Creation / Login:

This wireframe walks the user through creating an account, or logging into their account, as well as setting their time frame preferences for when they usually eat meals (to be able to receive a BeMeal notification within that time frame).

(2) Profile Flow (Friends, Past Memories, Settings):

This wireframe shows the user their profile, where they can see past memories and change settings (such as meal time range). It also includes the friends tab, which allows users to add friends from a list of suggested contacts (phone numbers), and friend requests.

(3) On-time BeMeal Post:

This wireflow shows when users receive their 1 BeMeal notification of the day (users don’t know which meal they’d receive the notification for), and how a user would post (with the option to retake) a picture of their meal.

(4) React to Friends:

This wireflow shows how a user would react to friends’ posts. A key feature of our proposed solution is social interaction; allowing people to react with photos or leave comments on someone else’s post allows us to build community amongst users.

(5) Missed BeMeal Post: 

This wireframe shows the behavior of the app when a user misses the window to post for a meal. This window is determined by their pre-set meal times (for example, if the notification comes out for lunch at 12pm, and the user hasn’t posted at 5pm, half an hour before their pre-set dinner time at 5:30pm, then we will consider the window passed). When the user opens the app, they will be shown a message alongside a fun fact, and this fun fact will also be sent to their text message app to further increase visibility.

Cohesive Wireflow: 

High-quality Figma linked here. 

After synthesizing the information from our bubble maps and system paths, we came up with the wireflows above focusing on socialization without a gamification aspect. We want users to feel a sense of community and identity without competing with one another. We did so by allowing users to add their “friends” who they can share their own veggie intake with, or react to these friends’ own plates. There is no long-term tracking to avoid the toxicity of competition, but one of the future directions is to include a Memories function that allows users to reminisce on their posts from a month, or even a year, prior. This will hopefully inspire self-reflection and a sense of accomplishment for the changes in a given time frame. Lastly, if this project were to extend beyond the scope of this course, an additional future direction would be to employ computer vision to analyze how much percentage of a particular plate picture is vegetables vs non-vegetables.