How to design a grocery app in 7 simple steps
Avoid cart abandonment and boost the grocery app experience with this simple 7-step walkthrough
A lot of our users create ecommerce apps in Justinmind. It’s no surprise. Getting them right can be difficult but they’re really useful practice for designers. Ecommerce is an interesting area in UX design. There is complex user flows to explore, different patterns to implement and tricky problems to solve. Like the cart abandonment pandemic.
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?
Step one: Download Justinmind
Before you design and build your app, download Justinmind.
Once downloaded, open Justinmind and create a new mobile prototype. This is walkthrough is operating system agnostic, so you can choose Android or iOS.
Step two: Create your screens
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.
Step three: Use a Master to create pinned elements for every screen
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.
In the Master’s palette, create a new Master. Add the recurring UI elements in a dyanmic panel placed within the Master. In the Properties tab, go to the Position field and choose “Pin to bottom”.
Tip: We used the Font Awesome icon kit for better design consistency. Download the Font Awesome UI kit so you can create your own consistent designs.
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.
Step four: Create interactive content using a slideshow
In our home screen and our recipes screen, you’ll see slideshows. Users can swipe through the categories and recipes.
To create a slideshow, drag a dynamic panel onto the canvas. Add all the panels you want for each recipe. Here you’ll add each card into its own panel. Each panel must also include a hotspot to link to the screen you want.
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.
Step five: Use real data with a Data Grid and Data Masters
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.
You can achieve this effect using a Data Master and a Data Grid.
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.
Step six: Create a counter to add multiple ingredients
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.
Step seven: Experiment with UI styles
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.
How to design and build a grocery shopping app — the takeaway
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.
