Potlucky App — UX Case Study

Potluck Organizing, Mobile Ap

Robert Morton
Apr 13, 2017 · 22 min read

Introduction

This case study documents the design process we undertook and the key learnings I experienced as my team and I researched and designed the mobile app prototype for Potlucky. Creating a potluck event planning app was the brainchild of our client, changemaker, and potluck enthusiast Mohamed Hady. This project was completed in only 3 weeks as part of the UX Design Professional Program at RED Academy.

We met our client for the first time on Monday morning and spent the next weeks researching, designing, testing, and iterating to prepare a complete clickable prototype to present to our Client on Friday afternoon.

The Team.

The Potlucky team was made up of three UX designers: myself, Carolos Comparan, and Gwen Gong and one UI designer Rachel Heo!

About The Project

Our Client

Avid potlucker
Monthly potluck meetup for business leaders
Really meaningful and valuable

Why this work matters.

potlucks have an amazing ability to bring people together
agent tradition of sharing food, and facilitating new connections, friendships
Big part of North American culture from church meetups to soccer fundraisers to university student association socials

The Challenge

How we can help.

Our client came to us with the opportunity to design the ultimate mobile potluck planning app. There are numerous event applications on the market but until now there is no dedicated app that aids the process of organizing a potluck. Our client also wanted users to be able to use Potlucky to raise money for local charities.

Who we are designing for.

  • Anyone who organizes potlucks with friends, family, and their community organizations
  • All gender identities, 9 to 99
  • However, for the purposes of developing the prototype and at the client's request, we focused our research on the initial demographic of the Vancouver Changemaker community, Age 28–40
  • Engaged, Social community-driven individuals and their social circles

Client Goals.

  • A mobile App to make organizing potlucks easier and more fun
  • The ability to create traditional bring-your-own-food potlucks as well as the ability to create order-in potlucks where guests can choose to order food from local restaurants to share.
  • The ability to create fundraising potlucks with a paid ticket/donation that would turn Potlucky into an easy fundraising tool for charities and community projects.
  • Guest can rsvp to an event, see who is bringing what, and input their food contribution
  • Signup with email, Facebook, Google
  • Make it easier and more fun to plan and attend a potluck

Understanding What Is Already Out There

Initial Thoughts.

We wanted to support the client to build a fun potluck event planning app. We also wanted to be realistic, and make sure we were building something worthwhile for users. Something that would add more value than the current alternatives rather than build something for the sake of building it.

Domain Research.

We started by getting familiar with the most common event planning applications. We took a close look at Facebook & Eventbrite which we assumed, and then confirmed through research, were the most commonly used event apps for our demographic.

Google Sheet — We considered the appealing simplicity of creating a Google Spreadsheet signup sheet link paired with a Facebook Event or group chat. Google Spreadsheets though rather boring are a very easy way to organize and list out who is bringing what. Considering this we added a new team design goal to the list:

Let’s design something that is better, both easier and more fun, than the alternative: Google Sheet + Facebook Event

Doodle — We also kept coming back to Doodle, the meeting scheduling tool. We loved doodle because it is so effortless and to create a new meeting, and is actually kinda fun to use. And even though doodle could also easily be replaced by a google sheet link with exact same functionality people love it and it's hugely successful.

Competitive Comparative Analysis.

After spending some time understanding what is already out there we created a comparative analysis chart to communicate, visualize, and quickly compare the current offerings on the market and how we could make our client's product idea, Potlukcy stand out.

When comparing the competitor's features, Doodle continued to stand out for us. After the host makes the event page, they invite attendees to fill out when they are available. The tool adds real value to organizers by solving a simple problem, and the same model could also solve a problem for potlucks.

Doodle solves: ‘who is available when— so — when should the meeting be’
Potlucky solves: ‘who is bringing what — so — what should I bring

“Doodle for potlucks”

One of the features we loved is that it doesn’t force all users to download the app or make an account. In addition to inviting attendees via email, the host can simply paste the link to invitees via the app or by simply pasting the invite link in an email or Facebook thread. However, people who use doodle a lot, and in our case potluck enthusiasts can download the app and enjoy the complete, tailored, and fun in-app experience.

Understanding Our Users

Contextual Inquiry.

Our client is an avid potlucker. Although we have all gone to our fair share of potlucks our client invited us to one of the monthly potlucks he hosts for the group of business leaders in the city. We used the opportunity to conduct a contextual inquiry and observe how users interact in the natural potluck environment. We were also able to stage a few impromptu interviews to ask guests questions and learn more about their potluck experience.

User Interviews.

Next, we reached out to potential Potlucky users from the client’s community who host monthly potluck meetups. We also interviewed current and past avid potluckers from our personal networks who attend 5+ potlucks a year. We completed 16 interviews total. We started by asking users to tell us about a typical potluck experience for them to understand the process for organizers, guests. We learned about people with different levels of potlucking and cooking experience and how their experiences differed. We dug deeper and asked users about feelings they might typically experience at each part of the process. We also wanted to learn about the motivations and barriers to participating in a friend’s potluck.

Affinity Diagram.

Affinity describes a similarity of characteristics suggesting a relationship. In user experience design an affinity diagram is a clustering exercise that is great for grouping and synthesizing a large amount of qualitative data gathered from research and interviews.

We started by captured the insights we learned from the contextual inquiry and interviews onto sticky notes, using a marker to capture one key idea or insight per sticky. With all the notes on a blank whiteboard wall, we began in silence, to sort and group data points that had an affinity towards each other. Over the next 15–20 minutes clustered themes began to emerge on the wall. In the next phase, we discussed, labeled, regrouped, and rearranged themes and their relationship to each other. Here is a look at what the affinity diagram looked liked after completing the exercise.

User Personas.

After completing the interviews and affinity diagram exercise we created two user personas based on the information we gathered. Personas are a tool that helps UX designers empathize with their users. They help ask the question ‘How would this actor behave in this situation?’ We created the following two personas to help us make design decisions for Potlucky. The three personas below represent a synthesized understanding of the users we interviewed.

What We Learned

There were a ton of human emotions tied to each aspect of the potluck process for hosts and guests. After completing the affinity diagram we learned a number of things that would guide our design decisions including key motivators, pain points, and barriers for potluck hosts and guests.

Potluck-Guest Pain Points.

Matching & Meeting Expectations

  • Food Norms & Effort Expectations of the group — Many guests described the stress associated with not being familiar with the food norms of a social group as well as what was expected in terms of effort levels.

It is awkward if you show up with no-name frozen bagel-bites from No-Frills, when everyone else made free-range kale and squash artisan quiche with a home-made gluten-free pie crust?”

  • Energy & Prep Time — was a big factor for many people. Many said they would sometimes cancel last minute because they didn’t have enough time or energy to pick up the cook and pick up the ingredients for the complex item they had committed to bringing
  • Pre-Made Guit — Others told us about the guilt they felt when they bought a pre-made salad from Whole Foods and put it in their own dish or Tupperware to make it less obvious that they had bought it on the way instead of making it themselves.

Potluck-Host Pain Points.

Food Planning, Attendance,

  • Food Planning & Attendance — a key concern for hosts was worrying about people actually showing up, and making sure there was a reasonable mix and ratio of food. This was also coined as the “The Salad Problem” and “The Chip Problem” 😁

It really just doesnt work when people show up for a dinner and their are 6 salads and 6 bags of Doritos

  • Arrival Time & Eating Time— was another big headache for hosts. People don't typically arrive for a part at the official start time, which is no problem, but in the case of potlucks it can create a logistical problem if the intention of the host is for the entire party to eat together and share at the same time. Some experienced potluck hosts explained that they started listing both the arrival time (for socializing) and the official eating time in their event communication to great the collective eating experience they were hoping for. If there is not set eating time and arrival times are too staggered the people who show up early end up eating the same 4 dished they brought finishing them before the other guests arrive 30 mins later, new guests don't get to try the initial plates and the early guests are too full to try the dishes of the new arrivals.
  • People First, Food Second (usually)— Aside from potlucks where the focus is on the food itself rather than social experience hosts unaimously wished people who ran out of time or didn't have the energy to cook bought something simple on the way than not come at all
  • Contributing Mondy Instead — Many hosts explained that since they are already making a dish, and enjoy doing it it's easy for them to double the portions partner with a other guests who contribute money to the host to cover the cost.

User Motivation.

Sharing Time Together

  • Overall, while a few people were concerned about the person who only ever brought chips to the potluck, almost everyone we interviewed offered that for them the most important part of a potluck experience is visiting and sharing each others company over food. Potlucks are a tool to bring people together and share each other’s company. Except for a few types of potlucks, it was more important that people showed up empty-handed than didn’t show up at all.

Building The Best Minimum Viable Product

Real talk & Building Something Worthwhile.

We started by whiteboarding and discussing key ideas and solutions that might solve our users' needs and also enhance the overall experience of planning a potluck with fun and delight. A glaring real talk moment we identified right off the bat was making sure our potluck app was in some way or another a ‘better’ overall experience than planning a potluck on a spreadsheet or group chat and note. We agreed that in order to choose to download Potlucky over using a spreadsheet or other simple tool meant it needed to be either easier or significantly more fun, and ideally both.

Scope.

As the ideas began to flow we quickly identified the potential creeping scope of this project. There were a lot of really good ideas and the fact that the four of us really believed in this app kept us motivated to achieve them all. Time however we realized, would not be as flexible as we were.

  • Basic Potluck
    There was the core potluck app MVP which would allow users to set up a potluck, plan out the number guests, plan out the ideal quantity of each type of dish, invite guests, allow guests to confirm their attendance and signup for a dish. This we felt would definitely be accomplishable.
  • Fundraising Potlucks & Public Order In Potlucks
    Then however we remembered that the ability to create fundraising potlucks, where hosts can use the app to raise money was a core client goal on the brief. This feature would massively increase the scope of the project as we would need to account for restaurants, restaurant food options, prices, guest payment, and guest donations options. We would also need to spend time exploring the experience of paying for a potluck and also contributing food which we flagged immediately as feeling like paying twice. This challenge would take time, a few good ideas, and some testing.
  • Dietary Restrictions
    As we began to imagine out how dietary restrictions could be implemented and accounted for. We identified it would definitely be possible but quickly realized it would significantly increase the complexity of the application.In the interest of time we decided to first prioritize completing an app that would support the basic potluck user task, then if there was enough time we would tackle fundraising and order in potlucks. We made the decision to remove dietary restrictions from the scope for the initial MVP we were developing.

Featuring Prioritization.

We used a feature prioritization chart to scope down the project and discuss which features would make it on to the MVP. We separated the regular Must Have, Nice to Have, Not Have chat into two sections. One for standard event features we would likely need to use, a second for features that were specific to planning potlucks.

In the interest of wanting to just contribute something new and unique to the world (not just another generic event app) we prioritized all significant Potluck planning features in the MVP.

Designing How Potlucky Works

When you design an entire system or process like an app all at once the site map and hierarchy of screens or process steps might be more obvious when looking at the entire system as a designer or developer. But, the result for the individual users is usually longer, less obvious, and requires steps that feel unnecessary. However, when you begin from the perspective of the individual user, starting by first outlining the flow of steps necessary for each of them to achieve their task, and second by figuring out how these flows can fit together to make up a complete system — the result is a significantly simpler and easier way for users to complete their task. This difference is the essence of User Experience design.

So after understanding our client's vision, understanding our users’ needs and frustrations, and ideating on what solutions and features might help them, it was is time to start designing a solution for them.

Starting with High-Level User Flows.

To get started we mapped out a high-level process flow for each core user task. This first step gave us a starting place and birds eye map of the processes we needed to design for our users.

Using the Design Studio Method.

Next, we used pen and paper as a team, and use a design method called design studio to rapidly prototype how our user might move through the Potlucky app to complete their core task flows clearly defined above.

In the first divergent phase, we worked independently and silently to map out the steps users would need to walk through. After 10 minutes of dumping ideas, flows, and potential solutions on to our own paper we presented our ideas to each other and gave each other feedback.

In the next iterative phase we worked independently to iterate and improve upon our initial ideas including pulling or combing other ideas we just heard and present the new iterations to the group.

In the last convergent phase, we discuss, improve, and combine ideas together working together towards a single flow for each core task.

Initial User Flow Iteration.

Above is a look at some of our initial flow iterations on the left, and the final result of the design studio process on the right. With our first complete mid-level user flows outlined for the entire app, it was time to begin designing screens! Get your pencils and pens ready ladies and gentlemen its drawing time!

Paper Prototyping

The first goal of paper prototyping is to allow us to test the user flow on real people. Does this proposed app flow actually work and allow users to complete the tasks? Is it too confusing? Is there a better, simpler way we could do it?

The second goal of paper prototyping is to start to develop and actualize what the screens might look like and how the user interfaces might work. How will users interact with each screen to complete each step, how they move between steps, and how they understand and navigate where they are and where they are going within the entire app flow.

What We Learned.

Here are some of the problem areas and improvements we uncovered through paper prototyping.

Potluck Info Screen—The screen where hosts input general event info about potluck was the initial step of the potluck creation flow. 😕 However, Users felt a little bit of dread and overwhelm from the input fields. And we noticed more delight and interest when they finally reached the potluck specific planning feature. ✓ As a result, we changed the flow order to start with the easier and more fun potluck steps. This communicates the value of potlucky and how it stands out sooner, and hooks users by creating buy-in after first adding the easy information, front-loading the most fun, and interesting screens.

How Many People Are Coming?— 😕 The host needs to think about and approximate how many guests will attend before they can plan out the potluck dish signup section, and the quantity of each dish category. ✓ We broke up this step by first added a fun way for guests to first approximate how many guests they wanted to attend and next how they wanted to distribute food contributions signup spots.

New Potluck Confirmation Screen — The confirmation screen (to confirm the creation of a new potluck) originally appeared as the last step after finalizing an invite list. 😕 However, testers were initially confused about what they were confirming and felt like they were going backward. ✓ Instead, we moved the confirmation screen to right after hosts input general event info which felt more natural for testers.

No Mental Model, What is a charity potluck? — When hosts create a new potluck they were originally given two types to choose from. 😕 However, testers didn’t understand what a charity potluck was and how it differed from a regular potluck. And how would they, we only just invented it, and because nothing quite like this exists users don’t have a reference or mental model to understand it. Even when explained verbally it took a second to walk through.

We solved this by helping users develop a mental model for how the app works in two ways. ✓ We added an onboarding sequence that would progressively introduce each type of potluck. ✓ And we added a new type of potluck that would add functionality for users, and also act a building block to help users understand how a charity potluck works. Here is how it works.

Introducing Three Kinds of Potlucks.

  • Regular Potlucks —Guests bring food to the potluck
  • Order-In Potlucks —Guests select and order a dish from predetermined takeaway restaurants, on the app instead of bringing food.
  • Fundraising Potlucks — Guests pay a minimum ticket price, that covers both the cost of any restaurant dish they select to contribute and a built-in donation towards the fundraising effort.

The host sets the minimum donation amount which is combined with a standardized dish fee which sums to a single total ticket price for guests.

In order to make the prototype viable immediately, the host selects a restaurant or restaurants that guests can order from, and the app collects the money and prepares an order list. Then on the day of the potluck, the host calls the local restaurant(s) or uses their favourite food delivery app to place and pay for the whole order at once.

Final User Flows

Taking everything we learned from Paper Prototyping into account we revised the hand-drawn user flows and developed an updated set of diagrams to outline the entire functionality of the Potlucky App. Here is a more granular look at the finalized host and guest flow.

Host Flow.

After login/signup all users open on the my-potlucks-tab. If they are not yet invited to or hosting a potluck, the empty state triggers a prompt to invite them to create a new potluck via the centrally located “new-potluck-tab”. Users are presented with the option to create one of three types of potlucks.

Hosts creating Regular Potlucks will input the number of guests likely to attend, followed by allotting the type and quantity of food contributions, followed by inputting potluck event info.

  • Hosts creating Order in Potlucks — will also select the restaurants they want to allow guests to select dishes from, and will be asked to enter their banking information in order to receive the money to order the food.
  • Hosts creating Fundraising potlucks — will also be asked to set the minimum donation amount, confirming the total ticket price for guests

After confirming the event, hosts will invite their guests and enter the potluck-host-dashboard where they can review and edit: potluck info, dish options, invites, and donations.

Guest Flow.

If a guest has been invited to a potluck it will appear in their my-potlucks-tab. Guests can click the invitation and choose to Join the Potluck. After a quick prompt, guests select and input the dish they plan to bring.

  • If they are invited to an Order-in Potluck they will select the dish they wish to order, and be directed to order confirmation and payment process.
  • If they are invited to a Fundraising Potluck they will also be given an option to increase their donation amount.

Mid-Fidelity Wireframes

Moving to Digital.

With the tested and revised app functionality mapped out into a set of detailed flow diagrams, we could now use this a blueprint to map and build-out the complete set of digital wireframes for the Potlucky App. Here is a look at a few examples of how we turned steps outlined in the user flow diagrams into a set of mobile screen mockups.

High-Fidelity Screens

Lastly, we teamed up with the UI team to style the screens with the visual brand they created.

Delighters & Interaction Design Highlights.

In addition to creating an effortless potluck planning experience, we wanted Potlucky to improve the overall potluck experience by removing major pain points and barriers. And additionally, we wanted to create an experience that was a blast to use, outshining the current alternative of using a Facebook event and Google sheet because it was simply fun and delightful to use.

Here is a walk through the thinking behind our favorite design solutions and some of the ways we sprinkled in delight throughout the user's process.

1. Types of Potlucks

As explained earlier Fundraising Potlucks allows hosts to charge a ticket price, in order to raise money for a community initiative. This was a key client goal for the project. However during testing and interviewing we confirmed a major assumption, that people didn’t love the idea of paying for a ticket and also contributing food. They said ‘it felt weird’ and ‘felt like they were paying twice’. Now instead of contributing food and money, guests contribute only money once. Guests pay a single ticket price but still maintain the crucial potluck experience, feeling ownership over what they chose and got to contribute to the group to try and enjoy.

2. Adding Potluckers

To make the experience unique and fun, we introduced branded language, as well as cute illustrated figures that appear, accompanied by a popping sound as hosts tap to estimate the number of potential guests.

3. Scaling Input

Users hosting larger events didn't want to tap up to 45 times so we added the ability for users to also tap into the sunken form to input total manually.

4. Potluck Planning

The host can tap, flick, or drag contributions icons to distribute the ideal quantity of each type of contribution. A major pain point we identified in research was that potlucks often ended up with all salads, or all deserts or too many of the same dish. An open slot, first come-first served signup model solves this challenge. The host outlines how many appetizers and salad slots are available. Guests sign up to fill each slot, writing in the name of the dish they plan to bring, so others can see that someone is already bringing potato salad, but nobody has signed up for dessert yet.

5a. Alternative Contributions

The most common barrier to attending, that we identified in research was guests who felt they didn’t have the time or know-how to contribute something meaningful and would instead not attend at all.

The Chip In Contribution feature denoted by the green money icon allows the host to afford guests the option of contributing cash to the host instead of a meal. Adding it to the signup options makes it socially acceptable to choose this option without feeling uncomfortable. In our research, our avid potlucker hosts explained that getting together is primary and the food is secondary. They would way rather have their friends attend and contribute money so the host or another avid baker can whip up an extra meal or dessert than not have their friend attend at all.

5a. Share More Than Food

This is one of my favorite features because it gets at the essence of what Potlucks are all about, people finding a reason to come together to share and connect. But this feature significantly deepens the potluck allowing guests to contribute something other than, or in addition to food.

The Talent Contribution feature was also added as a result of the research we did. Guests can choose to offer to take photos of the party or performing music for the guests instead of food, or it can also be used as the primary signup option to organize a talent-based sharing event.

We also added The Other Contribution feature. In addition to talents, we imagined that guests could make other meaningful non-food contributions to the party such as offering to bring wood and organize a campfire or offering to decorate the venue and table settings.

6. Selecting Order-In Dishes

As part of Order-In and Fundraising Potlucks, here is a look at how guests select from pre-approved restaurants and dishes to contribute to the potluck.

7. New Potluck Info — Potluck Theme

One of the single biggest pain points and barriers to attending a potluck was about wondering about and matching the social expectations for what to bring. As a means to address this directly, we added the potluck theme field where hosts are prompted with examples to choose a theme and give guests a better idea of what to expect. The difference between “lazy night in” vs “dinner party” gives guests way more information about what kinds of things they should bring and even what to wear.

8. Host Dashboard

Lastly, the host dashboard shows our potluck organizer everything they need to know. From confirmed guests to the distribution of dishes guests are bringing hosts can make any last-minute adjustments they need to ensure an amazing event.

Mission Accomplished!

In just under three weeks we were able to deliver a complete clickable prototype for our client. Through client, competitor, and user discovery we were able to define exactly what we needed to solve and design. And through iterations of paper and digital prototyping and testing, we were able to develop a comprehensive, unique, helpful, and delightful experience for our client’s users.

Goals Achieved.

✓ Develop a clickable Mobile App prototype for Potlucky that makes it easier and more fun to organize and attend a potluck and allows hosts to fundraise for local initiatives.

✓ Allow users to plan, invite, rsvp, and monitor their hosted potluck event
✓ Allow hosts to allot contributions types and quantities
✓ Allow guests to confirm what dish or alterative they will be contributing
✓ Allow hosts to share dishes prepared by local restaurants

Prepare the following deliverables: User Personas and outline of User Pain Points and Motivations based on Contextual Inquiry and User Interviews, Competitive Feature Comparison, Core User Flow Diagrams, Complete set of High-Fidelity Wireframes, and Clickable Invision Prototype

Client Testimonial

I was really impressed with the work this team did. I came in with a name and a rough, big idea of what I imagined Potlucky could be. One of the things that was the most notable for me, was how the drive they had to create something that people would really use. I didn’t initially think about how big a barrier it is for people to download, signup, and use a new app. The work they did in terms of thinking about how to make potlucky standout was really interesting.

I don’t know a ton about App design but the way they walked me through their process was really interesting and helpful. I didn’t really know what to expect coming into this partnership but I was blown away by the final product they were able to present to me in only three weeks.

— Mohamed Ehab, Founder - Reel Causes

Project Acclamations

🏆 Potlucky App was awarded as the best app from the cohort by the panel of instructors to move on to app development with the developer team

🏆 Potlucky App was chosen to be one of three student projects showcased at the institution’s annual industy promotional event.

Thank You.

Thank you so much for reading, clicking skimming and scrolling through this project. ❤️ We had an awesome time diving into the world of Potlucks and dreaming up this prototype App for Mohamed.

Check out my portfolio for more projects, questions and contact info
www.robmorton.ca

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store