How to design a grocery app in 7 simple steps

Justinmind
Sep 4, 2018 · 2 min read

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?

overview-of-grocery-app-design-ui
overview-of-grocery-app-design-ui

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

Justinmind

Written by

The best platform to define web and mobile apps with rich interactive wireframes www.justinmind.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade