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.
Finish this tutorial and discover lots more of UX design content over on Justinmind’s blog
