Where were we?

Finally, I was able to create a material of my ever-evolving project.

Rather than focusing on the so-many states of a single screen, I have tried to make a start with the screens of the main features of my project. As a result, I came up with the sign-up, the main page where the visitor is distributed to the other screens, choose ingredients and recipe detail page.

To begin with, I have tried to come up with the sign-up screen where a user is required to write down his/her e-mail, a preferred username and password. He/she can also log-in with the already existing social media account. Now, this was one of the common parts of the app, along with the navigation and log-in screen. Let’s see what’s different.

Since I am fond of blending the image behind a text, I have chosen my main page to have the below look:

I wanted to include 4 different features in this navigational page. Firstly, I have added my main feature, which is “choosing ingredients” on the top of the sections. I have placed a wide transparent image on the background and placed a text which was supported by a transparent background color so that it is readable. I have tried to make the CTAs look as big as possible; to increase interaction.

The cuisines sections has the scroll feature, which the visitor can discover more content in the same height. And after that, the shopping list is placed on the bottom.

The main feature of my project, which was giving out the recipes according to the ingredients; is fairly simple. Since I have chosen 3 colors in my design, I wanted to bring out the 3rd color which was not used very much in other screen in this screen:

The user can just click on the right boxes to choose what ingredient she/he has, and the chosen items will be collected on the bottom box. There will also be a search option by text on the “What do you have?” section; which will make it easier for the user to find the ingredients. After checking the items, user is supposed to click on the “See what you can cook!” button, and number of options will be aligned on the next screen according to the chosen items.

Now that the items has been chosen, the user will be led to the recipe detail page, where all the ingredients and the recipe itself will be shown:

The masthead is again a text with a transparent background and the name of the recipe.

The ingredients are mapped as a single item, and this allows the user to click on the “plus” items on the right to ingredients, which will add them to the shop basket on the below. This will work more when the user reach to the recipe detail page other than the “choose ingredients” screen. When clicked, the plus sign will turn to bold font size.

If available, there will be a video of the recipe, and underneath it, a gallery option will be visible.

I have actually done these screens two weeks ago, but it took another week to perfect these screens by making the common elements components and presenting a couple of states in the screens, like carousel, scroll etc.

Will see you in the user testing…