- yummy
recipes

B
u
i
l
d
i
n
g

a

T
a
i
l
o
r
e
d

R
e
c
i
p
e

M
a
n
a
g
e
r

A
p
p

- 01/03
OVERVIEW

Challenge

What happens when existing recipe managers available on the market don't fit your needs? Each of them have their own perks, but none of them offers a functionality that is crucial for you. This is a problem Andrijana, our co-founder faced. Working as a team, we decided to build an app to suit her needs.

As an amateur chef, Andrijana wanted an application that works perfectly on desktop, to make editing and writing recipes easy, but also works as a native app on a tablet she uses in the kitchen.

A noted struggle she experienced was the lack of ability to efficiently switch between recipes when cooking more than one meal at a time. She was also frustrated at having to write down all of the ingredients on paper or in another app to go grocery shopping. This frustration was most apparent when she decided, while at the store, to cook something different than she initially planned.

Our solution? We made a tailored recipe manager web application, powered with PWA to ensure it works as a native on tablets while providing a seamless experience on the desktop.

SERVICES PROVIDED:

Strategy
Design & UX
Implementation

platform

Web application with PWA

year

2018

- 02/03
OUR APPROACH:
STRATEGY

Building Application Blueprint

When building a house, you first need a blueprint.. The same goes for any digital product. For our team, the first logical step was to create a blueprint that included specifications to define all functionalities of the app and the architecture to hold it.

We t used pen and paper, and our billboard in the office, and started noting down all the general and specific functionalities the app should have.

As with any brainstorming, you get a lot of ideas. We then narrowed it down to core functionalities the app should have - the reason we are building it, and the nice-haves - additional functionalities that would elevate the experience when using it.

To ensure the experience is seamless, we defined use flows for each functionality. We reviewed and tested the flows continuously until until we got it right.

As we wanted to make a realistic, native experience on tablets and optimize everything for mobile, we decided that the best way to do it is to use the PWA approach that would enable us to completely tailor the app for usage on tablets.

- 02/03
OUR APPROACH:
DESIGN & UX

"Tablet-first" Design Approach

The main usage of the application is on a tablet in the kitchen, so naturally we started with a "tablet-first" design approach. All wireframes and final designs were tailored for tablets use and then optimized for desktop and mobile use.

- 01/05
home

What's for dinner?

To make the application even more enjoyable, we added a "Today on the Menu" section that pulls one recipe from four main categories and gives an instant idea for a full course meal.

- 02/05
categories

Perfect and easy organization

With the ability to add an unlimited number of categories, all recipes are organized and easy to find.

- 03/05
meal plans

Introducing Meal Plans

To make preparation of a few meals at the same time simple, we introduced meal plan functionality. Each meal plan can hold multiple recipes, making switching between recipes easy.

- 04/05
recipe

Perfect relationship between images and content

Everything from font family to icons and images was carefully chosen to provide excellent readability while making the images pop out.

- 05/05
shopping basket

Syncing Shopping Basket

To make cooking even more fun, we created a shopping basket where all ingredients added to the list are organized by recipes, and the list is synced with Evernote notes to make shopping easier.

- 03/03
OUR APPROACH:
IMPLEMENTATION

Leveraging the Power of Technology

The combination of Laravel on the back-end and React.js on front-end brought a delightfully and joyful experience when using the app.

Implementing the PWA (Progressive Web App) methodology, combined with a fully responsive design, we managed to create a native-like experience on tablets and mobile devices, while still keeping the full power of a desktop app when creating and managing recipes.

Using Evernote API, we managed to create a connection between the Yummy Recipes app and Evernote to make sharing a shopping basket possible with the desired note in Evernote.