Up-Kick

Introduction

With the massive rise in food delivery and meal kit options, people are becoming more distant from what they eat. The rising costs of restaurants and delivery services are unsustainable for regular consumption, and the lack of awareness of ingredients used raises health concerns.

Up-Kick offers recipe-building for spices and sauces to be used as an addition to enhance any homemade meal. Recommendations are offered based on the users' custom-set flavor profiles, food allergies, and aversions. Your recipes can be shared with friends, and you are able to view their custom blends as well.

‍

Market Research

• Restaurants and meal kits offer the same ingredients at massively increased costs.
• The COVID-19 pandemic created a dramatic shift in food orders, with delivery apps seeing a massive increase in usage.
• Assumptions were made that ordering out would return to the mean after the pandemic - however, they did not.

‍

Competitive Analysis

I looked at 3 different companies and followed up with a comparison using Nielsen's heuristics:

• E-Commerce was widely offered
• Recipe and video links on some sites redirected to third parties
• There was an awareness of health, but the budget was not taken into consideration.
• Though generally well-defined, a lot of organizational aspects were repetitive.
• Nobody else offered a custom spice blend or sauce maker on their app or website

‍

Screener Survey

My screener survey had 23 responders across various demographics - these were the largest takeaways from the data that was collected:

• Websites were the most popular way to find recipes.
• Budget played an important factor.
• Balancing flavor and health is highly desired.

‍

Interviews

Of the 23 responses to the screener survey, I selected 5 participants to interview for information. Though many had common grounds, the most significant standouts cooked at home due to dietary constraints, or to provide healthy options to their children.

• Cooking for one's own dietary choices, or offering healthy solutions when cooking for others, allowed me to narrow my scope in regard to desired features.
• Cooking frequency is the most divisive factor.
• Many sites and cookbooks offered recipes but didn't have alternatives or solutions for ingredients, whether they are common allergies, or difficult to find.

These responses had a great impact on how I would approach personas, user stories, and empathy maps - all of which presented a clear pathway to honing in on MVPs.

‍

Personas

Based on my continued synthesis from the screener and interviews, I found that diet and family were the biggest individualistic contributors. This led to the creation of 2 personas: Vegetarian and Parent.

• Users are aware of their food sources
• Health is a big factor
• Desires a work/life balance
• Cooks for necessity AND enjoyment

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

User Flows

I wanted to better understand how each component would communicate with the others. Laying everything out clarified how to accomplish the primary tasks: make a new recipe, add ingredients, save to a category, and view it at any time.

‍

‍

Sketches

Creating an early iteration was an invaluable resource because I was able to see layouts compared to other apps, and pay attention to the UI standards when visualizing redesigns.

• The sketches started as a brainstorming activity but evolved into wireframes.
• The bottom navigation bar, list format for recipes, and images for categories allowed for user-friendly navigation and readability.
• Though many changes were needed in the next iteration, the key features from sketches were integrated and expanded on in the wireframes

‍

‍

Wireframes

I rebuilt my sketches into low-fidelity wireframes using Figma. With the sketches being a solid baseline, I wanted to make changes to the initial screens with ones that adhere more closely to UI standards. The features that remained from initial sketches became more refined.

‍

‍

‍

‍

‍

Style Guide

Taking wireframes through the next phase required preparation; I needed consistent colors, icons and fonts throughout each screen.

• Contrasting colors established a visual hierarchy and highlighted vibrant colors.
• Icons from the same family were used to make each page cohesive.
• The font needed to be refined and legible.

‍

‍

‍

‍

‍

‍

‍

High Fidelity Screens

Now that I had my red routes solidified, it was time to begin designing the high-fidelity screens. I wanted a dark theme with a strong contrast for the primary and secondary colors.

• I chose a dark blue to allow the vibrant colorful spices to stand out against it. The orange/yellow gradient is intended to be reminiscent of fire on a stove or in a grill.
• I wanted to be consistent with UI standards, but I was eager to branch out and offer a unique style.
• The design was intended for use on Android phones, but I wanted to make it easily adaptable to iOS.

Usability Testing

Using Figma, I built a high-fidelity prototype with my first screen iterations. I recruited and interviewed 5 participants for round 1, then 5 new participants for round 2 after correcting the initial issues. These were the top 3 problems that the tests highlighted:

Issue 1: The formatting for the Categories and Recipes pages caused confusion.

Solution: Reformat these screens with visual components and clear buttons.

Issue 2: Discover page confused users and didn't add anything worthy of having its own page.

Solution: Eliminate this page and add a search feature in the top navigation bar.

Issue 3: No way to connect and view other users and their recipes.

Solution: Create a community page.

‍

‍

Iterating on the Final Product

After addressing the necessary changes I learned from user testing, I created my final design using Figma.

• I drew inspiration from material designs, though I built my own original screens and components.
• The design was created for Android users, but I kept it open-ended enough that a few minor changes would make it usable for iOS and desktop as well.
• Visual appeal and straightforward functionality were high on the list of desires from users, so this played a strong role in redesigning pages and creating new ones.

The above images are the final screens for the project within the timeline of the academic project; however, after gaining more experience as a designer, I came back and rebuilt some of those screens to have a more refined look and feel - these images are posted below:

‍

‍

What's Next?

1. Integrate the app with social media by allowing sharing on Facebook, Instagram, etc. Draw in new users by having existing users spread the word.
2. Focus less on buttons and consider how users would respond on other mobile apps. Apply those principles to make app usage feel seamless.
3. Create a step-by-step tutorial upon first usage. Speech bubbles on screen with descriptions of actions as users navigate and learn the app.