Potluck
Communal Meal
Application

CONCEPT · UI/UX DESIGN

iPhone X with Agenda app interactions

Intro

Duration

September—December 2017

Skills

Research
User Testing
Prototyping

Tools

Sketch app logo Origami Studio logo

Team

Akhila Bhamidipati (Research, Ideation, User Testing)
Ellie Quinlan (Research, Ideation, User Testing)
Aleksei Zhurankou (Research, Ideation, Prototyping, User Testing)

Goal

Create a solution which helps students and other demographic groups to improve their nutrition habits by providing healthy alternatives, saving grocery money and reducing food waste.

Approach

  1. Defining user categories and analyzing their nutrition habits.
  2. Creating user personas, identifying their consumer behavior, and brainstorming solutions.
  3. Prototyping our solution with wireframes, testing, iterating and creating high fidelity prototypes.
Screenshots of google form questionary and google sheet with answers

Survey

We started our research by sending out Google Form questionary to friends, family members, and various UW Facebook groups (Google Sheet with results).

We discovered that most of the students eat out more than they cook at home and the older generation chooses to shop for groceries at healthier stores (Research Report).

Contribution—I was involved in the process of brainstorming survey questions and created the Google Form layout.

Personas

Based on those findings we were able to identify our target audience as students and parents and define companies and services with established market share they use the most.

We arranged them on a matrix to better understand our users' consumer behavior, find new opportunities, and create user personas.

Contribution—I personally developed the Laura Henson's persona.

Matrix map consumer behaviour
User personas, Nate Kim, student, Laura Henson, parent.

Personas

User flow diagram iterations

User Flow

When we had a clear picture of our users' needs and their behavior, we started to brainstorm ideas about the app's layout and its main features. We kept in mind our personas and based our ideas on the potential usage scenarios (Full Report).

While brainstorming a user flow, we were able to decrease the number of steps from seven to five by implementing more intuitive input techniques.

Contribution—I proposed to use the paper prototyping technique and facilitated the design session during which we created our initial layout.

Brainstorming user flow with paper prototypes

Brainstorming

User flow wireframes iterations

Wireframes

To test our design we created interactive low fidelity wireframes and conducted five speak-out-load sessions with potential users. During these sessions, we were able to identify a few drawbacks in the initial layout version.

After iterating on our design we conducted three more testing sessions with interactive wireframes. When we were completely satisfied with the current version, we applied high fidelity design treatment to the wireframes.

Contribution—I created low and high fidelity prototypes since I was the only designer on the team.

Results

iPhone X with Agenda app interactions

01

Ingredients

The interaction starts with adding Ingredients via scanning their barcodes or typing in the names.

iPhone X with Agenda app interactions

02

Recipes

The system searches through its database and finds recipes with added ingredients. It shows how long would it take to cook the meal and what ingredients are still needed.

iPhone X with Agenda app interactions

03

Meals

The chosen recipe can be planned as a Meal. The user sets Time | Location and adds Invitees to it.

Details

App's color theme

Colors

I chose to use a combination of slightly greyed Black (#333333) and White (#F8F8F8) with two variations of grey colors, as Dark Grey (#8E8E93) and Grey (#CCCCCC) for lighter and darker backgrounds accordingly. A combination of any of these colors complies with WCAG 2.1 accessibility standards. Primary Green (#66CC00) and Orange (#FF9933) colors associate with energy, freshness, and health to support our brand values.

App's color theme

Icons

I designed a set of functional icons for the navigation bar and the toolbar. I also created a set of illustrated icons to represent food ingredients, using similar to the Green and Orange primary hue colors.

Takeaways

While working on this project I had great experience to practice my teamwork, collaboration, and accountability skills. I learned that dividing the workload and owning a part of the project is a key to productivity. Also, I was once again reassured that user testing and iteration will always deliver positive results.

Thank you for reading!