Clove App Project by Anthony Palileo

7044e5fb2fe62bbce0b6ba3a8bbb0870_edited.

A 14 week project for Visual Interaction Design 3 at ArtCenter College of Design. Summer 2020

The Challenge:

What if a recipe app could be more social?

The Process:

Assessing user goals through interviews and surveys to inform the design of the user flows and interactions.

The Goal:

Design a responsive app prototype that provides users with a familiar social media experience for browsing and sharing recipes as well as a comprehensive guide to cooking them.

Designed in Adobe Xd

Mockup of the welcome screen of the Clove app in an iPhone

The Final Design

A digital mockup of the discovery interface showing a full screen image of a tray of chicken parmesan and icon of the user who uploaded it

Digital animation of the start of the cooking process, including ingredients checklist, and initial steps with demo images

Discover

Users can explore all of the wonderful user generated content much like they would on a traditional social media platform, but may dive further in with the ability to see the recipe and cook it for themselves.

Plan

An awesome insight from user interviews was "meals usually consist of more than one recipe." In response to this sentiment, the app includes a meal planning feature that lets users combine recipes for cooking and will calculate the time and ingredients according to any overlaps and time availability.

Cook

At the core of the experience is the step-by-step guide which includes hands-free voice operation so users don't have to interact with the device while prepping ingredients. The recipes will be scalable for larger or smaller servings, and each of the steps will have a visual demonstration that corresponds with each step.

Digital animation of the screens for planning a meal, from selecting, to combining recipe items, to setting a cook time

Connect

Initially, the function of connecting with other users was limited to following content creators that the user liked, but testing revealed that users would be interested in being able to send messages, to send compliments or recommendations to others.

Digital mockup of the messaging interface with chat bubbles between users

Promotional Clip

In the final two weeks, I began learning After Effects and created this promotional short to tie in with the project.

Short promo clip for Clove App project

The Design Process

The Problem Statement

"Young professionals and college students are using apps and websites to guide them in the kitchen, but they are limited when browsing and sharing their creations in a social setting.'

The Proposed Solution

"A unique spin on cookbooks and recipes that connects users and a social media environment. This is the essence of the Clove experience.'

Initial Research

I began with secondary fact finding to see if an app was a viable approach and then conducted a survey to gauge user interest as well as gather self evaluations and habits.

59%

of 25 to 34-year-olds head

to the kitchen with their

tablet or smartphone.

Google Consumer Survey, Jan 2015, n=550

234.5M

#foodporn posts

Instagram, July 2020

76%

of survey participants rate

their own cooking ability

to be at or below average.

Independent Survey, June 2020, n=112

78%

of survey participants turn to websites to discover new recipes.

Independent Survey, June 2020, n=112

Comparative Analysis

Looking at the current apps available centered around recipes and cooking provided a great opportunity to showcase a set of features that could potentially make for a unique user experience.

Pages from Anthony Palileo_Vis IxD 3_Mid

User Interviews

I set up interviews with a handful of the participants to get deeper insight on their cooking processes and experiences using their mobile devices in the kitchen. Additionally, I interviewed two professional chefs to get their take on the cooking process, as well as how it differed in the professional and personal settings.

Mapping the Responses

Taking responses from the surveys and interviews, I sorted them in an affinity map as well as an empathy map to get a clearer understanding of who my user is.

Image of post-it notes grouped around an image of the user persona, categorized by Says, Does, Thinks, and Feels

The User Persona

This is the user for whom the design decisions will be based.

MuSCoW Chart

Focusing on the user needs and goals, I sorted out all of the potential app features into "haves". This helped set the groundwork for early interface ideation.

Post-it notes sorted in columns labeled Must, Should, Could, and Won't

Initial Sketches

Looking at familiar recipe and social media apps provided queues to some preliminary concepts of what the interface should look like.

Hand sketches of app interface ideations

Additional hand drawn sketches of interface ideations for the app

Prototyping - Low to High

After some simple paper prototyping with the sketches, I began increasing the fidelity through an iterative process, incrementally testing UI and flow.

Low fidelity digital mockups of the app interface, with gray boxes representing images

Mid fidelity digital mockups of the app interface in grayscale

First round of high fidelity digital mockups in full color

The Latest Iteration

By the 12th week, I was near the final configuration and was making very slight revisions for easier navigation and clearer UI, these are some of the final screens:

Final digital mockups of the Clove app interface, showing four various parts of the interface interactions

Final Thoughts

I thoroughly enjoyed the process of designing this app. I found it much easier to design based on the user persona and the feedback from user testing than it would have been to design based on what I felt would make a "good" app. Despite it being a solo project, the insights and inquiries of my peers helped me to step back and really look at the design decisions in a more effective way.

To view the complete final presentation slide deck, please click here: Clove Final Presentation