Foodie Dawgs: Making Friends Over Food

Greg Senk, Michael Sy, Jason Guo

Google Docs Link: https://docs.google.com/document/d/11Niu_ux2C8h9L1-vWP1WxKpBRK-9gA1O5e3IM_UYC2w/edit

The Problem

Making new friends in college can be intimidating, especially on a large campus like ours at the University of Washington. Many students find it difficult to initiate a conversation with new people, find time to develop connections, or to find others with similar interests. From our research, which consisted of surveys and interviews with UW students, we found that this challenge is more common amongst students who are more reserved. These problems are exacerbated by tight budgets and busy calendars.

Our Solution

In order to combat these problems, we are designing a mobile application built to connect users with a small group of like minded folks for coffee, a snack, or a meal somewhere near the University of Washington at a discount. Foodie Dawgs, the name of the mobile app, allows users to easily filter for and select from a wide range of local establishments that they would want to meetup at. Users will also be asked to go through a quick process in which they’ll be asked to complete some simple steps to create a meetup request. Once the user submits their meetup request, they can comfortably sit back while the app makes all the reservation arrangements and will notify them once a meetup is confirmed. Each participating establishment provides meetup groups with coupon codes once they arrive for their meetups.

Low Fidelity Prototyping

After we narrowed down our problem space, we started considering what the solution would look like. We came up with many ideas, but eventually decided on one and began to prototype. As we began to iterate on our design, we created a paper prototype, which allowed us to perform usability tests with members of our target audience. These tests let us watch as users navigated through the key features of our application, giving us valuable feedback on the user experience implications of our design. We sat down with them in person and via zoom, with one group member watching and taking notes, another group member facilitating the interview, and the final member moving the paper pieces around in response to how the user interacted with them. We asked them to perform a set of tasks, and then let them explore as they wanted to afterwards.

Fig 1. Paper prototype of app design

Some of the most important things that we found were that our date and time selection menus confused users, that our filter button was hard to see and didn’t provide sufficient options, and that there were a few situations where users wanted to do something that our interface didn’t support. With their advice, we made a calendar based date and time selection system, which is familiar to our target audience and more clear in the way it should be interacted with. We made a more distinguished filter button, and expanded the menu significantly to give users more control. And we fixed the usability issues within our profile and messaging systems. The paper prototyping process helped us catch important usability issues within our application before we created a high fidelity prototype, and identify ways in which our design can better meet users needs. Having this knowledge allowed us to create a more informed digital mockup.

Going Digital

Fig 2. Overview of digital mockup design

We transitioned from our paper prototype to a digital mockup for the app by first taking the information we found from our user test research and making the necessary changes. We made a few changes to our design when going from paper prototype to digital mockup to make our application more visually appealing and give users more freedom in navigating the application. First and perhaps most obviously is that we added some color, opting for UW purple and gold. When adding color, we noticed that it added new design possibilities for things like buttons, and we ended up adding and removing some outlines throughout the application, better denoting buttons and reducing possible confusion. We also wanted to ensure that selectable options gave the user’s sufficient feedback when they are selected, so we used bold outlines and the gold color to denote selection when applicable, something we didn’t have in our prototype. Lastly, we added a bottom navigation bar to a few of the pages that didn’t have them in the prototype because we wanted users to be in control of navigation and not force them to rely on the back button when they may want to navigate to a new area entirely.

You can view our digital mockup here: https://www.figma.com/file/EE4bTTGFs7SraKt9QMHGBH/Foodie-Dawgs-Digital-Mockup?node-id=0%3A1

Two tasks which are essential for users to be able to accomplish on our application are to sign up for a meetup at a location they’re interested in, and to message members of their meetup group once formed. First let’s look at how users sign up for a meetup:

Step 1. Users can start off by browsing for featured

restaurants on the homepage by scrolling up and

down the page.

Step 2. Users can filter for specific attributes

in a restaurant by hitting the filter button.

Step 3. Users can then select their desired options

on the filter+sort feature and apply those options.

They will then be presented with all the restaurants

that fit their filtered options.

Step 4. Once users select a restaurant from the

homepage by tapping on it, they will be brought to

another screen showing them the days and times

that are open for that particular restaurant. Users

can then tap on the day and times that work best for

them. Once users are finished with all the above steps

they can tap the ‘Submit Meetup Request’ button and

their meetup request will be submitted. Users will

be notified within a few hours if their meetup is confirmed.

Next, how users can send messages to their meetup groups:

Step 1. Users can see all their upcoming meetups

once they click the My Meetups option from the

navigation bar. They can also click on Past to see

their previous meetups and further their

conversations with those people.

Step 2. Users can also click on the message

bubble icon to look at their message history.

Step 3. In the group chat with other

meetup members, users can send

messages to the rest of the group.

They could also click on each of the

members’ profile picture next to their

messages to check their profile background.

Step 4. After clicking on someone else’s

profile picture in the group chat, the user can

see that meetup member’s background

information such as age, interests, and a

short introduction they choose to put.

Users also have the option to report another

user for inappropriate behaviors or spams.

Through our user research we discovered that for many students, making friends in college can be daunting. Oftentimes reaching out and beginning a conversation can be the hardest part, not to mention busy schedules that leave little room for socializing. By arranging meetups for users and providing them discounts to meet up at local eateries, Foodie Dawgs will help provide fun spaces for students to meet new friends at times that work for them. This will be a win-win for both users and local businesses. As students make new friends at local eateries that offer discounts for food, these places get more customers to support their business. We believe that our design and partnerships with participating restaurants will help students meet new people and connect over a meal or snack, and we aim to help users feel more satisfied with their ability to make new friends.