How to design a grocery app in 7 simple steps

But this time we’re focusing on grocery app design. In this walkthrough, you’ll learn how to design and create your own grocery shopping app in 7 easy to follow steps. Let’s get into it, shall we?

Once downloaded, open Justinmind and create a new mobile prototype. This is walkthrough is operating system agnostic, so you can choose Android or iOS.

For our app, we designed four screens. Go ahead and add 3 screens in the Screens palette. Give them descriptive names so you don’t get confused.

You can use the widgets to build out the UI or browse our free UI kits.

Now click your home screen. You’ll see a blank canvas in front of you.

In our example above, we have recurring UI elements on all screens. At the bottom there is a navigation bar and at the top there’s the wifi, reception and battery icons.

Now click back to your home screen. Drag and drop the Master from the palette onto all of your screens. By doing this, you don’t have to re-create and place widgets individually.

In our home screen and our recipes screen, you’ll see slideshows. Users can swipe through the categories and recipes.

For the cards to move in the slideshow, add an On Swipe Left and Set Active Panel event to each individual panel.

In the Dialog, select the subsequent panel in the Outline palette. Ensure that you select Slide left from the Transition Effect options to replicate the movement of the swipe.

For the categories below, add one dynamic panel that is the width of the screen. Within this panel, create groups of content. Each group will need a hotspot above it to link to each category.

Select the dynamic panel. In the Properties palette, select Scroll auto for the Horizontal Overflow.

Take a look at screen one, you see vegetables as a category. Screen two shows you what happens when you click on that category. It shows you a list of vegetables.

Think of the Data Master as an Excel document, or spreadsheet, that contains the data you want to display. The Data Grid allows you to simulate a database of any kind. Powerful stuff.

To create a Data Master, go to the Masters palette, click the ‘+’ icon. In the Dialog, you can fill out the fields and give it a name.

You could add your own .csv file or populate the Master right in Justinmind.

Once you’ve populated your Data Masters, slide the Data Grid onto your canvas. You can choose the columns and cells. Customize the Data Grid’s design to your own liking in the Properties tab.

When you’re using a shopping app, you sometimes want more than one of the same item. As you can see in screen 2, 3 and 4 we’ve used a counter a number of times.

We can create this functionality in Justinmind using Events, variables and expressions.

Make sure you have a plus icon and a minus icon and a text widget in the middle with the number 0 in the value field. Click on your plus icon. Add an Event > Set Value. In the Dialog, click the input. Set the value to calculated. Add expression. Here you drag your input, the plus function and then write the number 1 in the last expression field. Click OK. If you simulate your prototype and click your plus icon, the number should now go up.

Do the same as above on the minus button except use the minus expression. After that’s done, add a condition. The condition is important because we don’t want to buy -2 bananas. Impossible.

The condition should be input > 0. This will stop the counter going below 0.

Finished your UI but want to see how it would look with a different color scheme? What about changing a font from a serif to a sans serif?

Now, don’t worry. If you want to do this, you don’t need to change every individual UI component. Oh, no. You’re in for a treat.

You can use Replace Styles to make big changes to your entire prototype. With Replace Styles, you can find all instances of a specific variable (i.e font color, font size, UI component color) and change it once, one-by-one or all in one go.

Look at that. We just shaved hours off your workflow.

Prototyping key functionality of your app is crucial to understanding its flow. Combine that with consistent iconography, real-life data simulation and useful tricks (oh hey Replace Styles!) and you’ve got yourself a powerful grocery shopping app that’s worthy of sharing.

Related posts:

In the previous post we talked about the Mission Statement, Company Values, Methodologies and processes for growing startups. Now we will look into the organization, the business problem it solves…